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/card.ts
+18 -12
View File
@@ -41,10 +41,7 @@ import type {
import { CARD_VERSION, REPO_URL } from './const.js';
import { FrigateCardElements } from './components/elements.js';
import {
FRIGATE_BUTTON_MENU_ICON,
FrigateCardMenu,
} from './components/menu.js';
import { FRIGATE_BUTTON_MENU_ICON, FrigateCardMenu } from './components/menu.js';
import { View } from './view.js';
import {
convertActionToFrigateCardCustomAction,
@@ -66,6 +63,7 @@ import './components/live.js';
import './components/menu.js';
import './components/message.js';
import './components/viewer.js';
import './components/thumbnail-carousel.js';
import './patches/ha-camera-stream.js';
import './patches/ha-hls-player.js';
@@ -736,15 +734,21 @@ export class FrigateCard extends LitElement {
* Get the parameters to search for media related to the current view.
* @returns A BrowseMediaQueryParameters object.
*/
protected _getBrowseMediaQueryParameters(): BrowseMediaQueryParameters | undefined {
protected _getBrowseMediaQueryParameters(
mediaType?: 'clips' | 'snapshots',
): BrowseMediaQueryParameters | undefined {
if (
!this._frigateCameraName ||
!(this._view.isClipRelatedView() || this._view.isSnapshotRelatedView())
!(
this._view.isClipRelatedView() ||
this._view.isSnapshotRelatedView() ||
mediaType
)
) {
return undefined;
}
return {
mediaType: this._view.isClipRelatedView() ? 'clips' : 'snapshots',
mediaType: mediaType || (this._view.isClipRelatedView() ? 'clips' : 'snapshots'),
clientId: this.config.frigate.client_id,
cameraName: this._frigateCameraName,
label: this.config.frigate.label,
@@ -968,7 +972,6 @@ export class FrigateCard extends LitElement {
true,
);
}
const mediaQueryParameters = this._getBrowseMediaQueryParameters();
const pictureElementsClasses = {
'picture-elements': true,
@@ -1003,7 +1006,7 @@ export class FrigateCard extends LitElement {
? html` <frigate-card-gallery
.hass=${this._hass}
.view=${this._view}
.browseMediaQueryParameters=${mediaQueryParameters}
.browseMediaQueryParameters=${this._getBrowseMediaQueryParameters()}
class="${classMap(galleryClasses)}"
@frigate-card:change-view=${this._changeViewHandler}
@frigate-card:message=${this._messageHandler}
@@ -1014,7 +1017,7 @@ export class FrigateCard extends LitElement {
? html` <frigate-card-viewer
.hass=${this._hass}
.view=${this._view}
.browseMediaQueryParameters=${mediaQueryParameters}
.browseMediaQueryParameters=${this._getBrowseMediaQueryParameters()}
.viewerConfig=${this.config.event_viewer}
.resolvedMediaCache=${this._resolvedMediaCache}
class="${classMap(viewerClasses)}"
@@ -1033,10 +1036,13 @@ export class FrigateCard extends LitElement {
? html`
<frigate-card-live
.hass=${this._hass}
.browseMediaQueryParameters=${this._getBrowseMediaQueryParameters(
this.config.live.controls.thumbnails.media,
)}
.config=${this.config}
.frigateCameraName=${this._frigateCameraName}
.preload=${this.config.live.preload && !this._view.is('live')}
class="${classMap(liveClasses)}"
@frigate-card:change-view=${this._changeViewHandler}
@frigate-card:media-show=${this._mediaShowHandler}
@frigate-card:pause=${this._pauseHandler}
@frigate-card:play=${this._playHandler}
@@ -1060,7 +1066,7 @@ export class FrigateCard extends LitElement {
this._removeDynamicMenuButton(e.detail);
}}
@frigate-card:condition-state-request=${(ev) => {
conditionStateRequestHandler(ev, this._conditionState)
conditionStateRequestHandler(ev, this._conditionState);
}}
>
</frigate-card-elements>
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 {
src/scss/live-frigate.scss
+7
View File
@@ -0,0 +1,7 @@
:host {
width: 100%;
height: 100%;
display: block;
--video-max-height: none;
}
src/scss/live-jsmpeg.scss
+12
View File
@@ -0,0 +1,12 @@
:host {
width: 100%;
height: 100%;
display: block;
}
canvas {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
src/scss/live-webrtc.scss
+12
View File
@@ -0,0 +1,12 @@
:host {
width: 100%;
height: 100%;
display: block;
}
/* Don't drop shadow or have radius for nested webrtc card */
webrtc-camera ha-card {
box-shadow: none;
border-radius: 0px;
background-color: var(--secondary-background-color, black);
}
src/scss/live.scss
+8 -13
View File
@@ -1,21 +1,16 @@
:host {
width: 100%;
height: 100%;
display: block;
--video-max-height: none;
display: flex;
flex-direction: column;
gap: 5px;
}
canvas {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
frigate-card-live {
flex: 1;
min-height: 0;
}
/* Don't drop shadow or have radius for nested webrtc card */
webrtc-camera ha-card {
box-shadow: none;
border-radius: 0px;
background-color: var(--secondary-background-color, black);
frigate-card-thumbnail-carousel {
flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
}
src/scss/thumbnail-carousel.scss
+9 -3
View File
@@ -1,10 +1,11 @@
:host {
--frigate-card-viewer-thumbnail-size: 100px;
--frigate-card-carousel-thumbnail-size: 100px;
--frigate-card-carousel-thumbnail-opacity: 0.6;
}
.embla__slide {
flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
opacity: 0.4;
flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
opacity: var(--frigate-card-carousel-thumbnail-opacity);
transition: opacity 0.6s ease, transform 0.3s ease;
}
.embla__slide.slide-selected {
@@ -15,4 +16,9 @@
}
.embla__slide img {
border-radius: 5px;
// Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
// should be clipped to fill the thumbnail div whilst maintaining
// aspect-ratio.
object-fit: cover;
}
src/scss/viewer-core.scss
+3 -3
View File
@@ -1,6 +1,7 @@
:host {
display: flex;
flex-direction: column;
gap: 5px;
height: 100%;
width: 100%;
@@ -11,7 +12,6 @@ frigate-card-media-carousel {
min-height: 0;
}
frigate-card-thumbnail-carousel {
flex: 0 0 var(--frigate-card-viewer-thumbnail-size);
margin-top: 5px;
frigate-card-thumbnail-carousel-core {
flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
}
src/types.ts
+34 -12
View File
@@ -355,12 +355,29 @@ const imageConfigSchema = z
.optional();
export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
/**
* Thumbnail controls configuration section.
*/
// This type is not inferred from a schema since different (compatible) schemas
// have different defaults.
export type ThumbnailsControlConfig = {
mode: 'above' | 'below' | 'none';
size?: string;
}
/**
* Live view configuration section.
*/
const liveConfigDefault = {
provider: 'frigate' as const,
preload: false,
controls: {
thumbnails: {
mode: 'none' as const,
media: 'clips' as const,
},
},
};
const webrtcConfigSchema = z
.object({
@@ -400,6 +417,19 @@ const liveConfigSchema = z
preload: z.boolean().default(liveConfigDefault.preload),
webrtc: webrtcConfigSchema,
jsmpeg: jsmpegConfigSchema,
controls: z
.object({
thumbnails: z
.object({
media: z
.enum(['clips', 'snapshots'])
.default(liveConfigDefault.controls.thumbnails.media),
mode: z.enum(['none', 'above', 'below']).default(liveConfigDefault.controls.thumbnails.mode),
size: z.string().optional(),
})
.default(liveConfigDefault.controls.thumbnails),
})
.default(liveConfigDefault.controls),
})
.merge(actionsSchema)
.default(liveConfigDefault);
@@ -455,7 +485,6 @@ const viewerConfigDefault = {
style: 'thumbnails' as const,
},
thumbnails: {
size: '100px',
mode: 'below' as const,
},
},
@@ -470,16 +499,6 @@ 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),
@@ -488,7 +507,10 @@ const viewerConfigSchema = z
controls: z
.object({
next_previous: nextPreviousControlConfigSchema,
thumbnails: thumbnailsControlConfigSchema,
thumbnails: z.object({
mode: z.enum(['none', 'above', 'below']).default(viewerConfigDefault.controls.thumbnails.mode),
size: z.string().optional(),
}).default(viewerConfigDefault.controls.thumbnails),
})
.default(viewerConfigDefault.controls),
})