diff --git a/src/components/media-filter-core.ts b/src/components/media-filter-core.ts index 458c2b6c..0085e9d3 100644 --- a/src/components/media-filter-core.ts +++ b/src/components/media-filter-core.ts @@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js'; import { createRef, ref, Ref } from 'lit/directives/ref.js'; import { DateRange } from '../camera/range'; import { localize } from '../localize/localize'; -import mediaFilterStyle from '../scss/media-filter.scss'; +import mediaFilterCoreStyle from '../scss/media-filter-core.scss'; import { ExtendedHomeAssistant } from '../types'; import { dispatchFrigateCardEvent } from '../utils/basic'; @@ -20,6 +20,7 @@ export interface ValueLabel { } export interface MediaFilterCoreSelection { + mediaType?: MediaFilterMediaType; cameraIDs?: Set; what?: Set; where?: Set; @@ -44,11 +45,26 @@ export enum MediaFilterCoreWhen { Custom = 'custom', } +export enum MediaFilterMediaType { + Clips = 'clips', + Snapshots = 'snapshots', + Recordings = 'recordings', +} + export interface MediaFilterCoreWhenSelection { selection: MediaFilterCoreWhen; custom?: DateRange; } +export enum MediaFilterControl { + mediaType = 'mediaType', + when = 'when', + camera = 'camera', + what = 'what', + where = 'where', + favorite = 'favorite', +} + @customElement('frigate-card-media-filter-core') export class FrigateCardMediaFilterCore extends LitElement { @property({ attribute: false }) @@ -69,12 +85,17 @@ export class FrigateCardMediaFilterCore extends LitElement { @property({ attribute: false }) public defaults?: MediaFilterCoreSelection; + @property({ attribute: false }) + public controls?: Record; + protected _cameraOptions?: ValueLabel[]; protected _whenOptions?: ValueLabel[]; protected _whatOptions?: ValueLabel[]; protected _whereOptions?: ValueLabel[]; protected _favoriteOptions: ValueLabel[]; + protected _mediaTypeOptions: ValueLabel[]; + protected _refMediaType: Ref> = createRef(); protected _refCamera: Ref> = createRef(); protected _refWhen: Ref> = createRef(); protected _refWhat: Ref> = createRef(); @@ -98,6 +119,20 @@ export class FrigateCardMediaFilterCore extends LitElement { label: localize('media_filter.not_favorite'), }, ]; + this._mediaTypeOptions = [ + { + value: MediaFilterMediaType.Clips, + label: localize('media_filter.media_types.clips'), + }, + { + value: MediaFilterMediaType.Snapshots, + label: localize('media_filter.media_types.snapshots'), + }, + { + value: MediaFilterMediaType.Recordings, + label: localize('media_filter.media_types.recordings'), + }, + ]; } protected _valueChangedHandler(ev: CustomEvent<{ value: unknown }>): void { @@ -106,6 +141,10 @@ export class FrigateCardMediaFilterCore extends LitElement { return; } const values: MediaFilterCoreSelection = { + ...(this._refMediaType.value && + this._refMediaType.value.selectedItem?.value && { + mediaType: this._refMediaType.value.selectedItem?.value, + }), ...(this._refCamera.value && this._refCamera.value.selectedItem?.value && { cameraIDs: new Set([this._refCamera.value.selectedItem.value]), @@ -150,19 +189,19 @@ export class FrigateCardMediaFilterCore extends LitElement { }, { value: { selection: MediaFilterCoreWhen.Today }, - label: localize('media_filter.today'), + label: localize('media_filter.whens.today'), }, { value: { selection: MediaFilterCoreWhen.Yesterday }, - label: localize('media_filter.yesterday'), + label: localize('media_filter.whens.yesterday'), }, { value: { selection: MediaFilterCoreWhen.PastWeek }, - label: localize('media_filter.past_week'), + label: localize('media_filter.whens.past_week'), }, { value: { selection: MediaFilterCoreWhen.PastMonth }, - label: localize('media_filter.past_month'), + label: localize('media_filter.whens.past_month'), }, ...(this.whenOptions ?? []), ]; @@ -186,58 +225,72 @@ export class FrigateCardMediaFilterCore extends LitElement { * @returns A rendered template. */ protected render(): TemplateResult | void { - return html` - - ${this.cameraOptions - ? html` ` + : ''} + ${this.controls?.when ?? true + ? html`` + : ''} + ${(this.controls?.camera ?? true) && this.cameraOptions + ? html` ` + : ''} + ${(this.controls?.what ?? true) && this.whatOptions + ? html` ` + : ''} + ${(this.controls?.where ?? true) && this.whereOptions + ? html`` + : ''} + ${this.controls?.favorite ?? true + ? html` + ` - : ''} - ${this.whatOptions - ? html` ` - : ''} - ${this.whereOptions - ? html`` - : ''} - - `; + > + ` + : ''}`; } static get styles(): CSSResultGroup { - return unsafeCSS(mediaFilterStyle); + return unsafeCSS(mediaFilterCoreStyle); } } diff --git a/src/components/media-filter.ts b/src/components/media-filter.ts index 18cb55fa..20cc4871 100644 --- a/src/components/media-filter.ts +++ b/src/components/media-filter.ts @@ -6,7 +6,6 @@ import startOfToday from 'date-fns/esm/startOfToday'; import startOfDay from 'date-fns/startOfDay'; import startOfYesterday from 'date-fns/startOfYesterday'; import { - css, CSSResultGroup, html, LitElement, @@ -14,6 +13,7 @@ import { ReactiveController, ReactiveControllerHost, TemplateResult, + unsafeCSS, } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { CameraManager } from '../camera/manager'; @@ -38,6 +38,7 @@ import { prettifyTitle } from '../utils/basic'; import format from 'date-fns/format'; import parse from 'date-fns/parse'; import endOfMonth from 'date-fns/endOfMonth'; +import mediaFilterStyle from '../scss/media-filter.scss'; @customElement('frigate-card-media-filter') export class FrigateCardMediaFilter extends LitElement { @@ -158,11 +159,7 @@ export class FrigateCardMediaFilter extends LitElement { } static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - `; + return unsafeCSS(mediaFilterStyle); } } diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 3aab668b..bd50e0d4 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -368,14 +368,22 @@ "all": "All", "camera": "Camera", "favorite": "Favorite", + "media_type": "Media Type", + "media_types": { + "clips": "Clips", + "snapshots": "Snapshots", + "recordings": "Recordings" + }, "not_favorite": "Not Favorite", - "past_month": "Past Month", - "past_week": "Past Week", - "today": "Today", "what": "What", "when": "When", - "where": "Where", - "yesterday": "Yesterday" + "whens": { + "past_month": "Past Month", + "past_week": "Past Week", + "today": "Today", + "yesterday": "Yesterday" + }, + "where": "Where" }, "recording": { "events": "Events", diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json index 3c55142b..86833976 100644 --- a/src/localize/languages/it.json +++ b/src/localize/languages/it.json @@ -339,14 +339,22 @@ "all": "", "camera": "", "favorite": "", + "media_type": "", + "media_types": { + "clips": "", + "snapshots": "", + "recordings": "" + }, "not_favorite": "", - "past_month": "", - "past_week": "", - "today": "", "what": "", "when": "", - "where": "", - "yesterday": "" + "whens": { + "past_month": "", + "past_week": "", + "today": "", + "yesterday": "" + }, + "where": "" }, "recording": { "events": "Eventi", diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json index 03d1bfb7..f934ff8a 100644 --- a/src/localize/languages/pt-BR.json +++ b/src/localize/languages/pt-BR.json @@ -339,14 +339,22 @@ "all": "", "camera": "", "favorite": "", + "media_type": "", + "media_types": { + "clips": "", + "snapshots": "", + "recordings": "" + }, "not_favorite": "", - "past_month": "", - "past_week": "", - "today": "", "what": "", "when": "", - "where": "", - "yesterday": "" + "whens": { + "past_month": "", + "past_week": "", + "today": "", + "yesterday": "" + }, + "where": "" }, "recording": { "events": "Eventos", diff --git a/src/scss/media-filter-core.scss b/src/scss/media-filter-core.scss new file mode 100644 index 00000000..101909bf --- /dev/null +++ b/src/scss/media-filter-core.scss @@ -0,0 +1,16 @@ +:host { + height: 100%; + display: flex; + flex-direction: column; + overflow: auto; + + // Hide scrollbar: Firefox + scrollbar-width: none; + // Hide scrollbar: IE and Edge + -ms-overflow-style: none; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +:host::-webkit-scrollbar { + display: none; +} diff --git a/src/scss/media-filter.scss b/src/scss/media-filter.scss index 895364c4..478abc91 100644 --- a/src/scss/media-filter.scss +++ b/src/scss/media-filter.scss @@ -1,5 +1,4 @@ :host { - display: flex; - flex-direction: column; - overflow: auto; + display: block; + height: 100%; }