flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use the new plugin access API from embla7.

Browse Source
This commit is contained in:
Dermot Duffy
2022-07-09 22:43:43 -07:00
parent 06364eb68a
commit 30fec98e18
6 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/carousel.ts
+1 -9
View File
@@ -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
+12 -10
View File
@@ -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
+5 -3
View File
@@ -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
+2 -4
View File
@@ -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.
src/components/media-carousel.ts
+20 -3
View File
@@ -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
+10 -12
View File
@@ -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));
}
@@ -793,7 +791,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
declare global {
interface HTMLElementTagNameMap {
"frigate-card-viewer-carousel": FrigateCardViewerCarousel
"frigate-card-viewer": FrigateCardViewer
'frigate-card-viewer-carousel': FrigateCardViewerCarousel;
'frigate-card-viewer': FrigateCardViewer;
}
}