From 30fec98e18754abedfdd83db762b676bd9baa35e Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sat, 2 Jul 2022 19:20:54 -0700 Subject: [PATCH] Use the new plugin access API from embla7. --- src/components/carousel.ts | 10 +-------- src/components/embla-plugins/automedia.ts | 22 ++++++++++--------- src/components/embla-plugins/lazyload.ts | 8 ++++--- src/components/live.ts | 6 ++---- src/components/media-carousel.ts | 23 +++++++++++++++++--- src/components/viewer.ts | 26 +++++++++++------------ 6 files changed, 52 insertions(+), 43 deletions(-) diff --git a/src/components/carousel.ts b/src/components/carousel.ts index 57bcad5d..3077d144 100644 --- a/src/components/carousel.ts +++ b/src/components/carousel.ts @@ -18,7 +18,6 @@ export class FrigateCardCarousel extends LitElement { public direction: 'vertical' | 'horizontal' = 'horizontal'; protected _carousel?: EmblaCarouselType; - protected _plugins: Record = {}; /** * 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', () => { diff --git a/src/components/embla-plugins/automedia.ts b/src/components/embla-plugins/automedia.ts index e77cebcd..e34c5e34 100644 --- a/src/components/embla-plugins/automedia.ts +++ b/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 + +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 = undefined; +AutoMediaPlugin.globalOptions = undefined; diff --git a/src/components/embla-plugins/lazyload.ts b/src/components/embla-plugins/lazyload.ts index 98f15876..47b82f1b 100644 --- a/src/components/embla-plugins/lazyload.ts +++ b/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 + 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, diff --git a/src/components/live.ts b/src/components/live.ts index 35006e6e..9af99e33 100644 --- a/src/components/live.ts +++ b/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 - | AutoMediaPluginType - | undefined; + const automedia = this._getAutoMediaPlugin(); 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. diff --git a/src/components/media-carousel.ts b/src/components/media-carousel.ts index 2b654071..fb81018e 100644 --- a/src/components/media-carousel.ts +++ b/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(); } /** diff --git a/src/components/viewer.ts b/src/components/viewer.ts index 46512f96..9a560995 100644 --- a/src/components/viewer.ts +++ b/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 "./surround-thumbnails"; +import '../patches/ha-hls-player'; +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( - slideIndex, - ) + this._getLazyLoadPlugin()?.hasLazyloaded(slideIndex) ) { this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e)); } @@ -792,8 +790,8 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel { } declare global { - interface HTMLElementTagNameMap { - "frigate-card-viewer-carousel": FrigateCardViewerCarousel - "frigate-card-viewer": FrigateCardViewer - } + interface HTMLElementTagNameMap { + 'frigate-card-viewer-carousel': FrigateCardViewerCarousel; + 'frigate-card-viewer': FrigateCardViewer; + } }