Convert viewer to use the new surround.

src/components/surround-thumbnails.ts

@@ -21,7 +21,7 @@ import './surround.js';
 import surroundThumbnailsStyle from '../scss/surround.scss';
 
 interface FrigateCardThumbnailsSet {
-  target: FrigateBrowseMediaSource;
+  target?: FrigateBrowseMediaSource;
   childIndex?: number;
 }
 
@@ -93,7 +93,9 @@ export class FrigateCardSurround extends LitElement {
 
     return html` <frigate-card-surround
       @frigate-card:thumbnails:set=${(ev: CustomEvent<FrigateCardThumbnailsSet>) => {
+        if (ev.detail.target) {
           this._thumbnailTarget = ev.detail.target;
+        }
         this._thumbnailSelected = ev.detail.childIndex;
       }}
       @frigate-card:thumbnails:open=${(ev: CustomEvent) => {
@@ -113,8 +115,8 @@ export class FrigateCardSurround extends LitElement {
         ? html` <frigate-card-thumbnail-carousel
             slot=${this.config.mode}
             .config=${this.config}
-            .target=${this._thumbnailTarget}
-            .selected=${this._thumbnailSelected ?? null}
+            .target=${this._thumbnailTarget ?? this.view.target}
+            .selected=${this._thumbnailSelected ?? this.view.childIndex ?? null}
             @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
               this.view
                 ?.evolve({

src/components/thumbnail-carousel.ts

@@ -124,11 +124,11 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
     }
     super.updated(changedProperties);
 
-    if (changedProperties.has('selected')) {
+    if (changedProperties.has('_selected')) {
       this.updateComplete.then(() => {
         if (this._carousel) {
-          if (this.selected !== undefined && this.selected !== null) {
-            this.carouselScrollTo(this.selected);
+          if (this._selected !== undefined && this._selected !== null) {
+            this.carouselScrollTo(this._selected);
           }
         }
       });
@@ -156,7 +156,7 @@ 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

src/components/viewer.ts

@@ -25,12 +25,9 @@ import type {
   TransitionEffect,
   ViewerConfig,
 } from '../types.js';
+import { CarouselSelect } from './carousel.js';
 import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
-import {
-  FrigateCardThumbnailCarousel,
-  ThumbnailCarouselTap,
-} from './thumbnail-carousel.js';
 import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
 import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
 import { View } from '../view.js';
@@ -38,6 +35,7 @@ import {
   contentsChanged,
   createMediaShowInfo,
   dispatchErrorMessageEvent,
+  dispatchFrigateCardEvent,
   stopEventFromActivatingCardWideActions,
 } from '../common.js';
 import { renderProgressIndicator } from '../components/message.js';
@@ -46,7 +44,6 @@ import './next-prev-control.js';
 import './title-control.js';
 
 import viewerStyle from '../scss/viewer.scss';
-import viewerCoreStyle from '../scss/viewer-core.scss';
 
 @customElement('frigate-card-viewer')
 export class FrigateCardViewer extends LitElement {
@@ -70,7 +67,7 @@ export class FrigateCardViewer extends LitElement {
    * @returns A rendered template.
    */
   protected render(): TemplateResult | void {
-    if (!this.hass || !this.view || !this.cameraConfig) {
+    if (!this.hass || !this.view || !this.cameraConfig || !this.viewerConfig) {
       return;
     }
 
@@ -94,14 +91,27 @@ export class FrigateCardViewer extends LitElement {
       return renderProgressIndicator();
     }
 
-    return html` <frigate-card-viewer-core
+    return html` <frigate-card-surround-thumbnails
+      .hass=${this.hass}
+      .view=${this.view}
+      .config=${this.viewerConfig.controls.thumbnails}
+    >
+      <frigate-card-viewer-carousel
+        .hass=${this.hass}
         .view=${this.view}
         .viewerConfig=${this.viewerConfig}
-      .resolvedMediaCache=${this.resolvedMediaCache}
-      .hass=${this.hass}
         .browseMediaQueryParameters=${browseMediaQueryParameters}
+        .resolvedMediaCache=${this.resolvedMediaCache}
+        @frigate-card:carousel:select=${(ev: CustomEvent<CarouselSelect>) => {
+          // When a slide is selected in the viewer carousel, send a new event
+          // from the same source asking for the thumbnails to be updated.
+          dispatchFrigateCardEvent(ev.composedPath()[0], 'thumbnails:set', {
+            childIndex: ev.detail.index,
+          });
+        }}
       >
-    </frigate-card-viewer-core>`;
+      </frigate-card-viewer-carousel>
+    </frigate-card-surround-thumbnails>`;
   }
 
   /**
@@ -112,82 +122,6 @@ export class FrigateCardViewer extends LitElement {
   }
 }
 
-@customElement('frigate-card-viewer-core')
-export class FrigateCardViewerCore extends LitElement {
-  @property({ attribute: false })
-  protected hass?: HomeAssistant & ExtendedHomeAssistant;
-
-  @property({ attribute: false })
-  protected view?: Readonly<View>;
-
-  // See note on viewerConfig in <frigate-card-viewer-carousel>.
-  @property({ attribute: false, hasChanged: contentsChanged })
-  protected viewerConfig?: ViewerConfig;
-
-  @property({ attribute: false })
-  protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
-
-  @property({ attribute: false })
-  protected resolvedMediaCache?: ResolvedMediaCache;
-
-  protected _viewerCarouselRef: Ref<FrigateCardViewerCarousel> = createRef();
-  protected _thumbnailCarouselRef: Ref<FrigateCardThumbnailCarousel> = createRef();
-
-  protected _syncThumbnailCarousel(): void {
-    const mediaSelected = this._viewerCarouselRef.value?.carouselSelected();
-    if (mediaSelected !== undefined && this._thumbnailCarouselRef.value) {
-      this._thumbnailCarouselRef.value.selected = mediaSelected;
-    }
-  }
-
-  protected _renderThumbnails(): TemplateResult {
-    if (!this.view || !this.viewerConfig) {
-      return html``;
-    }
-
-    return html` <frigate-card-thumbnail-carousel
-      ${ref(this._thumbnailCarouselRef)}
-      .target=${this.view.target}
-      .config=${this.viewerConfig.controls.thumbnails}
-      @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
-        this._viewerCarouselRef.value?.carouselScrollTo(ev.detail.slideIndex);
-      }}
-      @frigate-card:carousel:init=${this._syncThumbnailCarousel.bind(this)}
-    >
-    </frigate-card-thumbnail-carousel>`;
-  }
-
-  protected render(): TemplateResult | void {
-    if (!this.view || !this.viewerConfig) {
-      return html``;
-    }
-    return html` ${this.viewerConfig &&
-      this.viewerConfig.controls.thumbnails.mode === 'above'
-        ? this._renderThumbnails()
-        : ''}
-      <frigate-card-viewer-carousel
-        ${ref(this._viewerCarouselRef)}
-        .hass=${this.hass}
-        .view=${this.view}
-        .viewerConfig=${this.viewerConfig}
-        .browseMediaQueryParameters=${this.browseMediaQueryParameters}
-        .resolvedMediaCache=${this.resolvedMediaCache}
-        @frigate-card:carousel:select=${this._syncThumbnailCarousel.bind(this)}
-      >
-      </frigate-card-viewer-carousel>
-      ${this.viewerConfig && this.viewerConfig.controls.thumbnails.mode === 'below'
-        ? this._renderThumbnails()
-        : ''}`;
-  }
-
-  /**
-   * Get element styles.
-   */
-  static get styles(): CSSResultGroup {
-    return unsafeCSS(viewerCoreStyle);
-  }
-}
-
 @customElement('frigate-card-viewer-carousel')
 export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
   @property({ attribute: false })

src/scss/viewer-core.scss

@@ -1,17 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-
-  height: 100%;
-  width: 100%;
-}
-
-frigate-card-viewer-carousel {
-  flex: 1;
-  min-height: 0;
-}
-
-frigate-card-thumbnail-carousel {
-  flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
-}

src/scss/viewer.scss

@@ -1,5 +1,12 @@
 :host {
-  height: 100%;
   width: 100%;
-  display: block;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+frigate-card-viewer-carousel {
+  flex: 1;
+  min-height: 0;
 }