fix: Improve media background image (#1635)

* fix: Improve media background image

* Simplify loading spinner.

This is slightly less fancy, but removes code. I'm guessing no-one will notice or care enough to raise it! (BMFW).

src/card-controller/card-element-manager.ts

@@ -63,7 +63,6 @@ export class CardElementManager {
     this._api.getMediaLoadedInfoManager().initialize();
     this._api.getMicrophoneManager().initialize();
     this._api.getKeyboardStateManager().initialize();
-    this._api.getStyleManager().initialize();
 
     // These initializers are called when the config is updated, but on initial
     // creation of the card hass is not yet available when the config is first

src/card-controller/style-manager.ts

@@ -1,6 +1,5 @@
 import { StyleInfo } from 'lit/directives/style-map';
 import { FrigateCardConfig } from '../config/types';
-import irisLogo from '../images/camera-iris.svg';
 import { aspectRatioToStyle, setOrRemoveAttribute } from '../utils/basic';
 import { View } from '../view/view';
 import { CardStyleAPI } from './types';
@@ -12,10 +11,6 @@ export class StyleManager {
     this._api = api;
   }
 
-  public initialize(): void {
-    this._setCommonStyleProperties();
-  }
-
   public setLightOrDarkMode = (): void => {
     const config = this._api.getConfigManager().getConfig();
     const isDarkMode =
@@ -138,11 +133,4 @@ export class StyleManager {
     }
     return aspectRatioToStyle({ defaultStatic: true });
   }
-
-  protected _setCommonStyleProperties(): void {
-    this._api
-      .getCardElementManager()
-      .getElement()
-      .style.setProperty('--frigate-card-media-background-image', `url("${irisLogo}")`);
-  }
 }

src/card-controller/types.ts

@@ -134,7 +134,6 @@ export interface CardElementAPI {
   getMediaLoadedInfoManager(): MediaLoadedInfoManager;
   getMediaPlayerManager(): MediaPlayerManager;
   getMicrophoneManager(): MicrophoneManager;
-  getStyleManager(): StyleManager;
   getQueryStringManager(): QueryStringManager;
 }
 

src/card.ts

@@ -339,9 +339,8 @@ class FrigateCard extends LitElement {
 
     const actions = this._controller.getActionsManager().getMergedActions();
     const cameraManager = this._controller.getCameraManager();
-    const renderLoadingSpinner =
-      this._config?.performance?.features.animated_progress_indicator !== false;
     const showLoadingSpinner =
+      this._config?.performance?.features.animated_progress_indicator !== false &&
       !this._controller.getInitializationManager().wasEverInitialized() &&
       !this._controller.getMessageManager().hasMessage();
 
@@ -372,10 +371,7 @@ class FrigateCard extends LitElement {
         }
         @frigate-card:focus=${() => this.focus()}
       >
-        ${renderLoadingSpinner
-          ? html`<frigate-card-loading .show=${showLoadingSpinner}>
-            </frigate-card-loading>`
-          : ''}
+        ${showLoadingSpinner ? html`<frigate-card-loading></frigate-card-loading>` : ''}
         ${this._renderMenuStatusContainer('top')}
         ${this._renderMenuStatusContainer('overlay')}
         <div ${ref(this._refMain)} class="${classMap(mainClasses)}">

src/components/loading.ts

@@ -1,44 +1,16 @@
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  html,
-  unsafeCSS,
-} from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import irisLogo from '../images/camera-iris.svg';
-import controlStyle from '../scss/loading.scss';
-import { Timer } from '../utils/timer';
-
-// Number of seconds after the loading spinner is hidden before rendering this
-// component as empty. Should be longer than the opacity css transition time.
-const LOADING_EMPTY_SECONDS = 2;
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import irisLogo from '../images/camera-iris-transparent.svg';
+import loadingStyle from '../scss/loading.scss';
 
 @customElement('frigate-card-loading')
 export class FrigateCardLoading extends LitElement {
-  @property({ attribute: true, reflect: true, type: Boolean })
-  public show = false;
-
-  @state()
-  protected _empty = false;
-
-  protected _timer = new Timer();
-
   protected render(): TemplateResult {
-    return this._empty ? html`` : html` <img src="${irisLogo}" /> `;
-  }
-
-  protected willUpdate(changedProps: PropertyValues): void {
-    if (changedProps.has('show') && !this.show) {
-      this._timer.start(LOADING_EMPTY_SECONDS, () => {
-        this._empty = true;
-      });
-    }
+    return html` <img src="${irisLogo}" /> `;
   }
 
   static get styles(): CSSResultGroup {
-    return unsafeCSS(controlStyle);
+    return unsafeCSS(loadingStyle);
   }
 }
 

src/scss/loading.scss

@@ -1,32 +1,16 @@
 :host {
-  height: 100%;
-  width: 100%;
+  width: intrinsic;
+  height: intrinsic;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
   pointer-events: none;
-
-  transition: opacity 1s;
-}
-
-:host([show]) {
-  opacity: 1;
-}
-
-:host(:not([show])) {
-  opacity: 0;
 }
 
 img {
-  width: 40%;
-  height: 40%;
-
-  opacity: 0.2;
-
-  filter: invert(100%);
-
+  width: 10%;
   animation: rotate 8s linear infinite;
 }
 

src/scss/media-background.scss

@@ -1,6 +1,10 @@
+$bg-img: url('../images/camera-iris-transparent.svg');
+
 :host {
+  background-color: var(--primary-background-color);
   background-position: center;
   background-repeat: no-repeat;
-  background-image: var(--frigate-card-media-background-image);
-  background-size: 25%;
+  background-image: $bg-img;
+  background-size: 10%;
+  background-position: center;
 }

tests/card-controller/card-element-manager.test.ts

@@ -127,7 +127,6 @@ describe('CardElementManager', () => {
     expect(api.getExpandManager().initialize).toBeCalled();
     expect(api.getMediaLoadedInfoManager().initialize).toBeCalled();
     expect(api.getMicrophoneManager().initialize).toBeCalled();
-    expect(api.getStyleManager().initialize).toBeCalled();
   });
 
   it('should disconnect', () => {

tests/card-controller/style-manager.test.ts

@@ -1,7 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { StyleManager } from '../../src/card-controller/style-manager';
 import { FrigateCardView } from '../../src/config/types';
-import irisLogo from '../../src/images/camera-iris.svg';
 import { createCardAPI, createConfig, createHASS, createView } from '../test-utils';
 
 // @vitest-environment jsdom
@@ -10,21 +9,6 @@ describe('StyleManager', () => {
     vi.resetAllMocks();
   });
 
-  describe('initialize should set common properties', () => {
-    it('should set media background', () => {
-      const api = createCardAPI();
-      const element = document.createElement('div');
-      vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
-      const manager = new StyleManager(api);
-
-      manager.initialize();
-
-      expect(
-        element.style.getPropertyValue('--frigate-card-media-background-image'),
-      ).toEqual(`url("${irisLogo}")`);
-    });
-  });
-
   describe('setLightOrDarkMode', () => {
     it('dark mode unspecified', () => {
       const api = createCardAPI();