From ce9ef97aea2062b31ee43e9272302e59d0ddf8ed Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 9 Apr 2022 21:48:19 -0700
Subject: [PATCH] Include mouse movements as interaction.

---
 src/card.ts                | 23 ++++++++++++++++++-----
 src/components/timeline.ts | 19 ++++++++-----------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index c5e41d50..481154cd 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -6,12 +6,13 @@ import {
   html,
   unsafeCSS,
 } from 'lit';
+import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-helpers';
+import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import { until } from 'lit/directives/until.js';
-import { HomeAssistant, LovelaceCardEditor, getLovelace } from 'custom-card-helpers';
 import screenfull from 'screenfull';
+import { throttle } from 'lodash-es';
+import { until } from 'lit/directives/until.js';
 import { z } from 'zod';
 
 import {
@@ -180,6 +181,10 @@ export class FrigateCard extends LitElement {
   // A cache of resolved media URLs/mimetypes for use in the whole card.
   protected _resolvedMediaCache = new ResolvedMediaCache();
 
+  // The mouse handler may be called continually, throttle it to at most once
+  // per second for performance reasons.
+  protected _boundMouseHandler = throttle(this._mouseHandler.bind(this), 1 * 1000);
+
   /**
    * Set the Home Assistant object.
    */
@@ -383,8 +388,7 @@ export class FrigateCard extends LitElement {
 
     if (
       this._getConfig().menu.buttons.download &&
-      (this._view?.isViewerView() || this._view?.is('timeline') &&
-      !!this._view?.media)
+      (this._view?.isViewerView() || (this._view?.is('timeline') && !!this._view?.media))
     ) {
       buttons.push({
         type: 'custom:frigate-card-menu-icon',
@@ -935,6 +939,13 @@ export class FrigateCard extends LitElement {
     this._startInteractionTimer();
   }
 
+  /**
+   * Handle mouse movements.
+   */
+  protected _mouseHandler(): void {
+    this._startInteractionTimer();
+  }
+
   /**
    * Clear the user interaction ('screensaver') timer.
    */
@@ -1071,6 +1082,7 @@ export class FrigateCard extends LitElement {
     if (screenfull.isEnabled) {
       screenfull.on('change', this._fullscreenHandler.bind(this));
     }
+    this.addEventListener('mousemove', this._boundMouseHandler);
   }
 
   /**
@@ -1080,6 +1092,7 @@ export class FrigateCard extends LitElement {
     if (screenfull.isEnabled) {
       screenfull.off('change', this._fullscreenHandler.bind(this));
     }
+    this.removeEventListener('mousemove', this._boundMouseHandler);
     super.disconnectedCallback();
   }
 
diff --git a/src/components/timeline.ts b/src/components/timeline.ts
index 97b2bbc3..52bce702 100644
--- a/src/components/timeline.ts
+++ b/src/components/timeline.ts
@@ -1,4 +1,3 @@
-// TODO: Periodically refetch events.
 // TODO: Editor support for timeline (incl. in views).
 // TODO: Make thumbnail controls optional (in all places that use thumbnails).
 // TODO: Search for TODOs and logging statements.
@@ -507,7 +506,7 @@ export class FrigateCardTimelineCore extends LitElement {
     const selected = this._timeline.getSelection();
     let childIndex = -1;
     const children: FrigateBrowseMediaSource[] = [];
-    this._events.dataset.get().forEach((item) => {
+    this._events.dataset.get({order: 'start'}).forEach((item) => {
       if (this.timelineConfig) {
         let added = false;
         if (
@@ -732,15 +731,13 @@ export class FrigateCardTimelineCore extends LitElement {
       this._generateThumbnails();
     }
 
-    if (event) {
-      this._timeline.setSelection([event.id], {
-        focus: false,
-        animation: {
-          animation: false,
-          zoom: false,
-        },
-      });
-    }
+    this._timeline.setSelection(event ? [event.id] : [], {
+      focus: false,
+      animation: {
+        animation: false,
+        zoom: false,
+      },
+    });
 
     const context = this.view.context as TimelineViewContext | null;
     const timelineWindow = this._timeline.getWindow();