Improve drawer controls.

2022-03-20 18:07:48 -07:00
parent 304abcd82b
commit 50596cb68a
7 changed files with 227 additions and 78 deletions
@@ -18,6 +18,9 @@ export class FrigateCardDrawer extends LitElement {
  @property({ attribute: true, reflect: true })
  public location: 'left' | 'right' = 'left';

+  @property({ attribute: true, reflect: true, type: Boolean })
+  public control = true;
+
  /**
   * Set the timeline configuration.
   */
@@ -52,9 +55,27 @@ export class FrigateCardDrawer extends LitElement {
  }

  protected render(): TemplateResult {
-    return html` <side-drawer location="${this.location}" ${ref(this._drawerRef)}>
-      <slot></slot>
-    </side-drawer>`;
+    return html`
+      <side-drawer location="${this.location}" ${ref(this._drawerRef)}>
+        ${this.control
+          ? html`
+              <div
+                class="control-surround"
+                @click=${() => {
+                  this.open = !this.open;
+                }}
+              >
+                <ha-icon
+                  class="control"
+                  icon="${this.open ? 'mdi:menu' : 'mdi:menu-open'}"
+                >
+                </ha-icon>
+              </div>
+            `
+          : ''}
+        <slot></slot>
+      </side-drawer>
+    `;
  }

  static get styles(): CSSResultGroup {
@@ -1,11 +1,13 @@
 import { BrowseMediaUtil } from '../browse-media-util.js';
 import { CSSResultGroup, TemplateResult, html, unsafeCSS, PropertyValues } from 'lit';
 import { EmblaOptionsType } from 'embla-carousel';
+import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';

 import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
 import { FrigateCardCarousel } from './carousel.js';
 import {
+  contentsChanged,
  dispatchFrigateCardEvent,
  stopEventFromActivatingCardWideActions,
 } from '../common.js';
@@ -20,10 +22,11 @@ export interface ThumbnailCarouselTap {

@customElement('frigate-card-thumbnail-carousel')
 export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
-  @property({ attribute: false })
+  @property({ attribute: false, hasChanged: contentsChanged })
  public target?: FrigateBrowseMediaSource;

-  protected _tapSelected?;
+  @property({ attribute: false, reflect: true })
+  public selected?: number | null;

  @property({ attribute: false })
  set config(config: ThumbnailsControlConfig | undefined) {
@@ -55,25 +58,6 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
    };
  }

-  /**
-   * Scroll to a particular slide.
-   * @param index Slide number.
-   */
-  carouselScrollTo(index: number): void {
-    if (!this._carousel) {
-      return;
-    }
-
-    if (this._tapSelected !== undefined) {
-      this._carousel.slideNodes()[this._tapSelected].classList.remove('slide-selected');
-    }
-
-    super.carouselScrollTo(index);
-
-    this._carousel.slideNodes()[index].classList.add('slide-selected');
-    this._tapSelected = index;
-  }
-
  /**
   * Get slides to include in the render.
   * @returns The slides to include in the render.
@@ -98,10 +82,20 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
   * @param changedProperties The properties that were changed in this render.
   */
  updated(changedProperties: PropertyValues): void {
-    if (this._carousel && changedProperties.has('target')) {
+    if (changedProperties.has('target')) {
      this._destroyCarousel();
    }
    super.updated(changedProperties);
+
+    if (changedProperties.has('selected')) {
+      this.updateComplete.then(() => {
+        if (this._carousel) {
+          if (this.selected !== undefined && this.selected !== null) {
+            this.carouselScrollTo(this.selected);
+          }
+        }
+      });
+    }
  }

  /**
@@ -123,8 +117,13 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
      return;
    }

+    const classes = {
+      'embla__slide': true,
+      'slide-selected': this.selected == childIndex,
+    };
+
    return html`<div
-      class="embla__slide"
+      class="${classMap(classes)}"
      @click=${(ev) => {
        if (this._carousel && this._carousel.clickAllowed()) {
          dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
@@ -14,6 +14,7 @@ import {
  TimelineOptions,
  TimelineOptionsCluster,
 } from 'vis-timeline/esnext';
+import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';

@@ -22,12 +23,18 @@ import {
  CameraConfig,
  ExtendedHomeAssistant,
  FrigateBrowseMediaSource,
+  ThumbnailsControlConfig,
  MEDIA_CLASS_PLAYLIST,
  MEDIA_TYPE_VIDEO,
  MEDIA_CLASS_VIDEO,
  TimelineConfig,
  frigateCardConfigDefaults,
 } from '../types';
+import { FrigateCardDrawer } from './drawer';
+import {
+  FrigateCardThumbnailCarousel,
+  ThumbnailCarouselTap,
+} from './thumbnail-carousel';
 import { View } from '../view';
 import {
  contentsChanged,
@@ -39,6 +46,8 @@ import {
 import timelineStyle from '../scss/timeline.scss';
 import timelineEventStyle from '../scss/timeline-event.scss';

+import './drawer.js';
+
 interface FrigateCardGroupData {
  id: string;
  content: string;
@@ -217,7 +226,9 @@ export class FrigateCardTimeline extends LitElement {
  @state({ hasChanged: contentsChanged })
  protected _timelineOptions?: TimelineOptions;

+  protected _drawerRef: Ref<FrigateCardDrawer> = createRef();
  protected _timelineRef: Ref<HTMLElement> = createRef();
+  protected _thumbnailsRef: Ref<FrigateCardThumbnailCarousel> = createRef();
  protected _timeline?: Timeline;

  protected _events = new TimelineEventManager({
@@ -251,7 +262,41 @@ export class FrigateCardTimeline extends LitElement {
    if (!this.hass || !this.view) {
      return;
    }
-    return html` <div class="timeline" ${ref(this._timelineRef)}></div>`;
+
+    const config: ThumbnailsControlConfig = {
+      mode: 'above',
+    };
+
+    // TODO move to configuration later.
+    const drawerLocation: "left" | "right" = "left" as const;
+
+    const timelineClasses = {
+      "timeline": true,
+      "left-margin": drawerLocation == "left",
+      //"right-margin": drawerLocation == "right",
+    }
+
+    return html` <frigate-card-drawer location="${drawerLocation}" ${ref(this._drawerRef)}>
+        <frigate-card-thumbnail-carousel
+          ${ref(this._thumbnailsRef)}
+          direction="vertical"
+          .config=${config}
+          .highlightSelected=${true}
+          @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
+            if (ev.detail.target && ev.detail.childIndex) {
+              this.view
+                ?.evolve({
+                  target: ev.detail.target,
+                  childIndex: ev.detail.childIndex,
+                  view: 'clip',
+                })
+                .dispatchChangeEvent(this);
+            }
+          }}
+        >
+        </frigate-card-thumbnail-carousel>
+      </frigate-card-drawer>
+      <div class="${classMap(timelineClasses)}" ${ref(this._timelineRef)}></div>`;
  }

  /**
@@ -290,7 +335,9 @@ export class FrigateCardTimeline extends LitElement {
        this.cameras,
        properties.start,
        properties.end,
-      );
+      ).then(() => {
+        this._updateThumbnails();
+      })
    }
  }

@@ -299,11 +346,21 @@ export class FrigateCardTimeline extends LitElement {
   * @param data The data about the selection.
   * @returns
   */
-  protected _timelineSelectHandler(data: { items: string[]; event: Event }): void {
-    if (data.items.length <= 0 || !this._timeline) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _timelineSelectHandler(_data: { items: string[]; event: Event }): void {
+    this._updateThumbnails();
+    if (this._drawerRef.value) {
+      this._drawerRef.value.open = true;
+    }
+  }
+
+  protected _updateThumbnails(): void {
+    if (!this._timeline) {
      return;
    }

+    const selected = this._timeline?.getSelection();
+
    const timelineWindow = this._timeline.getWindow();
    const start = timelineWindow.start.getTime();
    const end = timelineWindow.end.getTime();
@@ -316,12 +373,17 @@ export class FrigateCardTimeline extends LitElement {
    this._events.dataset
      .get({
        filter: (item) =>
+          // Start within the window.
          (item.start >= start && item.start <= end) ||
+          // End within the window.
+          (!!item.end && item.end >= start && item.end <= end) ||
+          // Item lifetime extends past the window
          (item.start <= start && !!item.end && item.end >= end),
+        order: 'start',
      })
      .forEach((item) => {
        if (item.source.can_play) {
-          if ((item.id = data.items[0])) {
+          if (childIndex === null && selected.includes(item.id)) {
            childIndex = children.length;
          }
          children.push(item.source);
@@ -332,23 +394,24 @@ export class FrigateCardTimeline extends LitElement {
      return;
    }

-    this.view
-      ?.evolve({
-        target: {
-          title: `Timeline ${start} - ${end}`,
-          media_class: MEDIA_CLASS_PLAYLIST,
-          media_content_type: MEDIA_TYPE_VIDEO,
-          media_content_id: '',
-          can_play: false,
-          can_expand: true,
-          children_media_class: MEDIA_CLASS_VIDEO,
-          thumbnail: null,
-          children: children,
-        },
-        childIndex: childIndex ?? 0,
-        view: 'clip',
-      })
-      .dispatchChangeEvent(this);
+    const target = {
+      title: `Timeline ${start} - ${end}`,
+      media_class: MEDIA_CLASS_PLAYLIST,
+      media_content_type: MEDIA_TYPE_VIDEO,
+      media_content_id: '',
+      can_play: false,
+      can_expand: true,
+      children_media_class: MEDIA_CLASS_VIDEO,
+      thumbnail: null,
+      children: children,
+    };
+
+    if (this._drawerRef.value) {
+      if (this._thumbnailsRef.value) {
+        this._thumbnailsRef.value.target = target;
+        this._thumbnailsRef.value.selected = childIndex ?? undefined;
+      }
+    }
  }

  /**
@@ -384,6 +447,7 @@ export class FrigateCardTimeline extends LitElement {
      cluster:
        thumbnailConfig.clustering_threshold > 0
          ? {
+              fitOnDoubleClick: true,
              showStipes: true,
              // It would be better to automatically calculate `maxItems` from the
              // rendered height of the timeline (or group within the timeline) so
@@ -404,6 +468,7 @@ export class FrigateCardTimeline extends LitElement {
      },
      zoomMax: 31 * 24 * 60 * 60 * 1000,
      zoomMin: 1 * 1000,
+      selectable: true,
      start: this._getYesterday(),
      end: this._getToday(),
      groupHeightMode: 'fixed',
@@ -135,8 +135,8 @@ export class FrigateCardViewerCore extends LitElement {

  protected _syncThumbnailCarousel(): void {
    const mediaSelected = this._viewerCarouselRef.value?.carouselSelected();
-    if (mediaSelected !== undefined) {
-      this._thumbnailCarouselRef.value?.carouselScrollTo(mediaSelected);
+    if (mediaSelected !== undefined && this._thumbnailCarouselRef.value) {
+      this._thumbnailCarouselRef.value.selected = mediaSelected;
    }
  }