First version of gallery refactor to use thumbnails.

src/types.ts

@@ -14,6 +14,9 @@ import { z } from 'zod';
 
 import { deepRemoveDefaults } from './zod-util';
 
+// The maximum width thumbnail Frigate returns
+export const THUMBNAIL_WIDTH_MAX = 175;
+
 declare global {
   interface HTMLElementTagNameMap {
     'frigate-card-editor': LovelaceCardEditor;
@@ -66,9 +69,6 @@ export type LiveProvider = typeof LIVE_PROVIDERS[number];
 
 export class FrigateCardError extends Error {}
 
-// The maximum width thumbnail Frigate returns
-export const THUMBNAIL_WIDTH_MAX = 175;
-
 /**
  * Action Types (for "Picture Elements" / Menu)
  */
@@ -442,7 +442,7 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
 
 const thumbnailsControlSchema = z.object({
   mode: z.enum(['none', 'above', 'below', 'left', 'right']),
-  size: z.string().optional(),
+  size: z.number().min(1).max(THUMBNAIL_WIDTH_MAX).optional(),
   show_details: z.boolean().optional(),
   show_controls: z.boolean().optional(),
 });
@@ -454,7 +454,7 @@ export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
 
 const nextPreviousControlConfigSchema = z.object({
   style: z.enum(['none', 'chevrons', 'icons', 'thumbnails']),
-  size: z.string(),
+  size: z.number().min(1),
 });
 export type NextPreviousControlConfig = z.infer<typeof nextPreviousControlConfigSchema>;
 
@@ -491,12 +491,12 @@ const liveConfigDefault = {
   transition_effect: 'slide' as const,
   controls: {
     next_previous: {
-      size: '48px',
+      size: 48,
       style: 'chevrons' as const,
     },
     thumbnails: {
       media: 'clips' as const,
-      size: '100px',
+      size: 100,
       show_details: false,
       show_controls: true,
       mode: 'none' as const,
@@ -653,11 +653,11 @@ const viewerConfigDefault = {
   transition_effect: 'slide' as const,
   controls: {
     next_previous: {
-      size: '48px',
+      size: 48,
       style: 'thumbnails' as const,
     },
     thumbnails: {
-      size: '100px',
+      size: 100,
       mode: 'none' as const,
       show_details: false,
       show_controls: true,
@@ -672,7 +672,9 @@ const viewerNextPreviousControlConfigSchema = nextPreviousControlConfigSchema.ex
   style: z
     .enum(['none', 'thumbnails', 'chevrons'])
     .default(viewerConfigDefault.controls.next_previous.style),
-  size: z.string().default(viewerConfigDefault.controls.next_previous.size),
+  size: nextPreviousControlConfigSchema.shape.size.default(
+    viewerConfigDefault.controls.next_previous.size,
+  ),
 });
 export type ViewerNextPreviousControlConfig = z.infer<
   typeof viewerNextPreviousControlConfigSchema
@@ -729,12 +731,36 @@ export type ViewerConfig = z.infer<typeof viewerConfigSchema>;
  * Event gallery configuration section (clips, snapshots).
  */
 const galleryConfigDefault = {
-  min_columns: 5,
+  controls: {
+    thumbnails: {
+      size: 100,
+      show_details: false,
+      show_controls: false,
+    },
+  },
 };
 
 const galleryConfigSchema = z
   .object({
-    min_columns: z.number().min(1).max(10).default(galleryConfigDefault.min_columns),
+    controls: z
+      .object({
+        thumbnails: thumbnailsControlSchema
+          // Gallery shows thumbnails "centrally" so no need for the mode.
+          .omit({ mode: true })
+          .extend({
+            size: thumbnailsControlSchema.shape.size.default(
+              galleryConfigDefault.controls.thumbnails.size,
+            ),
+            show_details: thumbnailsControlSchema.shape.show_details.default(
+              galleryConfigDefault.controls.thumbnails.show_details,
+            ),
+            show_controls: thumbnailsControlSchema.shape.show_controls.default(
+              galleryConfigDefault.controls.thumbnails.show_controls,
+            ),
+          })
+          .default(galleryConfigDefault.controls.thumbnails),
+      })
+      .default(galleryConfigDefault.controls),
   })
   .merge(actionsSchema)
   .default(galleryConfigDefault);
@@ -776,7 +802,7 @@ const timelineConfigDefault = {
   controls: {
     thumbnails: {
       mode: 'left' as const,
-      size: '100px' as const,
+      size: 100,
       show_details: true,
       show_controls: true,
     },