diff --git a/src/components/live/live-go2rtc.ts b/src/components/live/live-go2rtc.ts index bc0c9044..4dd90032 100644 --- a/src/components/live/live-go2rtc.ts +++ b/src/components/live/live-go2rtc.ts @@ -101,6 +101,18 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla } } + disconnectedCallback(): void { + this._player = undefined; + } + + connectedCallback(): void { + super.connectedCallback(); + + // Reset the player when reconnected to the DOM. + // https://github.com/dermotduffy/frigate-hass-card/issues/996 + this.requestUpdate(); + } + protected async _createPlayer(): Promise { if (!this.hass) { return; @@ -126,8 +138,8 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla this._player = new FrigateCardGo2RTCPlayer(); this._player.src = address; this._player.visibilityCheck = false; - this._player.background = true; - if (this.cameraConfig?.go2rtc?.modes) { + + if (this.cameraConfig?.go2rtc?.modes && this.cameraConfig.go2rtc.modes.length) { this._player.mode = this.cameraConfig.go2rtc.modes.join(','); } @@ -135,7 +147,7 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla } protected willUpdate(changedProps: PropertyValues): void { - if (changedProps.has('cameraEndpoints')) { + if (!this._player || changedProps.has('cameraEndpoints')) { this._createPlayer(); } } diff --git a/src/components/live/live-webrtc-card.ts b/src/components/live/live-webrtc-card.ts index 91c69a46..f1fce118 100644 --- a/src/components/live/live-webrtc-card.ts +++ b/src/components/live/live-webrtc-card.ts @@ -73,6 +73,14 @@ export class FrigateCardLiveWebRTCCard } } + connectedCallback(): void { + super.connectedCallback(); + + // Reset the player when reconnected to the DOM. + // https://github.com/dermotduffy/frigate-hass-card/issues/996 + this.requestUpdate(); + } + /** * Get the underlying video player. * @returns The player or `null` if not found.