266 lines
9.4 KiB
TypeScript
266 lines
9.4 KiB
TypeScript
import { CSSResultGroup, unsafeCSS } from 'lit';
|
|
import { EmblaCarouselType } from 'embla-carousel';
|
|
import { createRef, Ref } from 'lit/directives/ref';
|
|
import { customElement } from 'lit/decorators.js';
|
|
|
|
import { FrigateCardCarousel } from './carousel.js';
|
|
import type { MediaShowInfo } from '../types.js';
|
|
import {
|
|
dispatchExistingMediaShowInfoAsEvent,
|
|
isValidMediaShowInfo,
|
|
} from '../common.js';
|
|
|
|
import './next-prev-control.js';
|
|
|
|
import mediaCarouselStyle from '../scss/media-carousel.scss';
|
|
|
|
import { FrigateCardNextPreviousControl } from './next-prev-control.js';
|
|
|
|
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);
|
|
|
|
@customElement('frigate-card-media-carousel')
|
|
export class FrigateCardMediaCarousel extends FrigateCardCarousel {
|
|
// A "map" from slide number to MediaShowInfo object.
|
|
protected _mediaShowInfo: Record<number, MediaShowInfo> = {};
|
|
|
|
// Whether or not a given slide has been successfully lazily loaded.
|
|
protected _slideHasBeenLazyLoaded: Record<number, boolean> = {};
|
|
|
|
protected _nextControlRef: Ref<FrigateCardNextPreviousControl> = createRef();
|
|
protected _previousControlRef: Ref<FrigateCardNextPreviousControl> = createRef();
|
|
|
|
/**
|
|
* Returns the number of slides to lazily load. 0 means all slides are lazy
|
|
* loaded, 1 means that 1 slide on each side of the currently selected slide
|
|
* should lazy load, etc. `null` means lazy loading is disabled and everything
|
|
* should load simultaneously.
|
|
* @returns
|
|
*/
|
|
protected _getLazyLoadCount(): number | null {
|
|
// Defaults to fully-lazy loading.
|
|
return 0;
|
|
}
|
|
|
|
/**
|
|
* Load the carousel with "slides" (clips or snapshots).
|
|
*/
|
|
protected _loadCarousel(): void {
|
|
super._loadCarousel();
|
|
|
|
// Necessary because typescript local type narrowing is not paying attention
|
|
// to the side-effect of the call to super._loadCarousel().
|
|
const carousel = this._carousel as EmblaCarouselType | undefined;
|
|
|
|
// Update the view object as the carousel is moved.
|
|
carousel?.on('select', this._selectSlideSetViewHandler.bind(this));
|
|
|
|
// Update the next/previous controls as the carousel is moved.
|
|
carousel?.on('select', this._selectSlideNextPreviousHandler.bind(this));
|
|
|
|
// Dispatch MediaShow events as the carousel is moved.
|
|
carousel?.on('init', this._selectSlideMediaShowHandler.bind(this));
|
|
carousel?.on('select', this._selectSlideMediaShowHandler.bind(this));
|
|
|
|
// Adapt the height of the container to the media as the carousel is moved.
|
|
carousel?.on('init', this._adaptiveHeightHandler.bind(this));
|
|
carousel?.on('select', this._adaptiveHeightHandler.bind(this));
|
|
carousel?.on('resize', this._adaptiveHeightHandler.bind(this));
|
|
|
|
if (this._getLazyLoadCount() != null) {
|
|
// Load media as the carousel is moved (if lazy loading is in use).
|
|
carousel?.on('init', this._lazyLoadMediaHandler.bind(this));
|
|
carousel?.on('select', this._lazyLoadMediaHandler.bind(this));
|
|
carousel?.on('resize', this._lazyLoadMediaHandler.bind(this));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Adapt the height of the container to the height of the media (for cases
|
|
* where the carousel has different media heights, e.g. live cameras with
|
|
* different aspect ratios).
|
|
*/
|
|
protected _adaptiveHeightHandler(): void {
|
|
if (!this._carousel) {
|
|
return;
|
|
}
|
|
const slides = this._carousel.slideNodes();
|
|
const heights = this._carousel.slidesInView(true).map((index) => {
|
|
const firstChild = slides[index].querySelector("*");
|
|
return firstChild ? firstChild.getBoundingClientRect().height : 0;
|
|
})
|
|
const targetHeight = Math.max(...heights);
|
|
if (targetHeight > 0) {
|
|
this._carousel.containerNode().style.maxHeight = `${targetHeight}px`;
|
|
} else {
|
|
this._carousel.containerNode().style.removeProperty('max-height')
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle the user selecting a new slide in the carousel.
|
|
*/
|
|
protected _selectSlideSetViewHandler(): void {
|
|
// To be overridden in children.
|
|
}
|
|
|
|
/**
|
|
* Handle updating of the next/previous controls when the carousel is moved.
|
|
*/
|
|
protected _selectSlideNextPreviousHandler(): void {
|
|
// To be overridden in children.
|
|
}
|
|
|
|
/**
|
|
* Handle a next/previous control interaction.
|
|
* @param direction The direction requested, previous or next.
|
|
*/
|
|
protected _nextPreviousHandler(direction: 'previous' | 'next'): void {
|
|
if (direction == 'previous') {
|
|
this._carousel?.scrollPrev();
|
|
} else if (direction == 'next') {
|
|
this._carousel?.scrollNext();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Lazily load media in the carousel.
|
|
*/
|
|
protected _lazyLoadMediaHandler(): void {
|
|
if (!this._carousel) {
|
|
return;
|
|
}
|
|
const lazyLoadCount = this._getLazyLoadCount();
|
|
if (lazyLoadCount === null) {
|
|
return;
|
|
}
|
|
|
|
const slides = this._carousel.slideNodes();
|
|
const slidesInView = this._carousel.slidesInView(true);
|
|
const slidesToLoad = new Set<number>();
|
|
|
|
const minSlide = Math.min(...slidesInView);
|
|
const maxSlide = Math.max(...slidesInView);
|
|
|
|
// Lazily load 'lazyLoadCount' slides on either side of the slides in view.
|
|
for (let i = 1; i <= lazyLoadCount && minSlide - i >= 0; i++) {
|
|
slidesToLoad.add(minSlide - i);
|
|
}
|
|
slidesInView.forEach((index) => slidesToLoad.add(index));
|
|
for (let i = 1; i <= lazyLoadCount && maxSlide + i < slides.length; i++) {
|
|
slidesToLoad.add(maxSlide + i);
|
|
}
|
|
|
|
slidesToLoad.forEach((index) => {
|
|
// Only lazy load slides that are not already loaded.
|
|
if (this._slideHasBeenLazyLoaded[index]) {
|
|
return;
|
|
}
|
|
this._slideHasBeenLazyLoaded[index] = true;
|
|
this._lazyLoadSlide(slides[index]);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Lazy load a slide.
|
|
* @param _slide The slide to lazy load.
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
protected _lazyLoadSlide(_slide: HTMLElement): void {
|
|
// To be overridden in children.
|
|
}
|
|
|
|
/**
|
|
* Fire a media show event when a slide is selected.
|
|
*/
|
|
protected _selectSlideMediaShowHandler(): void {
|
|
if (!this._carousel) {
|
|
return;
|
|
}
|
|
|
|
this._carousel.slidesInView(true).forEach((slideIndex) => {
|
|
if (slideIndex in this._mediaShowInfo) {
|
|
dispatchExistingMediaShowInfoAsEvent(this, this._mediaShowInfo[slideIndex]);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Handle a media-show 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.
|
|
*/
|
|
protected _mediaShowEventHandler(
|
|
slideIndex: number,
|
|
event: CustomEvent<MediaShowInfo>,
|
|
): 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();
|
|
this._mediaLoadedHandler(slideIndex, event.detail);
|
|
}
|
|
|
|
/**
|
|
* Handle a MediaShowInfo object that is generated on media load, by saving it
|
|
* for future, or immediate use, when the relevant slide is displayed.
|
|
* @param slideIndex The relevant slide index.
|
|
* @param mediaShowInfo The MediaShowInfo object generated by the media.
|
|
*/
|
|
protected _mediaLoadedHandler(
|
|
slideIndex: number,
|
|
mediaShowInfo?: MediaShowInfo | null,
|
|
): void {
|
|
// isValidMediaShowInfo is used to prevent saving media info that will be
|
|
// rejected upstream.
|
|
if (mediaShowInfo && isValidMediaShowInfo(mediaShowInfo)) {
|
|
this._mediaShowInfo[slideIndex] = mediaShowInfo;
|
|
if (this._carousel && this._carousel?.slidesInView(true).includes(slideIndex)) {
|
|
dispatchExistingMediaShowInfoAsEvent(this, mediaShowInfo);
|
|
}
|
|
|
|
// After media has been loaded, the height of the container may need to be
|
|
// re-adjusted.
|
|
this._adaptiveHeightHandler();
|
|
/**
|
|
* Images need a width/height from initial load, and browsers will assume
|
|
* that the aspect ratio of the initial dummy-image load will persist. In
|
|
* lazy-loading, this can cause a 1x1 pixel dummy image to cause the
|
|
* browser to assume all images will be square, so the whole carousel will
|
|
* have the wrong aspect-ratio until every single image has been lazily
|
|
* loaded. Adaptive height helps in that the carousel gets resized on each
|
|
* img display to the correct size, but it still causes a minor noticeable
|
|
* flicker until the height change is complete.
|
|
*
|
|
* To avoid this, we use a 16:9 dummy image at first (most
|
|
* likely?) and once the first piece of real media has been loaded, all
|
|
* dummy images are replaced with dummy images that match the aspect ratio
|
|
* of the real image. It still might be wrong, but it's the best option
|
|
* available.
|
|
*/
|
|
const firstMediaLoad = !Object.keys(this._mediaShowInfo).length;
|
|
if (firstMediaLoad && this._getLazyLoadCount() != null) {
|
|
const replacementImageSrc = getEmptyImageSrc(
|
|
mediaShowInfo.width,
|
|
mediaShowInfo.height,
|
|
);
|
|
|
|
this.renderRoot.querySelectorAll('.embla__container img').forEach((img) => {
|
|
const imageElement = img as HTMLImageElement;
|
|
if (imageElement.src === IMG_EMPTY) {
|
|
imageElement.src = replacementImageSrc;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get element styles.
|
|
*/
|
|
static get styles(): CSSResultGroup {
|
|
return [super.styles, unsafeCSS(mediaCarouselStyle)];
|
|
}
|
|
}
|