Fix controls issue.

src/action-handler-directive.ts

@@ -53,7 +53,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     });
   }
 
-  public bind(element: ActionHandlerElement, options): void {
+  public bind(
+    element: ActionHandlerElement,
+    options: FrigateCardActionHandlerOptions,
+  ): void {
     if (element.actionHandlerOptions) {
       // Reset the options on an existing actionHandler.
       element.actionHandlerOptions = options;

src/components/media-grid.ts

@@ -1,10 +1,9 @@
 // TODO: Performance of video scanning (pause/play?)
 // TODO: Investigate query spam during a grid load
-// TODO: Test live pre-load
 // TODO: Is the query reset in card.ts correct for media filter multi-camera queries that are not all cameras?
 // TODO: Do I need column max?
-// TODO: test changing tabs in a dashboard (to trigger disconnect, do I still receive media loads from media that was already loaded)?
 // TODO: Can SELECT_CHILD_EVENTS only be 'click' and it still work on Android?
+// TODO: With live autoplay off only white frames appear?
 
 import {
   CSSResultGroup,

src/utils/media-grid-controller.ts

@@ -46,7 +46,7 @@ export class MediaGridController {
     () => this._masonry?.layout?.(),
     // Throttle layout calls to larger than the masonry.js transitionDuration
     // value specified below.
-    500,
+    300,
     { trailing: true, leading: false },
   );
 
@@ -251,7 +251,7 @@ export class MediaGridController {
       columnWidth: this._getColumnSize(),
       initLayout: false,
       percentPosition: true,
-      transitionDuration: '0.3s',
+      transitionDuration: '0.2s',
     });
     this._masonry.addItems?.([...this._gridContents.values()]);
     this._throttledLayout();

src/utils/media.ts

@@ -9,6 +9,7 @@ const MEDIA_SEEK_CONTROLS_HIDE_SECONDS = 1;
 
 export type FrigateCardHTMLVideoElement = HTMLVideoElement & {
   _controlsHideTimer?: Timer;
+  _controlsOriginalValue?: boolean;
 };
 
 /**
@@ -24,6 +25,7 @@ export const setControlsOnVideo = (
   if (video._controlsHideTimer) {
     video._controlsHideTimer.stop();
     delete video._controlsHideTimer;
+    delete video._controlsOriginalValue;
   }
   video.controls = value;
 };
@@ -38,9 +40,10 @@ export const hideMediaControlsTemporarily = (
   video: FrigateCardHTMLVideoElement,
   seconds = MEDIA_SEEK_CONTROLS_HIDE_SECONDS,
 ): void => {
-  const oldValue = video.controls;
+  const oldValue = video._controlsOriginalValue ?? video.controls;
   setControlsOnVideo(video, false);
   video._controlsHideTimer ??= new Timer();
+  video._controlsOriginalValue = oldValue;
   video._controlsHideTimer.start(seconds, () => {
     setControlsOnVideo(video, oldValue);
   });