fix: Improve reliability of connection cleanup (#2009)

- Closes #1992

src/components/elements.ts

@@ -301,6 +301,7 @@ export class AdvancedCameraCardElementsConditional extends LitElement {
 
   disconnectedCallback(): void {
     this._conditionManager?.destroy();
+    super.disconnectedCallback();
   }
 
   protected _createConditionManager(): void {

src/components/live/provider.ts

@@ -128,6 +128,7 @@ export class AdvancedCameraCardLiveProvider extends LitElement implements MediaP
 
   public disconnectedCallback(): void {
     this._isVideoMediaLoaded = false;
+    super.disconnectedCallback();
   }
 
   protected _videoMediaShowHandler(): void {

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

@@ -68,6 +68,7 @@ export class AdvancedCameraCardGo2RTC extends LitElement implements MediaPlayer
   disconnectedCallback(): void {
     this._player = undefined;
     this._message = null;
+    super.disconnectedCallback();
   }
 
   connectedCallback(): void {

src/components/surround-basic.ts

@@ -30,7 +30,6 @@ export class AdvancedCameraCardSurroundBasic extends LitElement {
   }
 
   disconnectedCallback(): void {
-    super.disconnectedCallback();
     this.removeEventListener(
       'advanced-camera-card:drawer:open',
       this._boundDrawerHandler,
@@ -39,6 +38,7 @@ export class AdvancedCameraCardSurroundBasic extends LitElement {
       'advanced-camera-card:drawer:close',
       this._boundDrawerHandler,
     );
+    super.disconnectedCallback();
   }
 
   protected _drawerHandler(ev: Event) {

src/components/thumbnail.ts

@@ -64,16 +64,16 @@ export class AdvancedCameraCardThumbnailFeatureThumbnail extends LitElement {
    * Component connected callback.
    */
   connectedCallback(): void {
-    this._intersectionObserver.observe(this);
     super.connectedCallback();
+    this._intersectionObserver.observe(this);
   }
 
   /**
    * Component disconnected callback.
    */
   disconnectedCallback(): void {
-    super.disconnectedCallback();
     this._intersectionObserver.disconnect();
+    super.disconnectedCallback();
   }
 
   protected willUpdate(changedProps: PropertyValues): void {

src/components/zoomer.ts

@@ -40,6 +40,7 @@ export class AdvancedCameraCardZoomer extends LitElement {
     this._zoom?.deactivate();
     this.removeEventListener('advanced-camera-card:zoom:zoomed', this._zoomHandler);
     this.removeEventListener('advanced-camera-card:zoom:unzoomed', this._unzoomHandler);
+    super.disconnectedCallback();
   }
 
   protected willUpdate(changedProps: PropertyValues): void {

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

@@ -54,6 +54,24 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
       return this._mediaPlayerController;
     }
 
+    private async _startWebRtc(): Promise<void> {
+      // There is a race condition in the underlying HA frontend code between
+      // the element connection and the async start of the WebRTC session. If
+      // the element is rapidly connected and disconnected, the RTC connection
+      // may be left permanently "dangling" causing leaks. To reproduce (without
+      // this workaround), watch the number of open connections on the go2rtc
+      // UI, then edit and rapidly save a dashboard with this card -- the number
+      // of open connections will not return to 1.
+      // See: https://github.com/dermotduffy/advanced-camera-card/issues/1992
+      await super._startWebRtc();
+
+      // Workaround: After attempting to start a WebRTC session, check if the
+      // element is connected and if not then clean up correctly.
+      if (!this.isConnected) {
+        this._cleanUp();
+      }
+    }
+
     // =====================================================================================
     // Minor modifications from:
     // - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-web-rtc-player.ts