Add editor support.

src/const.ts

@@ -19,12 +19,23 @@ export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE =
   'event_viewer.controls.next_previous.style';
 export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE =
   'event_viewer.controls.next_previous.size';
+export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE =
+  'event_viewer.controls.thumbnails.mode';
+export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE =
+  'event_viewer.controls.thumbnails.size';
 
 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

@@ -23,6 +23,8 @@ import {
   CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
+  CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
+  CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
   CONF_EVENT_VIEWER_DRAGGABLE,
   CONF_EVENT_VIEWER_LAZY_LOAD,
   CONF_FRIGATE_CAMERA_NAME,
@@ -31,6 +33,9 @@ import {
   CONF_FRIGATE_URL,
   CONF_FRIGATE_ZONE,
   CONF_IMAGE_SRC,
+  CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
+  CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
+  CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
   CONF_LIVE_PRELOAD,
   CONF_LIVE_PROVIDER,
   CONF_LIVE_WEBRTC_ENTITY,
@@ -223,6 +228,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       unconstrained: localize('config.dimensions.aspect_ratio_modes.unconstrained'),
     };
 
+    const thumbnailModes = {
+      '': '',
+      none: localize('config.event_viewer.controls.thumbnails.modes.none'),
+      above: localize('config.event_viewer.controls.thumbnails.modes.above'),
+      below: localize('config.event_viewer.controls.thumbnails.modes.below'),
+    }
+
+    const thumbnailMedias = {
+      '': '',
+      clips: localize('config.live.controls.thumbnails.medias.clips'),
+      snapshots: localize('config.live.controls.thumbnails.medias.snapshots'),
+    }
+
     const defaults = frigateCardConfigDefaults;
 
     return html`
@@ -588,6 +606,72 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   .configValue=${CONF_LIVE_WEBRTC_URL}
                   @value-changed=${this._valueChangedHandler}
                 ></paper-input>
+                <paper-dropdown-menu
+                .label=${localize(
+                  `config.${CONF_LIVE_CONTROLS_THUMBNAILS_MODE}`,
+                )}
+                @value-changed=${this._valueChangedHandler}
+                .configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_MODE}
+              >
+                <paper-listbox
+                  slot="dropdown-content"
+                  .selected=${Object.keys(thumbnailModes).indexOf(
+                    String(
+                      getConfigValue(
+                        this._config,
+                        CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
+                        '',
+                      ),
+                    ),
+                  )}
+                >
+                  ${Object.keys(thumbnailModes).map((key) => {
+                    return html`
+                      <paper-item .label="${key}">
+                        ${thumbnailModes[key]}
+                      </paper-item>
+                    `;
+                  })}
+                </paper-listbox>
+              </paper-dropdown-menu>
+              <paper-dropdown-menu
+                .label=${localize(
+                  `config.${CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA}`,
+                )}
+                @value-changed=${this._valueChangedHandler}
+                .configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA}
+              >
+                <paper-listbox
+                  slot="dropdown-content"
+                  .selected=${Object.keys(thumbnailMedias).indexOf(
+                    String(
+                      getConfigValue(
+                        this._config,
+                        CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
+                        '',
+                      ),
+                    ),
+                  )}
+                >
+                  ${Object.keys(thumbnailMedias).map((key) => {
+                    return html`
+                      <paper-item .label="${key}">
+                        ${thumbnailMedias[key]}
+                      </paper-item>
+                    `;
+                  })}
+                </paper-listbox>
+              </paper-dropdown-menu>
+              <paper-input
+                label=${localize(`config.${CONF_LIVE_CONTROLS_THUMBNAILS_SIZE}`)}
+                .value=${getConfigValue(
+                  this._config,
+                  CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
+                  '',
+                )}
+                .configValue=${CONF_LIVE_CONTROLS_THUMBNAILS_SIZE}
+                @value-changed=${this._valueChangedHandler}
+              ></paper-input>
               </div>
             `
           : ''}
@@ -678,6 +762,44 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 .configValue=${CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE}
                 @value-changed=${this._valueChangedHandler}
               ></paper-input>
+              <paper-dropdown-menu
+                .label=${localize(
+                  `config.${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE}`,
+                )}
+                @value-changed=${this._valueChangedHandler}
+                .configValue=${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE}
+              >
+                <paper-listbox
+                  slot="dropdown-content"
+                  .selected=${Object.keys(thumbnailModes).indexOf(
+                    String(
+                      getConfigValue(
+                        this._config,
+                        CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
+                        '',
+                      ),
+                    ),
+                  )}
+                >
+                  ${Object.keys(thumbnailModes).map((key) => {
+                    return html`
+                      <paper-item .label="${key}">
+                        ${thumbnailModes[key]}
+                      </paper-item>
+                    `;
+                  })}
+                </paper-listbox>
+              </paper-dropdown-menu>
+              <paper-input
+                label=${localize(`config.${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE}`)}
+                .value=${getConfigValue(
+                  this._config,
+                  CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
+                  '',
+                )}
+                .configValue=${CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE}
+                @value-changed=${this._valueChangedHandler}
+              ></paper-input>
             </div>`
           : ''}
         <div

src/localize/languages/en.json

@@ -42,6 +42,15 @@
             "chevrons": "Chevrons",
             "none": "None"
           }
+        },
+        "thumbnails": {
+          "mode": "Event Viewer thumbnails mode",
+          "size": "Event Viewer thumbnails size (e.g. '100px')",
+          "modes": {
+            "below": "Thumbnails below the media",
+            "above": "Thumbnails above the media",
+            "none": "No thumbnails"
+          }
         }
       }
     },
@@ -56,6 +65,17 @@
       "webrtc": {
         "entity": "WebRTC Camera Entity (Not a Frigate camera)",
         "url": "WebRTC Camera URL"
+      },
+      "controls": {
+        "thumbnails": {
+          "mode": "Live thumbnails mode",
+          "size": "Live thumbnails size (e.g. '100px')",
+          "media": "Whether to show thumbnails of clips or snapshots",
+          "medias": {
+            "clips": "Clip thumbnails",
+            "snapshots": "Snapshot thumbnails"
+          }
+        }
       }
     },
     "image": {