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

Support the thumbnail carousel above or below.

Browse Source
This commit is contained in:
Dermot Duffy
2021-11-24 14:42:41 -08:00
parent 193dcf5480
commit bb36004b6d
5 changed files with 98 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/thumbnail-carousel.ts
+14 -5
View File
@@ -2,7 +2,7 @@ import { BrowseMediaUtil } from '../browse-media-util.js';
import { CSSResultGroup, TemplateResult, html, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { BrowseMediaSource } from '../types.js';
import type { BrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import { CarouselTap, FrigateCardCarousel } from './carousel.js';
import { actionHandler } from '../action-handler-directive.js';
import { dispatchFrigateCardEvent } from '../common.js';
@@ -16,6 +16,15 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
protected _tapSelected?;
@property({ attribute: false })
set config(config: ThumbnailsControlConfig) {
this._config = config;
if (config) {
this.style.setProperty('--frigate-card-viewer-thumbnail-size', config.size);
}
}
public _config?: ThumbnailsControlConfig;
constructor() {
super();
this._options = {
@@ -34,12 +43,12 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
}
if (this._tapSelected !== undefined) {
this._carousel.slideNodes()[this._tapSelected].classList.remove("slide-selected");
this._carousel.slideNodes()[this._tapSelected].classList.remove('slide-selected');
}
super.carouselScrollTo(index);
this._carousel.slideNodes()[index].classList.add("slide-selected");
this._carousel.slideNodes()[index].classList.add('slide-selected');
this._tapSelected = index;
}
@@ -84,12 +93,12 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
@action=${() => {
if (this._carousel && this._carousel.clickAllowed()) {
dispatchFrigateCardEvent<CarouselTap>(this, 'carousel:tap', {
index: slideIndex
index: slideIndex,
});
}
}}
>
<img src="${mediaToRender.thumbnail}" title="${mediaToRender.title}">
<img src="${mediaToRender.thumbnail}" title="${mediaToRender.title}" />
</div>`;
}
src/components/viewer.ts
+64 -57
View File
@@ -1,10 +1,4 @@
import {
CSSResultGroup,
LitElement,
TemplateResult,
html,
unsafeCSS,
} from 'lit';
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import { BrowseMediaUtil } from '../browse-media-util.js';
import { EmblaCarouselType } from 'embla-carousel';
import { HomeAssistant } from 'custom-card-helpers';
@@ -181,11 +175,31 @@ export class FrigateCardViewerCore extends LitElement {
}
}
protected render(): TemplateResult | void {
if (!this.view) {
protected _renderThumbnails(): TemplateResult {
if (!this.view || !this.viewerConfig) {
return html``;
}
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<CarouselTap>) => {
this._mediaCarouselRef.value?.carouselScrollTo(ev.detail.index);
}}
@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-media-carousel
${ref(this._mediaCarouselRef)}
.hass=${this.hass}
@@ -196,26 +210,19 @@ export class FrigateCardViewerCore extends LitElement {
@frigate-card:carousel:select=${this._syncThumbnailCarousel.bind(this)}
>
</frigate-card-media-carousel>
<frigate-card-thumbnail-carousel
${ref(this._thumbnailCarouselRef)}
.target=${this.view.target}
@frigate-card:carousel:tap=${(ev: CustomEvent<CarouselTap>) => {
this._mediaCarouselRef.value?.carouselScrollTo(ev.detail.index);
}}
@frigate-card:carousel:init=${this._syncThumbnailCarousel.bind(this)}
>
</frigate-card-thumbnail-carousel>`;
${this.viewerConfig && this.viewerConfig.controls.thumbnails.mode === 'below'
? this._renderThumbnails()
: ''}`;
}
/**
* Get element styles.
*/
static get styles(): CSSResultGroup {
static get styles(): CSSResultGroup {
return unsafeCSS(viewerCoreStyle);
}
}
@customElement('frigate-card-media-carousel')
export class FrigateCardMediaCarousel extends FrigateCardCarousel {
@property({ attribute: false })
@@ -250,7 +257,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
if (this._carousel || !this.viewerConfig) {
return;
}
// Start the carousel on the selected child number.
const startIndex = Number(
Object.keys(this._slideToChild).find(
@@ -261,7 +268,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
this._options = {
startIndex: isNaN(startIndex) ? undefined : startIndex,
draggable: this.viewerConfig.draggable,
}
};
super._loadCarousel();
@@ -533,40 +540,40 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
const neighbors = this._getMediaNeighbors();
return html`<div class="embla">
${neighbors && neighbors.previous
? html`<frigate-card-next-previous-control
.direction=${'previous'}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors.previous.thumbnail}
.title=${neighbors.previous.title}
.actionHandler=${actionHandler({
hasHold: false,
hasDoubleClick: false,
})}
@action=${() => {
this._nextPreviousHandler('previous');
}}
></frigate-card-next-previous-control>`
: ``}
<div class="embla__viewport">
<div class="embla__container">${slides}</div>
</div>
${neighbors && neighbors.next
? html`<frigate-card-next-previous-control
.direction=${'next'}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors.next.thumbnail}
.title=${neighbors.next.title}
.actionHandler=${actionHandler({
hasHold: false,
hasDoubleClick: false,
})}
@action=${() => {
this._nextPreviousHandler('next');
}}
></frigate-card-next-previous-control>`
: ``}
</div>`;
${neighbors && neighbors.previous
? html`<frigate-card-next-previous-control
.direction=${'previous'}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors.previous.thumbnail}
.title=${neighbors.previous.title}
.actionHandler=${actionHandler({
hasHold: false,
hasDoubleClick: false,
})}
@action=${() => {
this._nextPreviousHandler('previous');
}}
></frigate-card-next-previous-control>`
: ``}
<div class="embla__viewport">
<div class="embla__container">${slides}</div>
</div>
${neighbors && neighbors.next
? html`<frigate-card-next-previous-control
.direction=${'next'}
.controlConfig=${this.viewerConfig?.controls.next_previous}
.thumbnail=${neighbors.next.thumbnail}
.title=${neighbors.next.title}
.actionHandler=${actionHandler({
hasHold: false,
hasDoubleClick: false,
})}
@action=${() => {
this._nextPreviousHandler('next');
}}
></frigate-card-next-previous-control>`
: ``}
</div>`;
}
/**
src/scss/thumbnail-carousel.scss
+1 -1
View File
@@ -5,7 +5,7 @@
.embla__slide {
flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
opacity: 0.4;
transition: opacity 1s ease, transform 0.3s ease;
transition: opacity 0.6s ease, transform 0.3s ease;
}
.embla__slide.slide-selected {
opacity: 1.0;
src/types.ts
+15
View File
@@ -454,6 +454,10 @@ const viewerConfigDefault = {
size: '48px',
style: 'thumbnails' as const,
},
thumbnails: {
size: '100px',
mode: 'below' as const,
},
},
};
const nextPreviousControlConfigSchema = z
@@ -466,6 +470,16 @@ const nextPreviousControlConfigSchema = z
.default(viewerConfigDefault.controls.next_previous);
export type NextPreviousControlConfig = z.infer<typeof nextPreviousControlConfigSchema>;
const thumbnailsControlConfigSchema = z
.object({
mode: z
.enum(['none', 'above', 'below'])
.default(viewerConfigDefault.controls.thumbnails.mode),
size: z.string().default(viewerConfigDefault.controls.thumbnails.size),
})
.default(viewerConfigDefault.controls.thumbnails);
export type ThumbnailsControlConfig = z.infer<typeof thumbnailsControlConfigSchema>;
const viewerConfigSchema = z
.object({
autoplay_clip: z.boolean().default(viewerConfigDefault.autoplay_clip),
@@ -474,6 +488,7 @@ const viewerConfigSchema = z
controls: z
.object({
next_previous: nextPreviousControlConfigSchema,
thumbnails: thumbnailsControlConfigSchema,
})
.default(viewerConfigDefault.controls),
})