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

Add thumbnail to live view.

Browse Source
This commit is contained in:
Dermot Duffy
2021-11-25 15:22:41 -08:00
parent cbd2505b98
commit 3c7634d9d5
12 changed files with 273 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/carousel.ts
-3
View File
@@ -10,9 +10,6 @@ import { dispatchFrigateCardEvent } from '../common';
import carouselStyle from '../scss/carousel.scss';
export interface CarouselTap {
index: number;
}
export interface CarouselSelect {
index: number;
}
src/components/live.ts
+68 -26
View File
@@ -1,5 +1,6 @@
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
import type {
BrowseMediaQueryParameters,
ExtendedHomeAssistant,
FrigateCardConfig,
JSMPEGConfig,
@@ -25,6 +26,12 @@ import { renderProgressIndicator } from '../components/message.js';
import JSMpeg from '@cycjimmy/jsmpeg-player';
import liveStyle from '../scss/live.scss';
import liveFrigateStyle from '../scss/live-frigate.scss';
import liveJSMPEGStyle from '../scss/live-jsmpeg.scss';
import liveWebRTCStyle from '../scss/live-webrtc.scss';
import { View } from '../view.js';
import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
// Number of seconds a signed URL is valid for.
const URL_SIGN_EXPIRY_SECONDS = 24 * 60 * 60;
@@ -41,7 +48,7 @@ export class FrigateCardLive extends LitElement {
protected config?: FrigateCardConfig;
@property({ attribute: false })
protected frigateCameraName?: string;
protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
@property({ attribute: false })
set preload(preload: boolean) {
@@ -72,6 +79,33 @@ export class FrigateCardLive extends LitElement {
}
}
/**
* Render thumbnails carousel.
* @returns A rendered template or void.
*/
protected renderThumbnails(): TemplateResult | void {
if (!this.config) {
return;
}
return html` <frigate-card-thumbnail-carousel
.hass=${this.hass}
.browseMediaQueryParameters=${this.browseMediaQueryParameters}
.config=${this.config?.live.controls.thumbnails}
.highlightSelected=${false}
@frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
const mediaType = this.browseMediaQueryParameters?.mediaType;
if (mediaType && ['snapshots', 'clips'].includes(mediaType)) {
new View({
view: mediaType === 'clips' ? 'clip-specific' : 'snapshot-specific',
target: ev.detail.target,
childIndex: ev.detail.childIndex,
}).dispatchChangeEvent(this);
}
}}
>
</frigate-card-thumbnail-carousel>`;
}
/**
* Master render method.
* @returns A rendered template.
@@ -81,28 +115,36 @@ export class FrigateCardLive extends LitElement {
return;
}
return html` ${this.config.live.provider == 'frigate'
? html` <frigate-card-live-frigate
.hass=${this.hass}
.cameraEntity=${this.config.camera_entity}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-frigate>`
: this.config.live.provider == 'webrtc'
? html`<frigate-card-live-webrtc
.hass=${this.hass}
.webRTCConfig=${this.config.live.webrtc || {}}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-webrtc>`
: html` <frigate-card-live-jsmpeg
.hass=${this.hass}
.cameraName=${this.frigateCameraName}
.clientId=${this.config.frigate.client_id}
.jsmpegConfig=${this.config.live.jsmpeg}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-jsmpeg>`}`;
return html`
${this.config.live.controls.thumbnails.mode === 'above'
? this.renderThumbnails()
: ''}
${this.config.live.provider == 'frigate'
? html` <frigate-card-live-frigate
.hass=${this.hass}
.cameraEntity=${this.config.camera_entity}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-frigate>`
: this.config.live.provider == 'webrtc'
? html`<frigate-card-live-webrtc
.hass=${this.hass}
.webRTCConfig=${this.config.live.webrtc || {}}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-webrtc>`
: html` <frigate-card-live-jsmpeg
.hass=${this.hass}
.cameraName=${this.browseMediaQueryParameters?.cameraName}
.clientId=${this.config.frigate.client_id}
.jsmpegConfig=${this.config.live.jsmpeg}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-jsmpeg>`}
${this.config.live.controls.thumbnails.mode === 'below'
? this.renderThumbnails()
: ''}
`;
}
/**
@@ -150,7 +192,7 @@ export class FrigateCardLiveFrigate extends LitElement {
* Get styles.
*/
static get styles(): CSSResultGroup {
return unsafeCSS(liveStyle);
return unsafeCSS(liveFrigateStyle);
}
}
@@ -237,7 +279,7 @@ export class FrigateCardLiveWebRTC extends LitElement {
* Get styles.
*/
static get styles(): CSSResultGroup {
return unsafeCSS(liveStyle);
return unsafeCSS(liveWebRTCStyle);
}
}
@@ -415,6 +457,6 @@ export class FrigateCardLiveJSMPEG extends LitElement {
* Get styles.
*/
static get styles(): CSSResultGroup {
return unsafeCSS(liveStyle);
return unsafeCSS(liveJSMPEGStyle);
}
}
src/components/thumbnail-carousel.ts
+95 -12
View File
@@ -1,30 +1,102 @@
import { BrowseMediaUtil } from '../browse-media-util.js';
import { CSSResultGroup, TemplateResult, html, unsafeCSS } from 'lit';
import { CSSResultGroup, TemplateResult, html, unsafeCSS, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { until } from 'lit/directives/until';
import type { BrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import { CarouselTap, FrigateCardCarousel } from './carousel.js';
import type { BrowseMediaQueryParameters, BrowseMediaSource, ExtendedHomeAssistant, ThumbnailsControlConfig } from '../types.js';
import { FrigateCardCarousel } from './carousel.js';
import { HomeAssistant } from 'custom-card-helpers';
import { actionHandler } from '../action-handler-directive.js';
import { dispatchFrigateCardEvent } from '../common.js';
import { dispatchErrorMessageEvent, dispatchFrigateCardEvent } from '../common.js';
import { renderProgressIndicator } from './message.js';
import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
export interface ThumbnailCarouselTap {
slideIndex: number;
target: BrowseMediaSource;
childIndex: number;
}
@customElement('frigate-card-thumbnail-carousel')
export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
export class FrigateCardThumbnailCarousel extends LitElement {
@property({ attribute: false })
protected hass?: HomeAssistant & ExtendedHomeAssistant;
@property({ attribute: false })
protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
@property({ attribute: false })
protected config?: ThumbnailsControlConfig;
@property({ attribute: false })
protected highlightSelected = true;
/**
* Master render method.
* @returns A rendered template.
*/
protected render(): TemplateResult | void {
return html`${until(this._render(), renderProgressIndicator())}`;
}
/**
* Asyncronously render the element.
* @returns A rendered template.
*/
protected async _render(): Promise<TemplateResult | void> {
if (!this.hass || !this.browseMediaQueryParameters) {
return html``;
}
let parent: BrowseMediaSource | null = null;
try {
parent = await BrowseMediaUtil.browseMediaQuery(
this.hass,
this.browseMediaQueryParameters,
);
} catch (e) {
return dispatchErrorMessageEvent(this, (e as Error).message);
}
return html` <frigate-card-thumbnail-carousel-core
.target=${parent}
.config=${this.config}
.highlightSelected=${this.highlightSelected}
>
</frigate-card-thumbnail-carousel-core>`;
}
/**
* Get element styles.
*/
// static get styles(): CSSResultGroup {
// return unsafeCSS(viewerStyle);
// }
}
@customElement('frigate-card-thumbnail-carousel-core')
export class FrigateCardThumbnailCarouselCore extends FrigateCardCarousel {
@property({ attribute: false })
protected target?: BrowseMediaSource;
protected _tapSelected?;
@property({ attribute: false })
set config(config: ThumbnailsControlConfig) {
this._config = config;
set config(config: ThumbnailsControlConfig | undefined) {
if (config) {
this.style.setProperty('--frigate-card-viewer-thumbnail-size', config.size);
if (config && (config.size !== undefined && config.size != null)) {
this.style.setProperty('--frigate-card-carousel-thumbnail-size', config.size);
}
this._config = config;
}
}
protected _config?: ThumbnailsControlConfig;
@property({ attribute: false })
set highlightSelected(value: boolean) {
this.style.setProperty('--frigate-card-carousel-thumbnail-opacity', value ? '0.6' : '1.0');
}
constructor() {
super();
this._options = {
@@ -63,7 +135,10 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
const slides: TemplateResult[] = [];
for (let i = 0; i < this.target.children.length; ++i) {
const thumbnail = this._renderThumbnail(this.target.children[i], slides.length);
const thumbnail = this._renderThumbnail(
this.target,
i,
slides.length);
if (thumbnail) {
slides.push(thumbnail);
}
@@ -77,9 +152,15 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
* @returns A template or void if the item could not be rendered.
*/
protected _renderThumbnail(
mediaToRender: BrowseMediaSource,
parent: BrowseMediaSource,
childIndex: number,
slideIndex: number,
): TemplateResult | void {
if (!parent.children || !parent.children.length) {
return;
}
const mediaToRender = parent.children[childIndex];
if (!BrowseMediaUtil.isTrueMedia(mediaToRender) || !mediaToRender.thumbnail) {
return;
}
@@ -92,8 +173,10 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
})}
@action=${() => {
if (this._carousel && this._carousel.clickAllowed()) {
dispatchFrigateCardEvent<CarouselTap>(this, 'carousel:tap', {
index: slideIndex,
dispatchFrigateCardEvent<ThumbnailCarouselTap>(this, 'carousel:tap', {
slideIndex: slideIndex,
target: parent,
childIndex: childIndex,
});
}
}}
src/components/viewer.ts
+7 -8
View File
@@ -15,8 +15,8 @@ import type {
MediaShowInfo,
ViewerConfig,
} from '../types.js';
import { CarouselTap, FrigateCardCarousel } from './carousel.js';
import { FrigateCardThumbnailCarousel } from './thumbnail-carousel.js';
import { FrigateCardCarousel } from './carousel.js';
import { FrigateCardThumbnailCarouselCore, ThumbnailCarouselTap } from './thumbnail-carousel.js';
import { ResolvedMediaCache, ResolvedMediaUtil } from '../resolved-media.js';
import { View } from '../view.js';
import { actionHandler } from '../action-handler-directive.js';
@@ -33,7 +33,6 @@ import { localize } from '../localize/localize.js';
import { renderProgressIndicator } from '../components/message.js';
import './next-prev-control.js';
import './thumbnail-carousel.js';
import viewerStyle from '../scss/viewer.scss';
import viewerCoreStyle from '../scss/viewer-core.scss';
@@ -166,7 +165,7 @@ export class FrigateCardViewerCore extends LitElement {
protected resolvedMediaCache?: ResolvedMediaCache;
protected _mediaCarouselRef: Ref<FrigateCardMediaCarousel> = createRef();
protected _thumbnailCarouselRef: Ref<FrigateCardThumbnailCarousel> = createRef();
protected _thumbnailCarouselRef: Ref<FrigateCardThumbnailCarouselCore> = createRef();
protected _syncThumbnailCarousel(): void {
const mediaSelected = this._mediaCarouselRef.value?.carouselSelected();
@@ -180,16 +179,16 @@ export class FrigateCardViewerCore extends LitElement {
return html``;
}
return html` <frigate-card-thumbnail-carousel
return html` <frigate-card-thumbnail-carousel-core
${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:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
this._mediaCarouselRef.value?.carouselScrollTo(ev.detail.slideIndex);
}}
@frigate-card:carousel:init=${this._syncThumbnailCarousel.bind(this)}
>
</frigate-card-thumbnail-carousel>`;
</frigate-card-thumbnail-carousel-core>`;
}
protected render(): TemplateResult | void {