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

Initial skeleton of multiple camera support.

Browse Source
This commit is contained in:
Dermot Duffy
2022-01-14 21:31:16 -08:00
parent 3b31699265
commit ca581c5078
15 changed files with 366 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/gallery.ts
+2
View File
@@ -189,6 +189,7 @@ export class FrigateCardGalleryCore extends LitElement {
if (this.view) {
new View({
view: this.view.view,
camera: this.view.camera,
target: child,
previous: this.view ?? undefined,
}).dispatchChangeEvent(this);
@@ -215,6 +216,7 @@ export class FrigateCardGalleryCore extends LitElement {
view: this.view.is('clips')
? 'clip-specific'
: 'snapshot-specific',
camera: this.view.camera,
target: this.view.target ?? undefined,
childIndex: index,
previous: this.view ?? undefined,
src/components/live.ts
+40 -37
View File
@@ -3,8 +3,9 @@ import type {
BrowseMediaQueryParameters,
BrowseMediaSource,
ExtendedHomeAssistant,
FrigateCardConfig,
CameraConfig,
JSMPEGConfig,
LiveConfig,
MediaShowInfo,
WebRTCConfig,
} from '../types.js';
@@ -46,7 +47,13 @@ export class FrigateCardLive extends LitElement {
protected hass?: HomeAssistant & ExtendedHomeAssistant;
@property({ attribute: false })
protected config?: FrigateCardConfig;
protected view?: View;
@property({ attribute: false })
protected cameraConfig?: CameraConfig;
@property({ attribute: false })
protected liveConfig?: LiveConfig;
@property({ attribute: false })
protected browseMediaQueryParameters?: BrowseMediaQueryParameters;
@@ -85,7 +92,7 @@ export class FrigateCardLive extends LitElement {
* @returns A rendered template or void.
*/
protected renderThumbnails(): TemplateResult | void {
if (!this.config) {
if (!this.liveConfig || !this.view) {
return;
}
@@ -106,13 +113,14 @@ export class FrigateCardLive extends LitElement {
if (BrowseMediaUtil.getFirstTrueMediaChildIndex(parent) != null) {
return html` <frigate-card-thumbnail-carousel
.target=${parent}
.config=${this.config?.live.controls.thumbnails}
.config=${this.liveConfig?.controls.thumbnails}
.highlightSelected=${false}
@frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
const mediaType = this.browseMediaQueryParameters?.mediaType;
if (mediaType && ['snapshots', 'clips'].includes(mediaType)) {
if (mediaType && this.view && ['snapshots', 'clips'].includes(mediaType)) {
new View({
view: mediaType === 'clips' ? 'clip-specific' : 'snapshot-specific',
camera: this.view.camera,
target: ev.detail.target,
childIndex: ev.detail.childIndex,
}).dispatchChangeEvent(this);
@@ -131,37 +139,37 @@ export class FrigateCardLive extends LitElement {
* @returns A rendered template.
*/
protected render(): TemplateResult | void {
if (!this.hass || !this.config) {
if (!this.hass || !this.liveConfig || !this.cameraConfig) {
return;
}
return html`
${this.config.live.controls.thumbnails.mode === 'above'
${this.liveConfig.controls.thumbnails.mode === 'above'
? this.renderThumbnails()
: ''}
${this.config.live.provider == 'frigate'
${this.liveConfig.provider == 'frigate'
? html` <frigate-card-live-frigate
.hass=${this.hass}
.cameraEntity=${this.config.camera_entity}
.cameraEntity=${this.cameraConfig.camera_entity}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-frigate>`
: this.config.live.provider == 'webrtc'
: this.liveConfig.provider == 'webrtc'
? html`<frigate-card-live-webrtc
.hass=${this.hass}
.webRTCConfig=${this.config.live.webrtc || {}}
.webRTCConfig=${this.liveConfig.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}
.cameraName=${this.cameraConfig.camera_name}
.clientId=${this.cameraConfig.client_id}
.jsmpegConfig=${this.liveConfig.jsmpeg}
@frigate-card:media-show=${this._mediaShowHandler}
>
</frigate-card-live-jsmpeg>`}
${this.config.live.controls.thumbnails.mode === 'below'
${this.liveConfig.controls.thumbnails.mode === 'below'
? this.renderThumbnails()
: ''}
`;
@@ -320,10 +328,10 @@ export class FrigateCardLiveJSMPEG extends LitElement {
@property({ attribute: false })
protected jsmpegConfig?: JSMPEGConfig;
@property({ attribute: false })
protected hass?: HomeAssistant & ExtendedHomeAssistant;
protected _jsmpegCanvasElement?: HTMLCanvasElement;
protected _jsmpegVideoPlayer?: JSMpeg.VideoElement;
protected _jsmpegURL?: string | null;
protected _refreshPlayerTimerID?: number;
/**
@@ -356,7 +364,7 @@ export class FrigateCardLiveJSMPEG extends LitElement {
* Create a JSMPEG player.
* @returns A JSMPEG player.
*/
protected _createJSMPEGPlayer(): JSMpeg.VideoElement {
protected _createJSMPEGPlayer(url: string): JSMpeg.VideoElement {
let videoDecoded = false;
const jsmpegOptions = {
@@ -380,7 +388,7 @@ export class FrigateCardLiveJSMPEG extends LitElement {
return new JSMpeg.VideoElement(
this,
this._jsmpegURL,
url,
{
canvas: this._jsmpegCanvasElement,
hooks: {
@@ -416,7 +424,6 @@ export class FrigateCardLiveJSMPEG extends LitElement {
this._jsmpegCanvasElement.remove();
this._jsmpegCanvasElement = undefined;
}
this._jsmpegURL = undefined;
}
/**
@@ -448,35 +455,31 @@ export class FrigateCardLiveJSMPEG extends LitElement {
this._jsmpegCanvasElement = document.createElement('canvas');
this._jsmpegCanvasElement.className = 'media';
this._jsmpegURL = await this._getURL();
if (this._jsmpegURL) {
this._jsmpegVideoPlayer = this._createJSMPEGPlayer();
const url = await this._getURL();
if (url) {
this._jsmpegVideoPlayer = this._createJSMPEGPlayer(url);
this._refreshPlayerTimerID = window.setTimeout(() => {
this._refreshPlayer();
this.requestUpdate();
}, (URL_SIGN_EXPIRY_SECONDS - URL_SIGN_REFRESH_THRESHOLD_SECONDS) * 1000);
} else {
dispatchErrorMessageEvent(this, localize('error.jsmpeg_no_sign'));
}
this.requestUpdate();
}
/**
* Master render method.
*/
protected render(): TemplateResult | void {
if (
this._jsmpegURL === undefined ||
!this._jsmpegVideoPlayer ||
!this._jsmpegCanvasElement
) {
return html`${until(this._refreshPlayer(), renderProgressIndicator())}`;
const _render = async (): Promise<TemplateResult | void> => {
await this._refreshPlayer();
if (!this._jsmpegVideoPlayer || !this._jsmpegCanvasElement) {
return dispatchErrorMessageEvent(this, localize('error.jsmpeg_no_player'));
}
return html`${this._jsmpegCanvasElement}`;
}
if (!this._jsmpegURL) {
return dispatchErrorMessageEvent(this, localize('error.jsmpeg_no_sign'));
}
if (!this._jsmpegVideoPlayer || !this._jsmpegCanvasElement) {
return dispatchErrorMessageEvent(this, localize('error.jsmpeg_no_player'));
}
return html`${this._jsmpegCanvasElement}`;
return html`${until(_render(), renderProgressIndicator())}`;
}
/**
src/components/menu.ts
+9
View File
@@ -29,6 +29,7 @@ import {
import menuStyle from '../scss/menu.scss';
import { ConditionState, evaluateCondition } from '../card-condition.js';
import { Corner } from '@material/mwc-menu';
export const FRIGATE_BUTTON_MENU_ICON = 'frigate';
@@ -115,7 +116,15 @@ export class FrigateCardMenu extends LitElement {
*/
protected _renderButton(button: MenuButton): TemplateResult | void {
if (button.type == 'custom:frigate-card-menu-submenu') {
let corner: Corner | undefined;
if (this._menuConfig?.mode.endsWith("-left")) {
// Minor nicety: Start the menu to the right of the menu itself is on
// the left, otherwise use the default.
corner = "BOTTOM_RIGHT";
}
return html` <frigate-card-submenu
.corner=${corner}
.hass=${this.hass}
.submenu=${button}
@action=${this._actionHandler.bind(this)}
src/components/submenu.ts
+7 -1
View File
@@ -8,6 +8,7 @@ import { actionHandler } from '../action-handler-directive.js';
import { refreshDynamicStateParameters } from '../common.js';
import submenuStyle from '../scss/submenu.scss';
import type { Corner } from "@material/mwc-menu";
@customElement('frigate-card-submenu')
export class FrigateCardSubmenu extends LitElement {
@@ -17,6 +18,9 @@ export class FrigateCardSubmenu extends LitElement {
@property({ attribute: false })
public submenu?: MenuSubmenu;
@property({ attribute: false })
public corner?: Corner;
protected _renderItem(item: MenuSubmenuItem): TemplateResult | void {
if (!this.hass) {
return;
@@ -56,7 +60,9 @@ export class FrigateCardSubmenu extends LitElement {
}
return html`
<ha-button-menu corner="BOTTOM_LEFT">
<ha-button-menu
corner=${this.corner || "BOTTOM_LEFT"}
>
<ha-icon-button
style="${styleMap(this.submenu.style || {})}"
class="button"
src/components/viewer.ts
+1
View File
@@ -411,6 +411,7 @@ export class FrigateCardMediaCarousel extends FrigateCardCarousel {
if (clipStartTime && clipStartTime === snapshotStartTime) {
return new View({
view: 'clip-specific',
camera: this.view.camera,
target: clips,
childIndex: i,
previous: this.view,