From ac3b8634e84f336d5f9134db1c0b71dc5885b62a Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sat, 4 Jun 2022 10:07:13 -0700 Subject: [PATCH] Rename the `event_viewer` to `media_viewer`. --- README.md | 46 +++++----- src/card.ts | 18 ++-- src/components/surround-thumbnails.ts | 2 +- src/components/timeline.ts | 2 +- src/config-mgmt.ts | 35 ++++---- src/const.ts | 50 +++++------ src/editor.ts | 117 +++++++++++++------------- src/localize/languages/en.json | 22 ++--- src/localize/languages/pt_br.json | 6 +- src/types.ts | 8 +- src/view.ts | 2 +- 11 files changed, 151 insertions(+), 157 deletions(-) diff --git a/README.md b/README.md index 1383d5e9..652919a6 100644 --- a/README.md +++ b/README.md @@ -359,17 +359,17 @@ live: | `mode` | `popup-bottom-right` | :white_check_mark: | How to display the live camera title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . | | `duration_seconds` | `2` | :white_check_mark: | The number of seconds to display the title popup. `0` implies forever.| -### Event Viewer Options +### Media Viewer Options -The `event_viewer` is used for viewing all `clip` and `snapshot` media, in a media carousel. +The `media_viewer` is used for viewing all `clip`, `snapshot` or recording media, in a media carousel. All configuration is under: ```yaml -event_viewer: +media_viewer: ``` -See the [fully expanded event viewer configuration example](#config-expanded-event-viewer) for how these parameters are structured. +See the [fully expanded Media viewer configuration example](#config-expanded-media-viewer) for how these parameters are structured. | Option | Default | Overridable | Description | | - | - | - | - | @@ -377,18 +377,18 @@ See the [fully expanded event viewer configuration example](#config-expanded-eve | `auto_pause` | `all` | :heavy_multiplication_x: | Whether to automatically pause events. `never` will never automatically pause, `unselected` will automatically pause when an event is unselected in the carousel, `hidden` will automatically pause when the browser/tab becomes hidden or `all` on any opportunity to automatically pause (i.e. either case).| | `auto_mute` | `all` | :heavy_multiplication_x: | Whether to automatically mute events. `never` will never automatically mute, `unselected` will automatically mute when an event is unselected in the carousel, `hidden` will automatically mute when the browser/tab becomes hidden or `all` on any opportunity to automatically mute (i.e. either case).| | `auto_unmute` | `never` | :heavy_multiplication_x: | Whether to automatically unmute events. `never` will never automatically unmute, `selected` will automatically unmute when an event is selected in the carousel, `visible` will automatically unmute when the browser/tab becomes visible or `all` on any opportunity to automatically unmute (i.e. either case). Note that some browsers will not allow automated unmute until the user has interacted with the page in some way -- if the user has not then the browser may pause the media instead.| -| `lazy_load` | `true` | :heavy_multiplication_x: | Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. | -| `draggable` | `true` | :heavy_multiplication_x: | Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. | +| `lazy_load` | `true` | :heavy_multiplication_x: | Whether or not to lazily load media in the Media viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. | +| `draggable` | `true` | :heavy_multiplication_x: | Whether or not the Media viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. | | `transition_effect` | `slide` | :heavy_multiplication_x: | Effect to apply as a transition between event media. Accepted values: `slide` or `none`. | -| `controls` | | :heavy_multiplication_x: | Configuration for the event viewer controls. See below. | -| `actions` | | :heavy_multiplication_x: | Actions to use for all views that use the `event_viewer` (e.g. `clip`, `snapshot`). See [actions](#actions) below.| +| `controls` | | :heavy_multiplication_x: | Configuration for the Media viewer controls. See below. | +| `actions` | | :heavy_multiplication_x: | Actions to use for all views that use the `media_viewer` (e.g. `clip`, `snapshot`). See [actions](#actions) below.| -#### Event Viewer Controls: Next / Previous +#### Media Viewer Controls: Next / Previous All configuration is under: ```yaml -event_viewer: +media_viewer: controls: next_previous: ``` @@ -398,12 +398,12 @@ event_viewer: | `style` | `thumbnails` | :heavy_multiplication_x: | When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: `thumbnails`, `chevrons`, `none` . | | `size` | 48 | :heavy_multiplication_x: | The size of the next/previous controls in pixels. Must be >= `20`.| -#### Event Viewer Controls: Thumbnails +#### Media Viewer Controls: Thumbnails All configuration is under: ```yaml -event_viewer: +media_viewer: controls: thumbnails: ``` @@ -415,19 +415,19 @@ event_viewer: | `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.| -#### Event Viewer Controls: Title +#### Media Viewer Controls: Title All configuration is under: ```yaml -event_viewer: +media_viewer: controls: title: ``` | Option | Default | Overridable | Description | | - | - | - | - | -| `mode` | `popup-bottom-right` | :heavy_multiplication_x: | How to display the event viewer media title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . | +| `mode` | `popup-bottom-right` | :heavy_multiplication_x: | How to display the Media viewer media title. Acceptable values: `none`, `popup-top-left`, `popup-top-right`, `popup-bottom-left`, `popup-bottom-right` . | | `duration_seconds` | `2` | :heavy_multiplication_x: | The number of seconds to display the title popup. `0` implies forever.| ### Event Gallery Options @@ -791,9 +791,9 @@ This card supports several different views: | ------------- | --------------------------------------------- | |`live` (default)| Shows the live camera view with the configured live provider.| |`snapshots`|Shows an event gallery of snapshots for this camera/zone/label.| -|`snapshot`|Shows an event viewer for the most recent snapshot for this camera/zone/label. Can also be accessed by holding down the `snapshots` menu icon.| +|`snapshot`|Shows a Media viewer for the most recent snapshot for this camera/zone/label. Can also be accessed by holding down the `snapshots` menu icon.| |`clips`|Shows an event gallery of clips for this camera/zone/label.| -|`clip`|Shows an event viewer for the most recent clip for this camera/zone/label. Can also be accessed by holding down the `clips` menu icon.| +|`clip`|Shows a Media viewer for the most recent clip for this camera/zone/label. Can also be accessed by holding down the `clips` menu icon.| |`image`|Shows a static image specified by the `image` parameter, can be used as a discrete default view or a screensaver (via `view.timeout_seconds`).| ### Navigating From A Snapshot To A Clip @@ -854,7 +854,7 @@ view. | Configuration path | Views to which it refers | | - | - | | `view.actions` | All (may be overriden by the below) | -| `event_viewer.actions` | `clip`, `snapshot` | +| `media_viewer.actions` | `clip`, `snapshot` | | `event_gallery.actions` | `clips`, `snapshots` | | `live.actions` | `live` | | `image.actions` | `image` | @@ -1186,15 +1186,15 @@ live: ``` - +
- Expand: Event Viewer section + Expand: Media Viewer section -Reference: [Event Viewer Options](#event-viewer-options). +Reference: [Media Viewer Options](#event-viewer-options). ```yaml -event_viewer: +media_viewer: auto_play: all auto_pause: all auto_mute: all @@ -2604,7 +2604,7 @@ Dragging the Safari video controls "progress bar" conflicts with carousel "dragg ```yaml live: draggable: false -event_viewer: +media_viewer: draggable: false ``` diff --git a/src/card.ts b/src/card.ts index 3253d076..ddbf2987 100644 --- a/src/card.ts +++ b/src/card.ts @@ -5,7 +5,7 @@ import { LitElement, PropertyValues, TemplateResult, - unsafeCSS, + unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -20,7 +20,7 @@ import { ConditionState, conditionStateRequestHandler, getOverriddenConfig, - getOverridesByKey, + getOverridesByKey } from './card-condition.js'; import './components/elements.js'; import { FrigateCardElements } from './components/elements.js'; @@ -40,7 +40,7 @@ import { CAMERA_BIRDSEYE, CARD_VERSION, MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA, - REPO_URL, + REPO_URL } from './const.js'; import './editor.js'; import { localize } from './localize/localize.js'; @@ -63,14 +63,14 @@ import { MediaShowInfo, MenuButton, Message, - RawFrigateCardConfig, + RawFrigateCardConfig } from './types.js'; import { convertActionToFrigateCardCustomAction, createFrigateCardCustomAction, frigateCardHandleAction, frigateCardHasAction, - getActionConfigGivenAction, + getActionConfigGivenAction } from './utils/action.js'; import { contentsChanged } from './utils/basic.js'; import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js'; @@ -81,14 +81,14 @@ import { homeAssistantSignPath, isHassDifferent, isTriggeredState, - sideLoadHomeAssistantElements, + sideLoadHomeAssistantElements } from './utils/ha'; import { getEventID } from './utils/ha/browse-media.js'; import { ExtendedEntityCache, getAllEntities, getExtendedEntities, - getExtendedEntity, + getExtendedEntity } from './utils/ha/entity-registry.js'; import { ResolvedMediaCache } from './utils/ha/resolved-media.js'; import { supportsFeature } from './utils/ha/update.js'; @@ -1545,7 +1545,7 @@ export class FrigateCard extends LitElement { } else if (this._view?.isGalleryView()) { specificActions = this._getConfig().event_gallery?.actions; } else if (this._view?.isViewerView()) { - specificActions = this._getConfig().event_viewer.actions; + specificActions = this._getConfig().media_viewer.actions; } else if (this._view?.is('image')) { specificActions = this._getConfig().image?.actions; } else if (this._view?.is('timeline')) { @@ -1678,7 +1678,7 @@ export class FrigateCard extends LitElement { .hass=${this._hass} .view=${this._view} .cameras=${this._cameras} - .viewerConfig=${this._getConfig().event_viewer} + .viewerConfig=${this._getConfig().media_viewer} .resolvedMediaCache=${this._resolvedMediaCache} > ` diff --git a/src/components/surround-thumbnails.ts b/src/components/surround-thumbnails.ts index a3d8c2d4..22705353 100644 --- a/src/components/surround-thumbnails.ts +++ b/src/components/surround-thumbnails.ts @@ -149,7 +149,7 @@ export class FrigateCardSurround extends LitElement { // view change will be caught by the handler above (to close the drawer). this.view ?.evolve({ - view: this.targetView || 'event', + view: this.targetView || 'media', target: ev.detail.target, childIndex: ev.detail.childIndex, context: null, diff --git a/src/components/timeline.ts b/src/components/timeline.ts index 6fa20e30..7b222d20 100644 --- a/src/components/timeline.ts +++ b/src/components/timeline.ts @@ -703,7 +703,7 @@ export class FrigateCardTimelineCore extends LitElement { this.view ?.evolve({ - view: 'event', + view: 'media', target: createEventParentForChildren(localize('common.recordings'), children), childIndex: childIndex, }) diff --git a/src/config-mgmt.ts b/src/config-mgmt.ts index b368af9f..555b9ca6 100644 --- a/src/config-mgmt.ts +++ b/src/config-mgmt.ts @@ -8,42 +8,38 @@ import { CONF_CAMERAS_ARRAY_LIVE_PROVIDER, CONF_CAMERAS_ARRAY_URL, CONF_CAMERAS_ARRAY_ZONE, - CONF_EVENT_VIEWER_AUTO_PLAY, - CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, - CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE, - CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, CONF_IMAGE_URL, + CONF_LIVE_AUTO_UNMUTE, CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, CONF_LIVE_LAZY_UNLOAD, CONF_LIVE_PRELOAD, CONF_LIVE_WEBRTC_CARD, + CONF_MEDIA_VIEWER, CONF_MENU, - CONF_MENU_BUTTONS_FRIGATE, CONF_MENU_BUTTONS_CAMERAS, - CONF_MENU_BUTTONS_LIVE, CONF_MENU_BUTTONS_CLIPS, - CONF_MENU_BUTTONS_SNAPSHOTS, - CONF_MENU_BUTTONS_IMAGE, CONF_MENU_BUTTONS_DOWNLOAD, + CONF_MENU_BUTTONS_FRIGATE, CONF_MENU_BUTTONS_FRIGATE_UI, CONF_MENU_BUTTONS_FULLSCREEN, + CONF_MENU_BUTTONS_IMAGE, + CONF_MENU_BUTTONS_LIVE, + CONF_MENU_BUTTONS_SNAPSHOTS, CONF_MENU_BUTTON_SIZE, CONF_MENU_POSITION, CONF_MENU_STYLE, CONF_OVERRIDES, CONF_VIEW_DEFAULT, CONF_VIEW_TIMEOUT_SECONDS, - CONF_VIEW_UPDATE_ENTITIES, - CONF_LIVE_AUTO_UNMUTE, - CONF_EVENT_VIEWER_AUTO_UNMUTE, + CONF_VIEW_UPDATE_ENTITIES } from './const'; import { BUTTON_SIZE_MIN, RawFrigateCardConfig, RawFrigateCardConfigArray, THUMBNAIL_WIDTH_MAX, - THUMBNAIL_WIDTH_MIN, + THUMBNAIL_WIDTH_MIN } from './types'; /** @@ -532,8 +528,8 @@ const UPGRADES = [ upgradeMoveTo('live_preload', CONF_LIVE_PRELOAD), upgradeMoveTo('webrtc', 'live.webrtc'), upgradeMoveTo('autoplay_clip', 'event_viewer.autoplay_clip'), - upgradeMoveTo('controls.nextprev', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE), - upgradeMoveTo('controls.nextprev_size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE), + upgradeMoveTo('controls.nextprev', 'event_viewer.controls.next_previous.style'), + upgradeMoveTo('controls.nextprev_size', 'event_viewer.controls.next_previous.size'), upgradeMoveTo('menu_mode', 'menu.mode'), upgradeMoveTo('menu_buttons', 'menu.buttons'), upgradeMoveTo('menu_button_size', CONF_MENU_BUTTON_SIZE), @@ -546,7 +542,7 @@ const UPGRADES = [ upgradeToMultipleCameras(), upgradeMenuConditionToMenuOverride(), upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, toNumberOrIgnore), - upgradeMoveTo('event_viewer.autoplay_clip', CONF_EVENT_VIEWER_AUTO_PLAY), + upgradeMoveTo('event_viewer.autoplay_clip', 'event_viewer.auto_play'), // v3.0.0-rc.1 -> v3.0.0-rc.2 upgradeArrayValue( @@ -565,7 +561,7 @@ const UPGRADES = [ createRangedTransform(toPixelsOrDelete, THUMBNAIL_WIDTH_MIN, THUMBNAIL_WIDTH_MAX), ), upgradeWithOverrides( - CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, + 'event_viewer.controls.thumbnails.size', createRangedTransform(toPixelsOrDelete, THUMBNAIL_WIDTH_MIN, THUMBNAIL_WIDTH_MAX), ), upgradeWithOverrides( @@ -573,7 +569,7 @@ const UPGRADES = [ createRangedTransform(toPixelsOrDelete, BUTTON_SIZE_MIN), ), upgradeWithOverrides( - CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, + 'event_viewer.controls.next_previous.size', createRangedTransform(toPixelsOrDelete, BUTTON_SIZE_MIN), ), upgradeWithOverrides( @@ -597,10 +593,11 @@ const UPGRADES = [ upgrade(CONF_LIVE_AUTO_UNMUTE, (val) => typeof val === 'boolean' ? (val ? 'all' : 'never') : undefined, ), - upgrade(CONF_EVENT_VIEWER_AUTO_PLAY, (val) => + upgrade('event_viewer.auto_play', (val) => typeof val === 'boolean' ? (val ? 'all' : 'never') : undefined, ), - upgrade(CONF_EVENT_VIEWER_AUTO_UNMUTE, (val) => + upgrade('event_viewer.auto_unmute', (val) => typeof val === 'boolean' ? (val ? 'all' : 'never') : undefined, ), + upgradeMoveToWithOverrides('event_viewer', CONF_MEDIA_VIEWER), ]; diff --git a/src/const.ts b/src/const.ts index d88d566a..bd081db1 100644 --- a/src/const.ts +++ b/src/const.ts @@ -52,31 +52,31 @@ export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS = export const CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE = `${CONF_EVENT_GALLERY}.controls.thumbnails.size` as const; -export const CONF_EVENT_VIEWER = 'event_viewer' as const; -export const CONF_EVENT_VIEWER_AUTO_PLAY = `${CONF_EVENT_VIEWER}.auto_play` as const; -export const CONF_EVENT_VIEWER_AUTO_PAUSE = `${CONF_EVENT_VIEWER}.auto_pause` as const; -export const CONF_EVENT_VIEWER_AUTO_MUTE = `${CONF_EVENT_VIEWER}.auto_mute` as const; -export const CONF_EVENT_VIEWER_AUTO_UNMUTE = `${CONF_EVENT_VIEWER}.auto_unmute` as const; -export const CONF_EVENT_VIEWER_DRAGGABLE = `${CONF_EVENT_VIEWER}.draggable` as const; -export const CONF_EVENT_VIEWER_LAZY_LOAD = `${CONF_EVENT_VIEWER}.lazy_load` as const; -export const CONF_EVENT_VIEWER_TRANSITION_EFFECT = - `${CONF_EVENT_VIEWER}.transition_effect` as const; -export const CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE = - `${CONF_EVENT_VIEWER}.controls.next_previous.style` as const; -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_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 = - `${CONF_EVENT_VIEWER}.controls.title.mode` as const; -export const CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS = - `${CONF_EVENT_VIEWER}.controls.title.duration_seconds` as const; +export const CONF_MEDIA_VIEWER = 'media_viewer' as const; +export const CONF_MEDIA_VIEWER_AUTO_PLAY = `${CONF_MEDIA_VIEWER}.auto_play` as const; +export const CONF_MEDIA_VIEWER_AUTO_PAUSE = `${CONF_MEDIA_VIEWER}.auto_pause` as const; +export const CONF_MEDIA_VIEWER_AUTO_MUTE = `${CONF_MEDIA_VIEWER}.auto_mute` as const; +export const CONF_MEDIA_VIEWER_AUTO_UNMUTE = `${CONF_MEDIA_VIEWER}.auto_unmute` as const; +export const CONF_MEDIA_VIEWER_DRAGGABLE = `${CONF_MEDIA_VIEWER}.draggable` as const; +export const CONF_MEDIA_VIEWER_LAZY_LOAD = `${CONF_MEDIA_VIEWER}.lazy_load` as const; +export const CONF_MEDIA_VIEWER_TRANSITION_EFFECT = + `${CONF_MEDIA_VIEWER}.transition_effect` as const; +export const CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE = + `${CONF_MEDIA_VIEWER}.controls.next_previous.style` as const; +export const CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE = + `${CONF_MEDIA_VIEWER}.controls.next_previous.size` as const; +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_SIZE = + `${CONF_MEDIA_VIEWER}.controls.thumbnails.size` as const; +export const CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE = + `${CONF_MEDIA_VIEWER}.controls.title.mode` as const; +export const CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS = + `${CONF_MEDIA_VIEWER}.controls.title.duration_seconds` as const; export const CONF_LIVE = 'live' as const; export const CONF_LIVE_AUTO_PLAY = `${CONF_LIVE}.auto_play` as const; diff --git a/src/editor.ts b/src/editor.ts index b5b32017..6d818e1c 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -32,23 +32,7 @@ import { CONF_DIMENSIONS_ASPECT_RATIO_MODE, CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS, CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS, - CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, - CONF_EVENT_VIEWER_AUTO_MUTE, - CONF_EVENT_VIEWER_AUTO_PAUSE, - CONF_EVENT_VIEWER_AUTO_PLAY, - CONF_EVENT_VIEWER_AUTO_UNMUTE, - 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, - CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE, - CONF_EVENT_VIEWER_DRAGGABLE, - CONF_EVENT_VIEWER_LAZY_LOAD, - CONF_EVENT_VIEWER_TRANSITION_EFFECT, - CONF_IMAGE_MODE, + CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SIZE, CONF_IMAGE_MODE, CONF_IMAGE_REFRESH_SECONDS, CONF_IMAGE_URL, CONF_LIVE_AUTO_MUTE, @@ -68,8 +52,21 @@ import { CONF_LIVE_LAZY_LOAD, CONF_LIVE_LAZY_UNLOAD, CONF_LIVE_PRELOAD, - CONF_LIVE_TRANSITION_EFFECT, - CONF_MENU_ALIGNMENT, + CONF_LIVE_TRANSITION_EFFECT, CONF_MEDIA_VIEWER_AUTO_MUTE, + CONF_MEDIA_VIEWER_AUTO_PAUSE, + CONF_MEDIA_VIEWER_AUTO_PLAY, + CONF_MEDIA_VIEWER_AUTO_UNMUTE, + 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_SIZE, + CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS, + CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE, + CONF_MEDIA_VIEWER_DRAGGABLE, + CONF_MEDIA_VIEWER_LAZY_LOAD, + CONF_MEDIA_VIEWER_TRANSITION_EFFECT, CONF_MENU_ALIGNMENT, CONF_MENU_BUTTONS, CONF_MENU_BUTTON_SIZE, CONF_MENU_POSITION, @@ -153,10 +150,10 @@ const options: EditorOptions = { name: localize('editor.live'), secondary: localize('editor.live_secondary'), }, - event_viewer: { + media_viewer: { icon: 'filmstrip', - name: localize('editor.event_viewer'), - secondary: localize('editor.event_viewer_secondary'), + name: localize('editor.media_viewer'), + secondary: localize('editor.media_viewer_secondary'), }, event_gallery: { icon: 'grid', @@ -240,15 +237,15 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor { value: '', label: '' }, { value: 'thumbnails', - label: localize('config.event_viewer.controls.next_previous.styles.thumbnails'), + label: localize('config.media_viewer.controls.next_previous.styles.thumbnails'), }, { value: 'chevrons', - label: localize('config.event_viewer.controls.next_previous.styles.chevrons'), + label: localize('config.media_viewer.controls.next_previous.styles.chevrons'), }, { value: 'none', - label: localize('config.event_viewer.controls.next_previous.styles.none'), + label: localize('config.media_viewer.controls.next_previous.styles.none'), }, ]; @@ -282,23 +279,23 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor { value: '', label: '' }, { value: 'none', - label: localize('config.event_viewer.controls.thumbnails.modes.none'), + label: localize('config.media_viewer.controls.thumbnails.modes.none'), }, { value: 'above', - label: localize('config.event_viewer.controls.thumbnails.modes.above'), + label: localize('config.media_viewer.controls.thumbnails.modes.above'), }, { value: 'below', - label: localize('config.event_viewer.controls.thumbnails.modes.below'), + label: localize('config.media_viewer.controls.thumbnails.modes.below'), }, { value: 'left', - label: localize('config.event_viewer.controls.thumbnails.modes.left'), + label: localize('config.media_viewer.controls.thumbnails.modes.left'), }, { value: 'right', - label: localize('config.event_viewer.controls.thumbnails.modes.right'), + label: localize('config.media_viewer.controls.thumbnails.modes.right'), }, ]; @@ -313,29 +310,29 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor protected _titleModes: EditorSelectOption[] = [ { value: '', label: '' }, - { value: 'none', label: localize('config.event_viewer.controls.title.modes.none') }, + { value: 'none', label: localize('config.media_viewer.controls.title.modes.none') }, { value: 'popup-top-left', - label: localize('config.event_viewer.controls.title.modes.popup-top-left'), + label: localize('config.media_viewer.controls.title.modes.popup-top-left'), }, { value: 'popup-top-right', - label: localize('config.event_viewer.controls.title.modes.popup-top-right'), + label: localize('config.media_viewer.controls.title.modes.popup-top-right'), }, { value: 'popup-bottom-left', - label: localize('config.event_viewer.controls.title.modes.popup-bottom-left'), + label: localize('config.media_viewer.controls.title.modes.popup-bottom-left'), }, { value: 'popup-bottom-right', - label: localize('config.event_viewer.controls.title.modes.popup-bottom-right'), + label: localize('config.media_viewer.controls.title.modes.popup-bottom-right'), }, ]; protected _transitionEffects: EditorSelectOption[] = [ { value: '', label: '' }, - { value: 'none', label: localize('config.event_viewer.transition_effects.none') }, - { value: 'slide', label: localize('config.event_viewer.transition_effects.slide') }, + { value: 'none', label: localize('config.media_viewer.transition_effects.none') }, + { value: 'slide', label: localize('config.media_viewer.transition_effects.slide') }, ]; protected _imageModes: EditorSelectOption[] = [ @@ -1135,74 +1132,74 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor })} ${this._renderSwitch( CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_DETAILS, - defaults.event_viewer.controls.thumbnails.show_details, + defaults.media_viewer.controls.thumbnails.show_details, )} ${this._renderSwitch( CONF_EVENT_GALLERY_CONTROLS_THUMBNAILS_SHOW_CONTROLS, - defaults.event_viewer.controls.thumbnails.show_controls, + defaults.media_viewer.controls.thumbnails.show_controls, )} ` : ''} - ${this._renderOptionSetHeader('event_viewer')} - ${this._expandedMenus[MENU_OPTIONS] === 'event_viewer' + ${this._renderOptionSetHeader('media_viewer')} + ${this._expandedMenus[MENU_OPTIONS] === 'media_viewer' ? html`
${this._renderOptionSelector( - CONF_EVENT_VIEWER_AUTO_PLAY, + CONF_MEDIA_VIEWER_AUTO_PLAY, this._mediaActionPositiveConditions, )} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_AUTO_PAUSE, + CONF_MEDIA_VIEWER_AUTO_PAUSE, this._mediaActionNegativeConditions, )} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_AUTO_MUTE, + CONF_MEDIA_VIEWER_AUTO_MUTE, this._mediaActionNegativeConditions, )} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_AUTO_UNMUTE, + CONF_MEDIA_VIEWER_AUTO_UNMUTE, this._mediaActionPositiveConditions, )} ${this._renderSwitch( - CONF_EVENT_VIEWER_DRAGGABLE, - defaults.event_viewer.draggable, + CONF_MEDIA_VIEWER_DRAGGABLE, + defaults.media_viewer.draggable, )} ${this._renderSwitch( - CONF_EVENT_VIEWER_LAZY_LOAD, - defaults.event_viewer.lazy_load, + CONF_MEDIA_VIEWER_LAZY_LOAD, + defaults.media_viewer.lazy_load, )} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE, + CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE, this._eventViewerNextPreviousControlStyles, )} - ${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, { + ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, { min: BUTTON_SIZE_MIN, })} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE, + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE, this._thumbnailModes, )} - ${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, { + ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, { min: THUMBNAIL_WIDTH_MIN, max: THUMBNAIL_WIDTH_MAX, })} ${this._renderSwitch( - CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS, - defaults.event_viewer.controls.thumbnails.show_details, + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS, + defaults.media_viewer.controls.thumbnails.show_details, )} ${this._renderSwitch( - CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS, - defaults.event_viewer.controls.thumbnails.show_controls, + CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS, + defaults.media_viewer.controls.thumbnails.show_controls, )} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE, + CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE, this._titleModes, )} ${this._renderNumberInput( - CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS, + CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS, { min: 0, max: 60 }, )} ${this._renderOptionSelector( - CONF_EVENT_VIEWER_TRANSITION_EFFECT, + CONF_MEDIA_VIEWER_TRANSITION_EFFECT, this._transitionEffects, )}
` diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index bcb5e7c7..75659d49 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -85,22 +85,22 @@ } } }, - "event_viewer": { + "media_viewer": { "auto_play": "Automatically play media", "auto_pause": "Automatically pause media", "auto_mute": "Automatically mute media", "auto_unmute": "Automatically unmute media", - "draggable": "Event Viewer can be dragged/swiped", - "lazy_load": "Event Viewer media is lazily loaded in carousel", - "transition_effect": "Event Viewer transition effect", + "draggable": "Media Viewer can be dragged/swiped", + "lazy_load": "Media Viewer media is lazily loaded in carousel", + "transition_effect": "Media Viewer transition effect", "transition_effects": { "none": "No transition", "slide": "Slide transition" }, "controls": { "next_previous": { - "style": "Event Viewer next & previous control style", - "size": "Event Viewer next & previous control size in pixels", + "style": "Media Viewer next & previous control style", + "size": "Media Viewer next & previous control size in pixels", "styles": { "thumbnails": "Thumbnails", "chevrons": "Chevrons", @@ -108,8 +108,8 @@ } }, "thumbnails": { - "mode": "Event Viewer thumbnails mode", - "size": "Event Viewer thumbnails size in pixels", + "mode": "Media Viewer thumbnails mode", + "size": "Media Viewer thumbnails size in pixels", "show_details": "Show details with thumbnails", "show_controls": "Show controls with thumbnails", "modes": { @@ -121,7 +121,7 @@ } }, "title": { - "mode": "Event Viewer media title display mode", + "mode": "Media Viewer media title display mode", "modes": { "none": "No title display", "popup-top-left": "Popup on the top left", @@ -269,8 +269,8 @@ "live_secondary": "Live camera view options", "event_gallery": "Event gallery", "event_gallery_secondary": "Snapshots & clips gallery options", - "event_viewer": "Event viewer", - "event_viewer_secondary": "Snapshots & clips viewer options", + "media_viewer": "Media viewer", + "media_viewer_secondary": "Viewer for static media (clips, snapshots or recordings)", "image": "Image", "image_secondary": "Static image view options", "dimensions": "Dimensions", diff --git a/src/localize/languages/pt_br.json b/src/localize/languages/pt_br.json index 98b3b497..5d29b6d4 100644 --- a/src/localize/languages/pt_br.json +++ b/src/localize/languages/pt_br.json @@ -52,7 +52,7 @@ "event_gallery": { "min_columns": "Número mínimo de colunas" }, - "event_viewer": { + "media_viewer": { "auto_play": "Reproduzir mídia automaticamente", "auto_unmute": "Ativar mídia automaticamente", "draggable": "Visualizador de eventos pode ser arrastado/deslizado", @@ -188,8 +188,8 @@ "live_secondary": "Opções de visualização da câmera ao vivo", "event_gallery": "Galeria de eventos", "event_gallery_secondary": "Opções da galeria de Snapshots e clipes", - "event_viewer": "Visualizador de eventos", - "event_viewer_secondary": "Opções do visualizador de Snapshots e clipes", + "media_viewer": "Visualizador de eventos", + "media_viewer_secondary": "Opções do visualizador de Snapshots e clipes", "image": "Imagem", "image_secondary": "Opções de visualização de imagem estática", "dimensions": "Dimensões", diff --git a/src/types.ts b/src/types.ts index 502e9c99..0b429c85 100644 --- a/src/types.ts +++ b/src/types.ts @@ -48,8 +48,8 @@ export const FRIGATE_CARD_VIEWS_USER_SPECIFIED = [ const FRIGATE_CARD_VIEWS = [ ...FRIGATE_CARD_VIEWS_USER_SPECIFIED, - // Event: A clip or snapshot (timeline may produce mixed media lists). - 'event', + // Media: A generic piece of media (could be clip, snapshot, recording). + 'media', ] as const; export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number]; @@ -1075,7 +1075,7 @@ export const frigateCardConfigSchema = z.object({ view: viewConfigSchema, menu: menuConfigSchema, live: liveConfigSchema, - event_viewer: viewerConfigSchema, + media_viewer: viewerConfigSchema, event_gallery: galleryConfigSchema, image: imageConfigSchema, elements: pictureElementsSchema, @@ -1101,7 +1101,7 @@ export const frigateCardConfigDefaults = { view: viewConfigDefault, menu: menuConfigDefault, live: liveConfigDefault, - event_viewer: viewerConfigDefault, + media_viewer: viewerConfigDefault, event_gallery: galleryConfigDefault, image: imageConfigDefault, timeline: timelineConfigDefault, diff --git a/src/view.ts b/src/view.ts index 782a545c..9b10e22c 100644 --- a/src/view.ts +++ b/src/view.ts @@ -102,7 +102,7 @@ export class View { * Determine if a view is for the media viewer. */ public isViewerView(): boolean { - return ['clip', 'snapshot', 'event'].includes(this.view); + return ['clip', 'snapshot', 'media'].includes(this.view); } /**