diff --git a/src/action-handler-directive.ts b/src/action-handler-directive.ts index 0dd34d12..17cad147 100644 --- a/src/action-handler-directive.ts +++ b/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; diff --git a/src/components/media-grid.ts b/src/components/media-grid.ts index e0b599b3..f43b1c92 100644 --- a/src/components/media-grid.ts +++ b/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, diff --git a/src/utils/media-grid-controller.ts b/src/utils/media-grid-controller.ts index 6f09dfb9..ac79a60d 100644 --- a/src/utils/media-grid-controller.ts +++ b/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(); diff --git a/src/utils/media.ts b/src/utils/media.ts index 7f3704ed..6bf63a93 100644 --- a/src/utils/media.ts +++ b/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); });