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

Merge pull request #753 from dermotduffy/finer-grained-controls

Browse Source 
Allow finer grained selection of thumbnail controls
This commit is contained in:
Dermot Duffy
2022-07-03 09:37:42 -07:00
committed by GitHub
parent 771943cb6b 56362c3fb9
commit e59d6aa3da
11 changed files with 261 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/i18n-ally-reviews.yml
Vendored
+56
View File
@@ -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'
README.md
+18 -9
View File
@@ -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
```
</details>
@@ -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
src/components/gallery.ts
+11 -8
View File
@@ -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;
}
}
src/components/thumbnail-carousel.ts
+2 -1
View File
@@ -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()) {
src/components/thumbnail.ts
+6 -3
View File
@@ -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}
></frigate-card-thumbnail-feature-recording>`}
${this.controls && event && this.hass && this.clientID
${this.show_favorite_control && event && this.hass && this.clientID
? html` <ha-icon
class="${classMap(starClasses)}"
icon=${event?.retain_indefinitely ? 'mdi:star' : 'mdi:star-outline'}
@@ -247,7 +250,7 @@ export class FrigateCardThumbnail extends LitElement {
.recording=${recording ?? undefined}
></frigate-card-thumbnail-details-recording>`
: html``}
${this.controls
${this.show_timeline_control
? html`<ha-icon
class="timeline"
icon="mdi:target"
src/config-mgmt.ts
+74 -32
View File
@@ -27,14 +27,14 @@ import {
CONF_OVERRIDES,
CONF_VIEW_DEFAULT,
CONF_VIEW_TIMEOUT_SECONDS,
CONF_VIEW_UPDATE_ENTITIES
CONF_VIEW_UPDATE_ENTITIES,
} from './const';
import {
BUTTON_SIZE_MIN,
RawFrigateCardConfig,
RawFrigateCardConfigArray,
THUMBNAIL_WIDTH_MAX,
THUMBNAIL_WIDTH_MIN
THUMBNAIL_WIDTH_MIN,
} from './types';
/**
@@ -221,26 +221,28 @@ export const moveConfigValue = (
obj: RawFrigateCardConfig,
oldPath: string,
newPath: string,
transform?: (valueIn: unknown) => 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'),
];
src/const.ts
+16 -8
View File
@@ -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;
src/editor.ts
+32 -12
View File
@@ -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,
)}`,
)}
</div>`
@@ -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,
)}`,
)}
</div>`
src/localize/languages/en.json
+8 -4
View File
@@ -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"
}
src/localize/languages/pt-BR.json
+8 -4
View File
@@ -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"
}
src/types.ts
+30 -13
View File
@@ -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<typeof thumbnailsControlSchema>;
@@ -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),