diff --git a/.vscode/i18n-ally-reviews.yml b/.vscode/i18n-ally-reviews.yml index 07f3a096..5923f029 100644 --- a/.vscode/i18n-ally-reviews.yml +++ b/.vscode/i18n-ally-reviews.yml @@ -8,3 +8,59 @@ reviews: source: en text: Não foi possível reter o evento time: '2022-06-28T05:18:48.431Z' + config.event_gallery.controls.thumbnails.show_favorite_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle favorito em miniaturas + time: '2022-07-03T15:12:24.848Z' + config.event_gallery.controls.thumbnails.show_timeline_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle da linha do tempo nas miniaturas + time: '2022-07-03T15:12:32.656Z' + config.live.controls.thumbnails.show_favorite_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle favorito em miniaturas + time: '2022-07-03T15:13:49.466Z' + config.live.controls.thumbnails.show_timeline_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle da linha do tempo nas miniaturas + time: '2022-07-03T15:13:52.295Z' + config.media_viewer.controls.thumbnails.show_favorite_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle favorito em miniaturas + time: '2022-07-03T15:13:54.711Z' + config.media_viewer.controls.thumbnails.show_timeline_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle da linha do tempo nas miniaturas + time: '2022-07-03T15:13:57.530Z' + config.timeline.controls.thumbnails.show_favorite_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle favorito em miniaturas + time: '2022-07-03T15:13:59.666Z' + config.timeline.controls.thumbnails.show_timeline_control: + locales: + pt-BR: + translation_candidate: + source: en + text: Mostrar controle da linha do tempo nas miniaturas + time: '2022-07-03T15:14:01.927Z' diff --git a/README.md b/README.md index 81310a26..599dee2e 100644 --- a/README.md +++ b/README.md @@ -377,7 +377,8 @@ live: | `mode` | `none` | :white_check_mark: | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).| | `size` | 100 | :white_check_mark: | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `175`. | | `show_details` | `false` | :white_check_mark: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| -| `show_controls` | `true` | :white_check_mark: | Whether to show event controls (e.g. timeline icon, favorite icon) alongside the thumbnail.| +| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.| +| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.| | `media` | `clips` | :white_check_mark: | Whether to show `clips` or `snapshots` in the thumbnail carousel in the `live` view.| #### Live Controls: Next / Previous @@ -466,7 +467,8 @@ media_viewer: | `mode` | `none` | :heavy_multiplication_x: | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).| | `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the thumbnail carousel pixels. Must be >= `75` and <= `175`.| | `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| -| `show_controls` | `true` | :heavy_multiplication_x: | Whether to show event controls (e.g. timeline icon, favorite icon) alongside the thumbnail.| +| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.| +| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.| #### Media Viewer Controls: Title @@ -499,7 +501,8 @@ See the [fully expanded event gallery configuration example](#config-expanded-ev | - | - | - | - | | `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the event gallery in pixels. Must be >= `75` and <= `175`.| | `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| -| `show_controls` | `true` | :heavy_multiplication_x: | Whether to show event controls (e.g. timeline icon, favorite icon) alongside the thumbnail.| +| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.| +| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.| | `actions` | | :heavy_multiplication_x: | Actions to use for all views that use the `event_gallery` (e.g. `clips`, `snapshots`). See [actions](#actions) below.| ### Image Options @@ -558,7 +561,8 @@ timeline: | `mode` | `none` | :heavy_multiplication_x: | Whether to show the thumbnail carousel `below` the media, `above` the media, in a drawer to the `left` or `right` of the media or to hide it entirely (`none`).| | `size` | 100 | :heavy_multiplication_x: | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `175`.| | `show_details` | `false` | :heavy_multiplication_x: | Whether to show event details (e.g. duration, start time, object detected, etc) alongside the thumbnail.| -| `show_controls` | `true` | :heavy_multiplication_x: | Whether to show event controls (e.g. timeline icon, favorite icon) alongside the thumbnail.| +| `show_favorite_control` | `true` | :white_check_mark: | Whether to show the favorite ('star') control on each thumbnail.| +| `show_timeline_control` | `true` | :white_check_mark: | Whether to show the timeline ('target') control on each thumbnail.| ### Dimensions Options @@ -1264,7 +1268,8 @@ live: media: clips size: 100 show_details: false - show_controls: false + show_favorite_control: true + show_timeline_control: true mode: none title: mode: popup-bottom-right @@ -1309,7 +1314,8 @@ media_viewer: size: 100 mode: none show_details: false - show_controls: true + show_favorite_control: true + show_timeline_control: true title: mode: popup-bottom-right duration_seconds: 2 @@ -1341,7 +1347,8 @@ event_gallery: thumbnails: size: 100 show_details: false - show_controls: false + show_favorite_control: true + show_timeline_control: true actions: entity: light.office_main_lights tap_action: @@ -1724,7 +1731,8 @@ timeline: mode: left size: 100 show_details: true - show_controls: true + show_favorite_control: true + show_timeline_control: true ``` @@ -1779,7 +1787,8 @@ overrides: media: clips size: 100 show_details: false - show_controls: false + show_favorite_control: true + show_timeline_control: true mode: none title: mode: popup-bottom-right diff --git a/src/components/gallery.ts b/src/components/gallery.ts index 1b347551..28b6cc2c 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -7,7 +7,7 @@ import { LitElement, PropertyValues, TemplateResult, - unsafeCSS + unsafeCSS, } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import galleryStyle from '../scss/gallery.scss'; @@ -15,13 +15,13 @@ import { CameraConfig, frigateCardConfigDefaults, GalleryConfig, - THUMBNAIL_WIDTH_MAX + THUMBNAIL_WIDTH_MAX, } from '../types.js'; import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; import { fetchChildMediaAndDispatchViewChange, fetchLatestMediaAndDispatchViewChange, - getFullDependentBrowseMediaQueryParametersOrDispatchError + getFullDependentBrowseMediaQueryParametersOrDispatchError, } from '../utils/ha/browse-media'; import { View } from '../view.js'; import { renderProgressIndicator } from './message.js'; @@ -262,7 +262,10 @@ export class FrigateCardGalleryCore extends LitElement { .hass=${this.hass} .clientID=${cameraConfig?.frigate.client_id} ?details=${!!this.galleryConfig?.controls.thumbnails.show_details} - ?controls=${!!this.galleryConfig?.controls.thumbnails.show_controls} + ?show_favorite_control=${!!this.galleryConfig?.controls.thumbnails + .show_favorite_control} + ?show_timeline_control=${!!this.galleryConfig?.controls.thumbnails + .show_timeline_control} @click=${(ev: Event) => { if (this.view) { this.view @@ -291,8 +294,8 @@ export class FrigateCardGalleryCore extends LitElement { } declare global { - interface HTMLElementTagNameMap { - "frigate-card-gallery-core": FrigateCardGalleryCore - "frigate-card-gallery": FrigateCardGallery - } + interface HTMLElementTagNameMap { + 'frigate-card-gallery-core': FrigateCardGalleryCore; + 'frigate-card-gallery': FrigateCardGallery; + } } diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 588dc4f6..5fa1509a 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -210,7 +210,8 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel { .childIndex=${childIndex} .clientID=${cameraConfig?.frigate.client_id} ?details=${this._config?.show_details} - ?controls=${this._config?.show_controls} + ?show_favorite_control=${this._config?.show_favorite_control} + ?show_timeline_control=${this._config?.show_timeline_control} class="${classMap(classes)}" @click=${(ev) => { if (this._carousel && this._carousel.clickAllowed()) { diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts index abb6ed76..d365420f 100644 --- a/src/components/thumbnail.ts +++ b/src/components/thumbnail.ts @@ -129,7 +129,10 @@ export class FrigateCardThumbnail extends LitElement { public details = false; @property({ attribute: true, type: Boolean }) - public controls = false; + public show_favorite_control = false; + + @property({ attribute: true, type: Boolean }) + public show_timeline_control = false; // ============================ // Data-binding based interface @@ -211,7 +214,7 @@ export class FrigateCardThumbnail extends LitElement { title="${label ?? ''}" .date=${recording ? fromUnixTime(recording.start_time) : undefined} >`} - ${this.controls && event && this.hass && this.clientID + ${this.show_favorite_control && event && this.hass && this.clientID ? html` ` : html``} - ${this.controls + ${this.show_timeline_control ? html` unknown, - keepOriginal?: boolean, + options?: { + transform?: (valueIn: unknown) => unknown; + keepOriginal?: boolean; + }, ): boolean => { const inValue = getConfigValue(obj, oldPath); if (inValue === undefined) { return false; } - const outValue = transform ? transform(inValue) : inValue; + const outValue = options?.transform ? options.transform(inValue) : inValue; if (oldPath === newPath && isEqual(inValue, outValue)) { return false; } if (outValue === null) { - if (!keepOriginal) { + if (!options?.keepOriginal) { deleteConfigValue(obj, oldPath); return true; } return false; } if (outValue !== undefined) { - if (!keepOriginal) { + if (!options?.keepOriginal) { deleteConfigValue(obj, oldPath); } setConfigValue(obj, newPath, outValue); @@ -269,11 +271,13 @@ export const getArrayConfigPath = (path: string, index: number): string => { const upgradeMoveTo = function ( oldPath: string, newPath: string, - transform?: (valueIn: unknown) => unknown, - keepOriginal?: boolean, + options?: { + transform?: (valueIn: unknown) => unknown; + keepOriginal?: boolean; + }, ): (obj: RawFrigateCardConfig) => boolean { return function (obj: RawFrigateCardConfig): boolean { - return moveConfigValue(obj, oldPath, newPath, transform, keepOriginal); + return moveConfigValue(obj, oldPath, newPath, options); }; }; @@ -288,15 +292,17 @@ const upgradeMoveTo = function ( const upgradeMoveToWithOverrides = function ( oldPath: string, newPath: string, - transform?: (valueIn: unknown) => unknown, - keepOriginal?: boolean, + options?: { + transform?: (valueIn: unknown) => unknown; + keepOriginal?: boolean; + }, ): (obj: RawFrigateCardConfig) => boolean { return function (obj: RawFrigateCardConfig): boolean { - let modified = upgradeMoveTo(oldPath, newPath, transform, keepOriginal)(obj); + let modified = upgradeMoveTo(oldPath, newPath, options)(obj); modified = upgradeArrayValue( CONF_OVERRIDES, - upgradeMoveTo(oldPath, newPath, transform, keepOriginal), + upgradeMoveTo(oldPath, newPath, options), (obj) => obj.overrides as RawFrigateCardConfig | undefined, )(obj) || modified; return modified; @@ -311,9 +317,9 @@ const upgradeMoveToWithOverrides = function ( */ const upgradeWithOverrides = function ( path: string, - transform?: (valueIn: unknown) => unknown, + transform: (valueIn: unknown) => unknown, ): (obj: RawFrigateCardConfig) => boolean { - return upgradeMoveToWithOverrides(path, path, transform); + return upgradeMoveToWithOverrides(path, path, { transform: transform }); }; /** @@ -324,9 +330,9 @@ const upgradeWithOverrides = function ( */ const upgrade = function ( path: string, - transform?: (valueIn: unknown) => unknown, + transform: (valueIn: unknown) => unknown, ): (obj: RawFrigateCardConfig) => boolean { - return upgradeMoveTo(path, path, transform); + return upgradeMoveTo(path, path, { transform: transform }); }; /** @@ -402,10 +408,8 @@ const upgradeMenuModeToStyleAndPosition = (): (( // Change the 'start' of the mode into a style. modified = - upgradeMoveToWithOverrides( - 'menu.mode', - CONF_MENU_STYLE, - (mode: unknown): string | undefined => { + upgradeMoveToWithOverrides('menu.mode', CONF_MENU_STYLE, { + transform: (mode: unknown): string | undefined => { if (typeof mode === 'string') { const result = mode.match(/^(hover|hidden|overlay|above|below|none)/); if (result) { @@ -423,15 +427,13 @@ const upgradeMenuModeToStyleAndPosition = (): (( } return undefined; }, - true, - )(obj) || modified; + keepOriginal: true, + })(obj) || modified; // Change the 'end' of the mode into a position. modified = - upgradeMoveToWithOverrides( - 'menu.mode', - CONF_MENU_POSITION, - (mode: unknown): string | undefined => { + upgradeMoveToWithOverrides('menu.mode', CONF_MENU_POSITION, { + transform: (mode: unknown): string | undefined => { if (typeof mode === 'string') { const result = mode.match(/(above|below|left|right|top|bottom)$/); if (result) { @@ -450,8 +452,8 @@ const upgradeMenuModeToStyleAndPosition = (): (( } return undefined; }, - true, - )(obj) || modified; + keepOriginal: true, + })(obj) || modified; // Delete the old `menu.mode` . return upgradeWithOverrides('menu.mode', deleteProperty)(obj) || modified; @@ -510,6 +512,38 @@ const menuButtonBooleanToObject = function ( return { enabled: value }; }; +/** + * Upgrade from a show_controls key to individual favorite/timeline keys. + * @returns An upgrade function. + */ +const upgradeThumbnailShowControlsToIndividualControls = ( + thumbnailsBasePath: string, +): ((obj: RawFrigateCardConfig) => boolean) => { + const thumbnailsShowControlsPath = `${thumbnailsBasePath}.show_controls`; + + return function (obj: RawFrigateCardConfig): boolean { + let modified = false; + modified = + upgradeMoveToWithOverrides( + thumbnailsShowControlsPath, + `${thumbnailsBasePath}.show_favorite_control`, + { keepOriginal: true }, + )(obj) || modified; + + modified = + upgradeMoveToWithOverrides( + thumbnailsShowControlsPath, + `${thumbnailsBasePath}.show_timeline_control`, + { keepOriginal: true }, + )(obj) || modified; + + // Delete the old `show_controls`. + return ( + upgradeWithOverrides(thumbnailsShowControlsPath, deleteProperty)(obj) || modified + ); + }; +}; + const UPGRADES = [ // v1.2.1 -> v2.0.0 upgradeMoveTo('frigate_url', 'frigate.url'), @@ -528,7 +562,7 @@ const UPGRADES = [ upgradeMoveTo('menu_mode', 'menu.mode'), upgradeMoveTo('menu_buttons', 'menu.buttons'), upgradeMoveTo('menu_button_size', CONF_MENU_BUTTON_SIZE), - upgradeMoveTo('image', 'image.src', isNotObject), + upgradeMoveTo('image', 'image.src', { transform: isNotObject }), // v2.0.0 -> v2.1.0 upgradeMoveTo('update_entities', CONF_VIEW_UPDATE_ENTITIES), @@ -536,7 +570,9 @@ const UPGRADES = [ // v2.1.0 -> v3.0.0-rc.1 upgradeToMultipleCameras(), upgradeMenuConditionToMenuOverride(), - upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, toNumberOrIgnore), + upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, { + transform: toNumberOrIgnore, + }), upgradeMoveTo('event_viewer.autoplay_clip', 'event_viewer.auto_play'), // v3.0.0-rc.1 -> v3.0.0-rc.2 @@ -600,4 +636,10 @@ const UPGRADES = [ upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('label', 'frigate.label')), upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('frigate_url', 'frigate.url')), upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('zone', 'frigate.zone')), + + // v4.0.0-rc.1 -> v4.0.0-rc.3 + upgradeThumbnailShowControlsToIndividualControls('event_gallery.controls.thumbnails'), + upgradeThumbnailShowControlsToIndividualControls('media_viewer.controls.thumbnails'), + upgradeThumbnailShowControlsToIndividualControls('live.controls.thumbnails'), + upgradeThumbnailShowControlsToIndividualControls('timeline.controls.thumbnails'), ]; diff --git a/src/const.ts b/src/const.ts index 37bc6813..c18c9e04 100644 --- a/src/const.ts +++ b/src/const.ts @@ -54,8 +54,10 @@ export const CONF_VIEW_SCAN_UNTRIGGER_SECONDS = export const CONF_EVENT_GALLERY = 'event_gallery' as const; export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS = `${CONF_EVENT_GALLERY}.controls.thumbnails.show_details` as const; -export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS = - `${CONF_EVENT_GALLERY}.controls.thumbnails.show_controls` as const; +export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL = + `${CONF_EVENT_GALLERY}.controls.thumbnails.show_favorite_control` as const; +export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL = + `${CONF_EVENT_GALLERY}.controls.thumbnails.show_timeline_control` as const; export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE = `${CONF_EVENT_GALLERY}.controls.thumbnails.size` as const; @@ -76,8 +78,10 @@ export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE = `${CONF_MEDIA_VIEWER}.controls.thumbnails.mode` as const; export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS = `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_details` as const; -export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS = - `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_controls` as const; +export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL = + `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_favorite_control` as const; +export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL = + `${CONF_MEDIA_VIEWER}.controls.thumbnails.show_timeline_control` as const; export const CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE = `${CONF_MEDIA_VIEWER}.controls.thumbnails.size` as const; export const CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE = @@ -102,8 +106,10 @@ 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_THUMBNAILS_SHOW_FAVORITE_CONTROL = + `${CONF_LIVE}.controls.thumbnails.show_favorite_control` as const; +export const CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL = + `${CONF_LIVE}.controls.thumbnails.show_timeline_control` 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; @@ -132,8 +138,10 @@ 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_TIMELINE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL = + `${CONF_TIMELINE}.controls.thumbnails.show_favorite_control` as const; +export const CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL = + `${CONF_TIMELINE}.controls.thumbnails.show_timeline_control` as const; export const CONF_MENU = 'menu' as const; export const CONF_MENU_ALIGNMENT = `${CONF_MENU}.alignment` as const; diff --git a/src/editor.ts b/src/editor.ts index 1fc618cd..a9b2df18 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -32,8 +32,9 @@ import { CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL, CONF_DIMENSIONS_ASPECT_RATIO, CONF_DIMENSIONS_ASPECT_RATIO_MODE, - CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS, CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS, + CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL, + CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, CONF_IMAGE_MODE, CONF_IMAGE_REFRESH_SECONDS, @@ -46,8 +47,9 @@ 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_SHOW_FAVORITE_CONTROL, + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, CONF_LIVE_CONTROLS_TITLE_MODE, @@ -63,8 +65,9 @@ import { CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE, CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE, - CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS, CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS, + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL, + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS, CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE, @@ -78,8 +81,9 @@ import { CONF_MENU_STYLE, 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_SHOW_FAVORITE_CONTROL, + CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE, CONF_TIMELINE_MEDIA, CONF_TIMELINE_SHOW_RECORDINGS, @@ -1233,8 +1237,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor defaults.live.controls.thumbnails.show_details, )} ${this._renderSwitch( - CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_CONTROLS, - defaults.live.controls.thumbnails.show_controls, + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL, + defaults.live.controls.thumbnails.show_favorite_control, + )} + ${this._renderSwitch( + CONF_LIVE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, + defaults.live.controls.thumbnails.show_timeline_control, )} ${this._renderNumberInput( CONF_LIVE_CONTROLS_TITLE_DURATION_SECONDS, @@ -1268,8 +1276,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor defaults.media_viewer.controls.thumbnails.show_details, )} ${this._renderSwitch( - CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS, - defaults.media_viewer.controls.thumbnails.show_controls, + CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL, + defaults.media_viewer.controls.thumbnails.show_favorite_control, + )} + ${this._renderSwitch( + CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, + defaults.media_viewer.controls.thumbnails.show_timeline_control, )}`, )} ` @@ -1333,8 +1345,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor defaults.media_viewer.controls.thumbnails.show_details, )} ${this._renderSwitch( - CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS, - defaults.media_viewer.controls.thumbnails.show_controls, + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL, + defaults.media_viewer.controls.thumbnails.show_favorite_control, + )} + ${this._renderSwitch( + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, + defaults.media_viewer.controls.thumbnails.show_timeline_control, )} ${this._renderOptionSelector( CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE, @@ -1386,8 +1402,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor defaults.timeline.controls.thumbnails.show_details, )} ${this._renderSwitch( - CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_CONTROLS, - defaults.timeline.controls.thumbnails.show_controls, + CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_FAVORITE_CONTROL, + defaults.timeline.controls.thumbnails.show_favorite_control, + )} + ${this._renderSwitch( + CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_TIMELINE_CONTROL, + defaults.timeline.controls.thumbnails.show_timeline_control, )}`, )} ` diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 75cb97d8..60e14d2f 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -71,7 +71,8 @@ "controls": { "options": "Event Gallery Controls", "thumbnails": { - "show_controls": "Show event controls with thumbnails", + "show_favorite_control": "Show favorite control on thumbnails", + "show_timeline_control": "Show timeline control on thumbnails", "show_details": "Show event details with thumbnails", "size": "Event Gallery thumbnails size in pixels" } @@ -110,7 +111,8 @@ "snapshots": "Snapshot thumbnails" }, "mode": "Live thumbnails mode", - "show_controls": "Show event controls with thumbnails", + "show_favorite_control": "Show favorite control on thumbnails", + "show_timeline_control": "Show timeline control on thumbnails", "show_details": "Show event details with thumbnails", "size": "Live thumbnails size in pixels" }, @@ -150,7 +152,8 @@ "none": "No thumbnails", "right": "Thumbnails in a drawer right of the media" }, - "show_controls": "Show controls with thumbnails", + "show_favorite_control": "Show favorite control on thumbnails", + "show_timeline_control": "Show timeline control on thumbnails", "show_details": "Show details with thumbnails", "size": "Media Viewer thumbnails size in pixels" }, @@ -229,7 +232,8 @@ "options": "Timeline Controls", "thumbnails": { "mode": "Timeline thumbnails mode", - "show_controls": "Show event controls with thumbnails", + "show_favorite_control": "Show favorite control on thumbnails", + "show_timeline_control": "Show timeline control on thumbnails", "show_details": "Show event details with thumbnails", "size": "Timeline thumbnails size in pixels" } diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json index 32abb5da..d55d2fb8 100644 --- a/src/localize/languages/pt-BR.json +++ b/src/localize/languages/pt-BR.json @@ -71,7 +71,8 @@ "controls": { "options": "Controles da Galeria de Eventos", "thumbnails": { - "show_controls": "Mostrar controles de eventos com miniaturas", + "show_favorite_control": "", + "show_timeline_control": "", "show_details": "Mostrar detalhes do evento com miniaturas", "size": "Tamanho das miniaturas da Galeria de eventos em pixels" } @@ -110,7 +111,8 @@ "snapshots": "Miniaturas de Snapshots" }, "mode": "Miniaturas do modo ao vivo", - "show_controls": "Mostrar controles de eventos com miniaturas", + "show_favorite_control": "", + "show_timeline_control": "", "show_details": "Mostrar detalhes do evento com miniaturas", "size": "Tamanho das miniaturas ao vivo (e.g. '100px')" }, @@ -150,7 +152,8 @@ "none": "Sem miniaturas", "right": "Miniaturas em uma gaveta à direita da mídia" }, - "show_controls": "Mostrar controles com miniaturas", + "show_favorite_control": "", + "show_timeline_control": "", "show_details": "Mostrar detalhes com miniaturas", "size": "Tamanho das miniaturas do Visualizador de eventos (por exemplo, '100px')" }, @@ -231,7 +234,8 @@ "options": "Controles de linha do tempo", "thumbnails": { "mode": "Modo de miniaturas da linha do tempo", - "show_controls": "Mostrar controles de eventos com miniaturas", + "show_favorite_control": "", + "show_timeline_control": "", "show_details": "Mostrar detalhes do evento com miniaturas", "size": "Tamanho das miniaturas da linha do tempo em pixels" } diff --git a/src/types.ts b/src/types.ts index e370679f..c2d4275f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -591,7 +591,8 @@ const thumbnailsControlSchema = z.object({ mode: z.enum(['none', 'above', 'below', 'left', 'right']), size: z.number().min(THUMBNAIL_WIDTH_MIN).max(THUMBNAIL_WIDTH_MAX).optional(), show_details: z.boolean().optional(), - show_controls: z.boolean().optional(), + show_favorite_control: z.boolean().optional(), + show_timeline_control: z.boolean().optional(), }); export type ThumbnailsControlConfig = z.infer; @@ -648,7 +649,8 @@ const liveConfigDefault = { media: 'clips' as const, size: 100, show_details: true, - show_controls: true, + show_favorite_control: true, + show_timeline_control: true, mode: 'left' as const, }, title: { @@ -712,8 +714,11 @@ 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, + show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default( + liveConfigDefault.controls.thumbnails.show_favorite_control, + ), + show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default( + liveConfigDefault.controls.thumbnails.show_timeline_control, ), media: z .enum(['clips', 'snapshots']) @@ -851,7 +856,8 @@ const viewerConfigDefault = { thumbnails: { size: 100, show_details: true, - show_controls: true, + show_favorite_control: true, + show_timeline_control: true, mode: 'left' as const, }, title: { @@ -907,8 +913,11 @@ 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, + show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default( + viewerConfigDefault.controls.thumbnails.show_favorite_control, + ), + show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default( + viewerConfigDefault.controls.thumbnails.show_timeline_control, ), }) .default(viewerConfigDefault.controls.thumbnails), @@ -937,7 +946,8 @@ const galleryConfigDefault = { thumbnails: { size: 100, show_details: false, - show_controls: false, + show_favorite_control: true, + show_timeline_control: true, }, }, }; @@ -956,8 +966,11 @@ const galleryConfigSchema = z show_details: thumbnailsControlSchema.shape.show_details.default( galleryConfigDefault.controls.thumbnails.show_details, ), - show_controls: thumbnailsControlSchema.shape.show_controls.default( - galleryConfigDefault.controls.thumbnails.show_controls, + show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default( + galleryConfigDefault.controls.thumbnails.show_favorite_control, + ), + show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default( + galleryConfigDefault.controls.thumbnails.show_timeline_control, ), }) .default(galleryConfigDefault.controls.thumbnails), @@ -1007,7 +1020,8 @@ const timelineConfigDefault = { mode: 'left' as const, size: 100, show_details: true, - show_controls: true, + show_favorite_control: true, + show_timeline_control: true, }, }, }; @@ -1044,8 +1058,11 @@ 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, + show_favorite_control: thumbnailsControlSchema.shape.show_favorite_control.default( + timelineConfigDefault.controls.thumbnails.show_favorite_control, + ), + show_timeline_control: thumbnailsControlSchema.shape.show_timeline_control.default( + timelineConfigDefault.controls.thumbnails.show_timeline_control, ), }) .default(timelineConfigDefault.controls.thumbnails),