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 {