Use the new plugin access API from embla7.

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,
-): AutoMediaPluginType {
+  userOptions?: AutoMediaOptionsType,
+): 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 = {
-    name: 'AutoMediaPlugin',
+  const self: AutoMediaType = {
+    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,