diff --git a/README.md b/README.md index f8f60ad7..3fe21bee 100644 --- a/README.md +++ b/README.md @@ -259,6 +259,7 @@ live: | - | - | - | - | | `mode` | `none` | :white_check_mark: | Whether to show the thumbnail carousel `below` the media, `above` the media or to hide it entirely (`none`).| | `size` | `100px` | :white_check_mark: | The size of the thumbnails in the thumbnail carousel [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).| +| `show_details` | `false` | :white_check_mark: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| | `media` | `clips` | :white_check_mark: | Whether to show `clips` or `snapshots` in the thumbnail carousel in the `live` view.| #### Live Controls: Next / Previous @@ -342,6 +343,7 @@ event_viewer: | - | - | - | - | | `mode` | `none` | :heavy_multiplication_x: | Whether to show the thumbnail carousel `below` the media, `above` the media or to hide it entirely (`none`).| | `size` | `100px` | :heavy_multiplication_x: | The size of the thumbnails in the thumbnail carousel [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).| +| `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| #### Event Viewer Controls: Title diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 5506f55b..fa3b3e52 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -120,7 +120,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel { return html` { diff --git a/src/components/timeline.ts b/src/components/timeline.ts index 66982756..6937a785 100644 --- a/src/components/timeline.ts +++ b/src/components/timeline.ts @@ -265,6 +265,7 @@ export class FrigateCardTimeline extends LitElement { const config: ThumbnailsControlConfig = { mode: 'above', + show_details: true, }; // TODO move to configuration later. diff --git a/src/const.ts b/src/const.ts index 48b571a4..99b116ad 100644 --- a/src/const.ts +++ b/src/const.ts @@ -45,6 +45,8 @@ export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE = `${CONF_EVENT_VIEWER}.controls.next_previous.size` as const; export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE = `${CONF_EVENT_VIEWER}.controls.thumbnails.mode` as const; +export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS = +`${CONF_EVENT_VIEWER}.controls.thumbnails.show_details` as const; export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE = `${CONF_EVENT_VIEWER}.controls.thumbnails.size` as const; export const CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE = @@ -64,6 +66,8 @@ 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_THUMBNAILS_SHOW_DETAILS = +`${CONF_LIVE}.controls.thumbnails.show_details` as const; export const CONF_LIVE_CONTROLS_TITLE_MODE = `${CONF_LIVE}.controls.title.mode` as const; export const CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS = `${CONF_LIVE}.controls.title.duration_seconds` as const; diff --git a/src/editor.ts b/src/editor.ts index 30afefa1..f08a4ca7 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -32,6 +32,7 @@ import { 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_SHOW_DETAILS, CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS, CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE, @@ -46,6 +47,7 @@ import { CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE, CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA, CONF_LIVE_CONTROLS_THUMBNAILS_MODE, + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS, CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, CONF_LIVE_CONTROLS_TITLE_MODE, @@ -881,6 +883,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor CONF_LIVE_CONTROLS_TITLE_MODE, this._titleModes, )} + ${this._renderSwitch( + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS, + defaults.live.controls.thumbnails.show_details, + )} ${this._renderNumberInput( CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, 0, @@ -928,6 +934,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor this._thumbnailModes, )} ${this._renderStringInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE)} + ${this._renderSwitch( + CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS, + defaults.event_viewer.controls.thumbnails.show_details, + )} ${this._renderOptionSelector( CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE, this._titleModes, diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 068653ab..1e8f45a7 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -76,6 +76,7 @@ "thumbnails": { "mode": "Event Viewer thumbnails mode", "size": "Event Viewer thumbnails size (e.g. '100px')", + "show_details": "Show event details with thumbnails", "modes": { "below": "Thumbnails below the media", "above": "Thumbnails above the media", @@ -115,6 +116,7 @@ "thumbnails": { "mode": "Live thumbnails mode", "size": "Live thumbnails size (e.g. '100px')", + "show_details": "Show event details with thumbnails", "media": "Whether to show thumbnails of clips or snapshots", "medias": { "clips": "Clip thumbnails", diff --git a/src/types.ts b/src/types.ts index a7e2d71d..8c945372 100644 --- a/src/types.ts +++ b/src/types.ts @@ -436,6 +436,7 @@ export type ImageViewConfig = z.infer; const thumbnailsControlSchema = z.object({ mode: z.enum(['none', 'above', 'below']), size: z.string().optional(), + show_details: z.boolean().optional(), }); export type ThumbnailsControlConfig = z.infer; @@ -488,6 +489,7 @@ const liveConfigDefault = { thumbnails: { media: 'clips' as const, size: '100px', + show_details: false, mode: 'none' as const, }, title: { @@ -548,6 +550,9 @@ const liveOverridableConfigSchema = z size: thumbnailsControlSchema.shape.size.default( liveConfigDefault.controls.thumbnails.size, ), + show_details: thumbnailsControlSchema.shape.show_details.default( + liveConfigDefault.controls.thumbnails.show_details, + ), media: z .enum(['clips', 'snapshots']) .default(liveConfigDefault.controls.thumbnails.media), @@ -642,6 +647,7 @@ const viewerConfigDefault = { thumbnails: { size: '100px', mode: 'none' as const, + show_details: false, }, title: { mode: 'popup-bottom-right' as const, @@ -654,6 +660,7 @@ const viewerNextPreviousControlConfigSchema = nextPreviousControlConfigSchema.ex .enum(['none', 'thumbnails', 'chevrons']) .default(viewerConfigDefault.controls.next_previous.style), size: z.string().default(viewerConfigDefault.controls.next_previous.size), + }); export type ViewerNextPreviousControlConfig = z.infer< typeof viewerNextPreviousControlConfigSchema @@ -681,6 +688,9 @@ const viewerConfigSchema = z size: thumbnailsControlSchema.shape.size.default( viewerConfigDefault.controls.thumbnails.size, ), + show_details: thumbnailsControlSchema.shape.show_details.default( + viewerConfigDefault.controls.thumbnails.show_details, + ), }) .default(viewerConfigDefault.controls.thumbnails), title: titleControlConfigSchema