Don't use createRef for patched players.

src/patches/ha-camera-stream.ts

@@ -9,9 +9,11 @@
 // available as compilation time.
 // ====================================================================
 
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { TemplateResult, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { query } from 'lit/decorators/query.js';
+
+import { FrigateCardMediaPlayer } from '../types.js';
 import { dispatchMediaShowEvent } from '../common.js';
 
 customElements.whenDefined('ha-camera-stream').then(() => {
@@ -38,7 +40,10 @@ customElements.whenDefined('ha-camera-stream').then(() => {
   @customElement('frigate-card-ha-camera-stream')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   class FrigateCardHaCameraStream extends customElements.get('ha-camera-stream') {
-    protected _playerRef: Ref<HTMLElement> = createRef();
+    // 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')
+    protected _player: FrigateCardMediaPlayer;
 
     // ========================================================================================
     // Minor modifications from:
@@ -49,28 +54,28 @@ customElements.whenDefined('ha-camera-stream').then(() => {
      * Play the video.
      */
     public play(): void {
-      this._playerRef.value?.play();
+      this._player?.play();
     }
 
     /**
      * Pause the video.
      */
     public pause(): void {
-      this._playerRef.value?.pause();
+      this._player?.pause();
     }
 
     /**
      * Mute the video.
      */
     public mute(): void {
-      this._playerRef.value?.mute();
+      this._player?.mute();
     }
 
     /**
      * Unmute the video.
      */
     public unmute(): void {
-      this._playerRef.value?.unmute();
+      this._player?.unmute();
     }
 
     /**
@@ -98,7 +103,7 @@ customElements.whenDefined('ha-camera-stream').then(() => {
       if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
         return this._url
           ? html` <frigate-card-ha-hls-player
-              ${ref(this._playerRef)}
+              id="player"
               ?autoplay=${false}
               playsinline
               .allowExoPlayer=${this.allowExoPlayer}
@@ -111,7 +116,7 @@ customElements.whenDefined('ha-camera-stream').then(() => {
       }
       if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC) {
         return html`<frigate-card-ha-web-rtc-player
-          ${ref(this._playerRef)}
+          id="player"
           ?autoplay=${false}
           playsinline
           .muted=${this.muted}

src/patches/ha-hls-player.ts

@@ -10,28 +10,32 @@
 // ====================================================================
 
 import { TemplateResult, css, html } from 'lit';
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { customElement } from 'lit/decorators.js';
+import { query } from 'lit/decorators/query.js';
+
 import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js';
 
 customElements.whenDefined('ha-hls-player').then(() => {
   @customElement('frigate-card-ha-hls-player')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   class FrigateCardHaHlsPlayer extends customElements.get('ha-hls-player') {
-    protected _videoRef: Ref<HTMLVideoElement> = createRef();
+    // 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('#video')
+    protected _video: HTMLVideoElement;
 
     /**
      * Play the video.
      */
     public play(): void {
-      this._videoRef.value?.play();
+      this._video?.play();
     }
 
     /**
      * Pause the video.
      */
     public pause(): void {
-      this._videoRef.value?.pause();
+      this._video?.pause();
     }
 
     /**
@@ -40,8 +44,8 @@ customElements.whenDefined('ha-hls-player').then(() => {
     public mute(): void {
       // The muted property is only for the initial muted state. Must explicitly
       // set the muted on the video player to make the change dynamic.
-      if (this._videoRef.value) {
-        this._videoRef.value.muted = true;
+      if (this._video) {
+        this._video.muted = true;
       }
     }
 
@@ -50,8 +54,8 @@ customElements.whenDefined('ha-hls-player').then(() => {
      */
     public unmute(): void {
       // See note in mute().
-      if (this._videoRef.value) {
-        this._videoRef.value.muted = false;
+      if (this._video) {
+        this._video.muted = false;
       }
     }
 
@@ -66,7 +70,7 @@ customElements.whenDefined('ha-hls-player').then(() => {
       }
       return html`
         <video
-          ${ref(this._videoRef)}
+          id="video"
           ?autoplay=${this.autoPlay}
           .muted=${this.muted}
           ?playsinline=${this.playsInline}
@@ -91,8 +95,8 @@ customElements.whenDefined('ha-hls-player').then(() => {
             height: 100%;
             width: 100%;
           }
-        `
-      ]
+        `,
+      ];
     }
   }
 });

src/patches/ha-web-rtc-player.ts

@@ -9,43 +9,54 @@
 // available as compilation time.
 // ====================================================================
 
-import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { TemplateResult, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { query } from 'lit/decorators/query.js';
+
 import { dispatchErrorMessageEvent, dispatchMediaShowEvent } from '../common.js';
 
 customElements.whenDefined('ha-web-rtc-player').then(() => {
   @customElement('frigate-card-ha-web-rtc-player')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   class FrigateCardHaWebRtcPlayer extends customElements.get('ha-web-rtc-player') {
-    protected _videoRef: Ref<HTMLVideoElement> = createRef();
+    // 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('#remote-stream')
+    protected _video: HTMLVideoElement;
 
     /**
      * Play the video.
      */
     public play(): void {
-      this._videoRef.value?.play();
+      this._video?.play();
     }
 
     /**
      * Pause the video.
      */
     public pause(): void {
-      this._videoRef.value?.pause();
+      this._video?.pause();
     }
 
     /**
      * Mute the video.
      */
     public mute(): void {
-      this.muted = true;
+      // The muted property is only for the initial muted state. Must explicitly
+      // set the muted on the video player to make the change dynamic.
+      if (this._video) {
+        this._video.muted = true;
+      }
     }
 
     /**
      * Unmute the video.
      */
     public unmute(): void {
-      this.muted = false;
+      // See note in mute().
+      if (this._video) {
+        this._video.muted = false;
+      }
     }
 
     // =====================================================================================
@@ -56,13 +67,10 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
       if (this._error) {
         // Use native Frigate card error handling, and attach the entityid to
         // clarify which camera the error refers to.
-        return dispatchErrorMessageEvent(
-          this,
-          `${this._error} (${this.entityid})`);
+        return dispatchErrorMessageEvent(this, `${this._error} (${this.entityid})`);
       }
       return html`
         <video
-          ${ref(this._videoRef)}
           id="remote-stream"
           ?autoplay=${this.autoPlay}
           .muted=${this.muted}