Add support for timeline seeking locked to a camera.

src/components/timeline-core.ts

@@ -63,6 +63,7 @@ import {
   MediaQueriesClassifier,
   MediaQueriesType,
 } from '../view/media-queries-classifier';
+import { MediaQueriesResults } from '../view/media-queries-results';
 import { View } from '../view/view';
 import './date-picker.js';
 import { DatePickerEvent, FrigateCardDatePicker } from './date-picker.js';
@@ -85,7 +86,7 @@ interface TimelineViewContext {
 }
 
 type TimelineItemClickAction = 'play' | 'select';
-type TimelinePanBehavior = 'pan' | 'seek' | 'seek-in-media';
+type TimelinePanBehavior = 'pan' | 'seek' | 'seek-in-media' | 'seek-in-camera';
 
 declare module 'view' {
   interface ViewContext {
@@ -288,13 +289,17 @@ export class FrigateCardTimelineCore extends LitElement {
         ? localize('timeline.pan_behavior.pan')
         : this._panBehavior === 'seek'
         ? localize('timeline.pan_behavior.seek')
-        : localize('timeline.pan_behavior.seek-in-media');
+        : this._panBehavior === 'seek-in-media'
+        ? localize('timeline.pan_behavior.seek-in-media')
+        : localize('timeline.pan_behavior.seek-in-camera');
     const panIcon =
       this._panBehavior === 'pan'
         ? 'mdi:pan-horizontal'
         : this._panBehavior === 'seek'
-        ? 'mdi:filmstrip'
-        : 'mdi:lock';
+        ? 'mdi:filmstrip-box-multiple'
+        : this._panBehavior === 'seek-in-media'
+        ? 'mdi:play-box-lock'
+        : 'mdi:camera-lock';
 
     return html` ${capabilities?.supportsTimeline
       ? html` <div
@@ -314,6 +319,8 @@ export class FrigateCardTimelineCore extends LitElement {
                         ? 'seek'
                         : this._panBehavior === 'seek'
                         ? 'seek-in-media'
+                        : this._panBehavior === 'seek-in-media'
+                        ? 'seek-in-camera'
                         : 'pan';
                   }}
                   aria-label="${panTitle}"
@@ -406,15 +413,18 @@ export class FrigateCardTimelineCore extends LitElement {
     const targetBarOn =
       this._shouldSupportSeeking() &&
       (this._panBehavior === 'seek' ||
+        this._panBehavior === 'seek-in-camera' ||
         (this._panBehavior === 'seek-in-media' &&
           this._timeline.getSelection().some((id) => {
             const item = this._timelineSource?.dataset?.get(id);
             return (
+              this._panBehavior !== 'seek-in-camera' ||
+                item?.media?.getCameraID() === this.view?.camera,
               item &&
-              item.start &&
-              item.end &&
-              targetTime.getTime() >= item.start &&
-              targetTime.getTime() <= item.end
+                item.start &&
+                item.end &&
+                targetTime.getTime() >= item.start &&
+                targetTime.getTime() <= item.end
             );
           })));
 
@@ -482,19 +492,30 @@ export class FrigateCardTimelineCore extends LitElement {
     }
 
     const canSeek = this._shouldSupportSeeking();
-    const newResults =
-      this._panBehavior === 'seek-in-media'
-        ? results
-        : results
-            .clone()
-            .resetSelectedResult()
-            .selectBestResult(
-              (media) => findBestMediaIndex(media, targetTime, this.view?.camera),
-              {
-                allCameras: true,
-                main: true,
-              },
-            );
+    let newResults: MediaQueriesResults | null = null;
+
+    if (this._panBehavior === 'seek') {
+      newResults = results
+        .clone()
+        .resetSelectedResult()
+        .selectBestResult(
+          (mediaArray) => findBestMediaIndex(mediaArray, targetTime, this.view?.camera),
+          {
+            allCameras: true,
+            main: true,
+          },
+        );
+    } else if (this._panBehavior === 'seek-in-camera') {
+      newResults = results
+        .clone()
+        .resetSelectedResult()
+        .selectBestResult((mediaArray) => findBestMediaIndex(mediaArray, targetTime), {
+          cameraID: this.view.camera,
+        })
+        .promoteCameraSelectionToMainSelection(this.view.camera);
+    } else if (this._panBehavior === 'seek-in-media') {
+      newResults = results;
+    }
 
     const desiredView: FrigateCardView = this.mini
       ? targetTime >= new Date()

src/localize/languages/en.json

@@ -516,6 +516,7 @@
     "pan_behavior": {
       "pan": "Pan",
       "seek": "Pan seeks across all media",
+      "seek-in-camera": "Pan seeks within selected camera only",
       "seek-in-media": "Pan seeks within selected media item only"
     },
     "select_date": "Choose date"

src/localize/languages/it.json

@@ -504,6 +504,7 @@
     "pan_behavior": {
       "pan": "",
       "seek": "",
+      "seek-in-camera": "",
       "seek-in-media": ""
     },
     "select_date": "Scegli la data"

src/localize/languages/pt-BR.json

@@ -515,6 +515,7 @@
     "pan_behavior": {
       "pan": "",
       "seek": "",
+      "seek-in-camera": "",
       "seek-in-media": ""
     },
     "select_date": "Escolha a data"

src/localize/languages/pt-PT.json

@@ -495,9 +495,10 @@
   },
   "timeline": {
     "pan_behavior": {
-      "pan": "Pan",
-      "seek": "Pan seeks across all media",
-      "seek-in-media": "Pan seeks within selected media item only"
+      "pan": "",
+      "seek": "",
+      "seek-in-camera": "",
+      "seek-in-media": ""
     },
     "select_date": "Selecionar a data"
   }