Refactor views to support dynamic updates.
This commit is contained in:
Dermot Duffy
@@ -0,0 +1,373 @@
|
||||
import { sub } from 'date-fns';
|
||||
import {
|
||||
FRIGATE_CARD_VIEW_DEFAULT,
|
||||
FrigateCardConfig,
|
||||
FrigateCardView,
|
||||
ViewDisplayMode,
|
||||
} from '../../config/types';
|
||||
import { localize } from '../../localize/localize';
|
||||
import { ClipsOrSnapshotsOrAll } from '../../types';
|
||||
import { View, ViewParameters } from '../../view/view';
|
||||
import { getCameraIDsForViewName } from '../../view/view-to-cameras';
|
||||
import { CardViewAPI } from '../types';
|
||||
import { QueryExecutor } from './query-executor';
|
||||
import {
|
||||
QueryExecutorOptions,
|
||||
QueryWithResults,
|
||||
ViewFactoryOptions,
|
||||
ViewIncompatible,
|
||||
ViewNoCameraError,
|
||||
} from './types';
|
||||
|
||||
export class ViewFactory {
|
||||
protected _api: CardViewAPI;
|
||||
protected _executor: QueryExecutor;
|
||||
|
||||
constructor(api: CardViewAPI, executor?: QueryExecutor) {
|
||||
this._api = api;
|
||||
this._executor = executor ?? new QueryExecutor(api);
|
||||
}
|
||||
|
||||
public getViewDefault(options?: ViewFactoryOptions): View | null {
|
||||
const config = this._api.getConfigManager().getConfig();
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let forceCameraID: string | null = options?.params?.camera ?? null;
|
||||
const viewName = options?.params?.view ?? config.view.default;
|
||||
|
||||
if (
|
||||
!forceCameraID &&
|
||||
options?.baseView?.camera &&
|
||||
config.view.default_cycle_camera
|
||||
) {
|
||||
const cameraIDs = [
|
||||
...getCameraIDsForViewName(this._api.getCameraManager(), viewName),
|
||||
];
|
||||
const currentIndex = cameraIDs.indexOf(options?.baseView?.camera);
|
||||
const targetIndex = currentIndex + 1 >= cameraIDs.length ? 0 : currentIndex + 1;
|
||||
forceCameraID = cameraIDs[targetIndex];
|
||||
}
|
||||
|
||||
return this.getViewByParameters({
|
||||
params: {
|
||||
...options?.params,
|
||||
view: viewName,
|
||||
...(forceCameraID && { camera: forceCameraID }),
|
||||
},
|
||||
baseView: options?.baseView,
|
||||
});
|
||||
}
|
||||
|
||||
public getViewByParameters(options?: ViewFactoryOptions): View | null {
|
||||
const config = this._api.getConfigManager().getConfig();
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let cameraID: string | null =
|
||||
options?.params?.camera ?? options?.baseView?.camera ?? null;
|
||||
let viewName =
|
||||
options?.params?.view ?? options?.baseView?.view ?? config.view.default;
|
||||
|
||||
const allCameraIDs = this._api.getCameraManager().getStore().getCameraIDs();
|
||||
|
||||
if (!cameraID || !allCameraIDs.has(cameraID)) {
|
||||
const viewCameraIDs = getCameraIDsForViewName(
|
||||
this._api.getCameraManager(),
|
||||
viewName,
|
||||
);
|
||||
|
||||
// Reset to the default camera.
|
||||
cameraID = viewCameraIDs.keys().next().value;
|
||||
}
|
||||
|
||||
if (!cameraID) {
|
||||
const camerasToCapabilities = [
|
||||
...this._api.getCameraManager().getStore().getCameras(),
|
||||
].reduce((acc, [cameraID, camera]) => {
|
||||
const capabilities = camera.getCapabilities()?.getRawCapabilities();
|
||||
if (capabilities) {
|
||||
acc[cameraID] = capabilities;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
throw new ViewNoCameraError(localize('error.no_supported_cameras'), {
|
||||
view: viewName,
|
||||
cameras_capabilities: camerasToCapabilities,
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.isViewSupportedByCamera(cameraID, viewName)) {
|
||||
if (
|
||||
options?.failSafe &&
|
||||
this.isViewSupportedByCamera(cameraID, FRIGATE_CARD_VIEW_DEFAULT)
|
||||
) {
|
||||
viewName = FRIGATE_CARD_VIEW_DEFAULT;
|
||||
} else {
|
||||
const capabilities = this._api
|
||||
.getCameraManager()
|
||||
.getStore()
|
||||
.getCamera(cameraID)
|
||||
?.getCapabilities()
|
||||
?.getRawCapabilities();
|
||||
|
||||
throw new ViewIncompatible(localize('error.no_supported_camera'), {
|
||||
view: viewName,
|
||||
camera: cameraID,
|
||||
...(capabilities && { camera_capabilities: capabilities }),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const displayMode =
|
||||
options?.params?.displayMode ??
|
||||
options?.baseView?.displayMode ??
|
||||
this._getDefaultDisplayModeForView(viewName, config);
|
||||
|
||||
const viewParameters: ViewParameters = {
|
||||
...options?.params,
|
||||
view: viewName,
|
||||
camera: cameraID,
|
||||
displayMode: displayMode,
|
||||
};
|
||||
|
||||
const view = options?.baseView
|
||||
? options.baseView.evolve(viewParameters)
|
||||
: new View(viewParameters);
|
||||
|
||||
if (options?.modifiers) {
|
||||
options.modifiers.forEach((modifier) => modifier.modify(view));
|
||||
}
|
||||
return view;
|
||||
}
|
||||
|
||||
public async getViewDefaultWithNewQuery(
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<View | null> {
|
||||
return this._executeNewQuery(this.getViewDefault(options), {
|
||||
...options,
|
||||
queryExecutorOptions: {
|
||||
useCache: false,
|
||||
...options?.queryExecutorOptions,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
public async getViewByParametersWithNewQuery(
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<View | null> {
|
||||
return this._executeNewQuery(this.getViewByParameters(options), {
|
||||
...options,
|
||||
queryExecutorOptions: {
|
||||
useCache: false,
|
||||
...options?.queryExecutorOptions,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
public async getViewByParametersWithExistingQuery(
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<View | null> {
|
||||
const view = this.getViewByParameters(options);
|
||||
if (view?.query) {
|
||||
view.queryResults = await this._executor.execute(
|
||||
view.query,
|
||||
options?.queryExecutorOptions,
|
||||
);
|
||||
}
|
||||
return view;
|
||||
}
|
||||
|
||||
protected async _executeNewQuery(
|
||||
view: View | null,
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<View | null> {
|
||||
const config = this._api.getConfigManager().getConfig();
|
||||
if (
|
||||
!config ||
|
||||
/* istanbul ignore next: this path cannot be reached as the only way for
|
||||
view to be null here, is if the config is also null -- @preserve */
|
||||
!view
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const executeMediaQuery = async (
|
||||
mediaType: ClipsOrSnapshotsOrAll | 'recordings' | null,
|
||||
): Promise<boolean> => {
|
||||
/* istanbul ignore if: this path cannot be reached -- @preserve */
|
||||
if (!mediaType) {
|
||||
return false;
|
||||
}
|
||||
return await this._executeMediaQuery(
|
||||
view,
|
||||
mediaType === 'recordings' ? 'recordings' : 'events',
|
||||
{
|
||||
eventsMediaType: mediaType === 'recordings' ? undefined : mediaType,
|
||||
executorOptions: options?.queryExecutorOptions,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
// Implementation note: For new queries, if the query itself fails that is
|
||||
// just ignored and the view is returned anyway (e.g. if the user changes to
|
||||
// live but the thumbnail fetch fails, it is better to change to live and
|
||||
// show no thumbnails than not change to live).
|
||||
const mediaType = view.getDefaultMediaType();
|
||||
const baseView = options?.baseView;
|
||||
const switchingToGalleryFromViewer =
|
||||
baseView?.isViewerView() && view.isGalleryView();
|
||||
|
||||
if (switchingToGalleryFromViewer && baseView?.query && baseView?.queryResults) {
|
||||
// If the user is currently using the viewer, and then switches to the
|
||||
// gallery we make an attempt to keep the query/queryResults the same so
|
||||
// the gallery can be used to click back and forth to the viewer, and the
|
||||
// selected media can be centered in the gallery. See the matching code in
|
||||
// `updated()` in `gallery.ts`. We specifically must ensure that the new
|
||||
// target media of the gallery (e.g. clips, snapshots or recordings) is
|
||||
// equal to the queries that are currently used in the viewer.
|
||||
//
|
||||
// See: https://github.com/dermotduffy/frigate-hass-card/issues/885
|
||||
view.query = baseView.query;
|
||||
view.queryResults = baseView.queryResults;
|
||||
} else {
|
||||
switch (view.view) {
|
||||
case 'live':
|
||||
this._setTimelineWindowToLive(view);
|
||||
if (config.live.controls.thumbnails.mode !== 'none') {
|
||||
await executeMediaQuery(
|
||||
config.live.controls.thumbnails.media_type === 'recordings'
|
||||
? 'recordings'
|
||||
: config.live.controls.thumbnails.events_media_type,
|
||||
);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'media':
|
||||
// If the user is looking at media in the `media` view and then
|
||||
// changes camera (via the menu) it should default to showing clips
|
||||
// for the new camera.
|
||||
if (baseView && view.camera !== baseView.camera) {
|
||||
await executeMediaQuery('clips');
|
||||
}
|
||||
break;
|
||||
|
||||
// Gallery views:
|
||||
case 'clips':
|
||||
case 'snapshots':
|
||||
case 'recordings':
|
||||
await executeMediaQuery(mediaType);
|
||||
break;
|
||||
|
||||
// Viewer views:
|
||||
case 'clip':
|
||||
case 'snapshot':
|
||||
case 'recording':
|
||||
if (config.media_viewer.controls.thumbnails.mode !== 'none') {
|
||||
await executeMediaQuery(mediaType);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this._setOrRemoveSeekTime(
|
||||
view,
|
||||
options?.queryExecutorOptions?.selectResult?.time?.time,
|
||||
);
|
||||
return view;
|
||||
}
|
||||
|
||||
protected _setTimelineWindowToLive(view: View): void {
|
||||
const now = new Date();
|
||||
const liveConfig = this._api.getConfigManager().getConfig()?.live;
|
||||
|
||||
/* istanbul ignore if: this if branch cannot be reached as if the config is
|
||||
empty this function is never called -- @preserve */
|
||||
if (!liveConfig) {
|
||||
return;
|
||||
}
|
||||
|
||||
view.mergeInContext({
|
||||
// Force the window to start at the most recent time, not
|
||||
// necessarily when the most recent event/recording was:
|
||||
// https://github.com/dermotduffy/frigate-hass-card/issues/1301
|
||||
timeline: {
|
||||
window: {
|
||||
start: sub(now, {
|
||||
seconds: liveConfig.controls.timeline.window_seconds,
|
||||
}),
|
||||
end: now,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
protected _setOrRemoveSeekTime(view: View, time?: Date): void {
|
||||
if (time) {
|
||||
view.mergeInContext({
|
||||
mediaViewer: {
|
||||
seek: time,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
view.removeContextProperty('mediaViewer', 'seek');
|
||||
}
|
||||
}
|
||||
|
||||
protected async _executeMediaQuery(
|
||||
view: View,
|
||||
mediaType: 'events' | 'recordings',
|
||||
options?: {
|
||||
eventsMediaType?: ClipsOrSnapshotsOrAll;
|
||||
executorOptions?: QueryExecutorOptions;
|
||||
},
|
||||
): Promise<boolean> {
|
||||
const queryWithResults: QueryWithResults | null =
|
||||
mediaType === 'events'
|
||||
? await this._executor.executeDefaultEventQuery({
|
||||
...(!view.isGrid() && { cameraID: view.camera }),
|
||||
eventsMediaType: options?.eventsMediaType,
|
||||
executorOptions: options?.executorOptions,
|
||||
})
|
||||
: mediaType === 'recordings'
|
||||
? await this._executor.executeDefaultRecordingQuery({
|
||||
...(!view.isGrid() && { cameraID: view.camera }),
|
||||
executorOptions: options?.executorOptions,
|
||||
})
|
||||
: /* istanbul ignore next -- @preserve */
|
||||
null;
|
||||
if (!queryWithResults) {
|
||||
return false;
|
||||
}
|
||||
|
||||
view.query = queryWithResults.query;
|
||||
view.queryResults = queryWithResults.queryResults;
|
||||
return true;
|
||||
}
|
||||
|
||||
public isViewSupportedByCamera(cameraID: string, view: FrigateCardView): boolean {
|
||||
return !!getCameraIDsForViewName(this._api.getCameraManager(), view, cameraID).size;
|
||||
}
|
||||
|
||||
protected _getDefaultDisplayModeForView(
|
||||
viewName: FrigateCardView,
|
||||
config?: FrigateCardConfig,
|
||||
): ViewDisplayMode {
|
||||
let mode: ViewDisplayMode | null = null;
|
||||
switch (viewName) {
|
||||
case 'media':
|
||||
case 'clip':
|
||||
case 'recording':
|
||||
case 'snapshot':
|
||||
mode = config?.media_viewer.display?.mode ?? null;
|
||||
break;
|
||||
case 'live':
|
||||
mode = config?.live.display?.mode ?? null;
|
||||
break;
|
||||
}
|
||||
return mode ?? 'single';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { ViewContext } from "view";
|
||||
import { View } from "../../../view/view";
|
||||
import { ViewModifier } from "../types";
|
||||
|
||||
export class MergeContextViewModifier implements ViewModifier {
|
||||
protected _context?: ViewContext | null;
|
||||
|
||||
constructor(context?: ViewContext | null) {
|
||||
this._context = context;
|
||||
}
|
||||
|
||||
public modify(view: View): void {
|
||||
view.mergeInContext(this._context);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { ViewContext } from 'view';
|
||||
import { View } from '../../../view/view';
|
||||
import { ViewModifier } from '../types';
|
||||
|
||||
export class RemoveContextPropertyViewModifier implements ViewModifier {
|
||||
protected _key: keyof ViewContext;
|
||||
protected _property: PropertyKey;
|
||||
|
||||
constructor(key: keyof ViewContext, property: PropertyKey) {
|
||||
this._key = key;
|
||||
this._property = property;
|
||||
}
|
||||
|
||||
public modify(view: View): void {
|
||||
view.removeContextProperty(this._key, this._property);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { ViewContext } from "view";
|
||||
import { View } from "../../../view/view";
|
||||
import { ViewModifier } from "../types";
|
||||
|
||||
export class RemoveContextViewModifier implements ViewModifier {
|
||||
protected _keys: (keyof ViewContext)[];
|
||||
|
||||
constructor(keys: (keyof ViewContext)[]) {
|
||||
this._keys = keys;
|
||||
}
|
||||
|
||||
public modify(view: View): void {
|
||||
this._keys.forEach((key) => view.removeContext(key));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { removeSubstream } from '../../../utils/substream';
|
||||
import { View } from '../../../view/view';
|
||||
import { ViewModifier } from '../types';
|
||||
|
||||
export class SubstreamOffViewModifier implements ViewModifier {
|
||||
public modify(view: View): void {
|
||||
removeSubstream(view);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
import { CameraManager } from '../../../camera-manager/manager';
|
||||
import { getStreamCameraID, setSubstream } from '../../../utils/substream';
|
||||
import { View } from '../../../view/view';
|
||||
import { ViewModifier } from '../types';
|
||||
|
||||
interface SubstreamOnViewModifierAPI {
|
||||
getCameraManager(): CameraManager;
|
||||
}
|
||||
|
||||
export class SubstreamOnViewModifier implements ViewModifier {
|
||||
protected _api: SubstreamOnViewModifierAPI;
|
||||
|
||||
constructor(api: SubstreamOnViewModifierAPI) {
|
||||
this._api = api;
|
||||
}
|
||||
|
||||
public modify(view: View): void {
|
||||
const dependencies = [
|
||||
...this._api
|
||||
.getCameraManager()
|
||||
.getStore()
|
||||
.getAllDependentCameras(view.camera, 'substream'),
|
||||
];
|
||||
|
||||
if (dependencies.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentOverride = getStreamCameraID(view);
|
||||
const currentIndex = dependencies.indexOf(currentOverride);
|
||||
const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % dependencies.length;
|
||||
|
||||
setSubstream(view, dependencies[newIndex]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { setSubstream } from '../../../utils/substream';
|
||||
import { View } from '../../../view/view';
|
||||
import { ViewModifier } from '../types';
|
||||
|
||||
export class SubstreamSelectViewModifier implements ViewModifier {
|
||||
protected _substreamID: string;
|
||||
|
||||
constructor(substreamID: string) {
|
||||
this._substreamID = substreamID;
|
||||
}
|
||||
|
||||
public modify(view: View): void {
|
||||
setSubstream(view, this._substreamID);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { CapabilitySearchOptions, MediaQuery } from '../../camera-manager/types';
|
||||
import { MEDIA_CHUNK_SIZE_DEFAULT } from '../../const';
|
||||
import { ClipsOrSnapshotsOrAll } from '../../types';
|
||||
import { findBestMediaIndex } from '../../utils/find-best-media-index';
|
||||
import {
|
||||
EventMediaQueries,
|
||||
MediaQueries,
|
||||
RecordingMediaQueries,
|
||||
} from '../../view/media-queries';
|
||||
import { MediaQueriesResults } from '../../view/media-queries-results';
|
||||
import { CardViewAPI } from '../types';
|
||||
import { QueryExecutorOptions, QueryWithResults } from './types';
|
||||
|
||||
export class QueryExecutor {
|
||||
protected _api: CardViewAPI;
|
||||
|
||||
constructor(api: CardViewAPI) {
|
||||
this._api = api;
|
||||
}
|
||||
|
||||
public async executeDefaultEventQuery(options?: {
|
||||
cameraID?: string;
|
||||
eventsMediaType?: ClipsOrSnapshotsOrAll;
|
||||
executorOptions?: QueryExecutorOptions;
|
||||
}): Promise<QueryWithResults | null> {
|
||||
const capabilitySearch: CapabilitySearchOptions =
|
||||
!options?.eventsMediaType || options?.eventsMediaType === 'all'
|
||||
? {
|
||||
anyCapabilities: ['clips', 'snapshots'],
|
||||
}
|
||||
: options.eventsMediaType;
|
||||
|
||||
const cameraManager = this._api.getCameraManager();
|
||||
const cameraIDs = options?.cameraID
|
||||
? cameraManager
|
||||
.getStore()
|
||||
.getAllDependentCameras(options.cameraID, capabilitySearch)
|
||||
: cameraManager.getStore().getCameraIDsWithCapability(capabilitySearch);
|
||||
if (!cameraIDs.size) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rawQueries = cameraManager.generateDefaultEventQueries(cameraIDs, {
|
||||
limit: this._getChunkLimit(),
|
||||
...(options?.eventsMediaType === 'clips' && { hasClip: true }),
|
||||
...(options?.eventsMediaType === 'snapshots' && { hasSnapshot: true }),
|
||||
});
|
||||
if (!rawQueries) {
|
||||
return null;
|
||||
}
|
||||
const queries = new EventMediaQueries(rawQueries);
|
||||
const results = await this.execute(queries, options?.executorOptions);
|
||||
return results
|
||||
? {
|
||||
query: queries,
|
||||
queryResults: results,
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
public async executeDefaultRecordingQuery(options?: {
|
||||
cameraID?: string;
|
||||
executorOptions?: QueryExecutorOptions;
|
||||
}): Promise<QueryWithResults | null> {
|
||||
const cameraManager = this._api.getCameraManager();
|
||||
const cameraIDs = options?.cameraID
|
||||
? cameraManager.getStore().getAllDependentCameras(options.cameraID, 'recordings')
|
||||
: cameraManager.getStore().getCameraIDsWithCapability('recordings');
|
||||
if (!cameraIDs.size) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rawQueries = cameraManager.generateDefaultRecordingQueries(cameraIDs, {
|
||||
limit: this._getChunkLimit(),
|
||||
});
|
||||
if (!rawQueries) {
|
||||
return null;
|
||||
}
|
||||
const queries = new RecordingMediaQueries(rawQueries);
|
||||
const results = await this.execute(queries, options?.executorOptions);
|
||||
return results ? { query: queries, queryResults: results } : null;
|
||||
}
|
||||
|
||||
public async execute(
|
||||
query: MediaQueries,
|
||||
executorOptions?: QueryExecutorOptions,
|
||||
): Promise<MediaQueriesResults | null> {
|
||||
const queries = query.getQueries();
|
||||
if (!queries) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const mediaArray = await this._api
|
||||
.getCameraManager()
|
||||
.executeMediaQueries<MediaQuery>(queries, {
|
||||
useCache: executorOptions?.useCache,
|
||||
});
|
||||
if (!mediaArray) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const queryResults = new MediaQueriesResults({ results: mediaArray });
|
||||
if (executorOptions?.rejectResults?.(queryResults)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (executorOptions?.selectResult?.id) {
|
||||
queryResults.selectBestResult((media) =>
|
||||
media.findIndex((m) => m.getID() === executorOptions.selectResult?.id),
|
||||
);
|
||||
} else if (executorOptions?.selectResult?.func) {
|
||||
queryResults.selectResultIfFound(executorOptions.selectResult.func);
|
||||
} else if (executorOptions?.selectResult?.time) {
|
||||
queryResults.selectBestResult((media) =>
|
||||
findBestMediaIndex(
|
||||
media,
|
||||
executorOptions.selectResult?.time?.time as Date,
|
||||
executorOptions.selectResult?.time?.favorCameraID,
|
||||
),
|
||||
);
|
||||
}
|
||||
return queryResults;
|
||||
}
|
||||
|
||||
protected _getChunkLimit(): number {
|
||||
const cardWideConfig = this._api.getConfigManager().getCardWideConfig();
|
||||
return (
|
||||
cardWideConfig?.performance?.features.media_chunk_size ?? MEDIA_CHUNK_SIZE_DEFAULT
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { ViewContext } from 'view';
|
||||
import { FrigateCardView } from '../../config/types.js';
|
||||
import { FrigateCardError } from '../../types.js';
|
||||
import { MediaQueriesResults } from '../../view/media-queries-results.js';
|
||||
import { MediaQueries } from '../../view/media-queries.js';
|
||||
import { ViewMedia } from '../../view/media.js';
|
||||
import { View, ViewParameters } from '../../view/view.js';
|
||||
|
||||
export interface ViewModifier {
|
||||
modify(view: View): void;
|
||||
}
|
||||
|
||||
export interface QueryExecutorOptions {
|
||||
// Select the result of a query, based on time, an id match or an arbitrary
|
||||
// function. If no parameter is specified, the latest media will be selected
|
||||
// by default.
|
||||
selectResult?: {
|
||||
time?: {
|
||||
time: Date;
|
||||
favorCameraID?: string;
|
||||
};
|
||||
id?: string;
|
||||
func?: (media: ViewMedia) => boolean;
|
||||
};
|
||||
rejectResults?: (results: MediaQueriesResults) => boolean;
|
||||
useCache?: boolean;
|
||||
}
|
||||
|
||||
export interface QueryWithResults {
|
||||
query: MediaQueries;
|
||||
queryResults: MediaQueriesResults;
|
||||
}
|
||||
|
||||
export interface ViewFactoryOptions {
|
||||
// An existing view to evolve from.
|
||||
baseView?: View | null;
|
||||
|
||||
// View parameters to set/evolve.
|
||||
params?: Partial<ViewParameters>;
|
||||
|
||||
// Modifiers to the view once created.
|
||||
modifiers?: ViewModifier[];
|
||||
|
||||
// When failSafe is true the view will be changed to the default view, or the
|
||||
// `live` view if the configured default view is not supported.
|
||||
failSafe?: boolean;
|
||||
|
||||
// Options for the query executor that control how a query is executed and the
|
||||
// result selected.
|
||||
queryExecutorOptions?: QueryExecutorOptions;
|
||||
}
|
||||
|
||||
export interface ViewManagerEpoch {
|
||||
manager: ViewManagerInterface;
|
||||
|
||||
oldView?: View;
|
||||
}
|
||||
|
||||
export interface ViewManagerInterface {
|
||||
getEpoch(): ViewManagerEpoch;
|
||||
|
||||
getView(): View | null;
|
||||
hasView(): boolean;
|
||||
reset(): void;
|
||||
|
||||
setViewDefault(options?: ViewFactoryOptions): void;
|
||||
setViewByParameters(options?: ViewFactoryOptions): void;
|
||||
|
||||
setViewDefaultWithNewQuery(options?: ViewFactoryOptions): Promise<void>;
|
||||
setViewByParametersWithNewQuery(options?: ViewFactoryOptions): Promise<void>;
|
||||
setViewByParametersWithExistingQuery(options?: ViewFactoryOptions): Promise<void>;
|
||||
|
||||
setViewWithMergedContext(context: ViewContext | null): void;
|
||||
|
||||
isViewSupportedByCamera(cameraID: string, view: FrigateCardView): boolean;
|
||||
hasMajorMediaChange(oldView?: View | null): boolean;
|
||||
}
|
||||
|
||||
export class ViewNoCameraError extends FrigateCardError {}
|
||||
export class ViewIncompatible extends FrigateCardError {}
|
||||
@@ -0,0 +1,164 @@
|
||||
import { ViewContext } from 'view';
|
||||
import { FrigateCardView } from '../../config/types';
|
||||
import { log } from '../../utils/debug';
|
||||
import { getStreamCameraID } from '../../utils/substream';
|
||||
import { View } from '../../view/view';
|
||||
import { getCameraIDsForViewName } from '../../view/view-to-cameras';
|
||||
import { CardViewAPI } from '../types';
|
||||
import { ViewFactory } from './factory';
|
||||
import { ViewFactoryOptions, ViewManagerEpoch, ViewManagerInterface } from './types';
|
||||
|
||||
export class ViewManager implements ViewManagerInterface {
|
||||
protected _view: View | null = null;
|
||||
protected _factory: ViewFactory;
|
||||
protected _api: CardViewAPI;
|
||||
protected _epoch: ViewManagerEpoch = this._createEpoch();
|
||||
|
||||
constructor(api: CardViewAPI, factory?: ViewFactory) {
|
||||
this._api = api;
|
||||
this._factory = factory ?? new ViewFactory(api);
|
||||
}
|
||||
|
||||
public getEpoch(): ViewManagerEpoch {
|
||||
return this._epoch;
|
||||
}
|
||||
protected _createEpoch(oldView?: View | null): ViewManagerEpoch {
|
||||
return {
|
||||
manager: this,
|
||||
...(oldView && { oldView }),
|
||||
};
|
||||
}
|
||||
|
||||
public getView(): View | null {
|
||||
return this._view;
|
||||
}
|
||||
public hasView(): boolean {
|
||||
return !!this.getView();
|
||||
}
|
||||
public reset(): void {
|
||||
if (this._view) {
|
||||
this._setView(null);
|
||||
}
|
||||
}
|
||||
|
||||
setViewDefault = (options?: ViewFactoryOptions): void =>
|
||||
this._setViewGeneric(this._factory.getViewDefault, options);
|
||||
|
||||
setViewByParameters = (options?: ViewFactoryOptions): void =>
|
||||
this._setViewGeneric(this._factory.getViewByParameters, options);
|
||||
|
||||
setViewDefaultWithNewQuery = async (options?: ViewFactoryOptions): Promise<void> =>
|
||||
await this._setViewGenericAsync(this._factory.getViewDefaultWithNewQuery, options);
|
||||
|
||||
setViewByParametersWithNewQuery = async (
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<void> =>
|
||||
await this._setViewGenericAsync(
|
||||
this._factory.getViewByParametersWithNewQuery,
|
||||
options,
|
||||
);
|
||||
|
||||
setViewByParametersWithExistingQuery = async (
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<void> =>
|
||||
await this._setViewGenericAsync(
|
||||
this._factory.getViewByParametersWithExistingQuery,
|
||||
options,
|
||||
);
|
||||
|
||||
protected _setViewGeneric(
|
||||
factoryFunc: (options?: ViewFactoryOptions) => View | null,
|
||||
options?: ViewFactoryOptions,
|
||||
): void {
|
||||
let view: View | null = null;
|
||||
try {
|
||||
view = factoryFunc({
|
||||
baseView: this._view,
|
||||
...options,
|
||||
});
|
||||
} catch (e) {
|
||||
return this._api.getMessageManager().setErrorIfHigherPriority(e);
|
||||
}
|
||||
view && this._setView(view);
|
||||
}
|
||||
|
||||
protected async _setViewGenericAsync(
|
||||
factoryFunc: (options?: ViewFactoryOptions) => Promise<View | null>,
|
||||
options?: ViewFactoryOptions,
|
||||
): Promise<void> {
|
||||
let view: View | null = null;
|
||||
try {
|
||||
view = await factoryFunc({
|
||||
baseView: this._view,
|
||||
...options,
|
||||
});
|
||||
} catch (e) {
|
||||
return this._api.getMessageManager().setErrorIfHigherPriority(e);
|
||||
}
|
||||
view && this._setView(view);
|
||||
}
|
||||
|
||||
public setViewWithMergedContext(context: ViewContext | null): void {
|
||||
if (this._view) {
|
||||
return this._setView(this._view?.clone().mergeInContext(context));
|
||||
}
|
||||
}
|
||||
|
||||
public isViewSupportedByCamera(cameraID: string, view: FrigateCardView): boolean {
|
||||
return !!getCameraIDsForViewName(this._api.getCameraManager(), view, cameraID).size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect if the current view has a major "media change" for the given previous view.
|
||||
* @param oldView The previous view.
|
||||
* @returns True if the view change is a real media change.
|
||||
*/
|
||||
public hasMajorMediaChange(oldView?: View | null): boolean {
|
||||
return (
|
||||
!!oldView !== !!this._view ||
|
||||
oldView?.view !== this._view?.view ||
|
||||
oldView?.camera !== this._view?.camera ||
|
||||
// When in live mode, take overrides (substreams) into account in deciding
|
||||
// if this is a major media change.
|
||||
(this._view?.view === 'live' &&
|
||||
oldView &&
|
||||
getStreamCameraID(oldView) !== getStreamCameraID(this._view)) ||
|
||||
// When in the live view, the queryResults contain the events that
|
||||
// happened in the past -- not reflective of the actual live media viewer
|
||||
// the user is seeing.
|
||||
(this._view?.view !== 'live' && oldView?.queryResults !== this._view?.queryResults)
|
||||
);
|
||||
}
|
||||
|
||||
protected _setView(view: View | null): void {
|
||||
const oldView = this._view;
|
||||
|
||||
log(
|
||||
this._api.getConfigManager().getCardWideConfig(),
|
||||
`Frigate Card view change: `,
|
||||
view,
|
||||
);
|
||||
|
||||
this._view = view;
|
||||
this._epoch = this._createEpoch(oldView);
|
||||
|
||||
if (this.hasMajorMediaChange(oldView)) {
|
||||
this._api.getMediaLoadedInfoManager().clear();
|
||||
}
|
||||
|
||||
if (oldView?.view !== view?.view) {
|
||||
this._api.getCardElementManager().scrollReset();
|
||||
}
|
||||
|
||||
this._api.getMessageManager().reset();
|
||||
this._api.getStyleManager().setExpandedMode();
|
||||
|
||||
this._api.getConditionsManager()?.setState({
|
||||
view: view?.view,
|
||||
camera: view?.camera,
|
||||
displayMode: view?.displayMode ?? undefined,
|
||||
});
|
||||
|
||||
this._api.getCardElementManager().update();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user