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

Initial skeleton timeline.

Browse Source
This commit is contained in:
Dermot Duffy
2022-03-19 09:00:21 -07:00
parent 95cfd5ab5b
commit 983aff4dd8
12 changed files with 256 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+11
View File
@@ -16,18 +16,29 @@
"license": "MIT",
"dependencies": {
"@cycjimmy/jsmpeg-player": "^5.1.1",
"@egjs/hammerjs": "^2.0.17",
"@lit-labs/task": "^1.0.0",
"@material/image-list": "^13.0.0",
"@material/mwc-menu": "^0.25.3",
"@material/rtl": "^13.0.0",
"component-emitter": "^1.3.0",
"crypto": "^1.0.1",
"custom-card-helpers": "^1.8.0",
"dayjs": "^1.11.0",
"embla-carousel": "^6.1.1",
"home-assistant-js-websocket": "^6.1.1",
"lit": "^2.2.1",
"keycharm": "^0.4.0",
"lodash-es": "^4.17.21",
"quick-lru": "^6.1.0",
"moment": "^2.29.1",
"propagating-hammerjs": "^2.0.1",
"screenfull": "^6.0.1",
"uuid": "^8.3.2",
"vis-data": "^7.1.3",
"vis-timeline": "^7.5.1",
"vis-util": "^5.0.2",
"xss": "^1.0.10",
"zod": "^3.13.4"
},
"devDependencies": {
rollup.config.js
+4 -2
View File
@@ -30,9 +30,11 @@ const plugins = [
},
}),
image(),
nodeResolve({}),
nodeResolve({
browser: true,
}),
commonjs({
include: 'node_modules/**'
include: 'node_modules/**',
}),
typescript(),
json(),
src/browse-media-util.ts
+25 -23
View File
@@ -4,12 +4,12 @@ import dayjs_custom_parse_format from 'dayjs/plugin/customParseFormat.js';
import type {
BrowseMediaQueryParameters,
BrowseMediaSource,
FrigateBrowseMediaSource,
CameraConfig,
ExtendedHomeAssistant,
} from './types.js';
import { View } from './view.js';
import { browseMediaSourceSchema } from './types.js';
import { frigateBrowseMediaSourceSchema } from './types.js';
import {
dispatchErrorMessageEvent,
dispatchMessageEvent,
@@ -21,11 +21,11 @@ dayjs.extend(dayjs_custom_parse_format);
export class BrowseMediaUtil {
/**
* Return the Frigate event_id given a BrowseMediaSource object.
* Return the Frigate event_id given a FrigateBrowseMediaSource object.
* @param media The event to extract the id from.
* @returns The `event_id` or `null` if not successfully parsed.
*/
static extractEventID(media: BrowseMediaSource): string | null {
static extractEventID(media: FrigateBrowseMediaSource): string | null {
const result = media.media_content_id.match(
/^media-source:\/\/frigate\/.*\/(?<id>[.0-9]+-[a-zA-Z0-9]+)$/,
);
@@ -33,11 +33,11 @@ export class BrowseMediaUtil {
}
/**
* Return the event start time given a BrowseMediaSource object.
* Return the event start time given a FrigateBrowseMediaSource object.
* @param browseMedia The media object to extract the start time from.
* @returns The start time in unix/epoch time, or null if it cannot be determined.
*/
static extractEventStartTime(browseMedia: BrowseMediaSource): number | null {
static extractEventStartTime(browseMedia: FrigateBrowseMediaSource): number | null {
// Example: 2021-08-27 20:57:22 [10s, Person 76%]
const result = browseMedia.title.match(/^(?<iso_datetime>.+) \[/);
if (result && result.groups) {
@@ -53,21 +53,23 @@ export class BrowseMediaUtil {
}
/**
* Determine if a BrowseMediaSource object is truly a media item (vs a folder).
* Determine if a FrigateBrowseMediaSource object is truly a media item (vs a folder).
* @param media The media object.
* @returns `true` if it's truly a media item, `false` otherwise.
*/
static isTrueMedia(media: BrowseMediaSource): boolean {
static isTrueMedia(media: FrigateBrowseMediaSource): boolean {
return !media.can_expand;
}
/**
* From a BrowseMediaSource item extract the first true media item from the
* From a FrigateBrowseMediaSource item extract the first true media item from the
* children (i.e. a clip/snapshot, not a folder).
* @param media The media object with children.
* @returns The first true media item found.
*/
static getFirstTrueMediaChildIndex(media: BrowseMediaSource | null): number | null {
static getFirstTrueMediaChildIndex(
media: FrigateBrowseMediaSource | null,
): number | null {
if (!media || !media.children) {
return null;
}
@@ -79,17 +81,17 @@ export class BrowseMediaUtil {
* Browse Frigate media with a media content id. May throw.
* @param hass The HomeAssistant object.
* @param media_content_id The media content id to browse.
* @returns A BrowseMediaSource object or null on malformed.
* @returns A FrigateBrowseMediaSource object or null on malformed.
*/
static async browseMedia(
hass: HomeAssistant & ExtendedHomeAssistant,
media_content_id: string,
): Promise<BrowseMediaSource> {
): Promise<FrigateBrowseMediaSource> {
const request = {
type: 'media_source/browse_media',
media_content_id: media_content_id,
};
return homeAssistantWSRequest(hass, browseMediaSourceSchema, request);
return homeAssistantWSRequest(hass, frigateBrowseMediaSourceSchema, request);
}
// Browse Frigate media with query parameters.
@@ -98,12 +100,12 @@ export class BrowseMediaUtil {
* Browse Frigate media with a media query. May throw.
* @param hass The HomeAssistant object.
* @param params The search parameters to use to search for media.
* @returns A BrowseMediaSource object or null on malformed.
* @returns A FrigateBrowseMediaSource object or null on malformed.
*/
static async browseMediaQuery(
hass: HomeAssistant & ExtendedHomeAssistant,
params: BrowseMediaQueryParameters,
): Promise<BrowseMediaSource> {
): Promise<FrigateBrowseMediaSource> {
return this.browseMedia(
hass,
// Defined in:
@@ -180,7 +182,7 @@ export class BrowseMediaUtil {
* @param hass The Home Assistant object.
* @param view The current view to evolve.
* @param browseMediaQueryParameters The media parameters to query with.
* @returns
* @returns
*/
static async fetchLatestMediaAndDispatchViewChange(
node: HTMLElement,
@@ -188,7 +190,7 @@ export class BrowseMediaUtil {
view: Readonly<View>,
browseMediaQueryParameters: BrowseMediaQueryParameters,
): Promise<void> {
let parent: BrowseMediaSource | null;
let parent: FrigateBrowseMediaSource | null;
try {
parent = await BrowseMediaUtil.browseMediaQuery(hass, browseMediaQueryParameters);
} catch (e) {
@@ -216,21 +218,21 @@ export class BrowseMediaUtil {
}
/**
* Fetch the media of a child BrowseMediaSource object and dispatch a change
* view event to reflect the results.
* Fetch the media of a child FrigateBrowseMediaSource object and dispatch a change
* view event to reflect the results.
* @param node The HTMLElement to dispatch events from.
* @param hass The Home Assistant object.
* @param view The current view to evolve.
* @param child The BrowseMediaSource child to query for.
* @returns
* @param child The FrigateBrowseMediaSource child to query for.
* @returns
*/
static async fetchChildMediaAndDispatchViewChange(
node: HTMLElement,
hass: HomeAssistant & ExtendedHomeAssistant,
view: Readonly<View>,
child: Readonly<BrowseMediaSource>,
child: Readonly<FrigateBrowseMediaSource>,
): Promise<void> {
let parent: BrowseMediaSource;
let parent: FrigateBrowseMediaSource;
try {
parent = await BrowseMediaUtil.browseMedia(hass, child.media_content_id);
} catch (e) {
src/card.ts
+9
View File
@@ -64,6 +64,7 @@ import './components/menu.js';
import './components/message.js';
import './components/viewer.js';
import './components/thumbnail-carousel.js';
import './components/timeline.js';
import './patches/ha-camera-stream.js';
import './patches/ha-hls-player.js';
import './patches/ha-web-rtc-player.ts';
@@ -1260,6 +1261,14 @@ export class FrigateCard extends LitElement {
>
</frigate-card-viewer>`
: ``}
${!this._message && this._view.is('timeline')
? html` <frigate-card-timeline
.hass=${this._hass}
.view=${this._view}
.cameraConfig=${cameraConfig}
>
</frigate-card-timeline>`
: ``}
${
// Note: Subtle difference in condition below vs the other views in order
// to always render the live view for live.preload mode.
src/components/live.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import {
PropertyValues,
} from 'lit';
import {
BrowseMediaSource,
FrigateBrowseMediaSource,
ExtendedHomeAssistant,
CameraConfig,
JSMPEGConfig,
@@ -140,7 +140,7 @@ export class FrigateCardLive extends LitElement {
if (!browseMediaParams) {
return;
}
let parent: BrowseMediaSource | null;
let parent: FrigateBrowseMediaSource | null;
try {
parent = await BrowseMediaUtil.browseMediaQuery(this.hass, browseMediaParams);
} catch (e) {
src/components/thumbnail-carousel.ts
+4 -4
View File
@@ -3,7 +3,7 @@ import { CSSResultGroup, TemplateResult, html, unsafeCSS } from 'lit';
import { EmblaOptionsType } from 'embla-carousel';
import { customElement, property } from 'lit/decorators.js';
import type { BrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import { FrigateCardCarousel } from './carousel.js';
import { dispatchFrigateCardEvent, stopEventFromActivatingCardWideActions } from '../common.js';
@@ -11,14 +11,14 @@ import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
export interface ThumbnailCarouselTap {
slideIndex: number;
target: BrowseMediaSource;
target: FrigateBrowseMediaSource;
childIndex: number;
}
@customElement('frigate-card-thumbnail-carousel')
export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
@property({ attribute: false })
protected target?: BrowseMediaSource;
protected target?: FrigateBrowseMediaSource;
protected _tapSelected?;
@@ -96,7 +96,7 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
* @returns A template or void if the item could not be rendered.
*/
protected _renderThumbnail(
parent: BrowseMediaSource,
parent: FrigateBrowseMediaSource,
childIndex: number,
slideIndex: number,
): TemplateResult | void {
src/components/timeline.ts
+112
View File
@@ -0,0 +1,112 @@
import {
CSSResultGroup,
LitElement,
TemplateResult,
html,
unsafeCSS,
PropertyValues,
} from 'lit';
import { DataSet } from 'vis-data/esnext';
import { HomeAssistant } from 'custom-card-helpers';
import { Timeline } from 'vis-timeline/esnext';
import { customElement, property } from 'lit/decorators.js';
import { createRef, ref, Ref } from 'lit/directives/ref';
import { BrowseMediaUtil } from '../browse-media-util';
import { CameraConfig, ExtendedHomeAssistant } from '../types';
import { View } from '../view';
import { renderProgressIndicator } from './message';
import timelineStyle from '../scss/timeline.scss';
interface FrigateCardTimelineData {
id: string;
content: string;
start: number;
}
@customElement('frigate-card-timeline')
export class FrigateCardTimeline extends LitElement {
@property({ attribute: false })
protected hass?: HomeAssistant & ExtendedHomeAssistant;
@property({ attribute: false })
protected view?: Readonly<View>;
@property({ attribute: false })
protected cameraConfig?: CameraConfig;
protected _timelineRef: Ref<HTMLElement> = createRef();
protected _timeline?: Timeline;
/**
* Master render method.
* @returns A rendered template.
*/
protected render(): TemplateResult | void {
if (!this.hass || !this.view || !this.cameraConfig) {
return;
}
if (!this.view.target) {
const browseMediaQueryParameters =
BrowseMediaUtil.getBrowseMediaQueryParametersOrDispatchError(
this,
this.view,
this.cameraConfig,
);
if (!browseMediaQueryParameters) {
return;
}
BrowseMediaUtil.fetchLatestMediaAndDispatchViewChange(
this,
this.hass,
this.view,
browseMediaQueryParameters,
);
return renderProgressIndicator();
}
return html` <div id="timeline" ${ref(this._timelineRef)}></div>`;
}
protected _buildDataset(): DataSet<FrigateCardTimelineData> {
const items: FrigateCardTimelineData[] = [];
this.view?.target?.children?.forEach((child) => {
if (child.frigate) {
const item = {
id: child.media_content_id,
content: child.frigate.event.id,
start: child.frigate.event.start_time * 1000,
};
if (child.frigate.event.end_time) {
//item['end'] = child.frigate.event.end_time * 1000;
}
items.push(item);
}
});
return new DataSet(items);
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
protected updated(_changedProperties: PropertyValues): void {
// Configuration for the Timeline
const options = {
minHeight: '300px',
};
// Create a Timeline
if (this._timelineRef.value && !this._timeline) {
this._timeline = new Timeline(
this._timelineRef.value,
this._buildDataset(),
options,
);
}
}
static get styles(): CSSResultGroup {
return unsafeCSS(timelineStyle);
}
}
src/components/viewer.ts
+12 -9
View File
@@ -18,7 +18,7 @@ import { AutoMediaPlugin } from './embla-plugins/automedia.js';
import type {
BrowseMediaNeighbors,
BrowseMediaQueryParameters,
BrowseMediaSource,
FrigateBrowseMediaSource,
CameraConfig,
ExtendedHomeAssistant,
MediaShowInfo,
@@ -210,14 +210,17 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
@property({ attribute: false })
protected resolvedMediaCache?: ResolvedMediaCache;
// Mapping of slide # to BrowseMediaSource child #.
// Mapping of slide # to FrigateBrowseMediaSource child #.
// (Folders are not media items that can be rendered).
protected _slideToChild: Record<number, number> = {};
// A task to resolve target media if lazy loading is disabled.
protected _mediaResolutionTask = new Task<[BrowseMediaSource | undefined], void>(
protected _mediaResolutionTask = new Task<
[FrigateBrowseMediaSource | undefined],
void
>(
this,
async ([target]: (BrowseMediaSource | undefined)[]): Promise<void> => {
async ([target]: (FrigateBrowseMediaSource | undefined)[]): Promise<void> => {
for (
let i = 0;
!this.viewerConfig?.lazy_load &&
@@ -280,7 +283,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
/**
* Unmute the media on the selected slide.
*/
protected _autoUnmuteHandler(): void {
protected _autoUnmuteHandler(): void {
if (this.viewerConfig?.auto_unmute) {
super._autoUnmuteHandler();
}
@@ -308,7 +311,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
* Get the transition effect to use.
* @returns An TransitionEffect object.
*/
protected _getTransitionEffect(): TransitionEffect | undefined {
protected _getTransitionEffect(): TransitionEffect | undefined {
return this.viewerConfig?.transition_effect;
}
@@ -398,7 +401,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
* @returns The view that would show the matching clip.
*/
protected async _findRelatedClipView(
snapshot: BrowseMediaSource,
snapshot: FrigateBrowseMediaSource,
): Promise<View | null> {
if (
!this.hass ||
@@ -445,7 +448,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
return null;
}
let clips: BrowseMediaSource | null;
let clips: FrigateBrowseMediaSource | null;
try {
clips = await BrowseMediaUtil.browseMediaQuery(this.hass, {
@@ -689,7 +692,7 @@ export class FrigateCardViewerCarousel extends FrigateCardMediaCarousel {
}
protected _renderMediaItem(
mediaToRender: BrowseMediaSource,
mediaToRender: FrigateBrowseMediaSource,
slideIndex: number,
): TemplateResult | void {
// Skip folders as they cannot be rendered by this viewer.
src/resolved-media.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { HomeAssistant } from 'custom-card-helpers';
import { homeAssistantWSRequest } from './common.js';
import {
BrowseMediaSource,
ExtendedHomeAssistant,
FrigateBrowseMediaSource,
ResolvedMedia,
resolvedMediaSchema,
} from './types.js';
@@ -39,7 +39,7 @@ export class ResolvedMediaCache {
export class ResolvedMediaUtil {
static async resolveMedia(
hass: HomeAssistant & ExtendedHomeAssistant,
mediaSource?: BrowseMediaSource,
mediaSource?: FrigateBrowseMediaSource,
cache?: ResolvedMediaCache,
): Promise<ResolvedMedia | null> {
if (!mediaSource) {
src/scss/timeline.scss
+7
View File
@@ -0,0 +1,7 @@
@use "vis-timeline/dist/vis-timeline-graph2d.css";
:host {
width: 100%;
height: 100%;
display: block;
}
src/types.ts
+62 -28
View File
@@ -26,12 +26,13 @@ declare global {
*/
const FRIGATE_CARD_VIEWS_USER_SPECIFIED = [
'live', // Live view.
'clip', // Most recent clip.
'clips', // Clips gallery.
'live', // Live view.
'clip', // Most recent clip.
'clips', // Clips gallery.
'snapshot', // Most recent snapshot.
'snapshots', // Snapshots gallery.
'image', // Static image.
'snapshots',// Snapshots gallery.
'image', // Static image.
'timeline', // Event timeline.
] as const;
export type FrigateCardView = typeof FRIGATE_CARD_VIEWS_USER_SPECIFIED[number];
@@ -409,11 +410,7 @@ const viewConfigSchema = z
* Image view configuration section.
*/
export const IMAGE_MODES = [
'screensaver',
'camera',
'url',
] as const;
export const IMAGE_MODES = ['screensaver', 'camera', 'url'] as const;
const imageConfigDefault = {
mode: 'url' as const,
refresh_seconds: 0,
@@ -575,7 +572,9 @@ const liveConfigSchema = liveOverridableConfigSchema
lazy_load: z.boolean().default(liveConfigDefault.lazy_load),
lazy_unload: z.boolean().default(liveConfigDefault.lazy_unload),
draggable: z.boolean().default(liveConfigDefault.draggable),
transition_effect: transitionEffectConfigSchema.default(liveConfigDefault.transition_effect),
transition_effect: transitionEffectConfigSchema.default(
liveConfigDefault.transition_effect,
),
})
.default(liveConfigDefault);
export type LiveConfig = z.infer<typeof liveConfigSchema>;
@@ -660,7 +659,9 @@ const viewerConfigSchema = z
auto_unmute: z.boolean().default(viewerConfigDefault.auto_unmute),
lazy_load: z.boolean().default(viewerConfigDefault.lazy_load),
draggable: z.boolean().default(viewerConfigDefault.draggable),
transition_effect: transitionEffectConfigSchema.default(viewerConfigDefault.transition_effect),
transition_effect: transitionEffectConfigSchema.default(
viewerConfigDefault.transition_effect,
),
controls: z
.object({
next_previous: viewerNextPreviousControlConfigSchema.default(
@@ -802,7 +803,7 @@ export const frigateCardConfigDefaults = {
image: imageConfigDefault,
};
const menuButtonSchema = z.discriminatedUnion("type", [
const menuButtonSchema = z.discriminatedUnion('type', [
menuIconSchema,
menuStateIconSchema,
menuSubmenuSchema,
@@ -823,10 +824,10 @@ export interface BrowseMediaQueryParameters {
}
export interface BrowseMediaNeighbors {
previous: BrowseMediaSource | null;
previous: FrigateBrowseMediaSource | null;
previousIndex: number | null;
next: BrowseMediaSource | null;
next: FrigateBrowseMediaSource | null;
nextIndex: number | null;
}
@@ -867,7 +868,7 @@ export interface FrigateCardMediaPlayer {
// See: https://github.com/colinhacks/zod#recursive-types
//
// Server side data-type defined here: https://github.com/home-assistant/core/blob/dev/homeassistant/components/media_player/browse_media.py#L46
export interface BrowseMediaSource {
interface BrowseMediaSource {
title: string;
media_class: string;
media_content_type: string;
@@ -879,18 +880,51 @@ export interface BrowseMediaSource {
children?: BrowseMediaSource[] | null;
}
export const browseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(() =>
z.object({
title: z.string(),
media_class: z.string(),
media_content_type: z.string(),
media_content_id: z.string(),
can_play: z.boolean(),
can_expand: z.boolean(),
children_media_class: z.string().nullable().optional(),
thumbnail: z.string().nullable(),
children: z.array(browseMediaSourceSchema).nullable().optional(),
}),
export interface FrigateBrowseMediaSource extends BrowseMediaSource {
children?: FrigateBrowseMediaSource[] | null;
frigate?: {
event: {
camera: string;
end_time: number;
false_positive: boolean;
has_clip: boolean;
has_snapshot: boolean;
id: string;
label: string;
start_time: number;
top_score: number;
zones: string[];
};
};
}
export const frigateBrowseMediaSourceSchema: z.ZodSchema<BrowseMediaSource> = z.lazy(
() =>
z.object({
title: z.string(),
media_class: z.string(),
media_content_type: z.string(),
media_content_id: z.string(),
can_play: z.boolean(),
can_expand: z.boolean(),
children_media_class: z.string().nullable().optional(),
thumbnail: z.string().nullable(),
children: z.array(frigateBrowseMediaSourceSchema).nullable().optional(),
frigate: z.object({
event: z.object({
camera: z.string(),
end_time: z.number().nullable(),
false_positive: z.boolean(),
has_clip: z.boolean(),
has_snapshot: z.boolean(),
id: z.string(),
label: z.string(),
start_time: z.number(),
top_score: z.number(),
zones: z.string().array(),
}),
}).optional(),
}),
);
// Server side data-type defined here: https://github.com/home-assistant/core/blob/dev/homeassistant/components/media_source/models.py
src/view.ts
+6 -5
View File
@@ -1,10 +1,10 @@
import type { BrowseMediaSource, FrigateCardView } from './types.js';
import type { FrigateBrowseMediaSource, FrigateCardView } from './types.js';
import { dispatchFrigateCardEvent } from './common.js';
export interface ViewEvolveParameters {
view?: FrigateCardView;
camera?: string;
target?: BrowseMediaSource;
target?: FrigateBrowseMediaSource;
childIndex?: number;
previous?: View;
}
@@ -17,7 +17,7 @@ export interface ViewParameters extends ViewEvolveParameters {
export class View {
view: FrigateCardView;
camera: string;
target?: BrowseMediaSource;
target?: FrigateBrowseMediaSource;
childIndex?: number;
previous?: View;
@@ -91,7 +91,8 @@ export class View {
* Determine if a view is related to a clip or clips.
*/
public isClipRelatedView(): boolean {
return ['clip', 'clips'].includes(this.view);
// TODO HACK HACK HACK
return ['clip', 'clips', 'timeline'].includes(this.view);
}
/**
@@ -104,7 +105,7 @@ export class View {
/**
* Get the media item that should be played.
**/
get media(): BrowseMediaSource | undefined {
get media(): FrigateBrowseMediaSource | undefined {
if (this.target) {
if (this.target.children && this.childIndex !== undefined) {
return this.target.children[this.childIndex];