diff --git a/package.json b/package.json index 6f8cf9ee..faebdaf0 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/rollup.config.js b/rollup.config.js index 8bb3fc68..bfaa4b1e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -30,9 +30,11 @@ const plugins = [ }, }), image(), - nodeResolve({}), + nodeResolve({ + browser: true, + }), commonjs({ - include: 'node_modules/**' + include: 'node_modules/**', }), typescript(), json(), diff --git a/src/browse-media-util.ts b/src/browse-media-util.ts index 336dcc1c..c6069b1d 100644 --- a/src/browse-media-util.ts +++ b/src/browse-media-util.ts @@ -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\/.*\/(?[.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(/^(?.+) \[/); 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 { + ): Promise { 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 { + ): Promise { 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, browseMediaQueryParameters: BrowseMediaQueryParameters, ): Promise { - 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, - child: Readonly, + child: Readonly, ): Promise { - let parent: BrowseMediaSource; + let parent: FrigateBrowseMediaSource; try { parent = await BrowseMediaUtil.browseMedia(hass, child.media_content_id); } catch (e) { diff --git a/src/card.ts b/src/card.ts index 7b38ac74..7c758015 100644 --- a/src/card.ts +++ b/src/card.ts @@ -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 { > ` : ``} + ${!this._message && this._view.is('timeline') + ? html` + ` + : ``} ${ // Note: Subtle difference in condition below vs the other views in order // to always render the live view for live.preload mode. diff --git a/src/components/live.ts b/src/components/live.ts index cb54870a..d34c594f 100644 --- a/src/components/live.ts +++ b/src/components/live.ts @@ -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) { diff --git a/src/components/thumbnail-carousel.ts b/src/components/thumbnail-carousel.ts index 3b109deb..7ad9dd18 100644 --- a/src/components/thumbnail-carousel.ts +++ b/src/components/thumbnail-carousel.ts @@ -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 { diff --git a/src/components/timeline.ts b/src/components/timeline.ts new file mode 100644 index 00000000..43f8be2e --- /dev/null +++ b/src/components/timeline.ts @@ -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; + + @property({ attribute: false }) + protected cameraConfig?: CameraConfig; + + protected _timelineRef: Ref = 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`
`; + } + + protected _buildDataset(): DataSet { + 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); + } +} diff --git a/src/components/viewer.ts b/src/components/viewer.ts index 21dbc54f..7a713e99 100644 --- a/src/components/viewer.ts +++ b/src/components/viewer.ts @@ -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 = {}; // 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 => { + async ([target]: (FrigateBrowseMediaSource | undefined)[]): Promise => { 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 { 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. diff --git a/src/resolved-media.ts b/src/resolved-media.ts index 4268719e..6b7bd0e6 100644 --- a/src/resolved-media.ts +++ b/src/resolved-media.ts @@ -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 { if (!mediaSource) { diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss new file mode 100644 index 00000000..eb7759dd --- /dev/null +++ b/src/scss/timeline.scss @@ -0,0 +1,7 @@ +@use "vis-timeline/dist/vis-timeline-graph2d.css"; + +:host { + width: 100%; + height: 100%; + display: block; +} \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 04f3fb72..179f7efe 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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; @@ -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 = 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 = 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 diff --git a/src/view.ts b/src/view.ts index cd5a6bab..f16c9341 100644 --- a/src/view.ts +++ b/src/view.ts @@ -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];