Merge pull request #863 from dermotduffy/hide-video-controls

Hide video controls briefly on media load for cleaner look

src/components/live/live-webrtc.ts

@@ -14,6 +14,7 @@ import { contentsChanged } from '../../utils/basic.js';
 import { dispatchMediaLoadedEvent } from '../../utils/media-info.js';
 import { dispatchErrorMessageEvent, renderProgressIndicator } from '../message.js';
 import { renderTask } from '../../utils/task.js';
+import { hideMediaControlsTemporarily, MEDIA_LOAD_CONTROLS_HIDE_SECONDS } from '../../utils/media.js';
 
 // Create a wrapper for AlexxIT's WebRTC card
 //  - https://github.com/AlexxIT/WebRTC
@@ -181,6 +182,7 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
           if (onloadeddata) {
             onloadeddata.call(video, e);
           }
+          hideMediaControlsTemporarily(video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
           dispatchMediaLoadedEvent(this, video);
         };
       }

src/patches/ha-hls-player.ts

@@ -15,6 +15,10 @@ import { query } from 'lit/decorators/query.js';
 import { dispatchErrorMessageEvent } from '../components/message.js';
 import { dispatchMediaLoadedEvent } from '../utils/media-info.js';
 import liveHAComponentsStyle from '../scss/live-ha-components.scss';
+import {
+  hideMediaControlsTemporarily,
+  MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+} from '../utils/media.js';
 
 customElements.whenDefined('ha-hls-player').then(() => {
   @customElement('frigate-card-ha-hls-player')
@@ -67,20 +71,8 @@ customElements.whenDefined('ha-hls-player').then(() => {
      */
     public seek(seconds: number): void {
       if (this._video) {
-        // Hide the controls while programatically seeking, and make them
-        // visible again a short time after the last seek (controls are annoying
-        // during timeline seeking)
-        this._video.controls = false;
-
+        hideMediaControlsTemporarily(this._video);
         this._video.currentTime = seconds;
-
-        if (this._controlsVisibilityTimerID !== null) {
-          window.clearTimeout(this._controlsVisibilityTimerID);
-        }
-        this._controlsVisibilityTimerID = window.setTimeout(() => {
-          this._video.controls = true;
-          this._controlsVisibilityTimerID = null;
-        }, 1000);
       }
     }
 
@@ -100,6 +92,9 @@ customElements.whenDefined('ha-hls-player').then(() => {
           .muted=${this.muted}
           ?playsinline=${this.playsInline}
           ?controls=${this.controls}
+          @loadedmetadata=${() => {
+            hideMediaControlsTemporarily(this._video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
+          }}
           @loadeddata=${(e) => {
             dispatchMediaLoadedEvent(this, e);
           }}

src/utils/media.ts

@@ -0,0 +1,29 @@
+// The number of seconds to hide the video controls for after loading (in order
+// to give a cleaner UI appearance, see:
+// https://github.com/dermotduffy/frigate-hass-card/issues/856
+export const MEDIA_LOAD_CONTROLS_HIDE_SECONDS = 2;
+export const MEDIA_SEEK_CONTROLS_HIDE_SECONDS = 1;
+
+/**
+ * Temporarily hide media controls.
+ * @param element Any HTMLElement that has a controls property (e.g.
+ * HTMLVideoElement, FrigateCardHaHlsPlayer)
+ * @param seconds The number of seconds to hide the controls for.
+ */
+export const hideMediaControlsTemporarily = (
+  element: HTMLElement & {
+    controls: boolean;
+    _controlsHideTimeoutID?: number;
+  },
+  seconds = MEDIA_SEEK_CONTROLS_HIDE_SECONDS,
+): void => {
+  element.controls = false;
+
+  if (element._controlsHideTimeoutID) {
+    window.clearTimeout(element._controlsHideTimeoutID);
+  }
+  element._controlsHideTimeoutID = window.setTimeout(() => {
+    element.controls = true;
+    delete element._controlsHideTimeoutID;
+  }, seconds * 1000);
+};