747 lines
23 KiB
TypeScript
747 lines
23 KiB
TypeScript
import {
|
|
CSSResultGroup,
|
|
LitElement,
|
|
PropertyValues,
|
|
TemplateResult,
|
|
html,
|
|
unsafeCSS,
|
|
} from 'lit';
|
|
import { BrowseMediaUtil } from '../browse-media-util.js';
|
|
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
|
|
import { HomeAssistant } from 'custom-card-helpers';
|
|
import { Task } from '@lit-labs/task';
|
|
import { createRef, Ref, ref } from 'lit/directives/ref.js';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
|
import { AutoMediaPlugin } from './embla-plugins/automedia.js';
|
|
import type {
|
|
BrowseMediaNeighbors,
|
|
BrowseMediaQueryParameters,
|
|
BrowseMediaSource,
|
|
CameraConfig,
|
|
ExtendedHomeAssistant,
|
|
MediaShowInfo,
|
|
ViewerConfig,
|
|
} from '../types.js';
|
|
import { FrigateCardMediaCarousel, IMG_EMPTY } from './media-carousel.js';
|
|
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
|
|
import {
|
|
FrigateCardThumbnailCarousel,
|
|
ThumbnailCarouselTap,
|
|
} from './thumbnail-carousel.js';
|
|
import { Lazyload, LazyloadType } from './embla-plugins/lazyload.js';
|
|
import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
|
|
import { View } from '../view.js';
|
|
import {
|
|
contentsChanged,
|
|
createMediaShowInfo,
|
|
dispatchErrorMessageEvent,
|
|
} from '../common.js';
|
|
import { renderProgressIndicator } from '../components/message.js';
|
|
|
|
import './next-prev-control.js';
|
|
import './title-control.js';
|
|
|
|
import viewerStyle from '../scss/viewer.scss';
|
|
import viewerCoreStyle from '../scss/viewer-core.scss';
|
|
|
|
@customElement('frigate-card-viewer')
|
|
export class FrigateCardViewer extends LitElement {
|
|
@property({ attribute: false })
|
|
protected hass?: HomeAssistant & ExtendedHomeAssistant;
|
|
|
|
@property({ attribute: false })
|
|
protected view?: Readonly<View>;
|
|
|
|
@property({ attribute: false })
|
|
protected viewerConfig?: ViewerConfig;
|
|
|
|
@property({ attribute: false })
|
|
protected cameraConfig?: CameraConfig;
|
|
|
|
@property({ attribute: false })
|
|
protected resolvedMediaCache?: ResolvedMediaCache;
|
|
|
|
/**
|
|
* Master render method.
|
|
* @returns A rendered template.
|
|
*/
|
|
protected render(): TemplateResult | void {
|
|
if (!this.hass || !this.view || !this.cameraConfig) {
|
|
return;
|
|
}
|
|
|
|
const browseMediaQueryParameters =
|
|
BrowseMediaUtil.getBrowseMediaQueryParametersOrDispatchError(
|
|
this,
|
|
this.view,
|
|
this.cameraConfig,
|
|
);
|
|
if (!browseMediaQueryParameters) {
|
|
return;
|
|
}
|
|
|
|
if (!this.view.target) {
|
|
BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange(
|
|
this,
|
|
this.hass,
|
|
this.view,
|
|
browseMediaQueryParameters,
|
|
);
|
|
return renderProgressIndicator();
|
|
}
|
|
|
|
return html` <frigate-card-viewer-core
|
|
.view=${this.view}
|
|
.viewerConfig=${this.viewerConfig}
|
|
.resolvedMediaCache=${this.resolvedMediaCache}
|
|
.hass=${this.hass}
|
|
.browseMediaQueryParameters=${browseMediaQueryParameters}
|
|
>
|
|
</frigate-card-viewer-core>`;
|
|
}
|
|
|
|
/**
|
|
* Get element styles.
|
|
*/
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(viewerStyle);
|
|
}
|
|
}
|
|
|
|
@customElement('frigate-card-viewer-core')
|
|
export class FrigateCardViewerCore extends LitElement {
|
|
@property({ attribute: false })
|
|
protected hass?: HomeAssistant & ExtendedHomeAssistant;
|
|
|
|
@property({ attribute: false })
|
|
protected view?: Readonly<View>;
|
|
|
|
// See note on viewerConfig in <frigate-card-viewer-carousel>.
|
|
@property({ attribute: false, hasChanged: contentsChanged })
|
|
protected viewerConfig?: ViewerConfig;
|
|
|
|
@property({ attribute: false })
|
|
protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
|
|
|
|
@property({ attribute: false })
|
|
protected resolvedMediaCache?: ResolvedMediaCache;
|
|
|
|
protected _viewerCarouselRef: Ref<FrigateCardViewerCarousel> = createRef();
|
|
protected _thumbnailCarouselRef: Ref<FrigateCardThumbnailCarousel> = createRef();
|
|
|
|
protected _syncThumbnailCarousel(): void {
|
|
const mediaSelected = this._viewerCarouselRef.value?.carouselSelected();
|
|
if (mediaSelected !== undefined) {
|
|
this._thumbnailCarouselRef.value?.carouselScrollTo(mediaSelected);
|
|
}
|
|
}
|
|
|
|
protected _renderThumbnails(): TemplateResult {
|
|
if (!this.view || !this.viewerConfig) {
|
|
return html``;
|
|
}
|
|
|
|
return html` <frigate-card-thumbnail-carousel
|
|
${ref(this._thumbnailCarouselRef)}
|
|
.target=${this.view.target}
|
|
.config=${this.viewerConfig.controls.thumbnails}
|
|
@frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
|
|
this._viewerCarouselRef.value?.carouselScrollTo(ev.detail.slideIndex);
|
|
}}
|
|
@frigate-card:carousel:init=${this._syncThumbnailCarousel.bind(this)}
|
|
>
|
|
</frigate-card-thumbnail-carousel>`;
|
|
}
|
|
|
|
protected render(): TemplateResult | void {
|
|
if (!this.view || !this.viewerConfig) {
|
|
return html``;
|
|
}
|
|
return html` ${this.viewerConfig &&
|
|
this.viewerConfig.controls.thumbnails.mode === 'above'
|
|
? this._renderThumbnails()
|
|
: ''}
|
|
<frigate-card-viewer-carousel
|
|
${ref(this._viewerCarouselRef)}
|
|
.hass=${this.hass}
|
|
.view=${this.view}
|
|
.viewerConfig=${this.viewerConfig}
|
|
.browseMediaQueryParameters=${this.browseMediaQueryParameters}
|
|
.resolvedMediaCache=${this.resolvedMediaCache}
|
|
@frigate-card:carousel:select=${this._syncThumbnailCarousel.bind(this)}
|
|
>
|
|
</frigate-card-viewer-carousel>
|
|
${this.viewerConfig && this.viewerConfig.controls.thumbnails.mode === 'below'
|
|
? this._renderThumbnails()
|
|
: ''}`;
|
|
}
|
|
|
|
/**
|
|
* Get element styles.
|
|
*/
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(viewerCoreStyle);
|
|
}
|
|
}
|
|
|
|
@customElement('frigate-card-viewer-carousel')
|
|
export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
|
|
@property({ attribute: false })
|
|
protected hass?: HomeAssistant & ExtendedHomeAssistant;
|
|
|
|
@property({ attribute: false })
|
|
protected view?: Readonly<View>;
|
|
|
|
// Resetting the viewer configuration causes a full reset so ensure the config
|
|
// has actually changed with a full comparison (dynamic configuration
|
|
// overrides may causes changes elsewhere in the full card configuration that
|
|
// could lead to the address of the viewerConfig changing without it being
|
|
// semantically different).
|
|
@property({ attribute: false, hasChanged: contentsChanged })
|
|
protected viewerConfig?: ViewerConfig;
|
|
|
|
@property({ attribute: false })
|
|
protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
|
|
|
|
@property({ attribute: false })
|
|
protected resolvedMediaCache?: ResolvedMediaCache;
|
|
|
|
// Mapping of slide # to BrowseMediaSource child #.
|
|
// (Folders are not media items that can be rendered).
|
|
protected _slideToChild: Record<number, number> = {};
|
|
|
|
// A task to resolve target media if lazy loading is disabled.
|
|
protected _mediaResolutionTask = new Task<[BrowseMediaSource | undefined], void>(
|
|
this,
|
|
async ([target]: (BrowseMediaSource | undefined)[]): Promise<void> => {
|
|
for (
|
|
let i = 0;
|
|
!this.viewerConfig?.lazy_load &&
|
|
this.hass &&
|
|
target &&
|
|
target.children &&
|
|
i < (target.children || []).length;
|
|
++i
|
|
) {
|
|
if (BrowseMediaUtil.isTrueMedia(target.children[i])) {
|
|
await ResolvedMediaUtil.resolveMedia(
|
|
this.hass,
|
|
target.children[i],
|
|
this.resolvedMediaCache,
|
|
);
|
|
}
|
|
}
|
|
},
|
|
() => [this.view?.target],
|
|
);
|
|
|
|
/**
|
|
* The updated lifecycle callback for this element.
|
|
* @param changedProperties The properties that were changed in this render.
|
|
*/
|
|
updated(changedProperties: PropertyValues): void {
|
|
if (this._carousel && changedProperties.has('viewerConfig')) {
|
|
this._destroyCarousel();
|
|
}
|
|
|
|
if (this._carousel && changedProperties.has('view')) {
|
|
const oldView = changedProperties.get('view') as View | undefined;
|
|
if (oldView) {
|
|
if (oldView.target != this.view?.target) {
|
|
// If the media target is different entirely, reset the carousel.
|
|
this._destroyCarousel();
|
|
} else if (this.view?.childIndex != oldView.childIndex) {
|
|
const slide = this._getSlideForChild(this.view?.childIndex);
|
|
if (slide !== undefined && slide !== this.carouselSelected()) {
|
|
// If the media target is the same as already loaded, but isn't of
|
|
// the selected slide, scroll to that slide.
|
|
this.carouselScrollTo(slide);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
super.updated(changedProperties);
|
|
}
|
|
|
|
/**
|
|
* Play the media on the selected slide.
|
|
*/
|
|
protected _autoPlayHandler(): void {
|
|
if (this.viewerConfig?.autoplay_clip) {
|
|
super._autoPlayHandler();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Unmute the media on the selected slide.
|
|
*/
|
|
protected _autoUnmuteHandler(): void {
|
|
if (this.viewerConfig?.auto_unmute) {
|
|
super._autoUnmuteHandler();
|
|
}
|
|
}
|
|
|
|
protected _destroyCarousel(): void {
|
|
super._destroyCarousel();
|
|
|
|
// Notes on instance variables:
|
|
// * this._slideToChild: This is set as part of each render and does not
|
|
// need to be destroyed here.
|
|
}
|
|
|
|
protected _getSlideForChild(childIndex: number | undefined): number | undefined {
|
|
if (childIndex === undefined) {
|
|
return undefined;
|
|
}
|
|
const slideIndex = Object.keys(this._slideToChild).find(
|
|
(key) => this._slideToChild[key] === childIndex,
|
|
);
|
|
return slideIndex !== undefined ? Number(slideIndex) : undefined;
|
|
}
|
|
|
|
/**
|
|
* Get the Embla options to use.
|
|
* @returns An EmblaOptionsType object or undefined for no options.
|
|
*/
|
|
protected _getOptions(): EmblaOptionsType {
|
|
return {
|
|
// Start the carousel on the selected child number.
|
|
startIndex: this._getSlideForChild(this.view?.childIndex),
|
|
draggable: this.viewerConfig?.draggable,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Get the Embla plugins to use.
|
|
* @returns An EmblaOptionsType object or undefined for no options.
|
|
*/
|
|
protected _getPlugins(): EmblaPluginType[] | undefined {
|
|
return [
|
|
Lazyload({
|
|
lazyloadCallback: this.viewerConfig?.lazy_load
|
|
? this._lazyloadSlide.bind(this)
|
|
: undefined,
|
|
}),
|
|
// Don't need autoplay/pause for snapshots.
|
|
...(this.view?.is('clip')
|
|
? [
|
|
AutoMediaPlugin({
|
|
playerSelector: 'frigate-card-ha-hls-player',
|
|
autoPlayWhenVisible: !!this.viewerConfig?.autoplay_clip,
|
|
autoUnmuteWhenVisible: !!this.viewerConfig?.auto_unmute,
|
|
}),
|
|
]
|
|
: []),
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Get the previous and next true media items from the current view.
|
|
* @returns A BrowseMediaNeighbors with indices and objects of true media
|
|
* neighbors.
|
|
*/
|
|
protected _getMediaNeighbors(): BrowseMediaNeighbors | null {
|
|
if (
|
|
!this.view ||
|
|
!this.view.target ||
|
|
!this.view.target.children ||
|
|
this.view.childIndex === undefined
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
// Work backwards from the index to get the previous real media.
|
|
let prevIndex: number | null = null;
|
|
for (let i = this.view.childIndex - 1; i >= 0; i--) {
|
|
const media = this.view.target.children[i];
|
|
if (media && BrowseMediaUtil.isTrueMedia(media)) {
|
|
prevIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Work forwards from the index to get the next real media.
|
|
let nextIndex: number | null = null;
|
|
for (let i = this.view.childIndex + 1; i < this.view.target.children.length; i++) {
|
|
const media = this.view.target.children[i];
|
|
if (media && BrowseMediaUtil.isTrueMedia(media)) {
|
|
nextIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return {
|
|
previousIndex: prevIndex,
|
|
previous: prevIndex != null ? this.view.target.children[prevIndex] : null,
|
|
nextIndex: nextIndex,
|
|
next: nextIndex != null ? this.view.target.children[nextIndex] : null,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Get a clip view that matches a given snapshot. Includes clips within the
|
|
* same range as the current view.
|
|
* @param snapshot The snapshot to find a matching clip for.
|
|
* @returns The view that would show the matching clip.
|
|
*/
|
|
protected async _findRelatedClipView(
|
|
snapshot: BrowseMediaSource,
|
|
): Promise<View | null> {
|
|
if (
|
|
!this.hass ||
|
|
!this.view ||
|
|
!this.view.target ||
|
|
!this.view.target.children ||
|
|
!this.view.target.children.length ||
|
|
!this.browseMediaQueryParameters
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
const snapshotStartTime = BrowseMediaUtil.extractEventStartTime(snapshot);
|
|
if (!snapshotStartTime) {
|
|
return null;
|
|
}
|
|
|
|
// Heuristic: At this point, the user has a particular snapshot that they
|
|
// are interested in and want to see a related clip, yet the viewer code
|
|
// does not know the exact search criteria that led to that snapshot (e.g.
|
|
// it could be a 10-deep folder in the gallery). To give the user to ability
|
|
// to 'navigate' in the clips view once they change into that mode, this
|
|
// heuristic finds the earliest and latest snapshot that the user is
|
|
// currently viewing and mirrors that range into the clips view. Then,
|
|
// within the results see if there's a clip that matches the same time as
|
|
// the snapshot.
|
|
let earliest: number | null = null;
|
|
let latest: number | null = null;
|
|
for (let i = 0; i < this.view.target.children.length; i++) {
|
|
const child = this.view.target.children[i];
|
|
if (!BrowseMediaUtil.isTrueMedia(child)) {
|
|
continue;
|
|
}
|
|
const startTime = BrowseMediaUtil.extractEventStartTime(child);
|
|
|
|
if (startTime && (earliest === null || startTime < earliest)) {
|
|
earliest = startTime;
|
|
}
|
|
if (startTime && (latest === null || startTime > latest)) {
|
|
latest = startTime;
|
|
}
|
|
}
|
|
if (!earliest || !latest) {
|
|
return null;
|
|
}
|
|
|
|
let clips: BrowseMediaSource | null;
|
|
|
|
try {
|
|
clips = await BrowseMediaUtil.browseMediaQuery(this.hass, {
|
|
...this.browseMediaQueryParameters,
|
|
mediaType: 'clips',
|
|
before: latest,
|
|
after: earliest,
|
|
});
|
|
} catch (e) {
|
|
// This is best effort.
|
|
return null;
|
|
}
|
|
|
|
if (!clips || !clips.children || !clips.children.length) {
|
|
return null;
|
|
}
|
|
|
|
for (let i = 0; i < clips.children.length; i++) {
|
|
const child = clips.children[i];
|
|
if (!BrowseMediaUtil.isTrueMedia(child)) {
|
|
continue;
|
|
}
|
|
const clipStartTime = BrowseMediaUtil.extractEventStartTime(child);
|
|
if (clipStartTime && clipStartTime === snapshotStartTime) {
|
|
return new View({
|
|
view: 'clip',
|
|
camera: this.view.camera,
|
|
target: clips,
|
|
childIndex: i,
|
|
previous: this.view,
|
|
});
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Handle the user selecting a new slide in the carousel.
|
|
*/
|
|
protected _selectSlideSetViewHandler(): void {
|
|
if (!this._carousel || !this.view) {
|
|
return;
|
|
}
|
|
|
|
// Update the childIndex in the view.
|
|
const slidesInView = this._carousel.slidesInView(true);
|
|
if (slidesInView.length) {
|
|
const childIndex = this._slideToChild[slidesInView[0]];
|
|
if (childIndex !== undefined) {
|
|
this.view
|
|
.evolve({
|
|
childIndex: childIndex,
|
|
previous: this.view,
|
|
})
|
|
.dispatchChangeEvent(this);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Lazy load a slide.
|
|
* @param index The index of the slide to lazy load.
|
|
* @param slide The slide to lazy load.
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
protected _lazyloadSlide(index: number, slide: HTMLElement): void {
|
|
const childIndex: number | undefined = this._slideToChild[index];
|
|
|
|
if (
|
|
childIndex == undefined ||
|
|
!this.hass ||
|
|
!this.view ||
|
|
!this.view.target ||
|
|
!this.view.target.children ||
|
|
!BrowseMediaUtil.isTrueMedia(this.view.target.children[childIndex])
|
|
) {
|
|
return;
|
|
}
|
|
|
|
ResolvedMediaUtil.resolveMedia(
|
|
this.hass,
|
|
this.view.target.children[childIndex],
|
|
this.resolvedMediaCache,
|
|
).then((resolvedMedia) => {
|
|
if (!resolvedMedia) {
|
|
return;
|
|
}
|
|
|
|
// Snapshots.
|
|
const img = slide.querySelector('img') as HTMLImageElement;
|
|
|
|
// Frigate >= 0.9.0+ clips.
|
|
const hls_player = slide.querySelector(
|
|
'frigate-card-ha-hls-player',
|
|
) as HTMLElement & { url: string };
|
|
|
|
if (img) {
|
|
img.src = resolvedMedia.url;
|
|
} else if (hls_player) {
|
|
hls_player.url = resolvedMedia.url;
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handle updating of the next/previous controls when the carousel is moved.
|
|
*/
|
|
protected _selectSlideNextPreviousHandler(): void {
|
|
const updateNextPreviousControl = (
|
|
control: FrigateCardNextPreviousControl,
|
|
direction: 'previous' | 'next',
|
|
): void => {
|
|
const neighbors = this._getMediaNeighbors();
|
|
const [prev, next] = [neighbors?.previous, neighbors?.next];
|
|
const target = direction == 'previous' ? prev : next;
|
|
|
|
control.disabled = target == null;
|
|
control.title = target && target.title ? target.title : '';
|
|
control.thumbnail = target && target.thumbnail ? target.thumbnail : undefined;
|
|
};
|
|
|
|
if (this._previousControlRef.value) {
|
|
updateNextPreviousControl(this._previousControlRef.value, 'previous');
|
|
}
|
|
if (this._nextControlRef.value) {
|
|
updateNextPreviousControl(this._nextControlRef.value, 'next');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get slides to include in the render.
|
|
* @returns The slides to include in the render and an index keyed by slide
|
|
* number that maps to child number.
|
|
*/
|
|
protected _getSlides(): [TemplateResult[], Record<number, number>] {
|
|
if (
|
|
!this.view ||
|
|
!this.view.target ||
|
|
!this.view.target.children ||
|
|
!this.view.target.children.length
|
|
) {
|
|
return [[], {}];
|
|
}
|
|
|
|
const slideToChild: Record<number, number> = {};
|
|
const slides: TemplateResult[] = [];
|
|
for (let i = 0; i < this.view.target.children?.length; ++i) {
|
|
const slide = this._renderMediaItem(this.view.target.children[i], slides.length);
|
|
|
|
if (slide) {
|
|
slideToChild[slides.length] = i;
|
|
slides.push(slide);
|
|
}
|
|
}
|
|
return [slides, slideToChild];
|
|
}
|
|
|
|
/**
|
|
* Determine if all the media in the carousel are resolved.
|
|
*/
|
|
protected _isMediaFullyResolved(): boolean {
|
|
for (const child of this.view?.target?.children || []) {
|
|
if (!this.resolvedMediaCache?.has(child.media_content_id)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Render the element, resolving the media first if necessary.
|
|
*/
|
|
protected render(): TemplateResult | void {
|
|
this._slideToChild = {};
|
|
|
|
// If lazy loading is not enabled, wait for the media resolver task to
|
|
// complete and show a progress indictator until this.
|
|
if (!this.viewerConfig?.lazy_load && !this._isMediaFullyResolved()) {
|
|
return html`${this._mediaResolutionTask.render({
|
|
initial: () => renderProgressIndicator(),
|
|
pending: () => renderProgressIndicator(),
|
|
error: (e: unknown) => dispatchErrorMessageEvent(this, (e as Error).message),
|
|
complete: () => this._render(),
|
|
})}`;
|
|
}
|
|
return this._render();
|
|
}
|
|
|
|
/**
|
|
* Render the element.
|
|
* @returns A template to display to the user.
|
|
*/
|
|
protected _render(): TemplateResult | void {
|
|
const [slides, slideToChild] = this._getSlides();
|
|
this._slideToChild = slideToChild;
|
|
if (!slides) {
|
|
return;
|
|
}
|
|
|
|
const neighbors = this._getMediaNeighbors();
|
|
const [prev, next] = [neighbors?.previous, neighbors?.next];
|
|
|
|
return html`<div class="embla">
|
|
<frigate-card-next-previous-control
|
|
${ref(this._previousControlRef)}
|
|
.direction=${'previous'}
|
|
.controlConfig=${this.viewerConfig?.controls.next_previous}
|
|
.thumbnail=${prev && prev.thumbnail ? prev.thumbnail : undefined}
|
|
.label=${prev ? prev.title : ''}
|
|
?disabled=${!prev}
|
|
@click=${() => {
|
|
this._nextPreviousHandler('previous');
|
|
}}
|
|
></frigate-card-next-previous-control>
|
|
<div class="embla__viewport">
|
|
<div class="embla__container">${slides}</div>
|
|
</div>
|
|
<frigate-card-next-previous-control
|
|
${ref(this._nextControlRef)}
|
|
.direction=${'next'}
|
|
.controlConfig=${this.viewerConfig?.controls.next_previous}
|
|
.thumbnail=${next && next.thumbnail ? next.thumbnail : undefined}
|
|
.label=${next ? next.title : ''}
|
|
?disabled=${!next}
|
|
@click=${() => {
|
|
this._nextPreviousHandler('next');
|
|
}}
|
|
></frigate-card-next-previous-control>
|
|
</div>
|
|
${this.view?.media
|
|
? html` <frigate-card-title-control
|
|
${ref(this._titleControlRef)}
|
|
.config=${this.viewerConfig?.controls.title}
|
|
.text="${this.view.media.title}"
|
|
.fitInto=${this as HTMLElement}
|
|
>
|
|
</frigate-card-title-control>`
|
|
: ``} `;
|
|
}
|
|
|
|
protected _renderMediaItem(
|
|
mediaToRender: BrowseMediaSource,
|
|
slideIndex: number,
|
|
): TemplateResult | void {
|
|
// Skip folders as they cannot be rendered by this viewer.
|
|
if (
|
|
!this.view ||
|
|
!this.viewerConfig ||
|
|
!BrowseMediaUtil.isTrueMedia(mediaToRender)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
const lazyLoad = this.viewerConfig.lazy_load;
|
|
const resolvedMedia = this.resolvedMediaCache?.get(mediaToRender.media_content_id);
|
|
if (!resolvedMedia && !lazyLoad) {
|
|
return;
|
|
}
|
|
|
|
return html`
|
|
<div class="embla__slide">
|
|
${this.view.isClipRelatedView()
|
|
? html`<frigate-card-ha-hls-player
|
|
allow-exoplayer
|
|
aria-label="${mediaToRender.title}"
|
|
controls
|
|
muted
|
|
playsinline
|
|
title="${mediaToRender.title}"
|
|
url=${ifDefined(lazyLoad ? undefined : resolvedMedia?.url)}
|
|
.hass=${this.hass}
|
|
@frigate-card:media-show=${(e: CustomEvent<MediaShowInfo>) =>
|
|
this._mediaShowEventHandler(slideIndex, e)}
|
|
>
|
|
</frigate-card-ha-hls-player>`
|
|
: html`<img
|
|
aria-label="${mediaToRender.title}"
|
|
src=${ifDefined(lazyLoad ? IMG_EMPTY : resolvedMedia?.url)}
|
|
title="${mediaToRender.title}"
|
|
@click=${() => {
|
|
if (this._carousel?.clickAllowed()) {
|
|
this._findRelatedClipView(mediaToRender).then((view) => {
|
|
if (view) {
|
|
view.dispatchChangeEvent(this);
|
|
}
|
|
});
|
|
}
|
|
}}
|
|
@load="${(e: Event) => {
|
|
if (
|
|
// This handler will be called on the empty image (including
|
|
// an updated empty image that is the same dimensions large as
|
|
// the previously fully loaded image -- see the note on dummy
|
|
// images in media-carousel.ts). Here we need to only call the
|
|
// media load handler on a 'real' load.
|
|
!lazyLoad ||
|
|
(this._plugins['Lazyload'] as LazyloadType | undefined)?.hasLazyloaded(
|
|
slideIndex,
|
|
)
|
|
) {
|
|
this._mediaLoadedHandler(slideIndex, createMediaShowInfo(e));
|
|
}
|
|
}}"
|
|
/>`}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|