diff --git a/src/components/live.ts b/src/components/live.ts
index 47725ce2..4868d810 100644
--- a/src/components/live.ts
+++ b/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` ) => {
@@ -123,7 +121,7 @@ export class FrigateCardLive extends LitElement {
>
`;
}
- }
+ };
return html`${until(fetchThumbnailsThenRender(), renderProgressIndicator())}`;
}
diff --git a/src/types.ts b/src/types.ts
index 73abcb01..d1bb6ca2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -359,12 +359,15 @@ export type ImageViewConfig = z.infer;
* Thumbnail controls configuration section.
*/
-// This type is not inferred from a schema since different (compatible) schemas
-// have different defaults.
-export type ThumbnailsControlConfig = {
- mode: 'above' | 'below' | 'none';
- size?: string;
-}
+const thumbnailsControlDefault = {
+ mode: 'none' as const,
+};
+
+const thumbnailsControlSchema = z.object({
+ mode: z.enum(['none', 'above', 'below']).default(thumbnailsControlDefault.mode),
+ size: z.string().optional(),
+});
+export type ThumbnailsControlConfig = z.infer;
/**
* 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
- .object({
- media: z
- .enum(['clips', 'snapshots'])
- .default(liveConfigDefault.controls.thumbnails.media),
- mode: z.enum(['none', 'above', 'below']).default(liveConfigDefault.controls.thumbnails.mode),
- size: z.string().optional(),
- })
+ thumbnails: thumbnailsControlSchema
+ .merge(
+ z.object({
+ media: z
+ .enum(['clips', 'snapshots'])
+ .default(liveConfigDefault.controls.thumbnails.media),
+ }),
+ )
.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
- .object({
- style: z
- .enum(NEXT_PREVIOUS_CONTROL_STYLES)
- .default(viewerConfigDefault.controls.next_previous.style),
- size: z.string().default(viewerConfigDefault.controls.next_previous.size),
- })
- .default(viewerConfigDefault.controls.next_previous);
+const nextPreviousControlConfigSchema = z.object({
+ style: z
+ .enum(NEXT_PREVIOUS_CONTROL_STYLES)
+ .default(viewerConfigDefault.controls.next_previous.style),
+ size: z.string().default(viewerConfigDefault.controls.next_previous.size),
+});
export type NextPreviousControlConfig = z.infer;
const viewerConfigSchema = z
@@ -506,11 +506,12 @@ const viewerConfigSchema = z
draggable: z.boolean().default(viewerConfigDefault.draggable),
controls: z
.object({
- next_previous: nextPreviousControlConfigSchema,
- thumbnails: z.object({
- mode: z.enum(['none', 'above', 'below']).default(viewerConfigDefault.controls.thumbnails.mode),
- size: z.string().optional(),
- }).default(viewerConfigDefault.controls.thumbnails),
+ next_previous: nextPreviousControlConfigSchema.default(
+ viewerConfigDefault.controls.next_previous,
+ ),
+ thumbnails: thumbnailsControlSchema.default(
+ viewerConfigDefault.controls.thumbnails,
+ ),
})
.default(viewerConfigDefault.controls),
})