refactor: Refactor media loading manager for improved robustness (#2464)

src/components/live/providers/go2rtc/index.ts

@@ -8,7 +8,6 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { Camera } from '../../../../camera-manager/camera.js';
-import { CameraEndpoints } from '../../../../camera-manager/types.js';
 import { MicrophoneState } from '../../../../card-controller/types.js';
 import { dispatchLiveErrorEvent } from '../../../../components-lib/live/utils/dispatch-live-error.js';
 import { VideoMediaPlayerController } from '../../../../components-lib/media-player/video.js';
@@ -31,8 +30,9 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
   @property({ attribute: false })
   public camera?: Camera;
 
+  // The BASE camera ID (camera property may be a substream)
   @property({ attribute: false })
-  public cameraEndpoints?: CameraEndpoints;
+  public targetID?: string;
 
   @property({ attribute: false })
   public microphoneState?: MicrophoneState;
@@ -55,7 +55,7 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
   private _signedURLController = new SignedURLController(
     this,
     () => {
-      const endpoint = this.cameraEndpoints?.go2rtc;
+      const endpoint = this.camera?.getEndpoints()?.go2rtc;
       if (!this.hass || !endpoint) {
         return {};
       }
@@ -93,6 +93,7 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
     }
 
     this._player = new VideoRTC();
+    this._player.targetID = this.targetID ?? null;
     this._player.mediaPlayerController = this._mediaPlayerController;
     this._player.microphoneStream = this.microphoneState?.stream ?? null;
     this._player.src = src;
@@ -108,17 +109,17 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
   }
 
   protected willUpdate(changedProps: PropertyValues): void {
-    if (changedProps.has('cameraEndpoints')) {
+    if (changedProps.has('camera')) {
       // Clear old player; the new one is created by the
       // SignedURLController's valueChangeCallback once the URL resolves.
       this._player = undefined;
     }
 
-    // Only treat a missing go2rtc endpoint as an error after cameraEndpoints
-    // has been explicitly set (not undefined / still loading).
+    // Only treat a missing go2rtc endpoint as an error after the camera's
+    // endpoints have been explicitly set (not undefined / still loading).
+    const endpoints = this.camera?.getEndpoints();
     const hasError =
-      !!this._signedURLController.getError() ||
-      (!!this.cameraEndpoints && !this.cameraEndpoints.go2rtc);
+      !!this._signedURLController.getError() || (!!endpoints && !endpoints.go2rtc);
     if (hasError && !this._hasLiveError) {
       dispatchLiveErrorEvent(this);
     }
@@ -149,7 +150,7 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
         { context: this.camera?.getConfig() },
       );
     }
-    if (!this.cameraEndpoints?.go2rtc) {
+    if (!this.camera?.getEndpoints()?.go2rtc) {
       return renderNotificationBlockFromText(localize('error.live_camera_no_endpoint'), {
         context: this.camera?.getConfig(),
       });

src/components/live/providers/go2rtc/video-rtc.d.ts

@@ -33,6 +33,7 @@ export class VideoRTC extends HTMLElement {
   // Custom methods/members.
   mediaPlayerController: MediaPlayerController | null;
   microphoneStream: MediaStream | null;
+  targetID: string | null;
   reconnect();
   setControls(controls: boolean): void;
 }

src/components/live/providers/go2rtc/video-rtc.js

@@ -9,7 +9,7 @@ import {
   setControlsOnVideo,
 } from '../../../../utils/controls.js';
 import {
-  dispatchMediaLoadedEvent,
+  createMediaLoadedInfo,
   dispatchMediaPauseEvent,
   dispatchMediaPlayEvent,
   dispatchMediaVolumeChangeEvent,
@@ -171,6 +171,20 @@ export class VideoRTC extends HTMLElement {
      */
     this.mediaPlayerController = null;
 
+    /**
+     * Identifies which camera the loaded media belongs to.
+     * @type {string | null}
+     */
+    this.targetID = null;
+
+    /**
+     * Cancellation token for the current load registration. Aborted on
+     * disconnect to fire all cleanup listeners that recipients attached to
+     * its signal.
+     * @type {AbortController | null}
+     */
+    this._abortController = null;
+
     /**
      * Whether to show or hide video controls for videos created *in future*.
      * @type {boolean}}
@@ -188,7 +202,7 @@ export class VideoRTC extends HTMLElement {
    * Dispatch a media loaded event with current capabilities.
    */
   _dispatchMediaLoadedEvent() {
-    dispatchMediaLoadedEvent(this, this.video, {
+    const info = createMediaLoadedInfo(this.video, {
       ...(this.mediaPlayerController && {
         mediaPlayerController: this.mediaPlayerController,
       }),
@@ -199,6 +213,27 @@ export class VideoRTC extends HTMLElement {
       },
       technology: getTechnologyForVideoRTC(this),
     });
+    if (info) {
+      this._dispatchMediaLoadedInfo(info);
+    }
+  }
+
+  _dispatchMediaLoadedInfo(info) {
+    if (!this.targetID) {
+      return;
+    }
+    this._abortController = new AbortController();
+    this.dispatchEvent(
+      new CustomEvent('advanced-camera-card:media:loaded', {
+        bubbles: true,
+        composed: true,
+        cancelable: false,
+        detail: {
+          info: { ...info, targetID: this.targetID },
+          signal: this._abortController.signal,
+        },
+      }),
+    );
   }
 
   /**
@@ -298,6 +333,12 @@ export class VideoRTC extends HTMLElement {
    * document's DOM.
    */
   disconnectedCallback() {
+    // Synchronous manager-side cleanup by aborting the load's signal. The
+    // signal's abort listeners — registered by the card-root listener and
+    // any sinks in the bubble path — fire even though `parentNode` is
+    // already null, because abort is plain JS, not DOM-event-bound.
+    this._abortController?.abort();
+    this._abortController = null;
     if (this.background || this.disconnectTID) return;
     if (this.wsState === WebSocket.CLOSED && this.pcState === WebSocket.CLOSED) return;
 
@@ -767,12 +808,15 @@ export class VideoRTC extends HTMLElement {
 
       if (!receivedFirstFrame) {
         receivedFirstFrame = true;
-        dispatchMediaLoadedEvent(this, this.video, {
+        const info = createMediaLoadedInfo(this.video, {
           ...(this.mediaPlayerController && {
             mediaPlayerController: this.mediaPlayerController,
           }),
           technology: ['mjpeg'],
         });
+        if (info) {
+          this._dispatchMediaLoadedInfo(info);
+        }
       }
     };
 
@@ -814,12 +858,15 @@ export class VideoRTC extends HTMLElement {
         canvas.height = video2.videoHeight;
         context = canvas.getContext('2d');
 
-        dispatchMediaLoadedEvent(this, video2, {
+        const info = createMediaLoadedInfo(video2, {
           ...(this.mediaPlayerController && {
             mediaPlayerController: this.mediaPlayerController,
           }),
           technology: ['mp4'],
         });
+        if (info) {
+          this._dispatchMediaLoadedInfo(info);
+        }
       }
 
       context.drawImage(video2, 0, 0, canvas.width, canvas.height);

src/components/live/providers/ha.ts

@@ -1,7 +1,7 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
-import { CameraConfig } from '../../../config/schema/cameras';
+import { Camera } from '../../../camera-manager/camera.js';
 import { HomeAssistant } from '../../../ha/types';
 import '../../../patches/ha-camera-stream';
 import '../../../patches/ha-hls-player.js';
@@ -19,7 +19,11 @@ export class AdvancedCameraCardLiveHA extends LitElement implements MediaPlayer
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  public cameraConfig?: CameraConfig;
+  public camera?: Camera;
+
+  // The BASE camera ID (camera property may be a substream)
+  @property({ attribute: false })
+  public targetID?: string;
 
   @property({ attribute: true, type: Boolean })
   public controls = false;
@@ -36,14 +40,14 @@ export class AdvancedCameraCardLiveHA extends LitElement implements MediaPlayer
       return;
     }
 
+    const cameraEntity = this.camera?.getConfig()?.camera_entity;
     return html` <advanced-camera-card-ha-camera-stream
       ${ref(this._playerRef)}
       .hass=${this.hass}
-      .stateObj=${this.cameraConfig?.camera_entity
-        ? this.hass.states[this.cameraConfig.camera_entity]
-        : undefined}
+      .stateObj=${cameraEntity ? this.hass.states[cameraEntity] : undefined}
       .controls=${this.controls}
       .muted=${true}
+      .targetID=${this.targetID}
     >
     </advanced-camera-card-ha-camera-stream>`;
   }

src/components/live/providers/image.ts

@@ -1,8 +1,7 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { CameraConfig } from '../../../config/schema/cameras';
-import { EnabledProxyConfig } from '../../../config/schema/common/proxy';
+import { Camera } from '../../../camera-manager/camera.js';
 import { HomeAssistant } from '../../../ha/types';
 import basicBlockStyle from '../../../scss/basic-block.scss';
 import {
@@ -18,10 +17,11 @@ export class AdvancedCameraCardLiveImage extends LitElement implements MediaPlay
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  public cameraConfig?: CameraConfig;
+  public camera?: Camera;
 
+  // The BASE camera ID (camera property may be a substream)
   @property({ attribute: false })
-  public proxyConfig?: EnabledProxyConfig;
+  public targetID?: string;
 
   private _refImage: Ref<MediaPlayerElement> = createRef();
 
@@ -31,7 +31,8 @@ export class AdvancedCameraCardLiveImage extends LitElement implements MediaPlay
   }
 
   protected render(): TemplateResult | void {
-    if (!this.hass || !this.cameraConfig) {
+    const cameraConfig = this.camera?.getConfig();
+    if (!this.hass || !cameraConfig) {
       return;
     }
 
@@ -39,9 +40,10 @@ export class AdvancedCameraCardLiveImage extends LitElement implements MediaPlay
       <advanced-camera-card-image-updating-player
         ${ref(this._refImage)}
         .hass=${this.hass}
-        .imageConfig=${this.cameraConfig.image}
-        .cameraConfig=${this.cameraConfig}
-        .proxyConfig=${this.proxyConfig}
+        .imageConfig=${cameraConfig.image}
+        .cameraConfig=${cameraConfig}
+        .targetID=${this.targetID}
+        .proxyConfig=${this.camera?.getLiveProxyConfig()}
       >
       </advanced-camera-card-image-updating-player>
     `;

src/components/live/providers/jsmpeg.ts

@@ -9,12 +9,12 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
-import { CameraEndpoints } from '../../../camera-manager/types.js';
+import { Camera } from '../../../camera-manager/camera.js';
 import { dispatchLiveErrorEvent } from '../../../components-lib/live/utils/dispatch-live-error.js';
+import { MediaLoadedInfoSourceController } from '../../../components-lib/media-loaded-info-source-controller.js';
 import { JSMPEGMediaPlayerController } from '../../../components-lib/media-player/jsmpeg.js';
 import { createNotificationFromText } from '../../../components-lib/notification/factory.js';
 import { Notification } from '../../../config/schema/actions/types.js';
-import { CameraConfig } from '../../../config/schema/cameras.js';
 import { CardWideConfig } from '../../../config/schema/types.js';
 import { homeAssistantGetSignedURLIfNecessary } from '../../../ha/sign-path.js';
 import { HomeAssistant } from '../../../ha/types.js';
@@ -23,7 +23,7 @@ import liveJSMPEGStyle from '../../../scss/live-jsmpeg.scss';
 import { MediaPlayer, MediaPlayerController } from '../../../types.js';
 import { convertHTTPAdressToWebsocket, errorToConsole } from '../../../utils/basic.js';
 import {
-  dispatchMediaLoadedEvent,
+  createMediaLoadedInfo,
   dispatchMediaPauseEvent,
   dispatchMediaPlayEvent,
 } from '../../../utils/media-info.js';
@@ -44,10 +44,11 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
   private hass?: HomeAssistant;
 
   @property({ attribute: false })
-  public cameraConfig?: CameraConfig;
+  public camera?: Camera;
 
+  // The BASE camera ID (camera property may be a substream)
   @property({ attribute: false })
-  public cameraEndpoints?: CameraEndpoints;
+  public targetID?: string;
 
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
@@ -65,14 +66,16 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
     () => this._jsmpegCanvasElement ?? null,
   );
 
+  private _mediaLoadedInfoSourceController = new MediaLoadedInfoSourceController(this, {
+    getTargetID: () => this.targetID ?? null,
+  });
+
   public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
     return this._mediaPlayerController;
   }
 
   protected willUpdate(changedProperties: PropertyValues): void {
-    if (
-      ['cameraConfig', 'cameraEndpoints'].some((prop) => changedProperties.has(prop))
-    ) {
+    if (changedProperties.has('camera')) {
       this._notification = null;
     }
   }
@@ -99,7 +102,7 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
           preserveDrawingBuffer: true,
 
           // Override with user-specified options.
-          ...this.cameraConfig?.jsmpeg?.options,
+          ...this.camera?.getConfig()?.jsmpeg?.options,
 
           // Don't allow the player to internally reconnect, as it may re-use a
           // URL with a (newly) invalid signature, e.g. during a Home Assistant
@@ -120,17 +123,20 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
       );
     });
 
-    // The media loaded event must be dispatched after the player is assigned to
-    // `this._jsmpegVideoPlayer`, since the load call may (will!) result in
-    // calls back to the player to check for pause status for menu buttons.
+    // The media-loaded info must be reported after the player is assigned to
+    // `this._jsmpegVideoPlayer`, since the registration may result in calls
+    // back to the player to check for pause status for menu buttons.
     if (this._jsmpegCanvasElement) {
-      dispatchMediaLoadedEvent(this, this._jsmpegCanvasElement, {
+      const info = createMediaLoadedInfo(this._jsmpegCanvasElement, {
         mediaPlayerController: this._mediaPlayerController,
         capabilities: {
           supportsPause: true,
         },
         technology: ['jsmpeg'],
       });
+      if (info) {
+        this._mediaLoadedInfoSourceController.set(info);
+      }
     }
   }
 
@@ -175,11 +181,11 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
     this._jsmpegCanvasElement = document.createElement('canvas');
     this._jsmpegCanvasElement.className = 'media';
 
-    const endpoint = this.cameraEndpoints?.jsmpeg;
+    const endpoint = this.camera?.getEndpoints()?.jsmpeg;
     if (!endpoint) {
       this._notification = createNotificationFromText(
         localize('error.live_camera_no_endpoint'),
-        { context: this.cameraConfig },
+        { context: this.camera?.getConfig() },
       );
       dispatchLiveErrorEvent(this);
       return;
@@ -199,7 +205,7 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
 
     if (!address) {
       this._notification = createNotificationFromText(localize('error.failed_sign'), {
-        context: this.cameraConfig,
+        context: this.camera?.getConfig(),
       });
       dispatchLiveErrorEvent(this);
       return;
@@ -224,7 +230,7 @@ export class AdvancedCameraCardLiveJSMPEG extends LitElement implements MediaPla
         if (!this._notification) {
           this._notification = createNotificationFromText(
             localize('error.jsmpeg_no_player'),
-            { context: this.cameraConfig },
+            { context: this.camera?.getConfig() },
           );
           dispatchLiveErrorEvent(this);
         }

src/components/live/providers/webrtc-card.ts

@@ -8,13 +8,13 @@ import {
   unsafeCSS,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { CameraEndpoints } from '../../../camera-manager/types.js';
+import { Camera } from '../../../camera-manager/camera.js';
 import { dispatchLiveErrorEvent } from '../../../components-lib/live/utils/dispatch-live-error.js';
 import { getTechnologyForVideoRTC } from '../../../components-lib/live/utils/get-technology-for-video-rtc.js';
+import { MediaLoadedInfoSourceController } from '../../../components-lib/media-loaded-info-source-controller.js';
 import { VideoMediaPlayerController } from '../../../components-lib/media-player/video.js';
 import { createNotificationFromText } from '../../../components-lib/notification/factory.js';
 import { Notification } from '../../../config/schema/actions/types.js';
-import { CameraConfig } from '../../../config/schema/cameras.js';
 import { CardWideConfig } from '../../../config/schema/types.js';
 import { HomeAssistant } from '../../../ha/types.js';
 import { localize } from '../../../localize/localize.js';
@@ -32,7 +32,7 @@ import {
 } from '../../../utils/controls.js';
 import { getContextFromError } from '../../../utils/error-context.js';
 import {
-  dispatchMediaLoadedEvent,
+  createMediaLoadedInfo,
   dispatchMediaPauseEvent,
   dispatchMediaPlayEvent,
   dispatchMediaVolumeChangeEvent,
@@ -49,10 +49,11 @@ import { VideoRTC } from './go2rtc/video-rtc.js';
 @customElement('advanced-camera-card-live-webrtc-card')
 export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements MediaPlayer {
   @property({ attribute: false })
-  public cameraConfig?: CameraConfig;
+  public camera?: Camera;
 
+  // The BASE camera ID (camera property may be a substream)
   @property({ attribute: false })
-  public cameraEndpoints?: CameraEndpoints;
+  public targetID?: string;
 
   @property({ attribute: false })
   public cardWideConfig?: CardWideConfig;
@@ -73,6 +74,10 @@ export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements Medi
     () => this.controls,
   );
 
+  private _mediaLoadedInfoSourceController = new MediaLoadedInfoSourceController(this, {
+    getTargetID: () => this.targetID ?? null,
+  });
+
   public async getMediaPlayerController(): Promise<MediaPlayerController | null> {
     return this._mediaPlayerController;
   }
@@ -95,9 +100,7 @@ export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements Medi
   }
 
   protected willUpdate(changedProperties: PropertyValues): void {
-    if (
-      ['cameraConfig', 'cameraEndpoints'].some((prop) => changedProperties.has(prop))
-    ) {
+    if (changedProperties.has('camera')) {
       this._notification = null;
     }
   }
@@ -120,7 +123,8 @@ export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements Medi
    */
   private _createWebRTC(): HTMLElement | null {
     const webrtcElement = this._webrtcTask.value;
-    if (webrtcElement && this.hass && this.cameraConfig) {
+    const cameraConfig = this.camera?.getConfig();
+    if (webrtcElement && this.hass && cameraConfig) {
       const webrtc = new webrtcElement() as HTMLElement & {
         hass: HomeAssistant;
         setConfig: (config: Record<string, unknown>) => void;
@@ -137,10 +141,11 @@ export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements Medi
         // See: https://github.com/dermotduffy/advanced-camera-card/issues/1654
         muted: true,
 
-        ...this.cameraConfig.webrtc_card,
+        ...cameraConfig.webrtc_card,
       };
-      if (!config.url && !config.entity && this.cameraEndpoints?.webrtcCard) {
-        config.entity = this.cameraEndpoints.webrtcCard.endpoint;
+      const webrtcCardEndpoint = this.camera?.getEndpoints()?.webrtcCard;
+      if (!config.url && !config.entity && webrtcCardEndpoint) {
+        config.entity = webrtcCardEndpoint.endpoint;
       }
       webrtc.setConfig(config);
       webrtc.hass = this.hass;
@@ -204,7 +209,7 @@ export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements Medi
           if (this.controls) {
             hideMediaControlsTemporarily(video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
           }
-          dispatchMediaLoadedEvent(this, video, {
+          const info = createMediaLoadedInfo(video, {
             mediaPlayerController: this._mediaPlayerController,
             capabilities: {
               supportsPause: true,
@@ -214,6 +219,9 @@ export class AdvancedCameraCardLiveWebRTCCard extends LitElement implements Medi
               technology: getTechnologyForVideoRTC(this._videoRTC),
             }),
           });
+          if (info) {
+            this._mediaLoadedInfoSourceController.set(info);
+          }
         };
         video.onplay = () => dispatchMediaPlayEvent(this);
         video.onpause = () => dispatchMediaPauseEvent(this);