Refactor media classifiers.

src/camera/frigate/engine-frigate.ts

@@ -89,7 +89,7 @@ export class FrigateCameraManagerEngine implements CameraManagerEngine {
       path =
         `/api/frigate/${cameraConfig.frigate.client_id}` +
         `/notifications/${media.getID()}/` +
-        `${media.isClip() ? 'clip.mp4' : 'snapshot.jpg'}` +
+        `${ViewMediaClassifier.isClip(media) ? 'clip.mp4' : 'snapshot.jpg'}` +
         `?download=true`;
     } else if (ViewMediaClassifier.isFrigateRecording(media)) {
       path =

src/components/thumbnail.ts

@@ -18,8 +18,9 @@ import type { MediaSeek } from './viewer.js';
 import { TaskStatus } from '@lit-labs/task';
 
 import type { CameraConfig, ExtendedHomeAssistant } from '../types.js';
-import { ViewMedia } from '../view/media.js';
+import { EventViewMedia, RecordingViewMedia, ViewMedia } from '../view/media.js';
 import { CameraManager } from '../camera/manager.js';
+import { ViewMediaClassifier } from '../view/media-classifier.js';
 
 // The minimum width of a thumbnail with details enabled.
 export const THUMBNAIL_DETAILS_WIDTH_MIN = 300;
@@ -127,13 +128,13 @@ export class FrigateCardThumbnailFeatureRecording extends LitElement {
 @customElement('frigate-card-thumbnail-details-event')
 export class FrigateCardThumbnailDetailsEvent extends LitElement {
   @property({ attribute: false })
-  public media?: ViewMedia;
+  public media?: EventViewMedia;
 
   @property({ attribute: false })
   public mediaSeek?: MediaSeek;
 
   protected render(): TemplateResult | void {
-    if (!this.media || !this.media.isEvent()) {
+    if (!this.media) {
       return;
     }
     const score = this.media.getScore();
@@ -179,7 +180,7 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
 @customElement('frigate-card-thumbnail-details-recording')
 export class FrigateCardThumbnailDetailsRecording extends LitElement {
   @property({ attribute: false })
-  public media?: ViewMedia;
+  public media?: RecordingViewMedia;
 
   @property({ attribute: false })
   public mediaSeek?: MediaSeek;
@@ -266,19 +267,19 @@ export class FrigateCardThumbnail extends LitElement {
     const shouldShowTimelineControl =
       this.show_timeline_control &&
       this.view &&
-      (!this.media.isRecording() ||
+      (!ViewMediaClassifier.isRecording(this.media) ||
         // Only show timeline control if the recording has a start & end time.
         (this.media.getStartTime() && this.media.getEndTime()));
 
     const clientID = this.cameraConfig?.frigate.client_id;
-    return html` ${this.media.isEvent()
+    return html` ${ViewMediaClassifier.isEvent(this.media)
       ? html`<frigate-card-thumbnail-feature-event
           aria-label="${title ?? ''}"
           title=${title}
           .hass=${this.hass}
           .thumbnail=${thumbnail ?? undefined}
         ></frigate-card-thumbnail-feature-event>`
-      : this.media.isRecording()
+      : ViewMediaClassifier.isRecording(this.media)
       ? html`<frigate-card-thumbnail-feature-recording
           aria-label="${title ?? ''}"
           title="${title ?? ''}"
@@ -306,12 +307,12 @@ export class FrigateCardThumbnail extends LitElement {
             }}
           /></ha-icon>`
       : ``}
-    ${this.details && this.media.isEvent()
+    ${this.details && ViewMediaClassifier.isEvent(this.media)
       ? html`<frigate-card-thumbnail-details-event
           .media=${this.media ?? undefined}
           .mediaSeek=${this.mediaSeek}
         ></frigate-card-thumbnail-details-event>`
-      : this.details && this.media.isRecording()
+      : this.details && ViewMediaClassifier.isRecording(this.media)
       ? html`<frigate-card-thumbnail-details-recording
           .media=${this.media ?? undefined}
           .cameraTitle=${getCameraTitle(this.hass, this.cameraConfig)}
@@ -328,7 +329,7 @@ export class FrigateCardThumbnail extends LitElement {
             if (!this.view || !this.media) {
               return;
             }
-            if (this.media.isEvent()) {
+            if (ViewMediaClassifier.isEvent(this.media)) {
               this.view
                 .evolve({
                   view: 'timeline',
@@ -338,7 +339,7 @@ export class FrigateCardThumbnail extends LitElement {
                 })
                 .removeContext('timeline')
                 .dispatchChangeEvent(this);
-            } else if (this.media.isRecording()) {
+            } else if (ViewMediaClassifier.isRecording(this.media)) {
               const startTime = this.media.getStartTime();
               const endTime = this.media.getStartTime();
               if (!startTime || !endTime) {

src/components/timeline-core.ts

@@ -50,13 +50,13 @@ import {
   generateMediaViewerContext,
 } from '../utils/media-to-view';
 import { CameraManager } from '../camera/manager';
-import { EventMediaQueries, MediaQueries } from "../view/media-queries";
+import { EventMediaQueries, MediaQueries } from '../view/media-queries';
-import { MediaQueriesClassifier } from "../view/media-queries-classifier";
+import { MediaQueriesClassifier } from '../view/media-queries-classifier';
 import { dispatchMessageEvent } from './message.js';
 import './thumbnail.js';
 import { FrigateCardTimelineItem, TimelineDataSource } from '../utils/timeline-source';
 import { ViewMedia } from '../view/media';
-import { ViewMediaClassifier } from "../view/media-classifier";
+import { ViewMediaClassifier } from '../view/media-classifier';
 import { rangesOverlap } from '../camera/range';
 import { View } from '../view/view';
 
@@ -689,50 +689,41 @@ export class FrigateCardTimelineCore extends LitElement {
   }
 
   protected _getPerfectWindowFromMedia(media: ViewMedia): TimelineWindow | null {
-    if (!ViewMediaClassifier.isMediaWithStartTime(media)) {
+    const startTime = media.getStartTime();
-      return null;
+    const endTime = media.getStartTime();
-    }
 
-    if (media.isEvent()) {
+    if (ViewMediaClassifier.isEvent(media)) {
       const windowSeconds = this._getConfiguredWindowSeconds();
 
-      if (ViewMediaClassifier.isMediaWithStartEndTime(media)) {
+      if (startTime && endTime) {
-        if (
+        if (endTime.getTime() - startTime.getTime() > windowSeconds * 1000) {
-          media.getEndTime().getTime() - media.getStartTime().getTime() >
-          windowSeconds * 1000
-        ) {
           // If the event is larger than the configured window, only show the most
           // recent portion of the event that fits in the window.
           return {
-            start: sub(media.getEndTime(), { seconds: windowSeconds }),
+            start: sub(endTime, { seconds: windowSeconds }),
-            end: media.getEndTime(),
+            end: endTime,
           };
         } else {
           // If the event is shorter than the configured window, center the event
           // in the window.
-          const gap =
+          const gap = windowSeconds - (endTime.getTime() - startTime.getTime()) / 1000;
-            windowSeconds -
-            (media.getEndTime().getTime() - media.getStartTime().getTime()) / 1000;
           return {
-            start: sub(media.getStartTime(), { seconds: gap / 2 }),
+            start: sub(startTime, { seconds: gap / 2 }),
-            end: add(media.getEndTime(), { seconds: gap / 2 }),
+            end: add(endTime, { seconds: gap / 2 }),
           };
         }
-      } else {
+      } else if (startTime) {
         // If there's no end-time yet, place the start-time in the center of the
         // time window.
         return {
-          start: sub(media.getStartTime(), { seconds: windowSeconds / 2 }),
+          start: sub(startTime, { seconds: windowSeconds / 2 }),
-          end: add(media.getStartTime(), { seconds: windowSeconds / 2 }),
+          end: add(startTime, { seconds: windowSeconds / 2 }),
         };
       }
-    } else if (
+    } else if (ViewMediaClassifier.isRecording(media) && startTime && endTime) {
-      media.isRecording() &&
-      ViewMediaClassifier.isMediaWithStartEndTime(media)
-    ) {
       return {
-        start: media.getStartTime(),
+        start: startTime,
-        end: media.getEndTime(),
+        end: endTime,
       };
     }
     return null;
@@ -816,6 +807,8 @@ export class FrigateCardTimelineCore extends LitElement {
                 second.id != selectedId &&
                 !!firstMedia &&
                 !!secondMedia &&
+                ViewMediaClassifier.isEvent(firstMedia) &&
+                ViewMediaClassifier.isEvent(secondMedia) &&
                 firstMedia.isGroupableWith(secondMedia)
               );
             },
@@ -882,9 +875,11 @@ export class FrigateCardTimelineCore extends LitElement {
 
     let desiredWindow = timelineWindow;
     const media = this.view.queryResults?.getSelectedResult();
+    const mediaStartTime = media?.getStartTime();
+    const mediaEndTime = media?.getEndTime();
     const mediaWindow: TimelineWindow | null =
-      media && ViewMediaClassifier.isMediaWithStartEndTime(media)
+      media && mediaStartTime && mediaEndTime
-        ? { start: media.getStartTime(), end: media.getEndTime() }
+        ? { start: mediaStartTime, end: mediaEndTime }
         : null;
     const context = this.view.context?.timeline;
 
@@ -907,12 +902,8 @@ export class FrigateCardTimelineCore extends LitElement {
       await this._timelineSource?.refresh(this.hass, this.cameras, prefetchedWindow);
     }
 
-    if (
+    const mediaID = media?.getID();
-      !this._pointerHeld &&
+    if (!this._pointerHeld && media && mediaID && this._isClustering()) {
-      media &&
-      ViewMediaClassifier.isMediaWithID(media) &&
-      this._isClustering()
-    ) {
       // Hack: Clustering may not update unless the dataset changes, artifically
       // update the dataset to ensure the newly selected item cannot be included
       // in a cluster. Only do this when the pointer is not held to avoid
@@ -920,10 +911,11 @@ export class FrigateCardTimelineCore extends LitElement {
 
       // Need to this rewrite prior to setting the selection (just below), or
       // the selection will be lost on rewrite.
-      this._timelineSource?.rewriteEvent(media.getID());
+      this._timelineSource?.rewriteEvent(mediaID);
     }
 
-    const desiredId = !!media && !!media.isEvent() ? media.getID() : null;
+    const desiredId =
+      !!media && ViewMediaClassifier.isEvent(media) ? media.getID() : null;
     if (desiredId) {
       this._timeline?.setSelection([desiredId], {
         focus: false,

src/components/viewer.ts

@@ -666,7 +666,7 @@ export class FrigateCardViewerCarousel extends LitElement {
     // `_selectSlideMediaShowHandler` (and not used by the player itself).
     return html`
       <div class="embla__slide">
-        ${media.isVideo()
+        ${ViewMediaClassifier.isVideo(media)
           ? html`<frigate-card-ha-hls-player
               allow-exoplayer
               aria-label="${media.getTitle() ?? ''}"

src/utils/basic.ts

@@ -5,11 +5,9 @@ import format from 'date-fns/format';
 import isEqual from 'lodash-es/isEqual';
 import { FrigateCardError } from '../types';
 
-export type ModifyInterface<T, R> = Omit<T, keyof R> & R;
-
 /**
  * Dispatch a Frigate Card event.
- * @param element The element to send the event.
+ * @param target The target from which send the event.
  * @param name The name of the Frigate card event to send.
  * @param detail An optional detail object to attach.
  */

src/utils/media-to-view.ts

@@ -3,13 +3,18 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import startOfHour from 'date-fns/startOfHour';
 import sub from 'date-fns/sub';
 import { ViewContext } from 'view';
-import { CameraConfig, ClipsOrSnapshotsOrAll, FrigateCardView, RecordingSegment } from '../types';
+import {
+  CameraConfig,
+  ClipsOrSnapshotsOrAll,
+  FrigateCardView,
+  RecordingSegment,
+} from '../types';
 import { View } from '../view/view';
-import { EventMediaQueries, RecordingMediaQueries } from "../view/media-queries";
+import { EventMediaQueries, RecordingMediaQueries } from '../view/media-queries';
 import { CameraManager } from '../camera/manager';
 import { getAllDependentCameras } from './camera.js';
 import { ViewMedia } from '../view/media';
-import { ViewMediaClassifier } from "../view/media-classifier";
+import { ViewMediaClassifier } from '../view/media-classifier';
 import { HomeAssistant } from 'custom-card-helpers';
 
 export const changeViewToRecentEventsForCameraAndDependents = async (
@@ -178,12 +183,12 @@ export const generateMediaViewerContext = async (
   const hourStart = startOfHour(targetTime);
 
   for (const [index, child] of media.entries()) {
-    if (!ViewMediaClassifier.isMediaWithStartEndTime(child)) {
+    const start = child.getStartTime();
+    const end = child.getEndTime();
+    if (!start || !end) {
       continue;
     }
 
-    const start = child.getStartTime();
-    const end = child.getEndTime();
     let seekSeconds: number | null = null;
 
     if (targetTime >= start && targetTime <= end) {
@@ -194,12 +199,14 @@ export const generateMediaViewerContext = async (
           end: end,
         },
       )[0];
-      const segments = (await cameraManager.getRecordingSegments(hass, query)).get(query);
+      const segments = (await cameraManager.getRecordingSegments(hass, query)).get(
+        query,
+      );
 
       if (segments) {
         seekSeconds = getSeekTimeInSegments(
           // Recordings start from the top of the hour.
-          child.isRecording() ? hourStart : start,
+          ViewMediaClassifier.isRecording(child) ? hourStart : start,
           targetTime,
           segments.segments,
         );
@@ -241,24 +248,20 @@ export const findClosestMediaIndex = (
 
   for (let i = 0; i < mediaArray.length; ++i) {
     const media = mediaArray[i];
-    if (
+    const start = media.getStartTime();
-      !cameraIDs.has(media.getCameraID()) ||
+    const end = media.getEndTime();
-      !ViewMediaClassifier.isMediaWithStartEndTime(media)
+    if (!cameraIDs.has(media.getCameraID()) || !start || !end) {
-    ) {
       continue;
     }
 
-    const startTime = media.getStartTime();
+    if (start <= targetTime && end >= targetTime) {
-    const endTime = media.getEndTime();
-
-    if (startTime <= targetTime && endTime >= targetTime) {
       if (!refPoint) {
         return i;
       }
       const delta =
         refPoint === 'end'
-          ? endTime.getTime() - targetTime.getTime()
+          ? end.getTime() - targetTime.getTime()
-          : targetTime.getTime() - startTime.getTime();
+          : targetTime.getTime() - start.getTime();
       if (!bestMatch || delta < bestMatch.delta) {
         bestMatch = { index: i, delta: delta };
       }

src/view/media-classifier.ts

@@ -1,5 +1,10 @@
-import { ModifyInterface } from '../utils/basic.js';
+import {
-import { ViewMedia, FrigateEventViewMedia, FrigateRecordingViewMedia } from './media';
+  ViewMedia,
+  FrigateEventViewMedia,
+  FrigateRecordingViewMedia,
+  RecordingViewMedia,
+  EventViewMedia,
+} from './media';
 
 export class ViewMediaClassifier {
   public static isFrigateMedia(
@@ -15,39 +20,19 @@ export class ViewMediaClassifier {
   ): media is FrigateRecordingViewMedia {
     return media instanceof FrigateRecordingViewMedia;
   }
-
+  public static isEvent(media: ViewMedia): media is EventViewMedia {
-  // Typescript conveniences.
+    return this.isClip(media) || this.isSnapshot(media);
-  public static isMediaWithStartEndTime(media: ViewMedia): media is ModifyInterface<
-    ViewMedia,
-    {
-      getStartTime(): Date;
-      getEndTime(): Date;
-    }
-  > {
-    return !!media.getStartTime() && !!media.getEndTime();
   }
-  public static isMediaWithStartTime(media: ViewMedia): media is ModifyInterface<
+  public static isRecording(media: ViewMedia): media is RecordingViewMedia {
-    ViewMedia,
+    return media.getMediaType() === 'recording';
-    {
-      getStartTime(): Date;
-    }
-  > {
-    return !!media.getStartTime();
   }
-  public static isMediaWithEndTime(media: ViewMedia): media is ModifyInterface<
+  public static isClip(media: ViewMedia): boolean {
-    ViewMedia,
+    return media.getMediaType() === 'clip';
-    {
-      getEndTime(): Date;
-    }
-  > {
-    return !!media.getEndTime();
   }
-  public static isMediaWithID(media: ViewMedia): media is ModifyInterface<
+  public static isSnapshot(media: ViewMedia): boolean {
-    ViewMedia,
+    return media.getMediaType() === 'snapshot';
-    {
+  }
-      getID(): string;
+  public static isVideo(media: ViewMedia): boolean {
-    }
+    return this.isClip(media) || this.isRecording(media); 
-  > {
-    return !!media.getID();
   }
 }

src/view/media.ts

@@ -1,6 +1,6 @@
 import fromUnixTime from 'date-fns/fromUnixTime';
 import isEqual from 'lodash-es/isEqual';
-import { BrowseMediaSource, CameraConfig, MEDIA_TYPE_IMAGE } from '../types.js';
+import { CameraConfig } from '../types.js';
 import {
   getEventMediaContentID,
   getEventThumbnailURL,
@@ -9,9 +9,10 @@ import {
   getRecordingTitle,
 } from '../camera/frigate/util.js';
 import { FrigateEvent, FrigateRecording } from '../camera/frigate/types.js';
+import { ViewMediaClassifier } from './media-classifier.js';
 
 export type ViewMediaType = 'clip' | 'snapshot' | 'recording';
-export type ViewMediaSourceType = FrigateEvent | FrigateRecording | BrowseMediaSource;
+export type ViewMediaSourceType = FrigateEvent | FrigateRecording;
 
 class ViewMediaBase<T extends ViewMediaSourceType> {
   protected _mediaType: ViewMediaType;
@@ -23,19 +24,6 @@ class ViewMediaBase<T extends ViewMediaSourceType> {
     this._cameraID = cameraID;
     this._source = source;
   }
-
-  public isEvent(): boolean {
-    return this._mediaType === 'clip' || this._mediaType === 'snapshot';
-  }
-  public isRecording(): boolean {
-    return this._mediaType === 'recording';
-  }
-  public isClip(): boolean {
-    return this._mediaType === 'clip';
-  }
-  public isSnapshot(): boolean {
-    return this._mediaType === 'snapshot';
-  }
   public getContentType(): 'image' | 'video' {
     return this._mediaType === 'snapshot' ? 'image' : 'video';
   }
@@ -45,9 +33,6 @@ class ViewMediaBase<T extends ViewMediaSourceType> {
   public getMediaType(): ViewMediaType {
     return this._mediaType;
   }
-  public isVideo(): boolean {
-    return this.isClip() || this.isRecording();
-  }
   public getSource(): T {
     return this._source;
   }
@@ -73,14 +58,6 @@ class ViewMediaBase<T extends ViewMediaSourceType> {
   public getThumbnail(_cameraConfig?: CameraConfig): string | null {
     return null;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public isGroupableWith(that: ViewMedia): boolean {
-    return (
-      this.getMediaType() === that.getMediaType() &&
-      isEqual(this.getWhere(), that.getWhere()) &&
-      isEqual(this.getWhat(), that.getWhat())
-    );
-  }
   public isFavorite(): boolean | null {
     return null;
   }
@@ -91,18 +68,19 @@ class ViewMediaBase<T extends ViewMediaSourceType> {
   public setFavorite(_favorite: boolean): void {
     return;
   }
-  public getWhat(): string[] | null {
-    return null;
-  }
   public getWhere(): string[] | null {
     return null;
   }
-  public getScore(): number | null {
+}
-    return null;
+
-  }
+export interface EventViewMedia extends ViewMedia {
-  public getEventCount(): number | null {
+  getScore(): number | null;
-    return null;
+  getWhat(): string[] | null;
-  }
+  isGroupableWith(that: EventViewMedia): boolean;
+}
+
+export interface RecordingViewMedia extends ViewMedia {
+  getEventCount(): number | null;
 }
 
 // Creates a 'public interface only' version of ViewMediaBase for use elsewhere
@@ -112,26 +90,10 @@ export type ViewMedia = {
   [P in keyof ViewMediaBase<ViewMediaSourceType>]: ViewMediaBase<ViewMediaSourceType>[P];
 };
 
-export class HomeAssistantBrowserViewMedia extends ViewMediaBase<BrowseMediaSource> {
+export class FrigateEventViewMedia
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  extends ViewMediaBase<FrigateEvent>
-  public getID(_cameraConfig?: CameraConfig): string | null {
+  implements EventViewMedia
-    return this._source.media_content_id;
+{
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public getContentID(_cameraConfig?: CameraConfig): string | null {
-    return this._source.media_content_id;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public getTitle(_cameraConfig?: CameraConfig): string | null {
-    return this._source.title;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public getThumbnail(_cameraConfig?: CameraConfig): string | null {
-    return this._source.thumbnail;
-  }
-}
-
-export class FrigateEventViewMedia extends ViewMediaBase<FrigateEvent> {
   public hasClip(): boolean {
     return !!this._source.has_clip;
   }
@@ -167,7 +129,7 @@ export class FrigateEventViewMedia extends ViewMediaBase<FrigateEvent> {
       cameraConfig.frigate.client_id,
       cameraConfig.frigate.camera_name,
       this._source,
-      this.isClip() ? 'clips' : 'snapshots',
+      ViewMediaClassifier.isClip(this) ? 'clips' : 'snapshots',
     );
   }
 
@@ -198,9 +160,21 @@ export class FrigateEventViewMedia extends ViewMediaBase<FrigateEvent> {
   public getScore(): number | null {
     return this._source.top_score;
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public isGroupableWith(that: EventViewMedia): boolean {
+    return (
+      this.getMediaType() === that.getMediaType() &&
+      isEqual(this.getWhere(), that.getWhere()) &&
+      isEqual(this.getWhat(), that.getWhat())
+    );
+  }
 }
 
-export class FrigateRecordingViewMedia extends ViewMediaBase<FrigateRecording> {
+export class FrigateRecordingViewMedia
+  extends ViewMediaBase<FrigateRecording>
+  implements RecordingViewMedia
+{
   public getID(cameraConfig?: CameraConfig): string | null {
     // ID name is derived from the real camera name (not CameraID) since the
     // recordings for the same camera across multiple zones will be the same and
@@ -262,15 +236,4 @@ export class ViewMediaFactory {
   ): ViewMedia | null {
     return new FrigateRecordingViewMedia('recording', cameraID, recording);
   }
-
-  static createViewMediaFromBrowseMediaSource(
-    cameraID: string,
-    browseMedia: BrowseMediaSource,
-  ): ViewMedia | null {
-    return new HomeAssistantBrowserViewMedia(
-      browseMedia.media_content_type === MEDIA_TYPE_IMAGE ? 'snapshot' : 'clip',
-      cameraID,
-      browseMedia,
-    );
-  }
 }

src/view/view.ts

@@ -1,5 +1,4 @@
 // Easy:
-//  - TODO: Are there elements of ViewMedia (e.g. getEventCount) that should be moved into subclasses (e.g. a recording subclass).
 //  - TODO: In MediaQueriesBase, do we need to generic? Just have T be a MediaQuery?
 //  - TODO: In the viewer @click handlers should I use this.selected instead of calling carouselScrollPrevious()