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

Refactor media load events to add unload.

Browse Source
This commit is contained in:
Dermot Duffy
2022-08-07 19:02:57 -07:00
parent 08a0b10104
commit c4995a8fb3
7 changed files with 176 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/live.ts
+25 -17
View File
@@ -35,7 +35,7 @@ import {
LiveConfig,
LiveOverrides,
LiveProvider,
MediaShowInfo,
MediaLoadedInfo,
Message,
TransitionEffect,
WebRTCCardConfig,
@@ -46,15 +46,17 @@ import { getCameraIcon, getCameraTitle } from '../utils/camera.js';
import { homeAssistantSignPath } from '../utils/ha';
import { getFullDependentBrowseMediaQueryParameters } from '../utils/ha/browse-media.js';
import {
dispatchExistingMediaShowInfoAsEvent,
dispatchExistingMediaLoadedInfoAsEvent,
dispatchMediaShowEvent,
dispatchMediaUnloadedEvent,
} from '../utils/media-info.js';
import { dispatchViewContextChangeEvent, View } from '../view.js';
import { AutoMediaPlugin } from './embla-plugins/automedia.js';
import { Lazyload } from './embla-plugins/lazyload.js';
import {
FrigateCardMediaCarousel,
wrapMediaShowEventForCarousel,
wrapMediaLoadedEventForCarousel,
wrapMediaUnloadedEventForCarousel,
} from './media-carousel.js';
import { dispatchErrorMessageEvent } from './message.js';
import './next-prev-control.js';
@@ -101,9 +103,9 @@ export class FrigateCardLive extends LitElement {
// foreground and background (in preload mode).
protected _intersectionObserver: IntersectionObserver;
// MediaShowInfo object and message from the underlying live object. In the
// MediaLoadedInfo object and message from the underlying live object. In the
// case of pre-loading these may be propagated upwards later.
protected _savedMediaShowInfo: MediaShowInfo | null = null;
protected _savedMediaLoadedInfo: MediaLoadedInfo | null = null;
protected _messageReceivedPostRender = false;
protected _renderKey = 0;
@@ -124,11 +126,11 @@ export class FrigateCardLive extends LitElement {
if (
!this._inBackground &&
!this._messageReceivedPostRender &&
this._savedMediaShowInfo
this._savedMediaLoadedInfo
) {
// If this isn't being rendered in the background, the last render did not
// generate a message and there's a saved MediaInfo, dispatch it upwards.
dispatchExistingMediaShowInfoAsEvent(this, this._savedMediaShowInfo);
dispatchExistingMediaLoadedInfoAsEvent(this, this._savedMediaLoadedInfo);
}
// Trigger a re-render which may be necessary if the prior render resulted
@@ -219,8 +221,8 @@ export class FrigateCardLive extends LitElement {
ev.stopPropagation();
}
}}
@frigate-card:media-show=${(ev: CustomEvent<MediaShowInfo>) => {
this._savedMediaShowInfo = ev.detail;
@frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
this._savedMediaLoadedInfo = ev.detail;
if (this._inBackground) {
ev.stopPropagation();
}
@@ -509,8 +511,11 @@ export class FrigateCardLiveCarousel extends LitElement {
.label=${getCameraTitle(this.hass, cameraConfig)}
.liveConfig=${config}
.hass=${this.hass}
@frigate-card:media-show=${(e: CustomEvent<MediaShowInfo>) => {
wrapMediaShowEventForCarousel(slideIndex, e);
@frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
wrapMediaLoadedEventForCarousel(slideIndex, ev);
}}
@frigate-card:media:unloaded=${(ev: CustomEvent<void>) => {
wrapMediaUnloadedEventForCarousel(slideIndex, ev);
}}
>
</frigate-card-live-provider>
@@ -739,9 +744,12 @@ export class FrigateCardLiveProvider extends LitElement {
/**
* Called before each update.
*/
protected willUpdate(): void {
if (this.disabled) {
this._isVideoMediaLoaded = false;
protected willUpdate(changedProps: PropertyValues): void {
if (changedProps.has('disabled')) {
if (this.disabled) {
this._isVideoMediaLoaded = false;
dispatchMediaUnloadedEvent(this);
}
}
}
@@ -782,7 +790,7 @@ export class FrigateCardLiveProvider extends LitElement {
class=${classMap(providerClasses)}
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
@frigate-card:media-show=${this._videoMediaShowHandler.bind(this)}
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
>
</frigate-card-live-ha>`
: provider === 'webrtc-card'
@@ -792,7 +800,7 @@ export class FrigateCardLiveProvider extends LitElement {
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
.webRTCConfig=${this.liveConfig.webrtc_card}
@frigate-card:media-show=${this._videoMediaShowHandler.bind(this)}
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
>
</frigate-card-live-webrtc-card>`
: html` <frigate-card-live-jsmpeg
@@ -801,7 +809,7 @@ export class FrigateCardLiveProvider extends LitElement {
.hass=${this.hass}
.cameraConfig=${this.cameraConfig}
.jsmpegConfig=${this.liveConfig.jsmpeg}
@frigate-card:media-show=${this._videoMediaShowHandler.bind(this)}
@frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
>
</frigate-card-live-jsmpeg>`}
`;
src/components/media-carousel.ts
+99 -49
View File
@@ -5,16 +5,16 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import mediaCarouselStyle from '../scss/media-carousel.scss';
import type {
MediaShowInfo,
MediaLoadedInfo,
NextPreviousControlConfig,
TitleControlConfig,
TransitionEffect,
} from '../types.js';
import { dispatchFrigateCardEvent } from '../utils/basic';
import {
createMediaShowInfo,
dispatchExistingMediaShowInfoAsEvent,
isValidMediaShowInfo,
createMediaLoadedInfo,
dispatchExistingMediaLoadedInfoAsEvent,
isValidMediaLoadedInfo,
} from '../utils/media-info.js';
import { CarouselSelect, EmblaCarouselPlugins, FrigateCardCarousel } from './carousel';
import { AutoMediaType } from './embla-plugins/automedia.js';
@@ -27,58 +27,93 @@ const getEmptyImageSrc = (width: number, height: number) =>
`data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`;
export const IMG_EMPTY = getEmptyImageSrc(16, 9);
export interface CarouselMediaShowInfo {
export interface CarouselMediaLoadedInfo {
slide: number;
mediaLoadedInfo: MediaLoadedInfo;
}
export interface CarouselMediaUnloadedInfo {
slide: number;
mediaShowInfo: MediaShowInfo;
}
/**
* Dispatch a carousel media show event.
* Dispatch a carousel media loaded event.
* @param target The target to send it from.
* @param carouselMediaShowInfo The CarouselMediaShowInfo.
* @param carouselMediaLoadedInfo The CarouselMediaLoadedInfo.
*/
const dispatchFrigateCardCarouselMediaShow = (
const dispatchFrigateCardCarouselMediaLoaded = (
target: EventTarget,
carouselMediaShowInfo: CarouselMediaShowInfo,
carouselMediaLoadedInfo: CarouselMediaLoadedInfo,
): void => {
dispatchFrigateCardEvent<CarouselMediaShowInfo>(
dispatchFrigateCardEvent<CarouselMediaLoadedInfo>(
target,
'carousel:media-show',
carouselMediaShowInfo,
'carousel:media:loaded',
carouselMediaLoadedInfo,
);
};
/**
* Turn a MediaShowEvent into a CarouselMediaShowInfo.
* Dispatch a carousel media UNloaded event.
* @param target The target to send it from.
* @param carouselMediaUnloadedInfo The CarouselMediaUnloadedInfo.
*/
const dispatchFrigateCardCarouselMediaUnloaded = (
target: EventTarget,
carouselMediaUnloadedInfo: CarouselMediaUnloadedInfo,
): void => {
dispatchFrigateCardEvent<CarouselMediaUnloadedInfo>(
target,
'carousel:media:unloaded',
carouselMediaUnloadedInfo,
);
};
/**
* Turn a MediaLoadedInfo into a CarouselMediaLoadedInfo.
* @param slide The slide number.
* @param event The MediaShowEvent.
*/
export const wrapMediaShowEventForCarousel = (
export const wrapMediaLoadedEventForCarousel = (
slide: number,
event: CustomEvent<MediaShowInfo>,
event: CustomEvent<MediaLoadedInfo>,
) => {
event.stopPropagation();
dispatchFrigateCardCarouselMediaShow(event.composedPath()[0], {
dispatchFrigateCardCarouselMediaLoaded(event.composedPath()[0], {
slide: slide,
mediaShowInfo: event.detail,
mediaLoadedInfo: event.detail,
});
};
/**
* Turn a (stock) media load event into a CarouselMediaShowInfo.
* Turn a (raw, e.g. img) media load event into a CarouselMediaLoadedInfo.
* @param slide The slide number.
* @param event The MediaShowEvent.
*/
export const wrapMediaLoadEventForCarousel = (slide: number, event: Event) => {
const mediaShowInfo = createMediaShowInfo(event);
if (mediaShowInfo) {
dispatchFrigateCardCarouselMediaShow(event.composedPath()[0], {
export const wrapRawMediaLoadedEventForCarousel = (slide: number, event: Event) => {
const mediaLoadedInfo = createMediaLoadedInfo(event);
if (mediaLoadedInfo) {
dispatchFrigateCardCarouselMediaLoaded(event.composedPath()[0], {
slide: slide,
mediaShowInfo: mediaShowInfo,
mediaLoadedInfo: mediaLoadedInfo,
});
}
};
/**
* Turn a MediaUnloadedInfo into a CarouselMediaUnloadedInfo.
* @param slide The slide number.
* @param event The MediaUnloadedEvent.
*/
export const wrapMediaUnloadedEventForCarousel = (
slide: number,
event: CustomEvent<void>,
) => {
event.stopPropagation();
dispatchFrigateCardCarouselMediaUnloaded(event.composedPath()[0], {
slide: slide,
});
};
@customElement('frigate-card-media-carousel')
export class FrigateCardMediaCarousel extends LitElement {
@property({ attribute: false })
@@ -99,8 +134,8 @@ export class FrigateCardMediaCarousel extends LitElement {
@property({ attribute: false })
public titlePopupConfig?: TitleControlConfig;
// A "map" from slide number to MediaShowInfo object.
protected _mediaShowInfo: Record<number, MediaShowInfo> = {};
// A "map" from slide number to MediaLoadedInfo object.
protected _mediaLoadedInfo: Record<number, MediaLoadedInfo> = {};
protected _nextControlRef: Ref<FrigateCardNextPreviousControl> = createRef();
protected _previousControlRef: Ref<FrigateCardNextPreviousControl> = createRef();
protected _titleControlRef: Ref<FrigateCardTitleControl> = createRef();
@@ -233,13 +268,13 @@ export class FrigateCardMediaCarousel extends LitElement {
connectedCallback(): void {
super.connectedCallback();
this.addEventListener('frigate-card:media-show', this._boundAutoPlayHandler);
this.addEventListener('frigate-card:media-show', this._boundAutoUnmuteHandler);
this.addEventListener('frigate-card:media:loaded', this._boundAutoPlayHandler);
this.addEventListener('frigate-card:media:loaded', this._boundAutoUnmuteHandler);
this.addEventListener(
'frigate-card:media-show',
'frigate-card:media:loaded',
this._boundAdaptContainerHeightToSlide,
);
this.addEventListener('frigate-card:media-show', this._boundTitleHandler);
this.addEventListener('frigate-card:media:loaded', this._boundTitleHandler);
this._resizeObserver.observe(this);
this._intersectionObserver.observe(this);
}
@@ -248,13 +283,13 @@ export class FrigateCardMediaCarousel extends LitElement {
* Component disconnected callback.
*/
disconnectedCallback(): void {
this.removeEventListener('frigate-card:media-show', this._boundAutoPlayHandler);
this.removeEventListener('frigate-card:media-show', this._boundAutoUnmuteHandler);
this.removeEventListener('frigate-card:media:loaded', this._boundAutoPlayHandler);
this.removeEventListener('frigate-card:media:loaded', this._boundAutoUnmuteHandler);
this.removeEventListener(
'frigate-card:media-show',
'frigate-card:media:loaded',
this._boundAdaptContainerHeightToSlide,
);
this.removeEventListener('frigate-card:media-show', this._boundTitleHandler);
this.removeEventListener('frigate-card:media:loaded', this._boundTitleHandler);
this._resizeObserver.disconnect();
this._intersectionObserver.disconnect();
@@ -312,7 +347,7 @@ export class FrigateCardMediaCarousel extends LitElement {
// Hack: This method attempts to measure the height of the selected slide in
// order to set the overall carousel height to match. This method is
// triggered from `frigate-card:media-show` events, which are usually in
// triggered from `frigate-card:media:loaded` events, which are usually in
// turn triggered from media/metadata load events from media players.
// Sufficient time needs to be allowed after these metadata load events to
// allow the browser to repaint the element heights, so that we can get the
@@ -323,43 +358,57 @@ export class FrigateCardMediaCarousel extends LitElement {
/**
* Fire a media show event when a slide is selected.
*/
protected _dispatchMediaShowInfo(): void {
protected _dispatchMediaLoadedInfo(): void {
const slideIndex = this.frigateCardCarousel()?.getCarouselSelected()?.index;
if (slideIndex !== undefined && slideIndex in this._mediaShowInfo) {
dispatchExistingMediaShowInfoAsEvent(this, this._mediaShowInfo[slideIndex]);
if (slideIndex !== undefined && slideIndex in this._mediaLoadedInfo) {
dispatchExistingMediaLoadedInfoAsEvent(this, this._mediaLoadedInfo[slideIndex]);
}
}
/**
* Handle a media-show event that is generated by a child component, saving the
* Handle a media:loaded event that is generated by a child component, saving the
* contents for future use when the relevant slide is actually shown.
* @param slideIndex The relevant slide index.
* @param event The media-show event from the child component.
* @param event The media:loaded event from the child component.
*/
protected _storeMediaShowInfo(event: CustomEvent<CarouselMediaShowInfo>): void {
protected _storeMediaLoadedInfo(event: CustomEvent<CarouselMediaLoadedInfo>): void {
// Don't allow the inbound event to propagate upwards, that will be
// automatically done at the appropriate time as the slide is shown.
event.stopPropagation();
const mediaShowInfo = event.detail.mediaShowInfo;
const mediaLoadedInfo = event.detail.mediaLoadedInfo;
const slideIndex = event.detail.slide;
// isValidMediaShowInfo is used to prevent saving media info that will be
// isValidMediaLoadedInfo is used to prevent saving media info that will be
// rejected upstream (empty 1x1 images will be rejected here).
if (mediaShowInfo && isValidMediaShowInfo(mediaShowInfo)) {
this._mediaShowInfo[slideIndex] = mediaShowInfo;
if (mediaLoadedInfo && isValidMediaLoadedInfo(mediaLoadedInfo)) {
this._mediaLoadedInfo[slideIndex] = mediaLoadedInfo;
if (this.frigateCardCarousel()?.getCarouselSelected()?.index === slideIndex) {
dispatchExistingMediaShowInfoAsEvent(this, mediaShowInfo);
dispatchExistingMediaLoadedInfoAsEvent(this, mediaLoadedInfo);
}
}
}
/**
* Remove a media loaded info (i.e. a media item has unloaded).
* @param event The CarouselMediaUnloadedInfo event.
*/
protected _removeMediaLoadedInfo(event: CustomEvent<CarouselMediaUnloadedInfo>): void {
const slideIndex = event.detail.slide;
delete this._mediaLoadedInfo[slideIndex];
// If the slide that unloaded is not visible, don't propagate the event upwards.
if (this.frigateCardCarousel()?.getCarouselSelected()?.index !== slideIndex) {
event.stopPropagation();
}
}
protected render(): TemplateResult | void {
return html` <frigate-card-carousel
${ref(this._refCarousel)}
.carouselOptions=${this.carouselOptions}
.carouselPlugins=${this.carouselPlugins}
transitionEffect=${ifDefined(this.transitionEffect)}
@frigate-card:carousel:init=${this._dispatchMediaShowInfo.bind(this)}
@frigate-card:carousel:init=${this._dispatchMediaLoadedInfo.bind(this)}
@frigate-card:carousel:select=${(ev: CustomEvent<CarouselSelect>) => {
this._slideResizeObserver.disconnect();
this._slideResizeObserver.observe(ev.detail.element);
@@ -373,9 +422,10 @@ export class FrigateCardMediaCarousel extends LitElement {
);
// Dispatch media info.
this._dispatchMediaShowInfo();
this._dispatchMediaLoadedInfo();
}}
@frigate-card:carousel:media-show=${this._storeMediaShowInfo.bind(this)}
@frigate-card:carousel:media:loaded=${this._storeMediaLoadedInfo.bind(this)}
@frigate-card:carousel:media:unloaded=${this._removeMediaLoadedInfo.bind(this)}
>
<slot slot="previous" name="previous"></slot>
<slot></slot>
src/components/viewer.ts
+8 -11
View File
@@ -13,10 +13,7 @@ import { guard } from 'lit/directives/guard.js';
import { customElement, property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { createRef, Ref, ref } from 'lit/directives/ref.js';
import {
dispatchFrigateCardErrorEvent,
renderProgressIndicator,
} from '../components/message.js';
import { renderProgressIndicator } from '../components/message.js';
import viewerStyle from '../scss/viewer.scss';
import viewerCarouselStyle from '../scss/viewer-carousel.scss';
import {
@@ -27,7 +24,7 @@ import {
FrigateBrowseMediaSource,
frigateCardConfigDefaults,
FrigateCardMediaPlayer,
MediaShowInfo,
MediaLoadedInfo,
TransitionEffect,
ViewerConfig,
} from '../types.js';
@@ -48,8 +45,8 @@ import { Lazyload } from './embla-plugins/lazyload.js';
import {
FrigateCardMediaCarousel,
IMG_EMPTY,
wrapMediaLoadEventForCarousel,
wrapMediaShowEventForCarousel,
wrapRawMediaLoadedEventForCarousel,
wrapMediaLoadedEventForCarousel,
} from './media-carousel.js';
import './next-prev-control.js';
import './title-control.js';
@@ -619,7 +616,7 @@ export class FrigateCardViewerCarousel extends LitElement {
.titlePopupConfig=${this.viewerConfig?.controls.title}
transitionEffect=${this._getTransitionEffect()}
@frigate-card:media-carousel:select=${this._setViewHandler.bind(this)}
@frigate-card:media-show=${this._recordingSeekHandler.bind(this)}
@frigate-card:media:loaded=${this._recordingSeekHandler.bind(this)}
>
<frigate-card-next-previous-control
slot="previous"
@@ -706,8 +703,8 @@ export class FrigateCardViewerCarousel extends LitElement {
)}
.media=${mediaToRender}
.hass=${this.hass}
@frigate-card:media-show=${(e: CustomEvent<MediaShowInfo>) => {
wrapMediaShowEventForCarousel(slideIndex, e);
@frigate-card:media:loaded=${(e: CustomEvent<MediaLoadedInfo>) => {
wrapMediaLoadedEventForCarousel(slideIndex, e);
}}
>
</frigate-card-ha-hls-player>`
@@ -743,7 +740,7 @@ export class FrigateCardViewerCarousel extends LitElement {
!lazyLoad ||
lazyloadPlugin?.hasLazyloaded(slideIndex)
) {
wrapMediaLoadEventForCarousel(slideIndex, e);
wrapRawMediaLoadedEventForCarousel(slideIndex, e);
}
}}"
/>`}