Initial adaptation to embla 7.

package.json

@@ -23,7 +23,7 @@
     "crypto": "^1.0.1",
     "custom-card-helpers": "^1.9.0",
     "date-fns": "^2.28.0",
-    "embla-carousel": "^6.2.0",
+    "embla-carousel": "^7.0.0-rc01",
     "embla-carousel-wheel-gestures": "^2.1.1",
     "home-assistant-js-websocket": "^7.1.0",
     "keycharm": "^0.4.0",

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;

src/components/embla-plugins/lazyload.ts

@@ -1,7 +1,9 @@
-import { EmblaCarouselType, EmblaEventType, EmblaPluginType } from 'embla-carousel';
+import { CreateOptionsType } from 'embla-carousel/components/Options';
+import { CreatePluginType } from 'embla-carousel/components/Plugins';
+import EmblaCarousel, { EmblaCarouselType, EmblaEventType } from 'embla-carousel';
 import { LazyUnloadCondition } from '../../types';
 
-export type LazyloadOptionsType = {
+export type LazyloadOptionsType = CreateOptionsType<{
   // Number of slides to lazyload left/right of selected (0 == only selected
   // slide).
   lazyLoadCount?: number;
@@ -9,18 +11,25 @@ export type LazyloadOptionsType = {
 
   lazyLoadCallback?: (index: number, slide: HTMLElement) => void;
   lazyUnloadCallback?: (index: number, slide: HTMLElement) => void;
-};
+}>;
 
-export const defaultOptions: Partial<LazyloadOptionsType> = {
+export const defaultOptions: LazyloadOptionsType = {
+  active: true,
+  breakpoints: {},
   lazyLoadCount: 0,
 };
 
-export type LazyloadType = EmblaPluginType<LazyloadOptionsType> & {
-  hasLazyloaded: (index: number) => boolean;
-};
+export type LazyloadType = CreatePluginType<
+  {
+    hasLazyloaded(index: number): boolean;
+  },
+  LazyloadOptionsType
+>;
 
 export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
-  const options = Object.assign({}, defaultOptions, userOptions);
+  const optionsHandler = EmblaCarousel.optionsHandler();
+  const optionsBase = optionsHandler.merge(defaultOptions, Lazyload.globalOptions);
+  let options: LazyloadType['options'];
 
   let carousel: EmblaCarouselType;
   let slides: HTMLElement[];
@@ -34,6 +43,7 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
    */
   function init(embla: EmblaCarouselType): void {
     carousel = embla;
+    options = optionsHandler.atMedia(self.options);
     slides = carousel.slideNodes();
 
     if (options.lazyLoadCallback) {
@@ -138,10 +148,12 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
 
   const self: LazyloadType = {
     name: 'Lazyload',
-    options,
+    options: optionsHandler.merge(optionsBase, userOptions),
     init,
     destroy,
     hasLazyloaded,
   };
   return self;
 }
+
+Lazyload.globalOptions = <LazyloadOptionsType | undefined>undefined;

yarn.lock

@@ -1162,10 +1162,10 @@ embla-carousel-wheel-gestures@^2.1.1:
   dependencies:
     wheel-gestures "^2.2.5"
 
-embla-carousel@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-6.2.0.tgz#c16b18abe50e05ccd03d0b8d0b738f6a87aea1e0"
-  integrity sha512-dSNsiQ7nmSQJZgbYfZCLdzrnznHwpaAcdJFcMRKgm/pjH1doOgxmfsvlMy4VfO4J11hLz8jm/W8WxSSDqfuu4w==
+embla-carousel@^7.0.0-rc01:
+  version "7.0.0-rc01"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-7.0.0-rc01.tgz#7c9adfd7302b85c2de9354b7ef6343f16a696eb7"
+  integrity sha512-IBTSKcPw7u9K0zoLvsnWYsijKsI0msFqzNp6ASIthTXiMZNJNGQt8k0ax7KqUVinDZeNM07WPWqYsjrvUM/Epw==
 
 emojis-list@^3.0.0:
   version "3.0.0"