fix: Show a background image in case media doesn't load (#1622)

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

@@ -63,6 +63,7 @@ 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,5 +1,6 @@
 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';
@@ -11,6 +12,10 @@ export class StyleManager {
     this._api = api;
   }
 
+  public initialize(): void {
+    this._setCommonStyleProperties();
+  }
+
   public setLightOrDarkMode = (): void => {
     const config = this._api.getConfigManager().getConfig();
     const isDarkMode =
@@ -133,4 +138,11 @@ 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,6 +134,7 @@ export interface CardElementAPI {
   getMediaLoadedInfoManager(): MediaLoadedInfoManager;
   getMediaPlayerManager(): MediaPlayerManager;
   getMicrophoneManager(): MicrophoneManager;
+  getStyleManager(): StyleManager;
   getQueryStringManager(): QueryStringManager;
 }
 

src/scss/image.scss

@@ -1,3 +1,4 @@
+@use 'media-background.scss';
 @use 'media-layout.scss';
 
 img {

src/scss/live-provider.scss

@@ -1,3 +1,5 @@
+@use 'media-background.scss';
+
 :host {
   display: block;
   height: 100%;

src/scss/media-background.scss

@@ -0,0 +1,6 @@
+:host {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--frigate-card-media-background-image);
+  background-size: 25%;
+}

src/scss/viewer-provider.scss

@@ -1,3 +1,4 @@
+@use 'media-background.scss';
 @use 'media-layout.scss';
 
 :host {

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

@@ -127,6 +127,7 @@ 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,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { FrigateCardView } from '../../src/config/types';
 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
@@ -9,6 +10,21 @@ 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();