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

Fix autoplay functionality in viewer.

Browse Source
This commit is contained in:
Dermot Duffy
2023-03-18 15:32:51 -07:00
parent 78f429bc22
commit 27a0e934fc
2 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/live/live.ts
+7 -5
View File
@@ -69,6 +69,8 @@ declare module 'view' {
} }
} }
const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';
/** /**
* Get the state object or dispatch an error. Used in `ha` and `image` live * Get the state object or dispatch an error. Used in `ha` and `image` live
* providers. * providers.
@@ -398,7 +400,7 @@ export class FrigateCardLiveCarousel extends LitElement {
this._lazyloadOrUnloadSlide('unload', index, slide), this._lazyloadOrUnloadSlide('unload', index, slide),
}), }),
AutoMediaPlugin({ AutoMediaPlugin({
playerSelector: 'frigate-card-live-provider', playerSelector: FRIGATE_CARD_LIVE_PROVIDER,
...(this.liveConfig?.auto_play && { ...(this.liveConfig?.auto_play && {
autoPlayCondition: this.liveConfig.auto_play, autoPlayCondition: this.liveConfig.auto_play,
}), }),
@@ -501,7 +503,7 @@ export class FrigateCardLiveCarousel extends LitElement {
} }
const liveProvider = slide?.querySelector( const liveProvider = slide?.querySelector(
'frigate-card-live-provider', FRIGATE_CARD_LIVE_PROVIDER,
) as FrigateCardLiveProvider | null; ) as FrigateCardLiveProvider | null;
if (liveProvider) { if (liveProvider) {
liveProvider.disabled = action !== 'load'; liveProvider.disabled = action !== 'load';
@@ -686,7 +688,7 @@ export class FrigateCardLiveCarousel extends LitElement {
} }
} }
@customElement('frigate-card-live-provider') @customElement(FRIGATE_CARD_LIVE_PROVIDER)
export class FrigateCardLiveProvider export class FrigateCardLiveProvider
extends LitElement extends LitElement
implements FrigateCardMediaPlayer implements FrigateCardMediaPlayer
@@ -721,7 +723,7 @@ export class FrigateCardLiveProvider
protected _refProvider: Ref<Element & FrigateCardMediaPlayer> = createRef(); protected _refProvider: Ref<Element & FrigateCardMediaPlayer> = createRef();
public async play(): Promise<void> { public async play(): Promise<void> {
playMediaMutingIfNecessary(this._refProvider.value) playMediaMutingIfNecessary(this._refProvider.value);
} }
public pause(): void { public pause(): void {
@@ -922,7 +924,7 @@ export class FrigateCardLiveProvider
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'frigate-card-live-provider': FrigateCardLiveProvider; FRIGATE_CARD_LIVE_PROVIDER: FrigateCardLiveProvider;
'frigate-card-live-carousel': FrigateCardLiveCarousel; 'frigate-card-live-carousel': FrigateCardLiveCarousel;
'frigate-card-live': FrigateCardLive; 'frigate-card-live': FrigateCardLive;
} }
src/components/viewer.ts
+8 -6
View File
@@ -166,7 +166,7 @@ export class FrigateCardViewer extends LitElement {
} }
} }
const FRIGATE_CARD_HLS_SELECTOR = 'frigate-card-ha-hls-player'; const FRIGATE_CARD_VIEWER_PROVIDER = 'frigate-card-viewer-provider';
@customElement('frigate-card-viewer-carousel') @customElement('frigate-card-viewer-carousel')
export class FrigateCardViewerCarousel extends LitElement { export class FrigateCardViewerCarousel extends LitElement {
@@ -237,7 +237,9 @@ export class FrigateCardViewerCarousel extends LitElement {
} }
return ( return (
(slide?.querySelector(FRIGATE_CARD_HLS_SELECTOR) as FrigateCardMediaPlayer) ?? null (slide?.querySelector(
FRIGATE_CARD_VIEWER_PROVIDER,
) as unknown as FrigateCardMediaPlayer) ?? null
); );
} }
@@ -263,7 +265,7 @@ export class FrigateCardViewerCarousel extends LitElement {
}), }),
}), }),
AutoMediaPlugin({ AutoMediaPlugin({
playerSelector: FRIGATE_CARD_HLS_SELECTOR, playerSelector: FRIGATE_CARD_VIEWER_PROVIDER,
...(this.viewerConfig?.auto_play && { ...(this.viewerConfig?.auto_play && {
autoPlayCondition: this.viewerConfig.auto_play, autoPlayCondition: this.viewerConfig.auto_play,
}), }),
@@ -511,7 +513,7 @@ export class FrigateCardViewerCarousel extends LitElement {
} }
} }
@customElement('frigate-card-viewer-provider') @customElement(FRIGATE_CARD_VIEWER_PROVIDER)
export class FrigateCardViewerProvider export class FrigateCardViewerProvider
extends LitElement extends LitElement
implements FrigateCardMediaPlayer implements FrigateCardMediaPlayer
@@ -545,7 +547,7 @@ export class FrigateCardViewerProvider
protected _refVideoProvider: Ref<Element & FrigateCardMediaPlayer> = createRef(); protected _refVideoProvider: Ref<Element & FrigateCardMediaPlayer> = createRef();
public async play(): Promise<void> { public async play(): Promise<void> {
playMediaMutingIfNecessary(this._refVideoProvider.value) playMediaMutingIfNecessary(this._refVideoProvider.value);
} }
public pause(): void { public pause(): void {
@@ -701,6 +703,6 @@ declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'frigate-card-viewer-carousel': FrigateCardViewerCarousel; 'frigate-card-viewer-carousel': FrigateCardViewerCarousel;
'frigate-card-viewer': FrigateCardViewer; 'frigate-card-viewer': FrigateCardViewer;
'frigate-card-viewer-provider': FrigateCardViewerProvider; FRIGATE_CARD_VIEWER_PROVIDER: FrigateCardViewerProvider;
} }
} }