flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 'show_details' open to show details next to thumbnails.

Browse Source
This commit is contained in:
Dermot Duffy
2022-03-20 18:10:48 -07:00
parent b9a627702f
commit c4ec94573c
7 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/thumbnail-carousel.ts
+1 -1
View File
@@ -120,7 +120,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
return html`
<frigate-card-thumbnail
.media=${mediaToRender}
details
?details=${this.config?.show_details}
thumbnail_size=${ifDefined(this.config?.size)}
class="${classMap(classes)}"
@click=${(ev) => {
src/components/timeline.ts
+1
View File
@@ -265,6 +265,7 @@ export class FrigateCardTimeline extends LitElement {
const config: ThumbnailsControlConfig = {
mode: 'above',
show_details: true,
};
// TODO move to configuration later.
src/const.ts
+4
View File
@@ -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;
src/editor.ts
+10
View File
@@ -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,
src/localize/languages/en.json
+2
View File
@@ -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",
src/types.ts
+10
View File
@@ -436,6 +436,7 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
const thumbnailsControlSchema = z.object({
mode: z.enum(['none', 'above', 'below']),
size: z.string().optional(),
show_details: z.boolean().optional(),
});
export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlSchema>;
@@ -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