Initial adaptation to embla 7.

src/components/embla-plugins/automedia.ts

@@ -1,4 +1,6 @@
-import { EmblaCarouselType, EmblaPluginType } from 'embla-carousel';
+import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel';
+import { CreateOptionsType } from 'embla-carousel/components/Options.js';
+import { CreatePluginType } from 'embla-carousel/components/Plugins.js';
 import {
   AutoMuteCondition,
   AutoPauseCondition,
@@ -7,8 +9,8 @@ import {
   FrigateCardMediaPlayer,
 } from '../../types.js';
 
-export type AutoMediaPluginOptionsType = {
-  playerSelector: string;
+export type AutoMediaPluginOptionsType = CreateOptionsType<{
+  playerSelector?: string;
 
   // Note: Neither play nor unmute will activate on selection. The caller is
   // expected to call the `play()` or `unmute()` methods manually when the media
@@ -18,16 +20,22 @@ export type AutoMediaPluginOptionsType = {
   autoUnmuteCondition?: AutoUnmuteCondition;
   autoPauseCondition?: AutoPauseCondition;
   autoMuteCondition?: AutoMuteCondition;
+}>;
+
+export const defaultOptions: AutoMediaPluginOptionsType = {
+  active: true,
+  breakpoints: {},
 };
 
-export const defaultOptions: Partial<AutoMediaPluginOptionsType> = {};
-
-export type AutoMediaPluginType = EmblaPluginType<AutoMediaPluginOptionsType> & {
-  play: () => void;
-  pause: () => void;
-  mute: () => void;
-  unmute: () => void;
-};
+export type AutoMediaPluginType = CreatePluginType<
+  {
+    play: () => void;
+    pause: () => void;
+    mute: () => void;
+    unmute: () => void;
+  },
+  AutoMediaPluginOptionsType
+>;
 
 /**
  * An Embla plugin to take automated actions on media (e.g. pause, unmute, etc).
@@ -37,8 +45,13 @@ export type AutoMediaPluginType = EmblaPluginType<AutoMediaPluginOptionsType> &
 export function AutoMediaPlugin(
   userOptions?: AutoMediaPluginOptionsType,
 ): AutoMediaPluginType {
-  const options = Object.assign({}, defaultOptions, userOptions);
+  const optionsHandler = EmblaCarousel.optionsHandler();
+  const optionsBase = optionsHandler.merge(
+    defaultOptions,
+    AutoMediaPlugin.globalOptions,
+  );
 
+  let options: AutoMediaPluginType['options'];
   let carousel: EmblaCarouselType;
   let slides: HTMLElement[];
 
@@ -47,6 +60,7 @@ export function AutoMediaPlugin(
    */
   function init(embla: EmblaCarouselType): void {
     carousel = embla;
+    options = optionsHandler.atMedia(self.options);
     slides = carousel.slideNodes();
 
     // Frigate card media autoplays when the media loads not necessarily when the
@@ -131,7 +145,9 @@ export function AutoMediaPlugin(
    * @returns A FrigateCardMediaPlayer object or `null`.
    */
   function getPlayer(slide: HTMLElement | undefined): FrigateCardMediaPlayer | null {
-    return slide?.querySelector(options.playerSelector) as FrigateCardMediaPlayer | null;
+    return options.playerSelector
+      ? (slide?.querySelector(options.playerSelector) as FrigateCardMediaPlayer | null)
+      : null;
   }
 
   /**
@@ -196,7 +212,7 @@ export function AutoMediaPlugin(
 
   const self: AutoMediaPluginType = {
     name: 'AutoMediaPlugin',
-    options,
+    options: optionsHandler.merge(optionsBase, userOptions),
     init,
     destroy,
     play,
@@ -206,3 +222,5 @@ export function AutoMediaPlugin(
   };
   return self;
 }
+
+AutoMediaPlugin.globalOptions = <AutoMediaPluginOptionsType | undefined>undefined;