Rename the event_viewer to media_viewer.
This commit is contained in:
Dermot Duffy
@@ -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:
|
||||
```
|
||||
</details>
|
||||
|
||||
<a name="config-expanded-event-viewer"></a>
|
||||
<a name="config-expanded-media-viewer"></a>
|
||||
|
||||
<details>
|
||||
<summary>Expand: Event Viewer section</summary>
|
||||
<summary>Expand: Media Viewer section</summary>
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
|
||||
+9
-9
@@ -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}
|
||||
>
|
||||
</frigate-card-viewer>`
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -703,7 +703,7 @@ export class FrigateCardTimelineCore extends LitElement {
|
||||
|
||||
this.view
|
||||
?.evolve({
|
||||
view: 'event',
|
||||
view: 'media',
|
||||
target: createEventParentForChildren(localize('common.recordings'), children),
|
||||
childIndex: childIndex,
|
||||
})
|
||||
|
||||
+16
-19
@@ -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),
|
||||
];
|
||||
|
||||
+25
-25
@@ -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;
|
||||
|
||||
+57
-60
@@ -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,
|
||||
)}
|
||||
</div>`
|
||||
: ''}
|
||||
${this._renderOptionSetHeader('event_viewer')}
|
||||
${this._expandedMenus[MENU_OPTIONS] === 'event_viewer'
|
||||
${this._renderOptionSetHeader('media_viewer')}
|
||||
${this._expandedMenus[MENU_OPTIONS] === 'media_viewer'
|
||||
? html` <div class="values">
|
||||
${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,
|
||||
)}
|
||||
</div>`
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
+4
-4
@@ -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,
|
||||
|
||||
+1
-1
@@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user