fix(CAMERA_THUMBNAIL): remove deprecated CAMERA_THUMBNAIL tile (#548)

For backward-compatibility, rewrite it to CAMERA for now and print a warning.
resoai · Nov 27, 2020 · 0b0a101 · 0b0a101
1 parent 8eaa551
commit 0b0a101
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 140 deletions.
diff --git a/README.md b/README.md
@@ -346,12 +346,12 @@ Tile Object. [Click here for some real-life examples](TILE_EXAMPLES.md)
   bottom: true,
   /* slider: Object with slider config. See slider documentation below */
   slider: {}
-  /** type: CAMERA or CAMERA_THUMBNAIL **/
+  /** type: CAMERA **/
   /* bgSize: CSS background-size property */
-   bgSize: 'cover',
+   bgSize: 'cover',  // 'cover', 'contain', 'auto' (defaults to 'cover')
    /* filter: Function for filtering/formatting the camera URL */
    filter: function (url) {return url},
-   /* fullscreen: object of type CAMERA or CAMERA_THUMBNAIL to show it in fullscreen */
+   /* fullscreen: object of type CAMERA to show it in fullscreen */
    fullscreen: {},
    /* refresh: Number in milliseconds (or function returning a time) to set the
     * interval for refreshing the camera image
@@ -477,7 +477,6 @@ var TYPES = {
    INPUT_SELECT: 'input_select',
    INPUT_DATETIME: 'input_datetime',
    CAMERA: 'camera',
-   CAMERA_THUMBNAIL: 'camera_thumbnail',
    SCENE: 'scene',
    SLIDER: 'slider',
    IFRAME: 'iframe',

diff --git a/TILE_EXAMPLES.md b/TILE_EXAMPLES.md
@@ -49,35 +49,18 @@ Manually trigger an automation
 }
 ```
 
-#### CAMERA_THUMBNAIL and CAMERA
-```js
-{
-   position: [0, 0],
-   id: 'camera.front_gate',
-   type: TYPES.CAMERA_THUMBNAIL,
-   bgSize: 'cover',
-   width: 2,
-   state: false,
-   fullscreen: {
-      type: TYPES.CAMERA,
-      refresh: 1500, // can be number in milliseconds
-      bgSize: 'contain'
-   },
-   refresh: function () { // can also be a function
-      return 3000 + Math.random() * 1000
-   }
-}
-```
+#### CAMERA and CAMERA_STREAM
+
+Shows a camera snapshot on the tile (can also refresh every specified amount of time) and opens a fullscreen popup with an RTSP stream when pressed.
+Optionally, the fullscreen camera entity can be different from the camera entity, for example to show a hi-res stream on the fullscreen popup only.
 
-#### CAMERA_THUMBNAIL and CAMERA_STREAM
-Shows a camera feed on the tile and opens a fullscreen popup with an RTSP stream when pressed.
-Optionally, the fullscreen camera entity can be different from the thumbnail camera entity, for example to show a hires stream on the fullscreen popup only.
+**Note**: Make sure to enable the `stream` integration (https://www.home-assistant.io/integrations/stream/) in Home-assistant for the CAMERA_STREAM tile to work.
 
 ```js
 {
    position: [0, 0],
    id: 'camera.front_gate',
-   type: TYPES.CAMERA_THUMBNAIL,
+   type: TYPES.CAMERA,
    bgSize: 'cover',
    width: 2,
    state: false,
@@ -87,7 +70,8 @@ Optionally, the fullscreen camera entity can be different from the thumbnail cam
       id: 'camera.front_gate_highres',  // Optional: camera entity to use on fullscreen, defaults to the tile camera entity if omitted
       bufferLength: 5  // Optional: buffer length in seconds for the HLS buffer, default is 5 seconds
    },
-   refresh: function () { // can also be a function
+   refresh: 1500,  // can be number in milliseconds
+   refresh: function () {  // can also be a function
       return 3000 + Math.random() * 1000
    }
 }

diff --git a/index.html.ejs b/index.html.ejs
@@ -69,10 +69,6 @@
                <camera item="activeCamera.fullscreen" entity="entity" frozen="false"></camera>
             </div>
 
-            <div ng-if="activeCamera.fullscreen.type === TYPES.CAMERA_THUMBNAIL">
-               <camera-thumbnail item="activeCamera.fullscreen" entity="entity" frozen="false"></camera-thumbnail>
-            </div>
-
             <div ng-if="activeCamera.fullscreen.type === TYPES.CAMERA_STREAM">
                <camera-stream item="activeCamera.fullscreen" entity="entity" frozen="screensaverShown"></camera-stream>
             </div>
@@ -699,14 +695,6 @@
          </div>
       </div>
 
-      <div ng-if="item.type === TYPES.CAMERA_THUMBNAIL"
-           class="item-entity-container -below">
-         <div class="item-camera">
-            <camera-thumbnail item="item" entity="entity"
-                              frozen="(!isPopupActive(page) && !isPageActive(page)) || activeCamera || screensaverShown"></camera-thumbnail>
-         </div>
-      </div>
-
       <div ng-if="item.type === TYPES.CAMERA_STREAM"
            class="item-entity-container -below">
          <div class="item-camera">

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@types/angular": "^1.8.0",
     "@types/hammerjs": "^2.0.36",
     "@types/hls.js": "^0.13.3",
+    "@types/lodash.mergewith": "^4.6.6",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "eslint": "^7.14.0",
     "husky": "^4.3.0",

diff --git a/scripts/controllers/main-utilities.js b/scripts/controllers/main-utilities.js
@@ -20,6 +20,10 @@ function mergeTileListDefaults (tiles) {
          case TYPES.CAMERA:
          case TYPES.CAMERA_STREAM:
          case TYPES.CAMERA_THUMBNAIL:
+            if (tile.type === TYPES.CAMERA_THUMBNAIL) {
+               console.warn('The CAMERA_THUMBNAIL tile is deprecated. Please replace it with the CAMERA tile. Tile: ', tile);
+               tile.type = TYPES.CAMERA;
+            }
             tile.fullscreen = mergeTileDefaults(tile.fullscreen);
             break;
          case TYPES.DOOR_ENTRY:

diff --git a/scripts/controllers/main.js b/scripts/controllers/main.js
@@ -1657,8 +1657,7 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
       $scope.pages.forEach(function (page) {
          (page.groups || []).forEach(function (group) {
             (group.items || []).forEach(function (item) {
-               if ([TYPES.CAMERA, TYPES.CAMERA_THUMBNAIL, TYPES.CAMERA_STREAM]
-                  .indexOf(item.type) !== -1 && !item.hideFromList) {
+               if ([TYPES.CAMERA, TYPES.CAMERA_STREAM].includes(item.type) && !item.hideFromList) {
                   res.push(item);
                }
             });

diff --git a/scripts/directives.js b/scripts/directives.js
@@ -118,95 +118,6 @@ App.directive('camera', function () {
    };
 });
 
-App.directive('cameraThumbnail', function (Api) {
-   return {
-      restrict: 'AE',
-      replace: true,
-      scope: {
-         item: '=item',
-         entity: '=entity',
-         frozen: '=frozen',
-      },
-      link: function ($scope, $el, attrs) {
-         let refresh = 'refresh' in $scope.item ? $scope.item.refresh : 2000;
-
-         if (typeof refresh === 'function') {
-            refresh = refresh();
-         }
-
-         const throttle = refresh ? refresh * 0.9 : 100;
-         let lastUpdate = 0;
-         let current = null;
-         let prev = null;
-
-         const appendImage = function (url) {
-            const el = document.createElement('div');
-
-            if (url) {
-               el.style.backgroundImage = 'url(' + url + ')';
-            }
-            el.style.backgroundSize = $scope.item.bgSize || 'cover';
-
-            $el[0].appendChild(el);
-
-            if (prev) {
-               $el[0].removeChild(prev);
-            }
-
-            setTimeout(function () {
-               el.style.opacity = 1;
-            }, 100);
-
-            prev = current;
-            current = el;
-         };
-
-         const reloadImage = function () {
-            if (Date.now() - lastUpdate < throttle) {
-               return;
-            }
-
-            if (lastUpdate && $scope.frozen) {
-               return;
-            }
-
-            lastUpdate = Date.now();
-
-            if ($scope.entity.state === 'off') {
-               return;
-            }
-
-            Api.send({
-               type: 'camera_thumbnail',
-               entity_id: $scope.entity.entity_id,
-            },
-            function (res) {
-               if (!res.result) {
-                  return;
-               }
-
-               const url = 'data:' + res.result.content_type + ';base64,' + res.result.content;
-
-               appendImage(url);
-            });
-         };
-
-         $scope.$watchGroup([
-            'item',
-            'entity',
-         ], reloadImage);
-
-         if (refresh) {
-            const interval = setInterval(reloadImage, refresh);
-
-            $scope.$on('$destroy', function () {
-               clearInterval(interval);
-            });
-         }
-      },
-   };
-});
-
 App.directive('cameraStream', function (Api, $timeout) {
    return {
       restrict: 'AE',

diff --git a/scripts/globals/constants.js b/scripts/globals/constants.js
@@ -357,11 +357,6 @@ export const TILE_DEFAULTS = {
          return this.$scope.openCamera(item, entity);
       },
    },
-   [TYPES.CAMERA_THUMBNAIL]: {
-      action (item, entity) {
-         return this.$scope.openCamera(item, entity);
-      },
-   },
    [TYPES.CLIMATE]: {
       subtitle (item, entity) {
          return item.useHvacMode ? entity.attributes.hvac_action : undefined;

diff --git a/styles/main.less b/styles/main.less
@@ -57,7 +57,6 @@
 @INPUT_DATETIME: rgb(28, 143, 106);
 @CLIMATE: rgb(39, 84, 98);
 @CAMERA: rgb(53, 144, 157);
-@CAMERA_THUMBNAIL: rgb(53, 144, 157);
 @CAMERA_STREAM: rgb(53, 144, 157);
 @SCENE: rgb(72, 85, 105);
 @SCENE_L: rgb(98, 113, 136);
@@ -110,7 +109,6 @@
    &.-th-input_select {background-color: @INPUT_SELECT;}
    &.-th-input_datetime {background-color: @INPUT_DATETIME;}
    &.-th-camera {background-color: @CAMERA;}
-   &.-th-camera_thumbnail {background-color: @CAMERA_THUMBNAIL;}
    &.-th-camera_stream {background-color: @CAMERA_STREAM;}
    &.-th-scene {background-color: @SCENE;}
    &.-th-scene.-loading {background-color: @SCENE_L;}
@@ -123,7 +121,7 @@
    &.-th-popup_iframe {background-color: @POPUP_IFRAME;}
    &.-th-popup {background-color: @POPUP;}
    &.-th-dimmer_switch {background-color: @DIMMER_SWITCH;}
-   &.-th-image {background-color: @IMAGE;}    
+   &.-th-image {background-color: @IMAGE;}
    &.-th-history {background-color: @HISTORY;}
 }
 
@@ -1159,7 +1157,6 @@ body {
 }
 
 camera,
-camera-thumbnail,
 camera_stream {
    width: 100%;
    height: 100%;

diff --git a/yarn.lock b/yarn.lock
@@ -984,6 +984,18 @@
   resolved "https://registry.yarnpkg.com/@types/hls.js/-/hls.js-0.13.3.tgz#eb982a866125745eadee468c989fc9e189f24019"
   integrity sha512-Po8ZPCsAcPPuf5OODPEkb6cdWJ/w4BdX1veP7IIOc2WG0x1SW4GEQ1+FHKN1AMG2AePJfNUceJbh5PKtP92yRQ==
 
+"@types/lodash.mergewith@^4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
+  integrity sha512-RY/8IaVENjG19rxTZu9Nukqh0W2UrYgmBj5sdns4hWRZaV8PqR7wIKHFKzvOTjo4zVRV7sVI+yFhAJql12Kfqg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.165"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.165.tgz#74d55d947452e2de0742bad65270433b63a8c30f"
+  integrity sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"