From b6fb8210741b89d131fb1f67526c82321a2c8480 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 14 Dec 2024 17:53:47 -0800
Subject: [PATCH] fix: Fix issue where wrong `ha` stream may be referred to
 [skip ci] (#1760)

---
 src/patches/ha-camera-stream.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index 144c7710..ad804251 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/src/patches/ha-camera-stream.ts
@@ -44,7 +44,7 @@ customElements.whenDefined('ha-camera-stream').then(() => {
   {
     // Due to an obscure behavior when this card is casted, this element needs
     // to use query rather than the ref directive to find the player.
-    @query('#player')
+    @query('.player:not(.hidden)')
     protected _player: FrigateCardMediaPlayer;
 
     protected _mediaLoadedInfoPerStream: Record<StreamType, MediaLoadedInfo> = {};
@@ -130,7 +130,6 @@ customElements.whenDefined('ha-camera-stream').then(() => {
 
       if (stream.type === STREAM_TYPE_HLS) {
         return html` <frigate-card-ha-hls-player
-          id="player"
           ?autoplay=${false}
           playsinline
           .allowExoPlayer=${this.allowExoPlayer}
@@ -142,13 +141,12 @@ customElements.whenDefined('ha-camera-stream').then(() => {
           @frigate-card:media:loaded=${(ev) =>
             this._storeMediaLoadedInfoHandler(STREAM_TYPE_HLS, ev)}
           @streams=${this._handleHlsStreams}
-          class=${stream.visible ? '' : 'hidden'}
+          class="player ${stream.visible ? '' : 'hidden'}"
         ></frigate-card-ha-hls-player>`;
       }
 
       if (stream.type === STREAM_TYPE_WEB_RTC) {
         return html`<frigate-card-ha-web-rtc-player
-          id="player"
           ?autoplay=${false}
           playsinline
           .muted=${this.muted}
@@ -159,7 +157,7 @@ customElements.whenDefined('ha-camera-stream').then(() => {
           @frigate-card:media:loaded=${(ev) =>
             this._storeMediaLoadedInfoHandler(STREAM_TYPE_WEB_RTC, ev)}
           @streams=${this._handleWebRtcStreams}
-          class=${stream.visible ? '' : 'hidden'}
+          class="player ${stream.visible ? '' : 'hidden'}"
         ></frigate-card-ha-web-rtc-player>`;
       }