Initial settings for timeline.

2022-03-19 09:00:21 -07:00
parent 37467eff8c
commit b35b9d0e36
6 changed files with 155 additions and 46 deletions
@@ -8,6 +8,7 @@ import {
  CameraConfig,
  ExtendedHomeAssistant,
  GalleryConfig,
+  THUMBNAIL_WIDTH_MAX,
  frigateCardConfigDefaults,
 } from '../types.js';
 import { BrowseMediaUtil } from '../browse-media-util.js';
@@ -17,8 +18,6 @@ import { stopEventFromActivatingCardWideActions } from '../common.js';

 import galleryStyle from '../scss/gallery.scss';

-const MAX_THUMBNAIL_WIDTH = 175;
-
@customElement('frigate-card-gallery')
 export class FrigateCardGallery extends LitElement {
  @property({ attribute: false })
@@ -124,7 +123,7 @@ export class FrigateCardGalleryCore extends LitElement {
    this._columns = Math.max(
      this.galleryConfig?.min_columns ??
        frigateCardConfigDefaults.event_gallery.min_columns,
-      Math.ceil(this.clientWidth / MAX_THUMBNAIL_WIDTH),
+      Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX),
    );
  }

@@ -8,12 +8,18 @@ import {
 } from 'lit';
 import { DataSet } from 'vis-data/esnext';
 import { HomeAssistant } from 'custom-card-helpers';
-import { Timeline, TimelineOptions } from 'vis-timeline/esnext';
+import { Timeline, TimelineOptions, TimelineOptionsCluster } from 'vis-timeline/esnext';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref';

 import { BrowseMediaUtil } from '../browse-media-util';
-import { CameraConfig, ExtendedHomeAssistant, FrigateBrowseMediaSource } from '../types';
+import {
+  CameraConfig,
+  ExtendedHomeAssistant,
+  FrigateBrowseMediaSource,
+  TimelineConfig,
+  frigateCardConfigDefaults,
+} from '../types';
 import { View } from '../view';
 import { contentsChanged, dispatchFrigateCardEvent } from '../common.js';
 import { renderProgressIndicator } from './message';
@@ -38,6 +44,23 @@ export class FrigateCardTimelineEvent extends LitElement {
  @property({ attribute: true })
  protected label?: string;

+  @property({ attribute: true, type: Number })
+  protected thumbnail_size?: number;
+
+  /**
+   * Ensure there is a cached value before an update.
+   * @param _changedProps The changed properties
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected willUpdate(_changedProps: PropertyValues): void {
+    if (this.thumbnail_size !== undefined) {
+      this.style.setProperty(
+        '--frigate-card-timeline-thumbnail-size',
+        `${this.thumbnail_size}px`,
+      );
+    }
+  }
+
  protected render(): TemplateResult | void {
    if (!this.thumbnail) {
      return;
@@ -72,6 +95,17 @@ export class FrigateCardTimeline extends LitElement {
  @property({ attribute: false })
  protected cameraConfig?: CameraConfig;

+  /**
+   * Set the Home Assistant object.
+   */
+  set timelineConfig(timelineConfig: TimelineConfig) {
+    this._timelineConfig = timelineConfig;
+    this._setOptions();
+  }
+
+  @state()
+  protected _timelineConfig?: TimelineConfig;
+
  @state({ hasChanged: contentsChanged })
  protected _timelineOptions?: TimelineOptions;

@@ -79,14 +113,6 @@ export class FrigateCardTimeline extends LitElement {
  protected _timeline?: Timeline;
  protected _boundTimelineSelectHandler = this._timelineSelectHandler.bind(this);

-  protected _resizeObserver: ResizeObserver;
-
-  constructor() {
-    super();
-    this._resizeObserver = new ResizeObserver(this._setOptions.bind(this));
-    this._setOptions();
-  }
-
  /**
   * Master render method.
   * @returns A rendered template.
@@ -127,7 +153,6 @@ export class FrigateCardTimeline extends LitElement {
      'frigate-card:timeline-select',
      this._boundTimelineSelectHandler,
    );
-    this._resizeObserver.observe(this);
  }

  /**
@@ -138,7 +163,6 @@ export class FrigateCardTimeline extends LitElement {
      'frigate-card:timeline-select',
      this._boundTimelineSelectHandler,
    );
-    this._resizeObserver.disconnect();
    super.disconnectedCallback();
  }

@@ -172,6 +196,10 @@ export class FrigateCardTimeline extends LitElement {
        media_id=${source.media_content_id}
        thumbnail="${source.thumbnail}"
        label="${source.title}"
+        thumbnail_size="${
+          this._timelineConfig?.controls.thumbnails.size_pixels ??
+          frigateCardConfigDefaults.timeline.controls.thumbnails.size_pixels
+        }"
      >
      </frigate-card-timeline-event>`;
  }
@@ -204,24 +232,48 @@ export class FrigateCardTimeline extends LitElement {
   * Handle timeline resize.
   */
  protected _setOptions(): void {
+    if (!this._timelineConfig) {
+      return;
+    }
+
+    const thumbnailConfig =
+      this._timelineConfig?.controls.thumbnails ??
+      frigateCardConfigDefaults.timeline.controls.thumbnails;
+    const gap = 5;
+
    // Configuration for the Timeline, see:
    // https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
    this._timelineOptions = {
-      cluster: {
-        showStipes: true,
-        maxItems: 3,
-      },
+      cluster: thumbnailConfig.clustering_threshold > 0
+        ? {
+            showStipes: true,
+            // It would be better to automatically calculate `maxItems` from the
+            // rendered height of the timeline (or group within the timeline) so
+            // as to not waste vertical space (e.g. after the user changes to
+            // fullscreen mode). Unfortunately this is not easy to do, as we
+            // don't know the height of the timeline until after it renders --
+            // and if we adjust `maxItems` then we can get into an infinite
+            // resize loop. Adjusting the `maxItems` of a timeline, after it's
+            // created, also does not appear to work as expected.
+            maxItems: thumbnailConfig.clustering_threshold,
+          }
+        : false as TimelineOptionsCluster,
      minHeight: '100%',
      maxHeight: '100%',
      margin: {
-        item: 50,
-        axis: 75 + 10,
+        item: thumbnailConfig.size_pixels - thumbnailConfig.overlap_pixels + gap,
+        axis: thumbnailConfig.size_pixels + gap,
      },
      xss: {
        disabled: false,
        filterOptions: {
          whiteList: {
-            'frigate-card-timeline-event': ['thumbnail', 'label', 'media_id'],
+            'frigate-card-timeline-event': [
+              'thumbnail',
+              'label',
+              'media_id',
+              'thumbnail_size',
+            ],
            div: ['title'],
          },
        },
@@ -234,7 +286,9 @@ export class FrigateCardTimeline extends LitElement {
   * @param changedProps The changed properties if any.
   */
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected updated(_changedProperties: PropertyValues): void {
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
    if (this._timelineRef.value) {
      if (this._timeline) {
        this._timeline.destroy();