Use the new plugin access API from embla7.

src/components/carousel.ts

@@ -18,7 +18,6 @@ export class FrigateCardCarousel extends LitElement {
   public direction: 'vertical' | 'horizontal' = 'horizontal';
 
   protected _carousel?: EmblaCarouselType;
-  protected _plugins: Record<string, EmblaPluginType> = {};
 
   /**
    * Scroll to a particular slide.
@@ -81,7 +80,6 @@ export class FrigateCardCarousel extends LitElement {
     if (this._carousel) {
       this._carousel.destroy();
     }
-    this._plugins = {};
     this._carousel = undefined;
   }
 
@@ -94,19 +92,13 @@ export class FrigateCardCarousel extends LitElement {
     ) as HTMLElement;
 
     if (carouselNode) {
-      const plugins = this._getPlugins() ?? [];
-      this._plugins = plugins.reduce((acc, cur) => {
-        acc[cur.name] = cur;
-        return acc;
-      }, {});
-
       this._carousel = EmblaCarousel(
         carouselNode,
         {
           axis: this.direction == 'horizontal' ? 'x' : 'y',
           ...this._getOptions(),
         },
-        plugins,
+        this._getPlugins() ?? [],
       );
       this._carousel.on('init', () => dispatchFrigateCardEvent(this, 'carousel:init'));
       this._carousel.on('select', () => {

src/components/embla-plugins/automedia.ts

@@ -9,7 +9,7 @@ import {
   FrigateCardMediaPlayer,
 } from '../../types.js';
 
-export type AutoMediaPluginOptionsType = CreateOptionsType<{
+type OptionsType = CreateOptionsType<{
   playerSelector?: string;
 
   // Note: Neither play nor unmute will activate on selection. The caller is
@@ -22,19 +22,21 @@ export type AutoMediaPluginOptionsType = CreateOptionsType<{
   autoMuteCondition?: AutoMuteCondition;
 }>;
 
-export const defaultOptions: AutoMediaPluginOptionsType = {
+const defaultOptions: OptionsType = {
   active: true,
   breakpoints: {},
 };
 
-export type AutoMediaPluginType = CreatePluginType<
+export type AutoMediaOptionsType = Partial<OptionsType>
+
+export type AutoMediaType = CreatePluginType<
   {
     play: () => void;
     pause: () => void;
     mute: () => void;
     unmute: () => void;
   },
-  AutoMediaPluginOptionsType
+  AutoMediaOptionsType
 >;
 
 /**
@@ -43,15 +45,15 @@ export type AutoMediaPluginType = CreatePluginType<
  * @returns
  */
 export function AutoMediaPlugin(
-  userOptions?: AutoMediaPluginOptionsType,
+  userOptions?: AutoMediaOptionsType,
-): AutoMediaPluginType {
+): AutoMediaType {
   const optionsHandler = EmblaCarousel.optionsHandler();
   const optionsBase = optionsHandler.merge(
     defaultOptions,
     AutoMediaPlugin.globalOptions,
   );
 
-  let options: AutoMediaPluginType['options'];
+  let options: AutoMediaType['options'];
   let carousel: EmblaCarouselType;
   let slides: HTMLElement[];
 
@@ -210,8 +212,8 @@ export function AutoMediaPlugin(
     }
   }
 
-  const self: AutoMediaPluginType = {
+  const self: AutoMediaType = {
-    name: 'AutoMediaPlugin',
+    name: 'autoMedia',
     options: optionsHandler.merge(optionsBase, userOptions),
     init,
     destroy,
@@ -223,4 +225,4 @@ export function AutoMediaPlugin(
   return self;
 }
 
-AutoMediaPlugin.globalOptions = <AutoMediaPluginOptionsType | undefined>undefined;
+AutoMediaPlugin.globalOptions = <AutoMediaOptionsType | undefined>undefined;

src/components/embla-plugins/lazyload.ts

@@ -3,7 +3,7 @@ import { CreatePluginType } from 'embla-carousel/components/Plugins';
 import EmblaCarousel, { EmblaCarouselType, EmblaEventType } from 'embla-carousel';
 import { LazyUnloadCondition } from '../../types';
 
-export type LazyloadOptionsType = CreateOptionsType<{
+export type OptionsType = CreateOptionsType<{
   // Number of slides to lazyload left/right of selected (0 == only selected
   // slide).
   lazyLoadCount?: number;
@@ -13,12 +13,14 @@ export type LazyloadOptionsType = CreateOptionsType<{
   lazyUnloadCallback?: (index: number, slide: HTMLElement) => void;
 }>;
 
-export const defaultOptions: LazyloadOptionsType = {
+export const defaultOptions: OptionsType = {
   active: true,
   breakpoints: {},
   lazyLoadCount: 0,
 };
 
+export type LazyloadOptionsType = Partial<OptionsType>
+
 export type LazyloadType = CreatePluginType<
   {
     hasLazyloaded(index: number): boolean;
@@ -147,7 +149,7 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
   }
 
   const self: LazyloadType = {
-    name: 'Lazyload',
+    name: 'lazyload',
     options: optionsHandler.merge(optionsBase, userOptions),
     init,
     destroy,

src/components/live.ts

@@ -45,7 +45,7 @@ import {
   dispatchMediaShowEvent,
 } from '../utils/media-info.js';
 import { View } from '../view.js';
-import { AutoMediaPlugin, AutoMediaPluginType } from './embla-plugins/automedia.js';
+import { AutoMediaPlugin } from './embla-plugins/automedia.js';
 import { Lazyload } from './embla-plugins/lazyload.js';
 import { FrigateCardMediaCarousel } from './media-carousel.js';
 import { dispatchErrorMessageEvent } from './message.js';
@@ -239,9 +239,7 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel {
     }
 
     if (changedProperties.has('preloaded')) {
-      const automedia = this._plugins['AutoMediaPlugin'] as
+      const automedia = this._getAutoMediaPlugin();
-        | AutoMediaPluginType
-        | undefined;
       if (automedia) {
         // If this has changed to preloaded (i.e. is now loaded but in the
         // background) take the appropriate play/pause/mute/unmute actions.

src/components/media-carousel.ts

@@ -9,7 +9,8 @@ import {
   isValidMediaShowInfo
 } from '../utils/media-info.js';
 import { FrigateCardCarousel } from './carousel.js';
-import { AutoMediaPluginType } from './embla-plugins/automedia.js';
+import { AutoMediaType } from './embla-plugins/automedia.js';
+import { LazyloadType } from './embla-plugins/lazyload';
 import './next-prev-control.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import { FrigateCardTitleControl } from './title-control.js';
@@ -41,12 +42,28 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
     );
   }
 
+  /**
+   * Get the AutoMedia plugin (if any).
+   * @returns The plugin or `null`.
+   */
+  protected _getAutoMediaPlugin(): AutoMediaType | null {
+    return this._carousel?.plugins()['autoMedia'] ?? null;
+  }
+
+  /**
+   * Get the LazyLoad plugin (if any).
+   * @returns The plugin or `null`.
+   */
+  protected _getLazyLoadPlugin(): LazyloadType | null {
+    return this._carousel?.plugins()['lazyload'] ?? null;
+  }
+
   /**
    * Play the media on the selected slide. May be overridden to control when
    * autoplay should happen.
    */
   protected _autoPlayHandler(): void {
-    (this._plugins['AutoMediaPlugin'] as AutoMediaPluginType | undefined)?.play();
+    this._getAutoMediaPlugin()?.play();
   }
 
   /**
@@ -54,7 +71,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
    * autoplay should happen.
    */
   protected _autoUnmuteHandler(): void {
-    (this._plugins['AutoMediaPlugin'] as AutoMediaPluginType | undefined)?.unmute();
+    this._getAutoMediaPlugin()?.unmute();
   }
 
   /**

src/components/viewer.ts

@@ -7,14 +7,14 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  unsafeCSS
+  unsafeCSS,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ref } from 'lit/directives/ref.js';
 import {
   dispatchFrigateCardErrorEvent,
-  renderProgressIndicator
+  renderProgressIndicator,
 } from '../components/message.js';
 import viewerStyle from '../scss/viewer.scss';
 import type {
@@ -26,7 +26,7 @@ import type {
   FrigateCardMediaPlayer,
   MediaShowInfo,
   TransitionEffect,
-  ViewerConfig
+  ViewerConfig,
 } from '../types.js';
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { contentsChanged } from '../utils/basic.js';
@@ -36,19 +36,19 @@ import {
   getFullDependentBrowseMediaQueryParametersOrDispatchError,
   isTrueMedia,
   multipleBrowseMediaQueryMerged,
-  overrideMultiBrowseMediaQueryParameters
+  overrideMultiBrowseMediaQueryParameters,
 } from '../utils/ha/browse-media.js';
 import { ResolvedMediaCache, resolveMedia } from '../utils/ha/resolved-media.js';
 import { createMediaShowInfo } from '../utils/media-info.js';
 import { View } from '../view.js';
 import { AutoMediaPlugin } from './embla-plugins/automedia.js';
-import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
+import { Lazyload } from './embla-plugins/lazyload.js';
 import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
 import './next-prev-control.js';
 import { FrigateCardNextPreviousControl } from './next-prev-control.js';
 import './title-control.js';
-import "../patches/ha-hls-player";
+import '../patches/ha-hls-player';
-import "./surround-thumbnails";
+import './surround-thumbnails';
 
 @customElement('frigate-card-viewer')
 export class FrigateCardViewer extends LitElement {
@@ -778,9 +778,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
                   // images in media-carousel.ts). Here we need to only call the
                   // media load handler on a 'real' load.
                   !lazyLoad ||
-                  (this._plugins['Lazyload'] as LazyloadType | undefined)?.hasLazyloaded(
+                  this._getLazyLoadPlugin()?.hasLazyloaded(slideIndex)
-                    slideIndex,
-                  )
                 ) {
                   this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e));
                 }
@@ -793,7 +791,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
 
 declare global {
   interface HTMLElementTagNameMap {
-		"frigate-card-viewer-carousel": FrigateCardViewerCarousel
+    'frigate-card-viewer-carousel': FrigateCardViewerCarousel;
-		"frigate-card-viewer": FrigateCardViewer
+    'frigate-card-viewer': FrigateCardViewer;
   }
 }