Editor support for live draggable/lazy-loading/control-styles.

src/components/live.ts

@@ -1,8 +1,7 @@
-// TODO Live carousel chevron/icons style
 // TODO call change-event in viewer
-// TODO editor for live lazy loading
 // TODO different live configs per camera
 // TODO verify preload behavior
+// TODO update_entities should reload view rather than be involved in rendering
 // TODO Remove media load event console message
 // TODO Remove view change console message
 // TODO readme

src/const.ts

@@ -32,18 +32,19 @@ export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE =
 export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE =
   'event_viewer.controls.thumbnails.size';
 
+export const CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE =
+  'live.controls.next_previous.style';
+export const CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE = 'live.controls.next_previous.size';
+export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA = 'live.controls.thumbnails.media';
+export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE = 'live.controls.thumbnails.mode';
+export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE = 'live.controls.thumbnails.size';
+export const CONF_LIVE_DRAGGABLE = 'live.draggable';
+export const CONF_LIVE_LAZY_LOAD = 'live.lazy_load';
 export const CONF_LIVE_PRELOAD = 'live.preload';
 export const CONF_LIVE_PROVIDER = 'live.provider';
 export const CONF_LIVE_WEBRTC_ENTITY = 'live.webrtc.entity';
 export const CONF_LIVE_WEBRTC_URL = 'live.webrtc.url';
 
-export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE =
-  'live.controls.thumbnails.mode';
-export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE =
-  'live.controls.thumbnails.size';
-  export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA =
-  'live.controls.thumbnails.media';
-
 export const CONF_IMAGE_SRC = 'image.src';
 
 export const CONF_MENU_BUTTONS_FRIGATE = 'menu.buttons.frigate';

src/editor.ts

@@ -34,9 +34,13 @@ import {
   CONF_EVENT_VIEWER_DRAGGABLE,
   CONF_EVENT_VIEWER_LAZY_LOAD,
   CONF_IMAGE_SRC,
+  CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE,
+  CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
   CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
   CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
   CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
+  CONF_LIVE_DRAGGABLE,
+  CONF_LIVE_LAZY_LOAD,
   CONF_LIVE_PRELOAD,
   CONF_LIVE_PROVIDER,
   CONF_MENU_BUTTONS_CLIPS,
@@ -424,7 +428,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
             )}
             ${this._renderDropdown(
               getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_ENTITY, cameraIndex),
-              cameraEntities)}
+              cameraEntities,
+            )}
             ${this._renderStringInput(
               getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_URL, cameraIndex),
             )}
@@ -541,6 +546,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       none: localize('config.event_viewer.controls.next_previous.styles.none'),
     };
 
+    const liveNextPreviousControlStyles = {
+      '': '',
+      chevrons: localize('config.live.controls.next_previous.styles.chevrons'),
+      icons: localize('config.live.controls.next_previous.styles.icons'),
+      none: localize('config.live.controls.next_previous.styles.none'),
+    };
+
     const aspectRatioModes = {
       '': '',
       dynamic: localize('config.dimensions.aspect_ratio_modes.dynamic'),
@@ -665,6 +677,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
               <div class="values">
                 ${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)}
                 ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)}
+                ${this._renderSwitch(
+                  CONF_LIVE_DRAGGABLE,
+                  defaults.live.draggable,
+                )}
+                ${this._renderSwitch(
+                  CONF_LIVE_LAZY_LOAD,
+                  defaults.live.lazy_load,
+                )}
+                ${this._renderDropdown(
+                  CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
+                  liveNextPreviousControlStyles,
+                )}
+                ${this._renderStringInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE)}
                 ${this._renderDropdown(
                   CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
                   thumbnailModes,

src/localize/languages/en.json

@@ -39,12 +39,12 @@
     },
     "event_viewer": {
       "autoplay_clip": "Autoplay most recent clip (In 'clip' view)",
-      "draggable": "Event viewer can be dragged/swiped",
+      "draggable": "Event Viewer can be dragged/swiped",
-      "lazy_load": "Lazily load event media",
+      "lazy_load": "Event Viewer media is lazily loaded",
       "controls": {
         "next_previous": {
-          "style": "Event Viewer Next & Previous Control style",
+          "style": "Event Viewer next & previous control style",
-          "size": "Event Viewer Next & Previous Control size (e.g. '48px')",
+          "size": "Event Viewer next & previous control size (e.g. '48px')",
           "styles": {
             "thumbnails": "Thumbnails",
             "chevrons": "Chevrons",
@@ -70,7 +70,18 @@
         "frigate-jsmpeg": "Frigate JSMpeg",
         "webrtc": "WebRTC"
       },
+      "draggable": "Live cameras view can be dragged/swiped",
+      "lazy_load": "Live cameras are lazily loaded",
       "controls": {
+        "next_previous": {
+          "style": "Live view next & previous control style",
+          "size": "Live view next & previous control size (e.g. '48px')",
+          "styles": {
+            "chevrons": "Chevrons",
+            "icons": "Icons",
+            "none": "None"
+          }
+        },
         "thumbnails": {
           "mode": "Live thumbnails mode",
           "size": "Live thumbnails size (e.g. '100px')",