Add watermark to temporary image on live view.

src/components/live/live-image.ts

@@ -3,7 +3,7 @@ import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { CameraConfig } from '../../config/types';
-import basicBlockStyle from '../../scss/basic-block.scss';
+import liveImageStyle from '../../scss/live-image.scss';
 import { FrigateCardMediaPlayer } from '../../types.js';
 import '../image.js';
 import { getStateObjOrDispatchError } from '../../utils/get-state-obj';
@@ -16,6 +16,9 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
   @property({ attribute: false })
   public cameraConfig?: CameraConfig;
 
+  @property({ attribute: true })
+  public watermark?: string;
+
   protected _refImage: Ref<Element & FrigateCardMediaPlayer> = createRef();
 
   public async play(): Promise<void> {
@@ -61,24 +64,27 @@ export class FrigateCardLiveImage extends LitElement implements FrigateCardMedia
 
     getStateObjOrDispatchError(this, this.hass, this.cameraConfig);
 
-    return html` <frigate-card-image
-      ${ref(this._refImage)}
-      .imageConfig=${{
-        mode: this.cameraConfig.image.url ? ('url' as const) : ('camera' as const),
-        refresh_seconds: this.cameraConfig.image.refresh_seconds,
-        url: this.cameraConfig.image.url,
+    return html`
+      <frigate-card-image
+        ${ref(this._refImage)}
+        .imageConfig=${{
+          mode: this.cameraConfig.image.url ? ('url' as const) : ('camera' as const),
+          refresh_seconds: this.cameraConfig.image.refresh_seconds,
+          url: this.cameraConfig.image.url,
 
-        // The live provider will take care of zoom and layout options.
-        zoomable: false,
-      }}
-      .hass=${this.hass}
-      .cameraConfig=${this.cameraConfig}
-    >
-    </frigate-card-image>`;
+          // The live provider will take care of zoom and layout options.
+          zoomable: false,
+        }}
+        .hass=${this.hass}
+        .cameraConfig=${this.cameraConfig}
+      >
+      </frigate-card-image>
+      ${this.watermark ? html`<ha-icon icon="${this.watermark}"></ha-icon>` : ''}
+    `;
   }
 
   static get styles(): CSSResultGroup {
-    return unsafeCSS(basicBlockStyle);
+    return unsafeCSS(liveImageStyle);
   }
 }
 

src/components/live/live.ts

@@ -51,7 +51,6 @@ import {
 } from '../../utils/media-info.js';
 import { updateElementStyleFromMediaLayoutConfig } from '../../utils/media-layout.js';
 import { playMediaMutingIfNecessary } from '../../utils/media.js';
-import { Timer } from '../../utils/timer.js';
 import { dispatchViewContextChangeEvent, View } from '../../view/view.js';
 import { EmblaCarouselPlugins } from '../carousel.js';
 import { renderMessage } from '../message.js';
@@ -61,7 +60,6 @@ import '../title-control.js';
 import {
   FrigateCardTitleControl,
   getDefaultTitleConfigForView,
-  showTitleControlAfterDelay,
 } from '../title-control.js';
 import { getStateObjOrDispatchError } from '../../utils/get-state-obj.js';
 
@@ -388,7 +386,6 @@ export class FrigateCardLiveCarousel extends LitElement {
 
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
-  protected _titleTimer = new Timer();
   protected _refTitleControl: Ref<FrigateCardTitleControl> = createRef();
 
   protected _getTransitionEffect(): TransitionEffect {
@@ -657,7 +654,7 @@ export class FrigateCardLiveCarousel extends LitElement {
         }}
         @frigate-card:media:loaded=${() => {
           if (this._refTitleControl.value) {
-            showTitleControlAfterDelay(this._refTitleControl.value, this._titleTimer);
+            this._refTitleControl.value.show();
           }
         }}
       >
@@ -698,7 +695,7 @@ export class FrigateCardLiveCarousel extends LitElement {
             .text="${cameraMetadataCurrent
               ? `${localize('common.live')}: ${cameraMetadataCurrent.title}`
               : ''}"
-            .logo="${cameraMetadataCurrent?.engineLogo}"
+            .logo="${cameraMetadataCurrent.engineLogo}"
             .fitInto=${this as HTMLElement}
           >
           </frigate-card-title-control> `
@@ -965,6 +962,9 @@ export class FrigateCardLiveProvider
             ${ref(this._refProvider)}
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
+            watermark=${ifDefined(
+              showImageDuringLoading ? 'mdi:progress-helper' : undefined,
+            )}
             @frigate-card:media:loaded=${(ev: Event) => {
               if (provider === 'image') {
                 // Only count the media has loaded if the required provider is

src/components/title-control.ts

@@ -3,36 +3,12 @@ import { customElement, property } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { TitleControlConfig } from '../config/types';
 import titleStyle from '../scss/title-control.scss';
-import { Timer } from '../utils/timer';
 import { View } from '../view/view.js';
 
 type PaperToast = HTMLElement & {
   opened: boolean;
 };
 
-export const showTitleControlAfterDelay = (
-  control: FrigateCardTitleControl,
-  timer: Timer,
-  delay = 0.5,
-): void => {
-  const show = () => {
-    timer.stop();
-    control.show();
-  };
-
-  if (control.isVisible()) {
-    // If it's already visible, update it immediately (but also update it
-    // after the timer expires to ensure it re-positions if necessary, see
-    // comment below).
-    show();
-  }
-
-  // Allow a brief pause after the media loads, but before the title is
-  // displayed. This allows for a pleasant appearance/disappear of the title,
-  // and allows for the browser to finish rendering the carousel.
-  timer.start(delay, show);
-};
-
 export const getDefaultTitleConfigForView = (
   view?: Readonly<View>,
   baseConfig?: TitleControlConfig,

src/components/viewer.ts

@@ -66,7 +66,6 @@ import {
   setControlsOnVideo,
 } from '../utils/media.js';
 import { screenshotMedia } from '../utils/screenshot.js';
-import { Timer } from '../utils/timer';
 import { ViewMediaClassifier } from '../view/media-classifier';
 import { MediaQueriesClassifier } from '../view/media-queries-classifier';
 import { MediaQueriesResults } from '../view/media-queries-results.js';
@@ -79,7 +78,6 @@ import './title-control.js';
 import {
   FrigateCardTitleControl,
   getDefaultTitleConfigForView,
-  showTitleControlAfterDelay,
 } from './title-control.js';
 
 export interface MediaViewerViewContext {
@@ -227,7 +225,6 @@ export class FrigateCardViewerCarousel extends LitElement {
   protected _selected = 0;
 
   protected _media: ViewMedia[] | null = null;
-  protected _titleTimer = new Timer();
   protected _refTitleControl: Ref<FrigateCardTitleControl> = createRef();
   protected _player: FrigateCardMediaPlayer | null = null;
 
@@ -466,7 +463,7 @@ export class FrigateCardViewerCarousel extends LitElement {
         }}
         @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
           if (this._refTitleControl.value) {
-            showTitleControlAfterDelay(this._refTitleControl.value, this._titleTimer);
+            this._refTitleControl.value.show();
           }
           this._player = ev.detail.player ?? null;
           this._seekHandler();