Fetch timeline events from events endpoint not media browser.

src/components/live.ts

@@ -216,6 +216,7 @@ export class FrigateCardLive extends LitElement {
       html`<frigate-card-surround
         .hass=${this.hass}
         .view=${this.view}
+        .fetch=${true}
         .thumbnailConfig=${config.controls.thumbnails}
         .timelineConfig=${config.controls.timeline}
         .browseMediaParams=${browseMediaParams ?? undefined}

src/components/surround.ts

@@ -32,7 +32,7 @@ import './surround-basic.js';
 import './timeline-core.js';
 
 interface ThumbnailViewContext {
-  // Whetherr or not to fetch thumbnails.
+  // Whether or not to fetch thumbnails.
   fetch?: boolean;
 }
 
@@ -59,6 +59,9 @@ export class FrigateCardSurround extends LitElement {
   @property({ attribute: false })
   public inBackground?: boolean;
 
+  @property({ attribute: false })
+  public fetch = false;
+
   @property({ attribute: false, hasChanged: contentsChanged })
   public browseMediaParams?: BrowseMediaQueryParameters | BrowseMediaQueryParameters[];
 
@@ -76,12 +79,13 @@ export class FrigateCardSurround extends LitElement {
    */
   protected async _fetchMedia(): Promise<void> {
     if (
+      !this.fetch ||
       this.inBackground ||
       !this.hass ||
       !this.view ||
+      this.view.target ||      
       !this.thumbnailConfig ||
       this.thumbnailConfig.mode === 'none' ||
-      this.view.target ||
       !this.browseMediaParams ||
       !(this.view.context?.thumbnails?.fetch ?? true)
     ) {

src/components/thumbnail.ts

@@ -11,7 +11,7 @@ import thumbnailStyle from '../scss/thumbnail.scss';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { errorToConsole, prettifyTitle } from '../utils/basic.js';
 import { retainEvent } from '../utils/frigate.js';
-import { getEventDurationString } from '../utils/ha/browse-media.js';
+import { getEventDurationString } from '../utils/frigate.js';
 import { renderTask } from '../utils/task.js';
 import { createFetchThumbnailTask } from '../utils/thumbnail.js';
 import { View } from '../view.js';

src/components/timeline-core.ts

@@ -47,16 +47,19 @@ import { stopEventFromActivatingCardWideActions } from '../utils/action';
 import {
   contentsChanged,
   dispatchFrigateCardEvent,
+  formatDateAndTime,
   isHoverableDevice,
   prettifyTitle,
 } from '../utils/basic';
 import { getAllDependentCameras, getCameraTitle } from '../utils/camera.js';
-
 import {
-  createEventParentForChildren,
-  createVideoChild,
-  generateRecordingIdentifier,
-} from '../utils/ha/browse-media';
+  getEventMediaContentID,
+  getEventThumbnailURL,
+  getEventTitle,
+  getRecordingMediaContentID,
+} from '../utils/frigate';
+
+import { createEventParentForChildren, createChild } from '../utils/ha/browse-media';
 import {
   FrigateCardTimelineItem,
   RecordingSegmentsItem,
@@ -216,16 +219,17 @@ export class FrigateCardTimelineCore extends LitElement {
    * @returns The tooltip as a string to render.
    */
   protected _getTooltip(item: TimelineItem): string {
-    const source = (<FrigateCardTimelineItem>item).source;
-    if (!this._isHoverableDevice || !source) {
+    const event = (<FrigateCardTimelineItem>item).event;
+    const clientId = item.group
+      ? this.cameras?.get(String(item.group))?.frigate.client_id
+      : null;
+    if (!this._isHoverableDevice || !event || !clientId) {
       // Don't display tooltips on touch devices, they just get in the way of
       // the drawer.
       return '';
     }
 
-    const eventAttr = source.frigate?.event
-      ? `event='${JSON.stringify(source.frigate.event)}'`
-      : '';
+    const eventAttr = `event='${JSON.stringify(event)}'`;
     const detailsAttr = this.thumbnailDetails ? 'details' : '';
 
     // Cannot use Lit data-bindings as visjs requires a string for tooltips.
@@ -233,10 +237,10 @@ export class FrigateCardTimelineCore extends LitElement {
     // whitelist in `_getOptions()` .
     return `
       <frigate-card-timeline-thumbnail
-        thumbnail="${source.thumbnail}"
+        thumbnail="${getEventThumbnailURL(clientId, event)}"
         ${detailsAttr}
         ${eventAttr}
-        label="${source.title}"
+        label="${getEventTitle(event)}"
       >
       </frigate-card-timeline-thumbnail>`;
   }
@@ -324,12 +328,9 @@ export class FrigateCardTimelineCore extends LitElement {
           // hours, otherwise only show the matching hour from all cameras.
           if (!onlyShowMatchingHour || isMatchingHour) {
             children.push(
-              createVideoChild(
-                `${prettifyTitle(config.frigate.camera_name)} ${format(
-                  hour,
-                  'yyyy-MM-dd HH:mm',
-                )}`,
-                generateRecordingIdentifier({
+              createChild(
+                `${prettifyTitle(config.frigate.camera_name)} ${formatDateAndTime(hour)}`,
+                getRecordingMediaContentID({
                   clientId: config.frigate.client_id,
                   year: dayData.day.getFullYear(),
                   month: dayData.day.getMonth() + 1,
@@ -812,9 +813,40 @@ export class FrigateCardTimelineCore extends LitElement {
     let childIndex = -1;
     const children: FrigateBrowseMediaSource[] = [];
     this._dataview?.get({ order: sortTimelineItemsYoungestToOldest }).forEach((item) => {
-      if (item.event && item.source) {
-        children.push(item.source);
-        if (selected.includes(item.event.id)) {
+      const cameraID = item.group ? String(item.group) : null;
+      const cameraConfig = cameraID ? this.cameras?.get(cameraID) : null;
+      const event = item.event;
+      const media =
+        event?.has_clip && this.timelineConfig?.media !== 'snapshots'
+          ? 'clips'
+          : event?.has_snapshot
+          ? 'snapshots'
+          : null;
+
+      if (
+        cameraID &&
+        cameraConfig &&
+        event &&
+        media &&
+        cameraConfig.frigate.camera_name
+      ) {
+        children.push(
+          createChild(
+            getEventTitle(event),
+            getEventMediaContentID(
+              cameraConfig.frigate.client_id,
+              cameraConfig.frigate.camera_name,
+              event.id,
+              media,
+            ),
+            {
+              thumbnail: getEventThumbnailURL(cameraConfig.frigate.client_id, event),
+              event: event,
+              cameraID: cameraID,
+            },
+          ),
+        );
+        if (selected.includes(event.id)) {
           childIndex = children.length - 1;
         }
       }
@@ -1190,6 +1222,7 @@ export class FrigateCardTimelineCore extends LitElement {
       this.timelineDataManager &&
       this._refTimeline.value &&
       options &&
+      this.timelineConfig &&
       (changedProperties.has('timelineConfig') ||
         (this.mini &&
           changedProperties.has('view') &&
@@ -1212,7 +1245,8 @@ export class FrigateCardTimelineCore extends LitElement {
 
       this._dataview = this.timelineDataManager.createDataView(
         this._getTimelineCameraIDs(),
-        !!this.timelineConfig?.show_recordings,
+        !!this.timelineConfig.show_recordings,
+        this.timelineConfig.media,
       );
 
       if (this.mini && groups.length === 1) {

src/components/timeline.ts

@@ -1,7 +1,6 @@
 // TODO: When a media viewer is first loaded the selected child won't work (because the underlying carousel has not yet rendered)
 
 // TODO: delete segments if not in summary? is this actually necessary? could it create gaps in data? better off stopping access via summary?
-// TODO: support filtering created dataviews by recordings or mediatype (so storage )
 // TODO: Make minitimeline configurable in the editor
 
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
@@ -49,6 +48,7 @@ export class FrigateCardTimeline extends LitElement {
       .view=${this.view}
       .thumbnailConfig=${this.timelineConfig.controls.thumbnails}
       .cameras=${this.cameras}
+      .fetch=${false}
     >
       <frigate-card-timeline-core
         .hass=${this.hass}

src/components/viewer.ts

@@ -137,6 +137,7 @@ export class FrigateCardViewer extends LitElement {
     return html` <frigate-card-surround
       .hass=${this.hass}
       .view=${this.view}
+      .fetch=${false}
       .thumbnailConfig=${this.viewerConfig.controls.thumbnails}
       .timelineConfig=${this.viewerConfig.controls.timeline}
       .timelineDataManager=${this.timelineDataManager}