Break apart view.ts into multiple files.

This commit is contained in:
Dermot Duffy
2023-01-24 19:36:54 -08:00
parent 9cdf4e8e4d
commit 980ba1fc6f
21 changed files with 264 additions and 250 deletions
+3 -2
View File
@@ -1,7 +1,7 @@
import { HomeAssistant } from 'custom-card-helpers';
import { CameraConfig } from '../types';
import { MediaQueries, MediaQueriesResults } from '../view';
import { ViewMedia } from '../view-media';
import { MediaQueriesResults } from "../view/media-queries-results";
import { ViewMedia } from '../view/media';
import {
EventQuery,
PartialEventQuery,
@@ -11,6 +11,7 @@ import {
RecordingQuery,
RecordingSegmentsQuery,
} from './types';
import { MediaQueries } from '../view/media-queries';
export const CAMERA_MANAGER_ENGINE_EVENT_LIMIT_DEFAULT = 10000;
+5 -2
View File
@@ -5,8 +5,10 @@ import getUnixTime from 'date-fns/getUnixTime';
import startOfHour from 'date-fns/startOfHour';
import { CAMERA_BIRDSEYE } from '../../const';
import { CameraConfig, RecordingSegment } from '../../types';
import { MediaQueries, MediaQueriesClassifier, MediaQueriesResults } from '../../view';
import { ViewMedia, ViewMediaClassifier, ViewMediaFactory } from '../../view-media';
import { MediaQueriesResults } from "../../view/media-queries-results";
import { MediaQueriesClassifier } from "../../view/media-queries-classifier";
import { ViewMedia, ViewMediaFactory } from '../../view/media';
import { ViewMediaClassifier } from "../../view/media-classifier";
import { errorToConsole } from '../../utils/basic';
import { RecordingSegmentsCache } from '../cache';
import {
@@ -33,6 +35,7 @@ import {
} from '../types';
import { FrigateRecording, RecordingSummary } from './types';
import { getEvents, getRecordingSegments, getRecordingsSummary, NativeFrigateEventQuery, NativeFrigateRecordingSegmentsQuery, retainEvent } from './requests';
import { MediaQueries } from '../../view/media-queries';
const EVENT_REQUEST_CACHE_MAX_AGE_SECONDS = 60;
const RECORDING_SUMMARY_REQUEST_CACHE_MAX_AGE_SECONDS = 60;
+3 -2
View File
@@ -21,9 +21,10 @@ import {
} from './types.js';
import orderBy from 'lodash-es/orderBy';
import { CameraManagerEngineFactory } from './engine-factory.js';
import { ViewMedia } from '../view-media.js';
import { MediaQueries, MediaQueriesResults } from '../view.js';
import { ViewMedia } from '../view/media.js';
import { MediaQueriesResults } from '../view/media-queries-results';
import { MemoryRequestCache } from './cache.js';
import { MediaQueries } from '../view/media-queries.js';
export class QueryClassifier {
public static isEventQuery(query: DataQuery | PartialDataQuery): query is EventQuery {
+1 -1
View File
@@ -88,7 +88,7 @@ import {
import { ResolvedMediaCache } from './utils/ha/resolved-media.js';
import { supportsFeature } from './utils/ha/update.js';
import { isValidMediaLoadedInfo } from './utils/media-info.js';
import { View } from './view.js';
import { View } from './view/view.js';
import pkg from '../package.json';
import { ViewContext } from 'view';
import { CameraManager } from './camera/manager.js';
+1 -1
View File
@@ -23,7 +23,7 @@ import {
} from '../utils/ha/browse-media';
import { changeViewToRecentEventsForCameraAndDependents, changeViewToRecentRecordingForCameraAndDependents } from '../utils/media-to-view.js';
import { CameraManager } from '../camera/manager.js';
import { View } from '../view.js';
import { View } from '../view/view.js';
import { renderProgressIndicator } from './message.js';
import './thumbnail.js';
import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
+1 -1
View File
@@ -22,7 +22,7 @@ import {
createMediaLoadedInfo,
dispatchExistingMediaLoadedInfoAsEvent,
} from '../utils/media-info.js';
import { View } from '../view.js';
import { View } from '../view/view.js';
import { dispatchErrorMessageEvent } from './message.js';
import { contentsChanged } from '../utils/basic.js';
import isEqual from 'lodash-es/isEqual';
+1 -1
View File
@@ -37,7 +37,7 @@ import {
dispatchExistingMediaLoadedInfoAsEvent,
dispatchMediaUnloadedEvent,
} from '../../utils/media-info.js';
import { dispatchViewContextChangeEvent, View } from '../../view.js';
import { dispatchViewContextChangeEvent, View } from '../../view/view.js';
import { AutoMediaPlugin } from './../embla-plugins/automedia.js';
import { Lazyload } from './../embla-plugins/lazyload.js';
import {
+1 -1
View File
@@ -17,7 +17,7 @@ import {
} from '../types.js';
import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
import { CameraManager } from '../camera/manager.js';
import { View } from '../view.js';
import { View } from '../view/view.js';
import { ThumbnailCarouselTap } from './thumbnail-carousel.js';
import './surround-basic.js';
import { changeViewToRecentEventsForCameraAndDependents } from '../utils/media-to-view';
+2 -1
View File
@@ -19,7 +19,8 @@ import {
} from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { MediaQueriesResults, View } from '../view.js';
import { View } from '../view/view.js';
import { MediaQueriesResults } from "../view/media-queries-results";
import { FrigateCardCarousel } from './carousel.js';
import './thumbnail.js';
import './carousel.js';
+2 -2
View File
@@ -13,12 +13,12 @@ import { getDurationString, prettifyTitle } from '../utils/basic.js';
import { getCameraTitle } from '../utils/camera.js';
import { renderTask } from '../utils/task.js';
import { createFetchThumbnailTask } from '../utils/thumbnail.js';
import { View } from '../view.js';
import { View } from '../view/view.js';
import type { MediaSeek } from './viewer.js';
import { TaskStatus } from '@lit-labs/task';
import type { CameraConfig, ExtendedHomeAssistant } from '../types.js';
import { ViewMedia } from '../view-media.js';
import { ViewMedia } from '../view/media.js';
import { CameraManager } from '../camera/manager.js';
// The minimum width of a thumbnail with details enabled.
+5 -2
View File
@@ -50,12 +50,15 @@ import {
generateMediaViewerContext,
} from '../utils/media-to-view';
import { CameraManager } from '../camera/manager';
import { EventMediaQueries, MediaQueries, MediaQueriesClassifier, View } from '../view';
import { EventMediaQueries, MediaQueries } from "../view/media-queries";
import { MediaQueriesClassifier } from "../view/media-queries-classifier";
import { dispatchMessageEvent } from './message.js';
import './thumbnail.js';
import { FrigateCardTimelineItem, TimelineDataSource } from '../utils/timeline-source';
import { ViewMedia, ViewMediaClassifier } from '../view-media';
import { ViewMedia } from '../view/media';
import { ViewMediaClassifier } from "../view/media-classifier";
import { rangesOverlap } from '../camera/range';
import { View } from '../view/view';
interface FrigateCardGroupData {
id: string;
+1 -1
View File
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import timelineStyle from '../scss/timeline.scss';
import { CameraConfig, ExtendedHomeAssistant, TimelineConfig } from '../types';
import { CameraManager } from '../camera/manager';
import { View } from '../view';
import { View } from '../view/view';
import './surround.js';
import './timeline-core.js';
+5 -2
View File
@@ -30,7 +30,9 @@ import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { contentsChanged } from '../utils/basic.js';
import { getFullDependentBrowseMediaQueryParametersOrDispatchError } from '../utils/ha/browse-media.js';
import { ResolvedMediaCache, resolveMedia } from '../utils/ha/resolved-media.js';
import { MediaQueriesClassifier, MediaQueriesResults, View } from '../view.js';
import { View } from '../view/view.js';
import { MediaQueriesResults } from "../view/media-queries-results";
import { MediaQueriesClassifier } from "../view/media-queries-classifier";
import { AutoMediaPlugin } from './embla-plugins/automedia.js';
import { Lazyload } from './embla-plugins/lazyload.js';
import {
@@ -51,7 +53,8 @@ import {
changeViewToRecentEventsForCameraAndDependents,
changeViewToRecentRecordingForCameraAndDependents,
} from '../utils/media-to-view.js';
import { ViewMedia, ViewMediaClassifier } from '../view-media.js';
import { ViewMedia } from '../view/media.js';
import { ViewMediaClassifier } from "../view/media-classifier";
import { guard } from 'lit/directives/guard.js';
import { localize } from '../localize/localize.js';
+4 -2
View File
@@ -4,10 +4,12 @@ import startOfHour from 'date-fns/startOfHour';
import sub from 'date-fns/sub';
import { ViewContext } from 'view';
import { CameraConfig, ClipsOrSnapshotsOrAll, FrigateCardView, RecordingSegment } from '../types';
import { EventMediaQueries, RecordingMediaQueries, View } from '../view';
import { View } from '../view/view';
import { EventMediaQueries, RecordingMediaQueries } from "../view/media-queries";
import { CameraManager } from '../camera/manager';
import { getAllDependentCameras } from './camera.js';
import { ViewMedia, ViewMediaClassifier } from '../view-media';
import { ViewMedia } from '../view/media';
import { ViewMediaClassifier } from "../view/media-classifier";
import { HomeAssistant } from 'custom-card-helpers';
export const changeViewToRecentEventsForCameraAndDependents = async (
+2 -2
View File
@@ -7,8 +7,8 @@ import { CameraConfig, ClipsOrSnapshotsOrAll, RecordingSegment } from '../types'
import { CameraManager } from '../camera/manager';
import { EventQuery } from '../camera/types';
import { capEndDate, convertRangeToCacheFriendlyTimes } from '../camera/util';
import { EventMediaQueries } from '../view';
import { ViewMedia } from '../view-media';
import { EventMediaQueries } from "../view/media-queries";
import { ViewMedia } from '../view/media';
import { compressRanges, ExpiringMemoryRangeSet, MemoryRangeSet } from '../camera/range';
import { ModifyInterface } from './basic';
+53
View File
@@ -0,0 +1,53 @@
import { ModifyInterface } from '../utils/basic.js';
import { ViewMedia, FrigateEventViewMedia, FrigateRecordingViewMedia } from './media';
export class ViewMediaClassifier {
public static isFrigateMedia(
media: ViewMedia,
): media is FrigateEventViewMedia | FrigateRecordingViewMedia {
return this.isFrigateEvent(media) || this.isFrigateRecording(media);
}
public static isFrigateEvent(media: ViewMedia): media is FrigateEventViewMedia {
return media instanceof FrigateEventViewMedia;
}
public static isFrigateRecording(
media: ViewMedia,
): media is FrigateRecordingViewMedia {
return media instanceof FrigateRecordingViewMedia;
}
// Typescript conveniences.
public static isMediaWithStartEndTime(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getStartTime(): Date;
getEndTime(): Date;
}
> {
return !!media.getStartTime() && !!media.getEndTime();
}
public static isMediaWithStartTime(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getStartTime(): Date;
}
> {
return !!media.getStartTime();
}
public static isMediaWithEndTime(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getEndTime(): Date;
}
> {
return !!media.getEndTime();
}
public static isMediaWithID(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getID(): string;
}
> {
return !!media.getID();
}
}
+15
View File
@@ -0,0 +1,15 @@
import { EventMediaQueries, MediaQueries, RecordingMediaQueries } from './media-queries';
export class MediaQueriesClassifier {
public static areEventQueries(
queries?: MediaQueries | null,
): queries is EventMediaQueries {
return queries instanceof EventMediaQueries;
}
public static areRecordingQueries(
queries?: MediaQueries | null,
): queries is RecordingMediaQueries {
return queries instanceof RecordingMediaQueries;
}
}
+91
View File
@@ -0,0 +1,91 @@
import clone from 'lodash-es/clone.js';
import { ViewMedia } from './media.js';
export class MediaQueriesResults {
protected _results: ViewMedia[] | null = null;
protected _resultsTimestamp: Date | null = null;
protected _selectedIndex: number | null = null;
constructor(results?: ViewMedia[], selectedIndex?: number | null) {
if (results) {
this.setResults(results);
}
if (selectedIndex !== undefined) {
this.selectResult(selectedIndex);
}
}
public clone(): MediaQueriesResults {
// Shallow clone -- will reuse the same _results object (as there are no
// methods that support modification of the results themselves, and since
// changing the selectedIndex on a consistent set of results is a common
// operation).
return clone(this);
}
public getResults(): ViewMedia[] | null {
return this._results;
}
public getResultsCount(): number {
return this._results?.length ?? 0;
}
public hasResults(): boolean {
return !!this._results;
}
public setResults(results: ViewMedia[]) {
this._results = results;
this._resultsTimestamp = new Date();
}
public getResult(index?: number): ViewMedia | null {
if (!this._results || index === undefined) {
return null;
}
return this._results[index];
}
public getSelectedResult(): ViewMedia | null {
return this._selectedIndex === null ? null : this.getResult(this._selectedIndex);
}
public getSelectedIndex(): number | null {
return this._selectedIndex;
}
public hasSelectedResult(): boolean {
return this.getSelectedResult() !== null;
}
public resetSelectedResult(): MediaQueriesResults {
this._selectedIndex = null;
return this;
}
public getResultsTimestamp(): Date | null {
return this._resultsTimestamp;
}
public selectResult(index: number | null): MediaQueriesResults {
if (
index === null ||
(this._results && index >= 0 && index < this._results.length)
) {
this._selectedIndex = index;
}
return this;
}
public selectResultIfFound(func: (media: ViewMedia) => boolean): MediaQueriesResults {
for (const [index, result] of this._results?.entries() ?? []) {
if (func(result)) {
this._selectedIndex = index;
break;
}
}
return this;
}
public selectBestResult(
func: (media: ViewMedia[]) => number | null,
): MediaQueriesResults {
if (this._results) {
const resultIndex = func(this._results);
if (resultIndex !== null) {
this._selectedIndex = resultIndex;
}
}
return this;
}
}
+61
View File
@@ -0,0 +1,61 @@
import isEqual from 'lodash-es/isEqual';
import cloneDeep from 'lodash-es/cloneDeep.js';
import { EventQuery, MediaQuery, RecordingQuery } from '../camera/types.js';
export type MediaQueries = EventMediaQueries | RecordingMediaQueries;
export class MediaQueriesBase<T extends MediaQuery> {
protected _queries: T[] | null = null;
protected constructor(queries?: T[]) {
if (queries) {
this._queries = queries;
}
}
public clone(): MediaQueriesBase<T> {
return cloneDeep(this);
}
public isEqual(that: MediaQueries): boolean {
return isEqual(this.getQueries(), that.getQueries());
}
public getQueries(): T[] | null {
return this._queries;
}
public setQueries(queries: T[]): void {
this._queries = queries;
}
public setQueriesTime(start: Date, end: Date) {
for (const query of this._queries ?? []) {
query.start = start;
query.end = end;
}
}
}
export class EventMediaQueries extends MediaQueriesBase<EventQuery> {
constructor(queries?: EventQuery[]) {
super(queries);
}
public convertToClipsQueries(): void {
for (const query of this._queries ?? []) {
delete query.hasSnapshot;
query.hasClip = true;
}
}
public clone(): EventMediaQueries {
return cloneDeep(this);
}
}
export class RecordingMediaQueries extends MediaQueriesBase<RecordingQuery> {
constructor(queries?: RecordingQuery[]) {
super(queries);
}
}
+3 -59
View File
@@ -1,74 +1,18 @@
import fromUnixTime from 'date-fns/fromUnixTime';
import isEqual from 'lodash-es/isEqual';
import {
BrowseMediaSource,
CameraConfig,
MEDIA_TYPE_IMAGE,
} from './types.js';
import { ModifyInterface } from './utils/basic.js';
import { BrowseMediaSource, CameraConfig, MEDIA_TYPE_IMAGE } from '../types.js';
import {
getEventMediaContentID,
getEventThumbnailURL,
getEventTitle,
getRecordingMediaContentID,
getRecordingTitle,
} from './camera/frigate/util.js';
import { FrigateEvent, FrigateRecording } from './camera/frigate/types.js';
} from '../camera/frigate/util.js';
import { FrigateEvent, FrigateRecording } from '../camera/frigate/types.js';
export type ViewMediaType = 'clip' | 'snapshot' | 'recording';
export type ViewMediaSourceType = FrigateEvent | FrigateRecording | BrowseMediaSource;
export class ViewMediaClassifier {
public static isFrigateMedia(
media: ViewMedia,
): media is FrigateEventViewMedia | FrigateRecordingViewMedia {
return this.isFrigateEvent(media) || this.isFrigateRecording(media);
}
public static isFrigateEvent(media: ViewMedia): media is FrigateEventViewMedia {
return media instanceof FrigateEventViewMedia;
}
public static isFrigateRecording(
media: ViewMedia,
): media is FrigateRecordingViewMedia {
return media instanceof FrigateRecordingViewMedia;
}
// Typescript conveniences.
public static isMediaWithStartEndTime(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getStartTime(): Date;
getEndTime(): Date;
}
> {
return !!media.getStartTime() && !!media.getEndTime();
}
public static isMediaWithStartTime(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getStartTime(): Date;
}
> {
return !!media.getStartTime();
}
public static isMediaWithEndTime(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getEndTime(): Date;
}
> {
return !!media.getEndTime();
}
public static isMediaWithID(media: ViewMedia): media is ModifyInterface<
ViewMedia,
{
getID(): string;
}
> {
return !!media.getID();
}
}
class ViewMediaBase<T extends ViewMediaSourceType> {
protected _mediaType: ViewMediaType;
protected _cameraID: string;
+4 -168
View File
@@ -23,19 +23,16 @@
// - TODO: What should the timeline do when an event is clicked on that is not in the queryResults (or if queryResults is empty)?
// - TODO: Should the timeline data source clear events (as it currently does) when the query changes?
import isEqual from 'lodash-es/isEqual';
import clone from 'lodash-es/clone.js';
import cloneDeep from 'lodash-es/cloneDeep.js';
import { ViewContext } from 'view';
import {
FrigateCardUserSpecifiedView,
FrigateCardView,
FRIGATE_CARD_VIEWS_USER_SPECIFIED,
FRIGATE_CARD_VIEW_DEFAULT,
} from './types.js';
import { dispatchFrigateCardEvent } from './utils/basic.js';
import { EventQuery, MediaQuery, RecordingQuery } from './camera/types.js';
import { ViewMedia } from './view-media.js';
} from '../types.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
import { MediaQueries } from './media-queries';
import { MediaQueriesResults } from './media-queries-results';
export interface ViewEvolveParameters {
view?: FrigateCardView;
@@ -50,167 +47,6 @@ export interface ViewParameters extends ViewEvolveParameters {
camera: string;
}
export class MediaQueriesClassifier {
public static areEventQueries(
queries?: MediaQueries | null,
): queries is EventMediaQueries {
return queries instanceof EventMediaQueries;
}
public static areRecordingQueries(
queries?: MediaQueries | null,
): queries is RecordingMediaQueries {
return queries instanceof RecordingMediaQueries;
}
}
export class MediaQueriesBase<T extends MediaQuery> {
protected _queries: T[] | null = null;
protected constructor(queries?: T[]) {
if (queries) {
this._queries = queries;
}
}
public clone(): MediaQueriesBase<T> {
return cloneDeep(this);
}
public isEqual(that: MediaQueries): boolean {
return isEqual(this.getQueries(), that.getQueries());
}
public getQueries(): T[] | null {
return this._queries;
}
public setQueries(queries: T[]): void {
this._queries = queries;
}
public setQueriesTime(start: Date, end: Date) {
for (const query of this._queries ?? []) {
query.start = start;
query.end = end;
}
}
}
export class EventMediaQueries extends MediaQueriesBase<EventQuery> {
constructor(queries?: EventQuery[]) {
super(queries);
}
public convertToClipsQueries(): void {
for (const query of this._queries ?? []) {
delete query.hasSnapshot;
query.hasClip = true;
}
}
public clone(): EventMediaQueries {
return cloneDeep(this);
}
}
export class RecordingMediaQueries extends MediaQueriesBase<RecordingQuery> {
constructor(queries?: RecordingQuery[]) {
super(queries);
}
}
export type MediaQueries = EventMediaQueries | RecordingMediaQueries;
export class MediaQueriesResults {
protected _results: ViewMedia[] | null = null;
protected _resultsTimestamp: Date | null = null;
protected _selectedIndex: number | null = null;
constructor(results?: ViewMedia[], selectedIndex?: number | null) {
if (results) {
this.setResults(results);
}
if (selectedIndex !== undefined) {
this.selectResult(selectedIndex);
}
}
public clone(): MediaQueriesResults {
// Shallow clone -- will reuse the same _results object (as there are no
// methods that support modification of the results themselves, and since
// changing the selectedIndex on a consistent set of results is a common
// operation).
return clone(this);
}
public getResults(): ViewMedia[] | null {
return this._results;
}
public getResultsCount(): number {
return this._results?.length ?? 0;
}
public hasResults(): boolean {
return !!this._results;
}
public setResults(results: ViewMedia[]) {
this._results = results;
this._resultsTimestamp = new Date();
}
public getResult(index?: number): ViewMedia | null {
if (!this._results || index === undefined) {
return null;
}
return this._results[index];
}
public getSelectedResult(): ViewMedia | null {
return this._selectedIndex === null ? null : this.getResult(this._selectedIndex);
}
public getSelectedIndex(): number | null {
return this._selectedIndex;
}
public hasSelectedResult(): boolean {
return this.getSelectedResult() !== null;
}
public resetSelectedResult(): MediaQueriesResults {
this._selectedIndex = null;
return this;
}
public getResultsTimestamp(): Date | null {
return this._resultsTimestamp;
}
public selectResult(index: number | null): MediaQueriesResults {
if (
index === null ||
(this._results && index >= 0 && index < this._results.length)
) {
this._selectedIndex = index;
}
return this;
}
public selectResultIfFound(func: (media: ViewMedia) => boolean): MediaQueriesResults {
for (const [index, result] of this._results?.entries() ?? []) {
if (func(result)) {
this._selectedIndex = index;
break;
}
}
return this;
}
public selectBestResult(
func: (media: ViewMedia[]) => number | null,
): MediaQueriesResults {
if (this._results) {
const resultIndex = func(this._results);
if (resultIndex !== null) {
this._selectedIndex = resultIndex;
}
}
return this;
}
}
export class View {
public view: FrigateCardView;
public camera: string;