Allow cleanup on closing more-info (#165)

* Remove camera's streaming source from camera's 'more info' when more-info is closed.

* Rename to isVisible

* Rename to isVisible

* Split dynamicContentUpdater

Split dynamicContentUpdater into two functions intended for 'normal' flow and 'hide' flow.

* Use hassUtil.resetDynamicContent

* Fix lint

* Fix lint

* Move isVisible to more-info-content

* Move isVisible to more-info-content

* Typo

* Avoid modifying the original state

* Put isVisible in the right place

* Inline resetDynamicContent

* Inline resetDynamicContent

* Fix lint

src/more-infos/more-info-camera.html

@@ -12,7 +12,7 @@
       }
     </style>
 
-    <img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj)]]"
+    <img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj, isVisible)]]"
          on-load='imageLoaded' alt='[[stateObj.entityDisplay]]' />
   </template>
 </dom-module>
@@ -29,21 +29,26 @@ Polymer({
     stateObj: {
       type: Object,
     },
+
+    isVisible: {
+      type: Boolean,
+      value: true,
+    },
   },
 
   imageLoaded: function () {
     this.fire('iron-resize');
   },
 
-  computeCameraImageUrl: function (hass, stateObj) {
+  computeCameraImageUrl: function (hass, stateObj, isVisible) {
     if (hass.demo) {
       return '/demo/webcam.jpg';
-    } else if (stateObj) {
+    } else if (stateObj && isVisible) {
       return '/api/camera_proxy_stream/' + stateObj.entityId +
              '?token=' + stateObj.attributes.access_token;
     }
-    // Return an empty image if no stateObj (= dialog not open)
+    // Return an empty image if no stateObj (= dialog not open) or in cleanup mode.
     return 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
   },
 });
-</script>
+</script>

src/more-infos/more-info-content.html

@@ -35,11 +35,18 @@ Polymer({
   },
 
   stateObjChanged: function (stateObj) {
-    if (!stateObj) return;
+    var rootEl;
-
+    if (!stateObj) {
-    window.hassUtil.dynamicContentUpdater(
+      // If root has lastChild, set 'isVisible' attribute of that child to false.
-      this, 'MORE-INFO-' + window.hassUtil.stateMoreInfoType(stateObj).toUpperCase(),
+      rootEl = Polymer.dom(this);
-      { hass: this.hass, stateObj: stateObj });
+      if (rootEl.lastChild) {
+        rootEl.lastChild.isVisible = false;
+      }
+    } else {
+      window.hassUtil.dynamicContentUpdater(
+        this, 'MORE-INFO-' + window.hassUtil.stateMoreInfoType(stateObj).toUpperCase(),
+        { hass: this.hass, stateObj: stateObj, isVisible: true });
+    }
   },
 });
 </script>

src/util/hass-util.html

@@ -50,6 +50,8 @@ window.hassUtil.canToggle = function (hass, entityId) {
   return hass.reactor.evaluate(hass.serviceGetters.canToggleEntity(entityId));
 };
 
+// Update root's child element to be newElementTag replacing another existing child if any.
+// Copy attributes into the child element.
 window.hassUtil.dynamicContentUpdater = function (root, newElementTag, attributes) {
   var rootEl = Polymer.dom(root);
   var customEl;