Don't use autoplay logic for snapshots.

This commit is contained in:
Dermot Duffy
2022-01-22 19:38:57 -08:00
parent 34448549b6
commit 20ea8054a7
3 changed files with 28 additions and 9 deletions
+1 -1
View File
@@ -682,7 +682,7 @@ export class FrigateCardLiveWebRTC extends LitElement {
* Play the video. * Play the video.
*/ */
public play(): void { public play(): void {
this._getPlayer()?.play().catch((_) => { this._getPlayer()?.play().catch(() => {
// WebRTC appears to generate additional spurious load events, which may // WebRTC appears to generate additional spurious load events, which may
// result in loads after a play() call, which causes the browser to spam // result in loads after a play() call, which causes the browser to spam
// the logs unless the promise rejection is handled here. // the logs unless the promise rejection is handled here.
+5 -4
View File
@@ -29,9 +29,10 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
protected _previousControlRef: Ref<FrigateCardNextPreviousControl> = createRef(); protected _previousControlRef: Ref<FrigateCardNextPreviousControl> = createRef();
/** /**
* Play the media on the selected slide. * Play the media on the selected slide. May be overridden to control when
* autoplay should happen.
*/ */
protected _playSelectedMediaHandler(): void { protected _autoplayHandler(): void {
(this._plugins['MediaAutoPlayPause'] as MediaAutoPlayPauseType | undefined)?.play(); (this._plugins['MediaAutoPlayPause'] as MediaAutoPlayPauseType | undefined)?.play();
} }
@@ -40,7 +41,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
*/ */
connectedCallback(): void { connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
this.addEventListener('frigate-card:media-show', this._playSelectedMediaHandler); this.addEventListener('frigate-card:media-show', this._autoplayHandler);
} }
/** /**
@@ -48,7 +49,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
*/ */
disconnectedCallback(): void { disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
this.removeEventListener('frigate-card:media-show', this._playSelectedMediaHandler); this.removeEventListener('frigate-card:media-show', this._autoplayHandler);
} }
protected _destroyCarousel(): void { protected _destroyCarousel(): void {
+19 -1
View File
@@ -265,6 +265,16 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
super.updated(changedProperties); super.updated(changedProperties);
} }
/**
* Play the media on the selected slide. May be overridden to control when
* autoplay should happen.
*/
protected _autoplayHandler(): void {
if (this.viewerConfig?.autoplay_clip) {
super._autoplayHandler();
}
}
protected _destroyCarousel(): void { protected _destroyCarousel(): void {
super._destroyCarousel(); super._destroyCarousel();
@@ -308,9 +318,15 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
}), }),
] ]
: []), : []),
// Don't need autoplay/pause for snapshots.
...(this.view?.is('clip')
? [
MediaAutoPlayPause({ MediaAutoPlayPause({
playerSelector: 'frigate-card-ha-hls-player', playerSelector: 'frigate-card-ha-hls-player',
}), }),
]
: []),
]; ];
} }
@@ -699,7 +715,9 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
// images in media-carousel.ts). Here we need to only call the // images in media-carousel.ts). Here we need to only call the
// media load handler on a 'real' load. // media load handler on a 'real' load.
!lazyLoad || !lazyLoad ||
(this._plugins['Lazyload'] as LazyloadType | undefined)?.hasLazyloaded(slideIndex) (this._plugins['Lazyload'] as LazyloadType | undefined)?.hasLazyloaded(
slideIndex,
)
) { ) {
this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e)); this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e));
} }