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
README.md
+4 -2
View File
@@ -100,7 +100,7 @@ All variables listed are under a `menu:` section.
| Option | Default | Description |
| - | - | - |
| `mode` | `hidden-top` | The menu mode to show by default. See [menu modes](#menu-modes) below.|
| `button_size` | `40px` | The size of the menu buttons (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].|
| `button_size` | `40px` | The size of the menu buttons [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).|
| `buttons.{frigate, live, clips, snapshots, image, download, frigate_ui, fullscreen}` | `true`, except for `image` | Whether or not to show these builtin actions in the card menu. |
| `conditions` | | Condition(s) that must be met in order for the menu to be displayed. These conditions use the same format as the `custom:frigate-card-conditional` card (see [Possible conditions](#frigate-card-conditions) below). If conditions are specified but not met, then the menu is not rendered.|
@@ -136,7 +136,9 @@ The `event_viewer` is used for viewing all `clip` and `snapshot` media, in a med
| `lazy_load` | `true` | Whether or not to lazily load media in the event viewer carousel. Setting this will false will fetch all media immediately which may make the carousel experience smoother at a cost of (potentially) a substantial number of simultaneous media fetches on load. |
| `draggable` | `true` | Whether or not the event viewer carousel can be dragged left or right, via touch/swipe and mouse dragging. |
| `controls.next_previous.style` | `thumbnails` | When viewing media, what kind of controls to show to move to the previous/next media item. Acceptable values: `thumbnails`, `chevrons`, `none` . |
| `controls.next_previous.size` | `48px` | The size of the next/previous controls (in CSS Units)[https://www.w3schools.com/cssref/css_units.asp].|
| `controls.next_previous.size` | `48px` | The size of the next/previous controls [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).|
| `controls.thumbnails.mode` | `below` | Whether to show the thumbnail carousel `below` the media, `above` the media or to hide it entirely (`none`).|
| `controls.thumbnails.size` | `100px` | The size of the thumbnails in the thumbnail carousel [in CSS Units](https://www.w3schools.com/cssref/css_units.asp).|
| `actions` | | Actions to use for all views that use the `event_viewer` (e.g. `clip`, `snapshot`). See [actions](#actions) below.|
### Event Gallery options
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
+63 -56
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 })
@@ -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),
})