Fix controls issue.

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);
   });