diff --git a/src/card-condition.ts b/src/card-condition.ts index c93a2094..d72e6a54 100644 --- a/src/card-condition.ts +++ b/src/card-condition.ts @@ -2,7 +2,7 @@ import type { FrigateCardCondition } from './types'; import { View } from './view'; export interface ConditionState { - view?: View; + view?: Readonly; fullscreen?: boolean; camera?: string; } diff --git a/src/components/live.ts b/src/components/live.ts index 40bcfe15..0c96d6bd 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -1,7 +1,5 @@ -// TODO call change-event in viewer -// TODO different live configs per camera -// TODO verify preload behavior // TODO update_entities should reload view rather than be involved in rendering +// TODO different live configs per camera // TODO Remove media load event console message // TODO Remove view change console message // TODO readme @@ -27,7 +25,7 @@ import { } from '../types.js'; import { EmblaOptionsType } from 'embla-carousel'; import { HomeAssistant } from 'custom-card-helpers'; -import { customElement, property } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref'; import { until } from 'lit/directives/until.js'; @@ -77,7 +75,6 @@ export class FrigateCardLive extends LitElement { @property({ attribute: false }) protected liveConfig?: LiveConfig; - @property({ attribute: false }) set preload(preload: boolean) { this._preload = preload; @@ -87,6 +84,7 @@ export class FrigateCardLive extends LitElement { } // Whether or not the live view is currently being preloaded. + @state() protected _preload?: boolean; // MediaShowInfo object from the underlying live object. In the case of @@ -176,6 +174,7 @@ export class FrigateCardLive extends LitElement { .view=${this.view} .cameras=${this.cameras} .liveConfig=${this.liveConfig} + .preload=${this._preload} @frigate-card:media-show=${this._mediaShowHandler} @frigate-card:carousel:select=${() => { // Re-rendering the component will cause the thumbnails to be @@ -212,6 +211,9 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel { @property({ attribute: false }) protected liveConfig?: LiveConfig; + @property({ attribute: false }) + protected preload?: boolean; + // Index between camera name and slide number. protected _cameraToSlide: Record = {}; @@ -220,7 +222,13 @@ export class FrigateCardLiveCarousel extends FrigateCardMediaCarousel { * @param changedProperties The properties that were changed in this render. */ updated(changedProperties: PropertyValues): void { - if (changedProperties.has('cameras') || changedProperties.has('liveConfig')) { + if ( + changedProperties.has('cameras') || + changedProperties.has('liveConfig') || + changedProperties.has('preload') + ) { + // All of these properties may fundamentally change the contents/size of + // the DOM, and the carousel should be reset when they change. this._destroyCarousel(); } diff --git a/src/editor.ts b/src/editor.ts index e5bba7d2..050caaa9 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -676,7 +676,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor ? html`
${this._renderSwitch(CONF_LIVE_PRELOAD, defaults.live.preload)} - ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)} ${this._renderSwitch( CONF_LIVE_DRAGGABLE, defaults.live.draggable, @@ -685,6 +684,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor CONF_LIVE_LAZY_LOAD, defaults.live.lazy_load, )} + ${this._renderDropdown(CONF_LIVE_PROVIDER, liveProviders)} ${this._renderDropdown( CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE, liveNextPreviousControlStyles, diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index eca16c85..ecb372c7 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -40,7 +40,7 @@ "event_viewer": { "autoplay_clip": "Autoplay most recent clip (In 'clip' view)", "draggable": "Event Viewer can be dragged/swiped", - "lazy_load": "Event Viewer media is lazily loaded", + "lazy_load": "Event Viewer media is lazily loaded in carousel", "controls": { "next_previous": { "style": "Event Viewer next & previous control style", @@ -63,7 +63,7 @@ } }, "live": { - "preload": "Preload live view", + "preload": "Preload live view in the background", "provider": "Live view provider", "providers": { "frigate": "Frigate", @@ -71,7 +71,7 @@ "webrtc": "WebRTC" }, "draggable": "Live cameras view can be dragged/swiped", - "lazy_load": "Live cameras are lazily loaded", + "lazy_load": "Live cameras are lazily loaded in carousel", "controls": { "next_previous": { "style": "Live view next & previous control style",