diff --git a/src/components/live.ts b/src/components/live.ts index e412a186..40bcfe15 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -1,8 +1,7 @@ -// TODO Live carousel chevron/icons style // TODO call change-event in viewer -// TODO editor for live lazy loading // TODO different live configs per camera // TODO verify preload behavior +// TODO update_entities should reload view rather than be involved in rendering // TODO Remove media load event console message // TODO Remove view change console message // TODO readme diff --git a/src/const.ts b/src/const.ts index de88f7c3..20a9839f 100644 --- a/src/const.ts +++ b/src/const.ts @@ -32,18 +32,19 @@ export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE = export const CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE = 'event_viewer.controls.thumbnails.size'; +export const CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE = + 'live.controls.next_previous.style'; +export const CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE = 'live.controls.next_previous.size'; +export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA = 'live.controls.thumbnails.media'; +export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE = 'live.controls.thumbnails.mode'; +export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE = 'live.controls.thumbnails.size'; +export const CONF_LIVE_DRAGGABLE = 'live.draggable'; +export const CONF_LIVE_LAZY_LOAD = 'live.lazy_load'; export const CONF_LIVE_PRELOAD = 'live.preload'; export const CONF_LIVE_PROVIDER = 'live.provider'; export const CONF_LIVE_WEBRTC_ENTITY = 'live.webrtc.entity'; export const CONF_LIVE_WEBRTC_URL = 'live.webrtc.url'; -export const CONF_LIVE_CONTROLS_THUMBNAILS_MODE = - 'live.controls.thumbnails.mode'; -export const CONF_LIVE_CONTROLS_THUMBNAILS_SIZE = - 'live.controls.thumbnails.size'; - export const CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA = - 'live.controls.thumbnails.media'; - export const CONF_IMAGE_SRC = 'image.src'; export const CONF_MENU_BUTTONS_FRIGATE = 'menu.buttons.frigate'; diff --git a/src/editor.ts b/src/editor.ts index 3b016ebe..e5bba7d2 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -34,9 +34,13 @@ import { CONF_EVENT_VIEWER_DRAGGABLE, CONF_EVENT_VIEWER_LAZY_LOAD, CONF_IMAGE_SRC, + CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE, + CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE, CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA, CONF_LIVE_CONTROLS_THUMBNAILS_MODE, CONF_LIVE_CONTROLS_THUMBNAILS_SIZE, + CONF_LIVE_DRAGGABLE, + CONF_LIVE_LAZY_LOAD, CONF_LIVE_PRELOAD, CONF_LIVE_PROVIDER, CONF_MENU_BUTTONS_CLIPS, @@ -424,7 +428,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor )} ${this._renderDropdown( getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_ENTITY, cameraIndex), - cameraEntities)} + cameraEntities, + )} ${this._renderStringInput( getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_URL, cameraIndex), )} @@ -541,6 +546,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor none: localize('config.event_viewer.controls.next_previous.styles.none'), }; + const liveNextPreviousControlStyles = { + '': '', + chevrons: localize('config.live.controls.next_previous.styles.chevrons'), + icons: localize('config.live.controls.next_previous.styles.icons'), + none: localize('config.live.controls.next_previous.styles.none'), + }; + const aspectRatioModes = { '': '', dynamic: localize('config.dimensions.aspect_ratio_modes.dynamic'), @@ -665,6 +677,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)} ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)} + ${this._renderSwitch( + CONF_LIVE_DRAGGABLE, + defaults.live.draggable, + )} + ${this._renderSwitch( + CONF_LIVE_LAZY_LOAD, + defaults.live.lazy_load, + )} + ${this._renderDropdown( + CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE, + liveNextPreviousControlStyles, + )} + ${this._renderStringInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE)} ${this._renderDropdown( CONF_LIVE_CONTROLS_THUMBNAILS_MODE, thumbnailModes, diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 715cce1e..eca16c85 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -39,12 +39,12 @@ }, "event_viewer": { "autoplay_clip": "Autoplay most recent clip (In 'clip' view)", - "draggable": "Event viewer can be dragged/swiped", - "lazy_load": "Lazily load event media", + "draggable": "Event Viewer can be dragged/swiped", + "lazy_load": "Event Viewer media is lazily loaded", "controls": { "next_previous": { - "style": "Event Viewer Next & Previous Control style", - "size": "Event Viewer Next & Previous Control size (e.g. '48px')", + "style": "Event Viewer next & previous control style", + "size": "Event Viewer next & previous control size (e.g. '48px')", "styles": { "thumbnails": "Thumbnails", "chevrons": "Chevrons", @@ -70,7 +70,18 @@ "frigate-jsmpeg": "Frigate JSMpeg", "webrtc": "WebRTC" }, + "draggable": "Live cameras view can be dragged/swiped", + "lazy_load": "Live cameras are lazily loaded", "controls": { + "next_previous": { + "style": "Live view next & previous control style", + "size": "Live view next & previous control size (e.g. '48px')", + "styles": { + "chevrons": "Chevrons", + "icons": "Icons", + "none": "None" + } + }, "thumbnails": { "mode": "Live thumbnails mode", "size": "Live thumbnails size (e.g. '100px')",