Allow default media controls to be hidden.

src/components/viewer.ts

@@ -6,7 +6,7 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS
+  unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { guard } from 'lit/directives/guard.js';
@@ -25,23 +25,28 @@ import {
   FrigateCardMediaPlayer,
   MediaLoadedInfo,
   TransitionEffect,
-  ViewerConfig
+  ViewerConfig,
 } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { mayHaveAudio } from '../utils/audio.js';
 import { contentsChanged, errorToConsole } from '../utils/basic.js';
 import { canonicalizeHAURL } from '../utils/ha/index.js';
 import { ResolvedMediaCache, resolveMedia } from '../utils/ha/resolved-media.js';
-import { dispatchMediaLoadedEvent, dispatchMediaPauseEvent, dispatchMediaPlayEvent, dispatchMediaVolumeChangeEvent } from '../utils/media-info.js';
+import {
+  dispatchMediaLoadedEvent,
+  dispatchMediaPauseEvent,
+  dispatchMediaPlayEvent,
+  dispatchMediaVolumeChangeEvent,
+} from '../utils/media-info.js';
 import { updateElementStyleFromMediaLayoutConfig } from '../utils/media-layout.js';
 import {
   changeViewToRecentEventsForCameraAndDependents,
-  changeViewToRecentRecordingForCameraAndDependents
+  changeViewToRecentRecordingForCameraAndDependents,
 } from '../utils/media-to-view.js';
 import {
   hideMediaControlsTemporarily,
   MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
-  playMediaMutingIfNecessary
+  playMediaMutingIfNecessary,
 } from '../utils/media.js';
 import { ViewMediaClassifier } from '../view/media-classifier';
 import { MediaQueriesClassifier } from '../view/media-queries-classifier';
@@ -53,7 +58,7 @@ import { AutoMediaPlugin } from './embla-plugins/automedia.js';
 import { Lazyload } from './embla-plugins/lazyload.js';
 import {
   FrigateCardMediaCarousel,
-  wrapMediaLoadedEventForCarousel
+  wrapMediaLoadedEventForCarousel,
 } from './media-carousel.js';
 import './next-prev-control.js';
 import './surround.js';
@@ -603,11 +608,11 @@ export class FrigateCardViewerProvider
     }
   }
 
-  public async setControls(controls: boolean): Promise<void> {
+  public async setControls(controls?: boolean): Promise<void> {
     if (this._refFrigateCardMediaPlayer.value) {
       return this._refFrigateCardMediaPlayer.value.setControls(controls);
     } else if (this._refVideoProvider.value) {
-      this._refVideoProvider.value.controls = controls;
+      this._refVideoProvider.value.controls = controls ?? this.viewerConfig?.controls.builtin ?? true;
     }
   }
 
@@ -702,7 +707,7 @@ export class FrigateCardViewerProvider
     return this.viewerConfig?.zoomable
       ? html` <frigate-card-zoomer
           @frigate-card:zoom:zoomed=${() => this.setControls(false)}
-          @frigate-card:zoom:unzoomed=${() => this.setControls(true)}
+          @frigate-card:zoom:unzoomed=${() => this.setControls()}
         >
           ${template}
         </frigate-card-zoomer>`
@@ -740,6 +745,7 @@ export class FrigateCardViewerProvider
               title="${this.media.getTitle() ?? ''}"
               url=${canonicalizeHAURL(this.hass, resolvedMedia?.url) ?? ''}
               .hass=${this.hass}
+              ?controls=${this.viewerConfig.controls.builtin}
             >
             </frigate-card-ha-hls-player>`
           : html`
@@ -748,11 +754,11 @@ export class FrigateCardViewerProvider
                 aria-label="${this.media.getTitle() ?? ''}"
                 title="${this.media.getTitle() ?? ''}"
                 muted
-                controls
                 playsinline
                 ?autoplay=${false}
+                ?controls=${this.viewerConfig.controls.builtin}
                 @loadedmetadata=${(ev: Event) => {
-                  if (ev.target) {
+                  if (ev.target && !!this.viewerConfig?.controls.builtin) {
                     hideMediaControlsTemporarily(
                       ev.target as HTMLVideoElement,
                       MEDIA_LOAD_CONTROLS_HIDE_SECONDS,