From e963735dbabdc2fea8a95aea325952560c727625 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 23 Aug 2021 07:40:37 +0200
Subject: [PATCH] Cleanup mjpeg stream when disconnected (+ bump Lit) (#9868)

---
 package.json                       |  8 ++++--
 src/components/ha-camera-stream.ts | 45 ++++++++++++++++++++----------
 yarn.lock                          | 38 ++++++++++++-------------
 3 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 8ca730506d..c13880a872 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.0-rc.2",
+    "lit": "^2.0.0-rc.3",
     "lit-vaadin-helpers": "^0.1.3",
     "marked": "^2.0.5",
     "mdn-polyfills": "^5.16.0",
@@ -233,8 +233,10 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit-html": "2.0.0-rc.3",
-    "lit-element": "3.0.0-rc.2"
+    "lit": "^2.0.0-rc.3",
+    "lit-html": "2.0.0-rc.4",
+    "lit-element": "3.0.0-rc.3",
+    "@lit/reactive-element": "1.0.0-rc.3"
   },
   "main": "src/home-assistant.js",
   "husky": {
diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts
index 9d91e81ffd..57b4649a53 100644
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -8,7 +8,6 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
-import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
 import {
@@ -41,6 +40,32 @@ class HaCameraStream extends LitElement {
 
   @state() private _url?: string;
 
+  @state() private _connected = false;
+
+  public willUpdate(changedProps: PropertyValues): void {
+    if (
+      changedProps.has("stateObj") &&
+      !this._shouldRenderMJPEG &&
+      this.stateObj &&
+      (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
+        this.stateObj.entity_id
+    ) {
+      this._forceMJPEG = undefined;
+      this._url = undefined;
+      this._getStreamUrl();
+    }
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._connected = true;
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._connected = false;
+  }
+
   protected render(): TemplateResult {
     if (!this.stateObj) {
       return html``;
@@ -50,10 +75,11 @@ class HaCameraStream extends LitElement {
       ${__DEMO__ || this._shouldRenderMJPEG
         ? html`
             <img
-              @load=${this._elementResized}
               .src=${__DEMO__
-                ? this.stateObj!.attributes.entity_picture
-                : computeMJPEGStreamUrl(this.stateObj)}
+                ? this.stateObj!.attributes.entity_picture!
+                : this._connected
+                ? computeMJPEGStreamUrl(this.stateObj)
+                : ""}
               .alt=${`Preview of the ${computeStateName(
                 this.stateObj
               )} camera.`}
@@ -75,13 +101,6 @@ class HaCameraStream extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    if (changedProps.has("stateObj") && !this._shouldRenderMJPEG) {
-      this._forceMJPEG = undefined;
-      this._getStreamUrl();
-    }
-  }
-
   private get _shouldRenderMJPEG() {
     return (
       this._forceMJPEG === this.stateObj!.entity_id ||
@@ -107,10 +126,6 @@ class HaCameraStream extends LitElement {
     }
   }
 
-  private _elementResized() {
-    fireEvent(this, "iron-resize");
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host,
diff --git a/yarn.lock b/yarn.lock
index 50b861edd9..3b25b90ef6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1869,10 +1869,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lit/reactive-element@npm:^1.0.0-rc.2":
-  version: 1.0.0-rc.2
-  resolution: "@lit/reactive-element@npm:1.0.0-rc.2"
-  checksum: 89f9c912341a70d8b4318b5846ac5682f4aaa6b5135e6f8d69b37eb70d928cedfd1eca2df87bf3c37e735fd283374e1f978af6a152f60e6f0ef0e5607e30c208
+"@lit/reactive-element@npm:1.0.0-rc.3":
+  version: 1.0.0-rc.3
+  resolution: "@lit/reactive-element@npm:1.0.0-rc.3"
+  checksum: b86169dadde635e8d5b43543948f692036c88f3d07912d10f4812d6e5fea14d2c6f85f63031c135cfeb22eae3b0eba3489ebc0731ed9a882853fa33e5d3fb81a
   languageName: node
   linkType: hard
 
@@ -8950,7 +8950,7 @@ fsevents@~2.3.1:
     leaflet: ^1.7.1
     leaflet-draw: ^1.0.4
     lint-staged: ^11.0.1
-    lit: ^2.0.0-rc.2
+    lit: ^2.0.0-rc.3
     lit-analyzer: ^1.2.1
     lit-vaadin-helpers: ^0.1.3
     lodash.template: ^4.5.0
@@ -10523,22 +10523,22 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
-"lit-element@npm:3.0.0-rc.2":
-  version: 3.0.0-rc.2
-  resolution: "lit-element@npm:3.0.0-rc.2"
+"lit-element@npm:3.0.0-rc.3":
+  version: 3.0.0-rc.3
+  resolution: "lit-element@npm:3.0.0-rc.3"
   dependencies:
     "@lit/reactive-element": ^1.0.0-rc.2
-    lit-html: ^2.0.0-rc.3
-  checksum: 983b1bcc2bdcafc2afbfe66fcbde49eddc379ec0e331b949b1676010eef4a9b06d1ef8b0d62077195f87d710996c257de4cbbd71f40501e81352c1f7da207bce
+    lit-html: ^2.0.0-rc.4
+  checksum: ad02be1c2e9b3df21bff287267cb3cd7cb879475db1c328fc2ee380316330d1c8faaac1ea302d931c1fbba2641cb10c3f95ca143be41b96390a4b158e0298bb7
   languageName: node
   linkType: hard
 
-"lit-html@npm:2.0.0-rc.3":
-  version: 2.0.0-rc.3
-  resolution: "lit-html@npm:2.0.0-rc.3"
+"lit-html@npm:2.0.0-rc.4":
+  version: 2.0.0-rc.4
+  resolution: "lit-html@npm:2.0.0-rc.4"
   dependencies:
     "@types/trusted-types": ^1.0.1
-  checksum: 6e7f6411f1749dd925d6bb2ff9af9d9fc5bede25c6cf3ef45b7d1fcd888a43096fa6be555fee43626ea1be1c2a82a282d73ce90a7465c775aed03bc1a8398cac
+  checksum: 31c1965f6b06f2d98d9cdd88ee0d90ada5256ff4259966ada0ef8ac46c5a1d382d304e67681243b2b7dac36bf5226dc378484fc4131c3f3b179340535b1ace31
   languageName: node
   linkType: hard
 
@@ -10551,14 +10551,14 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
-"lit@npm:^2.0.0-rc.1, lit@npm:^2.0.0-rc.2":
-  version: 2.0.0-rc.2
-  resolution: "lit@npm:2.0.0-rc.2"
+"lit@npm:^2.0.0-rc.3":
+  version: 2.0.0-rc.3
+  resolution: "lit@npm:2.0.0-rc.3"
   dependencies:
     "@lit/reactive-element": ^1.0.0-rc.2
     lit-element: ^3.0.0-rc.2
-    lit-html: ^2.0.0-rc.3
-  checksum: 4adc81ee8836a5d2808408931cf7b7ff8de0851513c6120d1a0b980f2eaca735044db817fbe5b810b64e12a463656fdd63e4437760e219a6011c97f74996217f
+    lit-html: ^2.0.0-rc.4
+  checksum: 404d503d9d1745b6c5d2c93632b16ca7a2aaaabbfdd3974a98b653e519e08acff9507f853aa43de2061d8a7b235d1ca87620c11b729c67617c2e3008359a64c9
   languageName: node
   linkType: hard