diff --git a/src/components/live.ts b/src/components/live.ts index e3d9b9fe..be86e2a2 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -682,7 +682,7 @@ export class FrigateCardLiveWebRTC extends LitElement { * Play the video. */ public play(): void { - this._getPlayer()?.play().catch((_) => { + this._getPlayer()?.play().catch(() => { // WebRTC appears to generate additional spurious load events, which may // result in loads after a play() call, which causes the browser to spam // the logs unless the promise rejection is handled here. diff --git a/src/components/media-carousel.ts b/src/components/media-carousel.ts index 09f5b676..a7aa7454 100644 --- a/src/components/media-carousel.ts +++ b/src/components/media-carousel.ts @@ -29,9 +29,10 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel { protected _previousControlRef: Ref = 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(); } @@ -40,7 +41,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel { */ connectedCallback(): void { 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 { super.disconnectedCallback(); - this.removeEventListener('frigate-card:media-show', this._playSelectedMediaHandler); + this.removeEventListener('frigate-card:media-show', this._autoplayHandler); } protected _destroyCarousel(): void { diff --git a/src/components/viewer.ts b/src/components/viewer.ts index 6483a0d4..406dd764 100644 --- a/src/components/viewer.ts +++ b/src/components/viewer.ts @@ -265,6 +265,16 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel { 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 { super._destroyCarousel(); @@ -308,9 +318,15 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel { }), ] : []), - MediaAutoPlayPause({ - playerSelector: 'frigate-card-ha-hls-player', - }), + + // Don't need autoplay/pause for snapshots. + ...(this.view?.is('clip') + ? [ + MediaAutoPlayPause({ + 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 // media load handler on a 'real' load. !lazyLoad || - (this._plugins['Lazyload'] as LazyloadType | undefined)?.hasLazyloaded(slideIndex) + (this._plugins['Lazyload'] as LazyloadType | undefined)?.hasLazyloaded( + slideIndex, + ) ) { this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e)); }