From 216afa015f93ddf446b709e5f080fc06b7e23184 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 10 Apr 2022 11:12:08 -0700 Subject: [PATCH] Add show_controls to editor support. --- src/components/thumbnail-carousel.ts | 2 +- src/components/timeline.ts | 15 +++++++-------- src/const.ts | 6 ++++++ src/editor.ts | 18 +++++++++++++++++- src/localize/languages/en.json | 5 ++++- src/scss/favorite.scss | 8 +++++--- src/types.ts | 13 +++++++++++++ 7 files changed, 53 insertions(+), 14 deletions(-) diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 9e75f996..669d70d7 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -179,7 +179,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel { .target=${parent} .childIndex=${childIndex} ?details=${this._config?.show_details} - ?controls=${true} + ?controls=${this._config?.show_controls} thumbnail_size=${ifDefined(this._config?.size)} class="${classMap(classes)}" @click=${(ev) => { diff --git a/src/components/timeline.ts b/src/components/timeline.ts index f7802cf9..750d5e62 100644 --- a/src/components/timeline.ts +++ b/src/components/timeline.ts @@ -1,5 +1,3 @@ -// TODO: Editor support for timeline (incl. in views). -// TODO: Make thumbnail controls optional (in all places that use thumbnails). // TODO: Search for TODOs and logging statements. import { @@ -66,9 +64,7 @@ interface TimelineViewContext extends ViewContext { type TimelineMediaType = 'all' | 'clips' | 'snapshots'; -const isHoverableDevice = window.matchMedia( - '(hover: hover) and (pointer: fine)' -) +const isHoverableDevice = window.matchMedia('(hover: hover) and (pointer: fine)'); /** * A manager to maintain/fetch timeline events. @@ -391,13 +387,16 @@ export class FrigateCardTimelineCore extends LitElement { const eventAttr = source.frigate?.event ? `event='${JSON.stringify(source.frigate.event)}'` : ''; + const detailsAttr = this.timelineConfig?.controls.thumbnails.show_details + ? 'details' + : ''; // Cannot use Lit data-bindings as visjs requires a string for tooltips. // Note that changes to attributes here must be mirrored in the xss // whitelist in `_getOptions()` . return ` { + this._events.dataset.get({ order: 'start' }).forEach((item) => { if (this.timelineConfig) { let added = false; if ( @@ -731,7 +730,7 @@ export class FrigateCardTimelineCore extends LitElement { this.timelineConfig.media, windowStart, windowEnd, - ) + ); this._generateThumbnails(); this._timeline.setSelection(event ? [event.id] : [], { diff --git a/src/const.ts b/src/const.ts index d394cdc8..ee5fc637 100644 --- a/src/const.ts +++ b/src/const.ts @@ -47,6 +47,8 @@ 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_SHOW_CONTROLS = +`${CONF_EVENT_VIEWER}.controls.thumbnails.show_controls` 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 = @@ -68,6 +70,8 @@ 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_THUMBNAILS_SHOW_CONTROLS = +`${CONF_LIVE}.controls.thumbnails.show_controls` 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; @@ -90,6 +94,8 @@ export const CONF_TIMELINE_MEDIA = `${CONF_TIMELINE}.media` as const; export const CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE = `${CONF_TIMELINE}.controls.thumbnails.mode` as const; export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE = `${CONF_TIMELINE}.controls.thumbnails.size` as const; export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS = `${CONF_TIMELINE}.controls.thumbnails.show_details` as const; +export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS = +`${CONF_TIMELINE}.controls.thumbnails.show_controls` as const; export const CONF_MENU = 'menu' as const; export const CONF_MENU_BUTTONS_FRIGATE = `${CONF_MENU}.buttons.frigate` as const; diff --git a/src/editor.ts b/src/editor.ts index 2d95bbc5..aa4e27ef 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_CONTROLS, CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS, CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS, @@ -47,6 +48,7 @@ import { CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE, CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA, CONF_LIVE_CONTROLS_THUMBNAILS_MODE, + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS, CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS, CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, @@ -68,6 +70,7 @@ import { CONF_MENU_MODE, CONF_TIMELINE_CLUSTERING_THRESHOLD, CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE, + CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS, CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS, CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, CONF_TIMELINE_MEDIA, @@ -191,6 +194,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor { value: 'clip', label: localize('config.view.views.clip') }, { value: 'snapshot', label: localize('config.view.views.snapshot') }, { value: 'image', label: localize('config.view.views.image') }, + { value: 'timeline', label: localize('config.view.views.timeline') }, ]; protected _cameraSelectViewModes = [ @@ -913,6 +917,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_DETAILS, defaults.live.controls.thumbnails.show_details, )} + ${this._renderSwitch( + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS, + defaults.live.controls.thumbnails.show_controls, + )} ${this._renderNumberInput( CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, 0, @@ -964,6 +972,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS, defaults.event_viewer.controls.thumbnails.show_details, )} + ${this._renderSwitch( + CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS, + defaults.event_viewer.controls.thumbnails.show_controls, + )} ${this._renderOptionSelector( CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE, this._titleModes, @@ -999,7 +1011,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor ${this._renderStringInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE)} ${this._renderSwitch( CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS, - defaults.event_viewer.controls.thumbnails.show_details, + defaults.timeline.controls.thumbnails.show_details, + )} + ${this._renderSwitch( + CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS, + defaults.timeline.controls.thumbnails.show_controls, )} ` : ''} diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 5039a9ad..13983b0f 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -77,6 +77,7 @@ "mode": "Event Viewer thumbnails mode", "size": "Event Viewer thumbnails size (e.g. '100px')", "show_details": "Show event details with thumbnails", + "show_controls": "Show event controls with thumbnails", "modes": { "below": "Thumbnails below the media", "above": "Thumbnails above the media", @@ -119,6 +120,7 @@ "mode": "Live thumbnails mode", "size": "Live thumbnails size (e.g. '100px')", "show_details": "Show event details with thumbnails", + "show_controls": "Show event controls with thumbnails", "media": "Whether to show thumbnails of clips or snapshots", "medias": { "clips": "Clip thumbnails", @@ -181,7 +183,8 @@ "thumbnails": { "mode": "Timeline thumbnails mode", "size": "Timeline thumbnails size (e.g. '100px')", - "show_details": "Show event details with thumbnails" + "show_details": "Show event details with thumbnails", + "show_controls": "Show event controls with thumbnails" } } }, diff --git a/src/scss/favorite.scss b/src/scss/favorite.scss index 993753c4..0e3d2c32 100644 --- a/src/scss/favorite.scss +++ b/src/scss/favorite.scss @@ -1,12 +1,14 @@ ha-icon.favorite { position: absolute; - color: var(--primary-color); - padding: 2px; + color: gold; + background: rgba(0,0,0,0.2); + border-radius: 50%; } ha-icon.timeline { position: absolute; color: var(--primary-color); - padding: 2px; right: 0px; + background: rgba(0,0,0,0.2); + border-radius: 50%; } diff --git a/src/types.ts b/src/types.ts index a1f115f6..419412d8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -444,6 +444,7 @@ const thumbnailsControlSchema = z.object({ mode: z.enum(['none', 'above', 'below', 'left', 'right']), size: z.string().optional(), show_details: z.boolean().optional(), + show_controls: z.boolean().optional(), }); export type ThumbnailsControlConfig = z.infer; @@ -497,6 +498,7 @@ const liveConfigDefault = { media: 'clips' as const, size: '100px', show_details: false, + show_controls: true, mode: 'none' as const, }, title: { @@ -560,6 +562,9 @@ const liveOverridableConfigSchema = z show_details: thumbnailsControlSchema.shape.show_details.default( liveConfigDefault.controls.thumbnails.show_details, ), + show_controls: thumbnailsControlSchema.shape.show_controls.default( + liveConfigDefault.controls.thumbnails.show_controls, + ), media: z .enum(['clips', 'snapshots']) .default(liveConfigDefault.controls.thumbnails.media), @@ -655,6 +660,7 @@ const viewerConfigDefault = { size: '100px', mode: 'none' as const, show_details: false, + show_controls: true, }, title: { mode: 'popup-bottom-right' as const, @@ -697,6 +703,9 @@ const viewerConfigSchema = z show_details: thumbnailsControlSchema.shape.show_details.default( viewerConfigDefault.controls.thumbnails.show_details, ), + show_controls: thumbnailsControlSchema.shape.show_controls.default( + viewerConfigDefault.controls.thumbnails.show_controls, + ), }) .default(viewerConfigDefault.controls.thumbnails), title: titleControlConfigSchema @@ -768,6 +777,7 @@ const timelineConfigDefault = { mode: 'left' as const, size: '100px' as const, show_details: true, + show_controls: true, }, }, }; @@ -788,6 +798,9 @@ const timelineConfigSchema = z show_details: thumbnailsControlSchema.shape.show_details.default( timelineConfigDefault.controls.thumbnails.show_details, ), + show_controls: thumbnailsControlSchema.shape.show_controls.default( + timelineConfigDefault.controls.thumbnails.show_controls, + ), }) .default(timelineConfigDefault.controls.thumbnails), })