Fix autoplay functionality in viewer.
This commit is contained in:
@@ -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
|
||||
* providers.
|
||||
@@ -398,7 +400,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
this._lazyloadOrUnloadSlide('unload', index, slide),
|
||||
}),
|
||||
AutoMediaPlugin({
|
||||
playerSelector: 'frigate-card-live-provider',
|
||||
playerSelector: FRIGATE_CARD_LIVE_PROVIDER,
|
||||
...(this.liveConfig?.auto_play && {
|
||||
autoPlayCondition: this.liveConfig.auto_play,
|
||||
}),
|
||||
@@ -501,7 +503,7 @@ export class FrigateCardLiveCarousel extends LitElement {
|
||||
}
|
||||
|
||||
const liveProvider = slide?.querySelector(
|
||||
'frigate-card-live-provider',
|
||||
FRIGATE_CARD_LIVE_PROVIDER,
|
||||
) as FrigateCardLiveProvider | null;
|
||||
if (liveProvider) {
|
||||
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
|
||||
extends LitElement
|
||||
implements FrigateCardMediaPlayer
|
||||
@@ -721,7 +723,7 @@ export class FrigateCardLiveProvider
|
||||
protected _refProvider: Ref<Element & FrigateCardMediaPlayer> = createRef();
|
||||
|
||||
public async play(): Promise<void> {
|
||||
playMediaMutingIfNecessary(this._refProvider.value)
|
||||
playMediaMutingIfNecessary(this._refProvider.value);
|
||||
}
|
||||
|
||||
public pause(): void {
|
||||
@@ -922,7 +924,7 @@ export class FrigateCardLiveProvider
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-live-provider': FrigateCardLiveProvider;
|
||||
FRIGATE_CARD_LIVE_PROVIDER: FrigateCardLiveProvider;
|
||||
'frigate-card-live-carousel': FrigateCardLiveCarousel;
|
||||
'frigate-card-live': FrigateCardLive;
|
||||
}
|
||||
|
||||
@@ -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')
|
||||
export class FrigateCardViewerCarousel extends LitElement {
|
||||
@@ -237,7 +237,9 @@ export class FrigateCardViewerCarousel extends LitElement {
|
||||
}
|
||||
|
||||
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({
|
||||
playerSelector: FRIGATE_CARD_HLS_SELECTOR,
|
||||
playerSelector: FRIGATE_CARD_VIEWER_PROVIDER,
|
||||
...(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
|
||||
extends LitElement
|
||||
implements FrigateCardMediaPlayer
|
||||
@@ -545,7 +547,7 @@ export class FrigateCardViewerProvider
|
||||
protected _refVideoProvider: Ref<Element & FrigateCardMediaPlayer> = createRef();
|
||||
|
||||
public async play(): Promise<void> {
|
||||
playMediaMutingIfNecessary(this._refVideoProvider.value)
|
||||
playMediaMutingIfNecessary(this._refVideoProvider.value);
|
||||
}
|
||||
|
||||
public pause(): void {
|
||||
@@ -701,6 +703,6 @@ declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-viewer-carousel': FrigateCardViewerCarousel;
|
||||
'frigate-card-viewer': FrigateCardViewer;
|
||||
'frigate-card-viewer-provider': FrigateCardViewerProvider;
|
||||
FRIGATE_CARD_VIEWER_PROVIDER: FrigateCardViewerProvider;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user