Initial skeleton timeline.

package.json

@@ -16,18 +16,29 @@
   "license": "MIT",
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^5.1.1",
+    "@egjs/hammerjs": "^2.0.17",
     "@lit-labs/task": "^1.0.0",
     "@material/image-list": "^13.0.0",
     "@material/mwc-menu": "^0.25.3",
     "@material/rtl": "^13.0.0",
+    "component-emitter": "^1.3.0",
+    "crypto": "^1.0.1",
     "custom-card-helpers": "^1.8.0",
     "dayjs": "^1.11.0",
     "embla-carousel": "^6.1.1",
     "home-assistant-js-websocket": "^6.1.1",
     "lit": "^2.2.1",
+    "keycharm": "^0.4.0",
     "lodash-es": "^4.17.21",
     "quick-lru": "^6.1.0",
+    "moment": "^2.29.1",
+    "propagating-hammerjs": "^2.0.1",
     "screenfull": "^6.0.1",
+    "uuid": "^8.3.2",
+    "vis-data": "^7.1.3",
+    "vis-timeline": "^7.5.1",
+    "vis-util": "^5.0.2",
+    "xss": "^1.0.10",
     "zod": "^3.13.4"
   },
   "devDependencies": {

rollup.config.js

@@ -30,9 +30,11 @@ const plugins = [
     },
   }),
   image(),
-  nodeResolve({}),
+  nodeResolve({
+    browser: true,
+  }),
   commonjs({
-    include: 'node_modules/**'
+    include: 'node_modules/**',
   }),
   typescript(),
   json(),

src/browse-media-util.ts

@@ -4,12 +4,12 @@ import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat.js';
 
 import type {
   BrowseMediaQueryParameters,
-  BrowseMediaSource,
+  FrigateBrowseMediaSource,
   CameraConfig,
   ExtendedHomeAssistant,
 } from './types.js';
 import { View } from './view.js';
-import { browseMediaSourceSchema } from './types.js';
+import { frigateBrowseMediaSourceSchema } from './types.js';
 import {
   dispatchErrorMessageEvent,
   dispatchMessageEvent,
@@ -21,11 +21,11 @@ dayjs.extend(dayjs_custom_parse_format);
 
 export class BrowseMediaUtil {
   /**
-   * Return the Frigate event_id given a BrowseMediaSource object.
+   * Return the Frigate event_id given a FrigateBrowseMediaSource object.
    * @param media The event to extract the id from.
    * @returns The `event_id` or `null` if not successfully parsed.
    */
-  static extractEventID(media: BrowseMediaSource): string | null {
+  static extractEventID(media: FrigateBrowseMediaSource): string | null {
     const result = media.media_content_id.match(
       /^media-source:\/\/frigate\/.*\/(?<id>[.0-9]+-[a-zA-Z0-9]+)$/,
     );
@@ -33,11 +33,11 @@ export class BrowseMediaUtil {
   }
 
   /**
-   * Return the event start time given a BrowseMediaSource object.
+   * Return the event start time given a FrigateBrowseMediaSource object.
    * @param browseMedia The media object to extract the start time from.
    * @returns The start time in unix/epoch time, or null if it cannot be determined.
    */
-  static extractEventStartTime(browseMedia: BrowseMediaSource): number | null {
+  static extractEventStartTime(browseMedia: FrigateBrowseMediaSource): number | null {
     // Example: 2021-08-27 20:57:22 [10s, Person 76%]
     const result = browseMedia.title.match(/^(?<iso_datetime>.+) \[/);
     if (result && result.groups) {
@@ -53,21 +53,23 @@ export class BrowseMediaUtil {
   }
 
   /**
-   * Determine if a BrowseMediaSource object is truly a media item (vs a folder).
+   * Determine if a FrigateBrowseMediaSource object is truly a media item (vs a folder).
    * @param media The media object.
    * @returns `true` if it's truly a media item, `false` otherwise.
    */
-  static isTrueMedia(media: BrowseMediaSource): boolean {
+  static isTrueMedia(media: FrigateBrowseMediaSource): boolean {
     return !media.can_expand;
   }
 
   /**
-   * From a BrowseMediaSource item extract the first true media item from the
+   * From a FrigateBrowseMediaSource item extract the first true media item from the
    * children (i.e. a clip/snapshot, not a folder).
    * @param media The media object with children.
    * @returns The first true media item found.
    */
-  static getFirstTrueMediaChildIndex(media: BrowseMediaSource | null): number | null {
+  static getFirstTrueMediaChildIndex(
+    media: FrigateBrowseMediaSource | null,
+  ): number | null {
     if (!media || !media.children) {
       return null;
     }
@@ -79,17 +81,17 @@ export class BrowseMediaUtil {
    * Browse Frigate media with a media content id. May throw.
    * @param hass The HomeAssistant object.
    * @param media_content_id The media content id to browse.
-   * @returns A BrowseMediaSource object or null on malformed.
+   * @returns A FrigateBrowseMediaSource object or null on malformed.
    */
   static async browseMedia(
     hass: HomeAssistant & ExtendedHomeAssistant,
     media_content_id: string,
-  ): Promise<BrowseMediaSource> {
+  ): Promise<FrigateBrowseMediaSource> {
     const request = {
       type: 'media_source/browse_media',
       media_content_id: media_content_id,
     };
-    return homeAssistantWSRequest(hass, browseMediaSourceSchema, request);
+    return homeAssistantWSRequest(hass, frigateBrowseMediaSourceSchema, request);
   }
 
   // Browse Frigate media with query parameters.
@@ -98,12 +100,12 @@ export class BrowseMediaUtil {
    * Browse Frigate media with a media query. May throw.
    * @param hass The HomeAssistant object.
    * @param params The search parameters to use to search for media.
-   * @returns A BrowseMediaSource object or null on malformed.
+   * @returns A FrigateBrowseMediaSource object or null on malformed.
    */
   static async browseMediaQuery(
     hass: HomeAssistant & ExtendedHomeAssistant,
     params: BrowseMediaQueryParameters,
-  ): Promise<BrowseMediaSource> {
+  ): Promise<FrigateBrowseMediaSource> {
     return this.browseMedia(
       hass,
       // Defined in:
@@ -188,7 +190,7 @@ export class BrowseMediaUtil {
     view: Readonly<View>,
     browseMediaQueryParameters: BrowseMediaQueryParameters,
   ): Promise<void> {
-    let parent: BrowseMediaSource | null;
+    let parent: FrigateBrowseMediaSource | null;
     try {
       parent = await BrowseMediaUtil.browseMediaQuery(hass, browseMediaQueryParameters);
     } catch (e) {
@@ -216,21 +218,21 @@ export class BrowseMediaUtil {
   }
 
   /**
-   * Fetch the media of a child BrowseMediaSource object and dispatch a change
+   * Fetch the media of a child FrigateBrowseMediaSource object and dispatch a change
    * view event to reflect the results.
    * @param node The HTMLElement to dispatch events from.
    * @param hass The Home Assistant object.
    * @param view The current view to evolve.
-   * @param child The BrowseMediaSource child to query for.
+   * @param child The FrigateBrowseMediaSource child to query for.
    * @returns
    */
   static async fetchChildMediaAndDispatchViewChange(
     node: HTMLElement,
     hass: HomeAssistant & ExtendedHomeAssistant,
     view: Readonly<View>,
-    child: Readonly<BrowseMediaSource>,
+    child: Readonly<FrigateBrowseMediaSource>,
   ): Promise<void> {
-    let parent: BrowseMediaSource;
+    let parent: FrigateBrowseMediaSource;
     try {
       parent = await BrowseMediaUtil.browseMedia(hass, child.media_content_id);
     } catch (e) {

src/card.ts

@@ -64,6 +64,7 @@ import './components/menu.js';
 import './components/message.js';
 import './components/viewer.js';
 import './components/thumbnail-carousel.js';
+import './components/timeline.js';
 import './patches/ha-camera-stream.js';
 import './patches/ha-hls-player.js';
 import './patches/ha-web-rtc-player.ts';
@@ -1260,6 +1261,14 @@ export class FrigateCard extends LitElement {
           >
           </frigate-card-viewer>`
         : ``}
+      ${!this._message && this._view.is('timeline')
+        ? html` <frigate-card-timeline
+            .hass=${this._hass}
+            .view=${this._view}
+            .cameraConfig=${cameraConfig}
+          >
+          </frigate-card-timeline>`
+        : ``}
       ${
         // Note: Subtle difference in condition below vs the other views in order
         // to always render the live view for live.preload mode.

src/components/live.ts

@@ -7,7 +7,7 @@ import {
   PropertyValues,
 } from 'lit';
 import {
-  BrowseMediaSource,
+  FrigateBrowseMediaSource,
   ExtendedHomeAssistant,
   CameraConfig,
   JSMPEGConfig,
@@ -140,7 +140,7 @@ export class FrigateCardLive extends LitElement {
       if (!browseMediaParams) {
         return;
       }
-      let parent: BrowseMediaSource | null;
+      let parent: FrigateBrowseMediaSource | null;
       try {
         parent = await BrowseMediaUtil.browseMediaQuery(this.hass, browseMediaParams);
       } catch (e) {

src/components/thumbnail-carousel.ts

@@ -3,7 +3,7 @@ import { CSSResultGroup, TemplateResult, html, unsafeCSS } from 'lit';
 import { EmblaOptionsType } from 'embla-carousel';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { BrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
+import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
 import { FrigateCardCarousel } from './carousel.js';
 import { dispatchFrigateCardEvent, stopEventFromActivatingCardWideActions } from '../common.js';
 
@@ -11,14 +11,14 @@ import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
 
 export interface ThumbnailCarouselTap {
   slideIndex: number;
-  target: BrowseMediaSource;
+  target: FrigateBrowseMediaSource;
   childIndex: number;
 }
 
 @customElement('frigate-card-thumbnail-carousel')
 export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
   @property({ attribute: false })
-  protected target?: BrowseMediaSource;
+  protected target?: FrigateBrowseMediaSource;
 
   protected _tapSelected?;
 
@@ -96,7 +96,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
    * @returns A template or void if the item could not be rendered.
    */
   protected _renderThumbnail(
-    parent: BrowseMediaSource,
+    parent: FrigateBrowseMediaSource,
     childIndex: number,
     slideIndex: number,
   ): TemplateResult | void {

src/components/timeline.ts

@@ -0,0 +1,112 @@
+import {
+  CSSResultGroup,
+  LitElement,
+  TemplateResult,
+  html,
+  unsafeCSS,
+  PropertyValues,
+} from 'lit';
+import { DataSet } from 'vis-data/esnext';
+import { HomeAssistant } from 'custom-card-helpers';
+import { Timeline } from 'vis-timeline/esnext';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, ref, Ref } from 'lit/directives/ref';
+
+import { BrowseMediaUtil } from '../browse-media-util';
+import { CameraConfig, ExtendedHomeAssistant } from '../types';
+import { View } from '../view';
+import { renderProgressIndicator } from './message';
+
+import timelineStyle from '../scss/timeline.scss';
+
+interface FrigateCardTimelineData {
+  id: string;
+  content: string;
+  start: number;
+}
+
+@customElement('frigate-card-timeline')
+export class FrigateCardTimeline extends LitElement {
+  @property({ attribute: false })
+  protected hass?: HomeAssistant & ExtendedHomeAssistant;
+
+  @property({ attribute: false })
+  protected view?: Readonly<View>;
+
+  @property({ attribute: false })
+  protected cameraConfig?: CameraConfig;
+
+  protected _timelineRef: Ref<HTMLElement> = createRef();
+  protected _timeline?: Timeline;
+
+  /**
+   * Master render method.
+   * @returns A rendered template.
+   */
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.view || !this.cameraConfig) {
+      return;
+    }
+
+    if (!this.view.target) {
+      const browseMediaQueryParameters =
+        BrowseMediaUtil.getBrowseMediaQueryParametersOrDispatchError(
+          this,
+          this.view,
+          this.cameraConfig,
+        );
+      if (!browseMediaQueryParameters) {
+        return;
+      }
+
+      BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange(
+        this,
+        this.hass,
+        this.view,
+        browseMediaQueryParameters,
+      );
+      return renderProgressIndicator();
+    }
+    return html` <div id="timeline" ${ref(this._timelineRef)}></div>`;
+  }
+
+  protected _buildDataset(): DataSet<FrigateCardTimelineData> {
+    const items: FrigateCardTimelineData[] = [];
+
+    this.view?.target?.children?.forEach((child) => {
+      if (child.frigate) {
+        const item = {
+          id: child.media_content_id,
+          content: child.frigate.event.id,
+          start: child.frigate.event.start_time * 1000,
+        };
+        if (child.frigate.event.end_time) {
+          //item['end'] = child.frigate.event.end_time * 1000;
+        }
+        items.push(item);
+      }
+    });
+    return new DataSet(items);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected updated(_changedProperties: PropertyValues): void {
+    // Configuration for the Timeline
+    const options = {
+      minHeight: '300px',
+    };
+
+    // Create a Timeline
+    if (this._timelineRef.value && !this._timeline) {
+      this._timeline = new Timeline(
+        this._timelineRef.value,
+        this._buildDataset(),
+        options,
+      );
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(timelineStyle);
+  }
+}

src/components/viewer.ts

@@ -18,7 +18,7 @@ import { AutoMediaPlugin } from './embla-plugins/automedia.js';
 import type {
   BrowseMediaNeighbors,
   BrowseMediaQueryParameters,
-  BrowseMediaSource,
+  FrigateBrowseMediaSource,
   CameraConfig,
   ExtendedHomeAssistant,
   MediaShowInfo,
@@ -210,14 +210,17 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
   @property({ attribute: false })
   protected resolvedMediaCache?: ResolvedMediaCache;
 
-  // Mapping of slide # to BrowseMediaSource child #.
+  // Mapping of slide # to FrigateBrowseMediaSource child #.
   // (Folders are not media items that can be rendered).
   protected _slideToChild: Record<number, number> = {};
 
   // A task to resolve target media if lazy loading is disabled.
-  protected _mediaResolutionTask = new Task<[BrowseMediaSource | undefined], void>(
+  protected _mediaResolutionTask = new Task<
+    [FrigateBrowseMediaSource | undefined],
+    void
+  >(
     this,
-    async ([target]: (BrowseMediaSource | undefined)[]): Promise<void> => {
+    async ([target]: (FrigateBrowseMediaSource | undefined)[]): Promise<void> => {
       for (
         let i = 0;
         !this.viewerConfig?.lazy_load &&
@@ -398,7 +401,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
    * @returns The view that would show the matching clip.
    */
   protected async _findRelatedClipView(
-    snapshot: BrowseMediaSource,
+    snapshot: FrigateBrowseMediaSource,
   ): Promise<View | null> {
     if (
       !this.hass ||
@@ -445,7 +448,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
       return null;
     }
 
-    let clips: BrowseMediaSource | null;
+    let clips: FrigateBrowseMediaSource | null;
 
     try {
       clips = await BrowseMediaUtil.browseMediaQuery(this.hass, {
@@ -689,7 +692,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
   }
 
   protected _renderMediaItem(
-    mediaToRender: BrowseMediaSource,
+    mediaToRender: FrigateBrowseMediaSource,
     slideIndex: number,
   ): TemplateResult | void {
     // Skip folders as they cannot be rendered by this viewer.

src/resolved-media.ts

@@ -1,8 +1,8 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import { homeAssistantWSRequest } from './common.js';
 import {
-  BrowseMediaSource,
   ExtendedHomeAssistant,
+  FrigateBrowseMediaSource,
   ResolvedMedia,
   resolvedMediaSchema,
 } from './types.js';
@@ -39,7 +39,7 @@ export class ResolvedMediaCache {
 export class ResolvedMediaUtil {
   static async resolveMedia(
     hass: HomeAssistant & ExtendedHomeAssistant,
-    mediaSource?: BrowseMediaSource,
+    mediaSource?: FrigateBrowseMediaSource,
     cache?: ResolvedMediaCache,
   ): Promise<ResolvedMedia | null> {
     if (!mediaSource) {

src/scss/timeline.scss

@@ -0,0 +1,7 @@
+@use "vis-timeline/dist/vis-timeline-graph2d.css";
+
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

src/types.ts

@@ -30,8 +30,9 @@ const FRIGATE_CARD_VIEWS_USER_SPECIFIED = [
   'clip',     // Most recent clip.
   'clips',    // Clips gallery.
   'snapshot', // Most recent snapshot.
-  'snapshots', // Snapshots gallery.
+  'snapshots',// Snapshots gallery.
   'image',    // Static image.
+  'timeline', // Event timeline.
 ] as const;
 
 export type FrigateCardView = typeof FRIGATE_CARD_VIEWS_USER_SPECIFIED[number];
@@ -409,11 +410,7 @@ const viewConfigSchema = z
  * Image view configuration section.
  */
 
-export const IMAGE_MODES = [
+export const IMAGE_MODES = ['screensaver', 'camera', 'url'] as const;
-  'screensaver',
-  'camera',
-  'url',
-] as const;
 const imageConfigDefault = {
   mode: 'url' as const,
   refresh_seconds: 0,
@@ -575,7 +572,9 @@ const liveConfigSchema = liveOverridableConfigSchema
     lazy_load: z.boolean().default(liveConfigDefault.lazy_load),
     lazy_unload: z.boolean().default(liveConfigDefault.lazy_unload),
     draggable: z.boolean().default(liveConfigDefault.draggable),
-    transition_effect: transitionEffectConfigSchema.default(liveConfigDefault.transition_effect),
+    transition_effect: transitionEffectConfigSchema.default(
+      liveConfigDefault.transition_effect,
+    ),
   })
   .default(liveConfigDefault);
 export type LiveConfig = z.infer<typeof liveConfigSchema>;
@@ -660,7 +659,9 @@ const viewerConfigSchema = z
     auto_unmute: z.boolean().default(viewerConfigDefault.auto_unmute),
     lazy_load: z.boolean().default(viewerConfigDefault.lazy_load),
     draggable: z.boolean().default(viewerConfigDefault.draggable),
-    transition_effect: transitionEffectConfigSchema.default(viewerConfigDefault.transition_effect),
+    transition_effect: transitionEffectConfigSchema.default(
+      viewerConfigDefault.transition_effect,
+    ),
     controls: z
       .object({
         next_previous: viewerNextPreviousControlConfigSchema.default(
@@ -802,7 +803,7 @@ export const frigateCardConfigDefaults = {
   image: imageConfigDefault,
 };
 
-const menuButtonSchema = z.discriminatedUnion("type", [
+const menuButtonSchema = z.discriminatedUnion('type', [
   menuIconSchema,
   menuStateIconSchema,
   menuSubmenuSchema,
@@ -823,10 +824,10 @@ export interface BrowseMediaQueryParameters {
 }
 
 export interface BrowseMediaNeighbors {
-  previous: BrowseMediaSource | null;
+  previous: FrigateBrowseMediaSource | null;
   previousIndex: number | null;
 
-  next: BrowseMediaSource | null;
+  next: FrigateBrowseMediaSource | null;
   nextIndex: number | null;
 }
 
@@ -867,7 +868,7 @@ export interface FrigateCardMediaPlayer {
 // See: https://github.com/colinhacks/zod#recursive-types
 //
 // Server side data-type defined here: https://github.com/home-assistant/core/blob/dev/homeassistant/components/media_player/browse_media.py#L46
-export interface BrowseMediaSource {
+interface BrowseMediaSource {
   title: string;
   media_class: string;
   media_content_type: string;
@@ -879,7 +880,26 @@ export interface BrowseMediaSource {
   children?: BrowseMediaSource[] | null;
 }
 
-export const browseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(() =>
+export interface FrigateBrowseMediaSource extends BrowseMediaSource {
+  children?: FrigateBrowseMediaSource[] | null;
+  frigate?: {
+    event: {
+      camera: string;
+      end_time: number;
+      false_positive: boolean;
+      has_clip: boolean;
+      has_snapshot: boolean;
+      id: string;
+      label: string;
+      start_time: number;
+      top_score: number;
+      zones: string[];
+    };
+  };
+}
+
+export const frigateBrowseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(
+  () =>
     z.object({
       title: z.string(),
       media_class: z.string(),
@@ -889,7 +909,21 @@ export const browseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(()
       can_expand: z.boolean(),
       children_media_class: z.string().nullable().optional(),
       thumbnail: z.string().nullable(),
-    children: z.array(browseMediaSourceSchema).nullable().optional(),
+      children: z.array(frigateBrowseMediaSourceSchema).nullable().optional(),
+      frigate: z.object({
+        event: z.object({
+          camera: z.string(),
+          end_time: z.number().nullable(),
+          false_positive: z.boolean(),
+          has_clip: z.boolean(),
+          has_snapshot: z.boolean(),
+          id: z.string(),
+          label: z.string(),
+          start_time: z.number(),
+          top_score: z.number(),
+          zones: z.string().array(),
+        }),
+      }).optional(),
     }),
 );
 

src/view.ts

@@ -1,10 +1,10 @@
-import type { BrowseMediaSource, FrigateCardView } from './types.js';
+import type { FrigateBrowseMediaSource, FrigateCardView } from './types.js';
 import { dispatchFrigateCardEvent } from './common.js';
 
 export interface ViewEvolveParameters {
   view?: FrigateCardView;
   camera?: string;
-  target?: BrowseMediaSource;
+  target?: FrigateBrowseMediaSource;
   childIndex?: number;
   previous?: View;
 }
@@ -17,7 +17,7 @@ export interface ViewParameters extends ViewEvolveParameters {
 export class View {
   view: FrigateCardView;
   camera: string;
-  target?: BrowseMediaSource;
+  target?: FrigateBrowseMediaSource;
   childIndex?: number;
   previous?: View;
 
@@ -91,7 +91,8 @@ export class View {
    * Determine if a view is related to a clip or clips.
    */
   public isClipRelatedView(): boolean {
-    return ['clip', 'clips'].includes(this.view);
+    // TODO HACK HACK HACK 
+    return ['clip', 'clips', 'timeline'].includes(this.view);
   }
 
   /**
@@ -104,7 +105,7 @@ export class View {
   /**
    *  Get the media item that should be played.
    **/
-  get media(): BrowseMediaSource | undefined {
+  get media(): FrigateBrowseMediaSource | undefined {
     if (this.target) {
       if (this.target.children && this.childIndex !== undefined) {
         return this.target.children[this.childIndex];