Merge pull request #212 from dermotduffy/carousel-off-default

Don't show thumbnails carousel by default

src/components/live.ts

@@ -34,7 +34,6 @@ import liveFrigateStyle from '../scss/live-frigate.scss';
 import liveJSMPEGStyle from '../scss/live-jsmpeg.scss';
 import liveWebRTCStyle from '../scss/live-webrtc.scss';
 
-
 // Number of seconds a signed URL is valid for.
 const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
 
@@ -104,10 +103,9 @@ export class FrigateCardLive extends LitElement {
         return dispatchErrorMessageEvent(this, (e as Error).message);
       }
 
-      if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) != null)  {
+      if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) != null) {
         return html` <frigate-card-thumbnail-carousel
-          .hass=${this.hass}
+          .target=${parent}
-          .browseMediaQueryParameters=${this.browseMediaQueryParameters}
           .config=${this.config?.live.controls.thumbnails}
           .highlightSelected=${false}
           @frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
@@ -123,7 +121,7 @@ export class FrigateCardLive extends LitElement {
         >
         </frigate-card-thumbnail-carousel>`;
       }
-    }
+    };
 
     return html`${until(fetchThumbnailsThenRender(), renderProgressIndicator())}`;
   }

src/types.ts

@@ -359,12 +359,15 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
  * Thumbnail controls configuration section.
  */
 
-// This type is not inferred from a schema since different (compatible) schemas
+const thumbnailsControlDefault = {
-// have different defaults.
+  mode: 'none' as const,
-export type ThumbnailsControlConfig = {
+};
-  mode: 'above' | 'below' | 'none';
+
-  size?: string;
+const thumbnailsControlSchema = z.object({
-}
+  mode: z.enum(['none', 'above', 'below']).default(thumbnailsControlDefault.mode),
+  size: z.string().optional(),
+});
+export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
 
 /**
  * Live view configuration section.
@@ -374,7 +377,6 @@ const liveConfigDefault = {
   preload: false,
   controls: {
     thumbnails: {
-      mode: 'none' as const,
       media: 'clips' as const,
     },
   },
@@ -419,14 +421,14 @@ const liveConfigSchema = z
     jsmpeg: jsmpegConfigSchema,
     controls: z
       .object({
-        thumbnails: z
+        thumbnails: thumbnailsControlSchema
-          .object({
+          .merge(
-            media: z
+            z.object({
-              .enum(['clips', 'snapshots'])
+              media: z
-              .default(liveConfigDefault.controls.thumbnails.media),
+                .enum(['clips', 'snapshots'])
-            mode: z.enum(['none', 'above', 'below']).default(liveConfigDefault.controls.thumbnails.mode),
+                .default(liveConfigDefault.controls.thumbnails.media),
-            size: z.string().optional(),
+            }),
-          })
+          )
           .default(liveConfigDefault.controls.thumbnails),
       })
       .default(liveConfigDefault.controls),
@@ -485,18 +487,16 @@ const viewerConfigDefault = {
       style: 'thumbnails' as const,
     },
     thumbnails: {
-      mode: 'below' as const,
+      mode: 'none' as const,
     },
   },
 };
-const nextPreviousControlConfigSchema = z
+const nextPreviousControlConfigSchema = z.object({
-  .object({
+  style: z
-    style: z
+    .enum(NEXT_PREVIOUS_CONTROL_STYLES)
-      .enum(NEXT_PREVIOUS_CONTROL_STYLES)
+    .default(viewerConfigDefault.controls.next_previous.style),
-      .default(viewerConfigDefault.controls.next_previous.style),
+  size: z.string().default(viewerConfigDefault.controls.next_previous.size),
-    size: z.string().default(viewerConfigDefault.controls.next_previous.size),
+});
-  })
-  .default(viewerConfigDefault.controls.next_previous);
 export type NextPreviousControlConfig = z.infer<typeof nextPreviousControlConfigSchema>;
 
 const viewerConfigSchema = z
@@ -506,11 +506,12 @@ const viewerConfigSchema = z
     draggable: z.boolean().default(viewerConfigDefault.draggable),
     controls: z
       .object({
-        next_previous: nextPreviousControlConfigSchema,
+        next_previous: nextPreviousControlConfigSchema.default(
-        thumbnails: z.object({
+          viewerConfigDefault.controls.next_previous,
-          mode: z.enum(['none', 'above', 'below']).default(viewerConfigDefault.controls.thumbnails.mode),
+        ),
-          size: z.string().optional(),
+        thumbnails: thumbnailsControlSchema.default(
-        }).default(viewerConfigDefault.controls.thumbnails),
+          viewerConfigDefault.controls.thumbnails,
+        ),
       })
       .default(viewerConfigDefault.controls),
   })