Rename autoplay_clip to auto_play (to match auto_unmute).

README.md

@@ -299,7 +299,7 @@ event_viewer:
 
 | Option | Default | Overridable | Description |
 | - | - | - | - |
-| `autoplay_clip` | `true` | :heavy_multiplication_x: | Whether or not to autoplay clips.|
+| `auto_play` | `true` | :heavy_multiplication_x: | Whether or not to autoplay clips.|
 | `auto_unmute` | `false` | :heavy_multiplication_x: | Whether or not to automatically unmute clips.|
 | `lazy_load` | `true` | :heavy_multiplication_x: | Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. |
 | `draggable` | `true` | :heavy_multiplication_x: | Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. |

src/components/viewer.ts

@@ -270,7 +270,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
    * Play the media on the selected slide.
    */
   protected _autoPlayHandler(): void {
-    if (this.viewerConfig?.autoplay_clip) {
+    if (this.viewerConfig?.auto_play) {
       super._autoPlayHandler();
     }
   }
@@ -330,7 +330,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
         ? [
             AutoMediaPlugin({
               playerSelector: 'frigate-card-ha-hls-player',
-              autoPlayWhenVisible: !!this.viewerConfig?.autoplay_clip,
+              autoPlayWhenVisible: !!this.viewerConfig?.auto_play,
               autoUnmuteWhenVisible: !!this.viewerConfig?.auto_unmute,
             }),
           ]

src/config-mgmt.ts

@@ -10,7 +10,7 @@ import {
   CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
   CONF_CAMERAS_ARRAY_WEBRTC_URL,
   CONF_CAMERAS_ARRAY_ZONE,
-  CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
+  CONF_EVENT_VIEWER_AUTO_PLAY,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
   CONF_IMAGE_SRC,
@@ -278,7 +278,7 @@ const UPGRADES = [
   upgradeMoveTo('live_provider', 'live.provider'),
   upgradeMoveTo('live_preload', CONF_LIVE_PRELOAD),
   upgradeMoveTo('webrtc', 'live.webrtc'),
-  upgradeMoveTo('autoplay_clip', CONF_EVENT_VIEWER_AUTOPLAY_CLIP),
+  upgradeMoveTo('autoplay_clip', "event_viewer.autoplay_clip"),
   upgradeMoveTo('controls.nextprev', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE),
   upgradeMoveTo('controls.nextprev_size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE),
   upgradeMoveTo('menu_mode', CONF_MENU_MODE),
@@ -293,4 +293,5 @@ const UPGRADES = [
   upgradeToMultipleCameras(),
   updateMenuConditionToMenuOverride(),
   upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, toNumberOrIgnore),
+  upgradeMoveTo('event_viewer.autoplay_clip', CONF_EVENT_VIEWER_AUTO_PLAY),
 ];

src/const.ts

@@ -16,7 +16,8 @@ export const CONF_CAMERAS_ARRAY_ICON = `${CONF_CAMERAS}.#.icon` as const;
 export const CONF_CAMERAS_ARRAY_WEBRTC_ENTITY =
   `${CONF_CAMERAS}.#.webrtc.entity` as const;
 export const CONF_CAMERAS_ARRAY_WEBRTC_URL = `${CONF_CAMERAS}.#.webrtc.url` as const;
-export const CONF_CAMERAS_ARRAY_LIVE_PROVIDER = `${CONF_CAMERAS}.#.live_provider` as const;
+export const CONF_CAMERAS_ARRAY_LIVE_PROVIDER =
+  `${CONF_CAMERAS}.#.live_provider` as const;
 
 export const CONF_VIEW = 'view' as const;
 export const CONF_VIEW_CAMERA_SELECT = `${CONF_VIEW}.camera_select` as const;
@@ -28,11 +29,11 @@ export const CONF_VIEW_UPDATE_ENTITIES = `${CONF_VIEW}.update_entities` as const
 export const CONF_VIEW_UPDATE_SECONDS = `${CONF_VIEW}.update_seconds` as const;
 
 export const CONF_EVENT_GALLERY = 'event_gallery' as const;
-export const CONF_EVENT_GALLERY_MIN_COLUMNS = `${CONF_EVENT_GALLERY}.min_columns` as const;
+export const CONF_EVENT_GALLERY_MIN_COLUMNS =
+  `${CONF_EVENT_GALLERY}.min_columns` as const;
 
 export const CONF_EVENT_VIEWER = 'event_viewer' as const;
-export const CONF_EVENT_VIEWER_AUTOPLAY_CLIP =
+export const CONF_EVENT_VIEWER_AUTO_PLAY = `${CONF_EVENT_VIEWER}.auto_play` as const;
-  `${CONF_EVENT_VIEWER}.autoplay_clip` as const;
 export const CONF_EVENT_VIEWER_AUTO_UNMUTE = `${CONF_EVENT_VIEWER}.auto_unmute` as const;
 export const CONF_EVENT_VIEWER_DRAGGABLE = `${CONF_EVENT_VIEWER}.draggable` as const;
 export const CONF_EVENT_VIEWER_LAZY_LOAD = `${CONF_EVENT_VIEWER}.lazy_load` as const;
@@ -61,8 +62,7 @@ export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE =
   `${CONF_LIVE}.controls.thumbnails.mode` as const;
 export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE =
   `${CONF_LIVE}.controls.thumbnails.size` as const;
-export const CONF_LIVE_CONTROLS_TITLE_MODE =
+export const CONF_LIVE_CONTROLS_TITLE_MODE = `${CONF_LIVE}.controls.title.mode` as const;
-  `${CONF_LIVE}.controls.title.mode` as const;
 export const CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS =
   `${CONF_LIVE}.controls.title.duration_seconds` as const;
 export const CONF_LIVE_DRAGGABLE = `${CONF_LIVE}.draggable` as const;

src/editor.ts

@@ -28,7 +28,7 @@ import {
   CONF_DIMENSIONS_ASPECT_RATIO,
   CONF_DIMENSIONS_ASPECT_RATIO_MODE,
   CONF_EVENT_GALLERY_MIN_COLUMNS,
-  CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
+  CONF_EVENT_VIEWER_AUTO_PLAY,
   CONF_EVENT_VIEWER_AUTO_UNMUTE,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
   CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
@@ -804,8 +804,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
         ${options.event_viewer.show
           ? html` <div class="values">
               ${this._renderSwitch(
-                CONF_EVENT_VIEWER_AUTOPLAY_CLIP,
+                CONF_EVENT_VIEWER_AUTO_PLAY,
-                defaults.event_viewer.autoplay_clip,
+                defaults.event_viewer.auto_play,
               )}
               ${this._renderSwitch(
                 CONF_EVENT_VIEWER_AUTO_UNMUTE,

src/localize/languages/en.json

@@ -53,7 +53,7 @@
       "min_columns": "Minimum number of columns"
     },
     "event_viewer": {
-      "autoplay_clip": "Autoplay clips",
+      "auto_play": "Automatically play media",
       "auto_unmute": "Automatically unmute media",
       "draggable": "Event Viewer can be dragged/swiped",
       "lazy_load": "Event Viewer media is lazily loaded in carousel",

src/types.ts

@@ -604,7 +604,7 @@ export type MenuConfig = z.infer<typeof menuConfigSchema>;
  * Event viewer configuration section (clip, snapshot).
  */
 const viewerConfigDefault = {
-  autoplay_clip: true,
+  auto_play: true,
   auto_unmute: false,
   lazy_load: true,
   draggable: true,
@@ -635,7 +635,7 @@ export type ViewerNextPreviousControlConfig = z.infer<
 
 const viewerConfigSchema = z
   .object({
-    autoplay_clip: z.boolean().default(viewerConfigDefault.autoplay_clip),
+    auto_play: z.boolean().default(viewerConfigDefault.auto_play),
     auto_unmute: z.boolean().default(viewerConfigDefault.auto_unmute),
     lazy_load: z.boolean().default(viewerConfigDefault.lazy_load),
     draggable: z.boolean().default(viewerConfigDefault.draggable),