Update live to use the new surround.

2022-03-24 19:12:13 -07:00
parent a4fcf2513b
commit 079c7c5da0
9 changed files with 169 additions and 149 deletions
@@ -6,7 +6,7 @@ import EmblaCarousel, {
  EmblaOptionsType,
  EmblaPluginType,
 } from 'embla-carousel';
-import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures'
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';

 import { TransitionEffect } from '../types';
 import { dispatchFrigateCardEvent } from '../common';
@@ -78,11 +78,13 @@ export class FrigateCardCarousel extends LitElement {
   * @returns An EmblaOptionsType object or undefined for no options.
   */
  protected _getPlugins(): EmblaPluginType[] {
-    return [WheelGesturesPlugin({
-      // Whether the carousel is vertical or horizontal, interpret y-axis wheel
-      // gestures as scrolling for the carousel.
-      forceWheelAxis: 'y',
-    })];
+    return [
+      WheelGesturesPlugin({
+        // Whether the carousel is vertical or horizontal, interpret y-axis wheel
+        // gestures as scrolling for the carousel.
+        forceWheelAxis: 'y',
+      }),
+    ];
  }

  protected _destroyCarousel(): void {
@@ -112,9 +114,10 @@ export class FrigateCardCarousel extends LitElement {
        carouselNode,
        {
          axis: this.direction == 'horizontal' ? 'x' : 'y',
-          ...this._getOptions()
+          ...this._getOptions(),
        },
-        plugins);
+        plugins,
+      );
      this._carousel.on('init', () => dispatchFrigateCardEvent(this, 'carousel:init'));
      this._carousel.on('select', () => {
        const selected = this.carouselSelected();
@@ -120,79 +120,12 @@ export class FrigateCardLive extends LitElement {
    }
  }

-  /**
-   * Render thumbnails carousel.
-   * @returns A rendered template or void.
-   */
-  protected renderThumbnails(config: LiveConfig): TemplateResult | void {
-    if (!this.liveConfig || !this.view) {
-      return;
-    }
-
-    const fetchThumbnailsThenRender = async (): Promise<TemplateResult | void> => {
-      if (!this.hass || !this.cameras || !this.view) {
-        return;
-      }
-      const browseMediaParams = BrowseMediaUtil.getBrowseMediaQueryParameters(
-        config.controls.thumbnails.media,
-        this.cameras.get(this.view.camera),
-      );
-      if (!browseMediaParams) {
-        return;
-      }
-      let parent: FrigateBrowseMediaSource | null;
-      try {
-        parent = await BrowseMediaUtil.browseMediaQuery(this.hass, browseMediaParams);
-      } catch (e) {
-        return dispatchErrorMessageEvent(this, (e as Error).message);
-      }
-
-      if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) != null) {
-        return html`<frigate-card-thumbnail-carousel
-          .target=${parent}
-          .view=${this.view}
-          .config=${config.controls.thumbnails}
-          .highlight_selected=${false}
-          @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
-            const mediaType = browseMediaParams.mediaType;
-            if (mediaType && this.view && ['snapshots', 'clips'].includes(mediaType)) {
-              new View({
-                view: mediaType === 'clips' ? 'clip' : 'snapshot',
-                camera: this.view.camera,
-                target: ev.detail.target,
-                childIndex: ev.detail.childIndex,
-              }).dispatchChangeEvent(this);
-            }
-          }}
-        >
-        </frigate-card-thumbnail-carousel>`;
-      }
-    };
-
-    const fillerStyle = {
-      height: config.controls.thumbnails.size,
-    };
-
-    // As the live carousel moves, thumbnails are re-fetched. This is an async
-    // request, so it can jarring to the user to have the main camera view nudge
-    // up/down as the thumbnails disappear and re-appear. Instead, if there was
-    // previously a thumbnail carousel rendered, use a filler that is the same
-    // size until it is replaced with a real carousel (or empty, if no carousel
-    // is rendered for the next camera).
-    return html`${until(
-      fetchThumbnailsThenRender(),
-      this._thumbnailCarousel
-        ? html` <div style="${styleMap(fillerStyle)}"></div>`
-        : html``,
-    )}`;
-  }
-
  /**
   * Master render method.
   * @returns A rendered template.
   */
  protected render(): TemplateResult | void {
-    if (!this.hass || !this.liveConfig || !this.cameras) {
+    if (!this.hass || !this.liveConfig || !this.cameras || !this.view) {
      return;
    }

@@ -202,11 +135,24 @@ export class FrigateCardLive extends LitElement {
      this.conditionState,
    ) as LiveConfig;

+    const browseMediaParams = BrowseMediaUtil.getBrowseMediaQueryParameters(
+      config.controls.thumbnails.media,
+      this.cameras.get(this.view.camera),
+    );
+    if (!browseMediaParams) {
+      return;
+    }
+
    // Note use of liveConfig and not config below -- the carousel will
    // independently override the liveconfig to reflect the camera in the
    // carousel (not necessarily the selected camera).
-    return html`
-      ${config.controls.thumbnails.mode === 'above' ? this.renderThumbnails(config) : ''}
+    return html` <frigate-card-surround-thumbnails
+      .hass=${this.hass}
+      .view=${this.view}
+      .config=${config.controls.thumbnails}
+      .targetView=${config.controls.thumbnails.media == 'clips' ? 'clip' : 'snapshot'}
+      .browseMediaParams=${browseMediaParams}
+    >
      <frigate-card-live-carousel
        .hass=${this.hass}
        .view=${this.view}
@@ -228,8 +174,7 @@ export class FrigateCardLive extends LitElement {
        }}
      >
      </frigate-card-live-carousel>
-      ${config.controls.thumbnails.mode === 'below' ? this.renderThumbnails(config) : ''}
-    `;
+    </frigate-card-surround-thumbnails>`;
  }

  /**
@@ -1,20 +1,20 @@
 import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
-import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { customElement, property } from 'lit/decorators.js';
+import { Task } from '@lit-labs/task';
+import { customElement, property, state } from 'lit/decorators.js';

+import { BrowseMediaUtil } from '../browse-media-util.js';
 import {
+  BrowseMediaQueryParameters,
  ExtendedHomeAssistant,
  FrigateBrowseMediaSource,
  FrigateCardView,
  ThumbnailsControlConfig,
 } from '../types.js';
-import {
-  FrigateCardThumbnailCarousel,
-  ThumbnailCarouselTap,
-} from './thumbnail-carousel.js';
+
+import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
 import { View } from '../view.js';
-import { dispatchFrigateCardEvent } from '../common.js';
+import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js';

 import './surround.js';

@@ -39,7 +39,48 @@ export class FrigateCardSurround extends LitElement {
  @property({ attribute: false })
  protected targetView?: FrigateCardView;

-  protected _refThumbnails: Ref<FrigateCardThumbnailCarousel> = createRef();
+  @property({ attribute: false })
+  protected browseMediaParams?: BrowseMediaQueryParameters;
+
+  @state()
+  protected _thumbnailTarget?: FrigateBrowseMediaSource;
+
+  @state()
+  protected _thumbnailSelected?: number | null;
+
+  // A task to await the load of the WebRTC component.
+  protected _browseTask = new Task(this, this._fetchMedia.bind(this), () => [
+    this.hass,
+    this.browseMediaParams,
+  ]);
+
+  /**
+   * Fetch thumbnail media.
+   * @param param Task parameters.
+   * @returns
+   */
+  protected async _fetchMedia([hass, browseMediaParams]: (
+    | (HomeAssistant & ExtendedHomeAssistant)
+    | BrowseMediaQueryParameters
+    | undefined
+  )[]): Promise<void> {
+    hass = hass as HomeAssistant & ExtendedHomeAssistant;
+    browseMediaParams = browseMediaParams as BrowseMediaQueryParameters;
+
+    if (!hass || !browseMediaParams) {
+      return;
+    }
+    let parent: FrigateBrowseMediaSource | null;
+    try {
+      parent = await BrowseMediaUtil.browseMediaQuery(hass, browseMediaParams);
+    } catch (e) {
+      return dispatchErrorMessageEvent(this, (e as Error).message);
+    }
+    if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) != null) {
+      this._thumbnailTarget = parent;
+      this._thumbnailSelected = null;
+    }
+  }

  /**
   * Master render method.
@@ -52,10 +93,8 @@ export class FrigateCardSurround extends LitElement {

    return html` <frigate-card-surround
      @frigate-card:thumbnails:set=${(ev: CustomEvent<FrigateCardThumbnailsSet>) => {
-        if (this._refThumbnails.value) {
-          this._refThumbnails.value.target = ev.detail.target;
-          this._refThumbnails.value.selected = ev.detail.childIndex ?? undefined;
-        }
+        this._thumbnailTarget = ev.detail.target;
+        this._thumbnailSelected = ev.detail.childIndex;
      }}
      @frigate-card:thumbnails:open=${(ev: CustomEvent) => {
        if (this.config && ['left', 'right'].includes(this.config.mode)) {
@@ -73,19 +112,17 @@ export class FrigateCardSurround extends LitElement {
      ${this.config?.mode !== 'none'
        ? html` <frigate-card-thumbnail-carousel
            slot=${this.config.mode}
-            ${ref(this._refThumbnails)}
            .config=${this.config}
-            .highlight_selected=${true}
+            .target=${this._thumbnailTarget}
+            .selected=${this._thumbnailSelected ?? null}
            @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
-              if (ev.detail.target && ev.detail.childIndex) {
-                this.view
-                  ?.evolve({
-                    ...(this.targetView && { view: this.targetView }),
-                    target: ev.detail.target,
-                    childIndex: ev.detail.childIndex,
-                  })
-                  .dispatchChangeEvent(this);
-              }
+              this.view
+                ?.evolve({
+                  ...(this.targetView && { view: this.targetView }),
+                  target: ev.detail.target,
+                  childIndex: ev.detail.childIndex,
+                })
+                .dispatchChangeEvent(this);
            }}
          >
          </frigate-card-thumbnail-carousel>`
@@ -13,7 +13,7 @@ import {
  stopEventFromActivatingCardWideActions,
 } from '../common.js';

-import "./thumbnail.js";
+import './thumbnail.js';

 import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';

@@ -28,8 +28,24 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
  @property({ attribute: false, hasChanged: contentsChanged })
  public target?: FrigateBrowseMediaSource;

-  @property({ attribute: false, reflect: true })
-  public selected?: number | null;
+  // Thumbnail carousels can expand (e.g. drawer-based carousels after the main
+  // media loads). The carousel must be re-initialized in these cases, or the
+  // dynamic sizing fails (and users can scroll past the end of the carousel).
+  protected _resizeObserver: ResizeObserver;
+
+  constructor() {
+    super();
+    this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
+  }
+
+  @property({ attribute: false })
+  set selected(selected: number | null) {
+    this._selected = selected;
+    if (selected !== null) {
+      // If there is a selection, 'dim' all the other slides.
+      this.style.setProperty('--frigate-card-carousel-thumbnail-opacity', '0.4');
+    }
+  }

  @property({ attribute: false })
  set config(config: ThumbnailsControlConfig) {
@@ -40,12 +56,32 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
  @state()
  protected _config?: ThumbnailsControlConfig;

-  @property({ attribute: false })
-  set highlight_selected(value: boolean) {
-    this.style.setProperty(
-      '--frigate-card-carousel-thumbnail-opacity',
-      value ? '0.4' : '1.0',
-    );
+  @state()
+  protected _selected?: number | null;
+
+  /**
+   * Handle gallery resize.
+   */
+   protected _resizeHandler(): void {
+    if (this._carousel) {
+      this._carousel.reInit();
+    }
+  }
+
+  /**
+   * Component connected callback.
+   */
+   connectedCallback(): void {
+    super.connectedCallback();
+    this._resizeObserver.observe(this);
+  }
+
+  /**
+   * Component disconnected callback.
+   */
+  disconnectedCallback(): void {
+    this._resizeObserver.disconnect();
+    super.disconnectedCallback();
  }

  /**
@@ -120,27 +156,26 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {

    const classes = {
      embla__slide: true,
-      'slide-selected': this.selected == childIndex,
+      'slide-selected': this.selected === childIndex,
    };

-    return html`
-      <frigate-card-thumbnail
-        .media=${mediaToRender}
-        ?details=${this._config?.show_details}
-        thumbnail_size=${ifDefined(this._config?.size)}
-        class="${classMap(classes)}"
-        @click=${(ev) => {
-          if (this._carousel && this._carousel.clickAllowed()) {
-            dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
-              slideIndex: slideIndex,
-              target: parent,
-              childIndex: childIndex,
-            });
-          }
-          stopEventFromActivatingCardWideActions(ev);
-        }}
-      >
-      </frigate-card-thumbnail>`;
+    return html` <frigate-card-thumbnail
+      .media=${mediaToRender}
+      ?details=${this._config?.show_details}
+      thumbnail_size=${ifDefined(this._config?.size)}
+      class="${classMap(classes)}"
+      @click=${(ev) => {
+        if (this._carousel && this._carousel.clickAllowed()) {
+          dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
+            slideIndex: slideIndex,
+            target: parent,
+            childIndex: childIndex,
+          });
+        }
+        stopEventFromActivatingCardWideActions(ev);
+      }}
+    >
+    </frigate-card-thumbnail>`;
  }

  /**