From 7b0cde0e50e011a3a31be1a2bc21e1b88766513c Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sat, 14 Jan 2023 10:56:20 -0800 Subject: [PATCH] Convert gallery to new engine (initial draft). --- src/components/gallery.ts | 416 ++++++++++++++++---------------------- 1 file changed, 175 insertions(+), 241 deletions(-) diff --git a/src/components/gallery.ts b/src/components/gallery.ts index 3ada96bd..6ac59663 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -19,25 +19,15 @@ import { } from '../types.js'; import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; import { - getFullDependentBrowseMediaQueryParametersOrDispatchError, -} from '../utils/ha/browse-media'; -import { changeViewToRecentEventsForCameraAndDependents, changeViewToRecentRecordingForCameraAndDependents } from '../utils/media-to-view.js'; + changeViewToRecentEventsForCameraAndDependents, + changeViewToRecentRecordingForCameraAndDependents, +} from '../utils/media-to-view.js'; import { CameraManager } from '../camera/manager.js'; import { View } from '../view/view.js'; import { renderProgressIndicator } from './message.js'; import './thumbnail.js'; import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js'; - -interface GalleryViewContext { - // Keep track of the previous view to allow returning to a higher-level folder. - previous?: View; -} - -declare module 'view' { - interface ViewContext { - gallery?: GalleryViewContext; - } -} +import './media-filter'; @customElement('frigate-card-gallery') export class FrigateCardGallery extends LitElement { @@ -64,54 +54,55 @@ export class FrigateCardGallery extends LitElement { * @returns A rendered template. */ protected render(): TemplateResult | void { - // const mediaType = this.view?.getMediaType(); - // if ( - // !this.hass || - // !this.view || - // !this.cameras || - // !this.view.isGalleryView() || - // !mediaType || - // !this.cameraManager - // ) { - // return; - // } + if ( + !this.hass || + !this.view || + !this.cameras || + !this.view.isGalleryView() || + !this.cameraManager + ) { + return; + } - // if (!this.view.query) { - // if (mediaType === 'recordings') { - // changeViewToRecentRecordingForCameraAndDependents( - // this, - // this.hass, - // this.cameraManager, - // this.cameras, - // this.view, - // { - // targetView: 'recordings', - // }, - // ); - // } else { - // changeViewToRecentEventsForCameraAndDependents( - // this, - // this.hass, - // this.cameraManager, - // this.cameras, - // this.view, - // { - // targetView: mediaType, - // }, - // ); - // } - // return renderProgressIndicator({ cardWideConfig: this.cardWideConfig }); - // } + if (!this.view.query) { + if (this.view.is('recordings')) { + changeViewToRecentRecordingForCameraAndDependents( + this, + this.hass, + this.cameraManager, + this.cameras, + this.view, + ); + } else { + const mediaType = this.view.is('snapshots') + ? 'snapshots' + : this.view.is('clips') + ? 'clips' + : null; + changeViewToRecentEventsForCameraAndDependents( + this, + this.hass, + this.cameraManager, + this.cameras, + this.view, + { + ...(mediaType && { mediaType: mediaType }), + }, + ); + } + return renderProgressIndicator({ cardWideConfig: this.cardWideConfig }); + } - // return html` - // - // - // `; + return html` + + + `; } /** @@ -128,206 +119,149 @@ export class FrigateCardGallery extends LitElement { } } -// @customElement('frigate-card-gallery-core') -// export class FrigateCardGalleryCore extends LitElement { -// @property({ attribute: false }) -// public hass?: ExtendedHomeAssistant; +@customElement('frigate-card-gallery-core') +export class FrigateCardGalleryCore extends LitElement { + @property({ attribute: false }) + public hass?: ExtendedHomeAssistant; -// @property({ attribute: false }) -// public view?: Readonly; + @property({ attribute: false }) + public view?: Readonly; -// @property({ attribute: false }) -// public galleryConfig?: GalleryConfig; + @property({ attribute: false }) + public galleryConfig?: GalleryConfig; -// @property({ attribute: false }) -// public cameras?: Map; + @property({ attribute: false }) + public cameras?: Map; -// protected _resizeObserver: ResizeObserver; + @property({ attribute: false }) + public cameraManager?: CameraManager; -// constructor() { -// super(); -// this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this)); -// } + protected _resizeObserver: ResizeObserver; -// /** -// * Component connected callback. -// */ -// connectedCallback(): void { -// super.connectedCallback(); -// this._resizeObserver.observe(this); -// } + constructor() { + super(); + this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this)); + } -// /** -// * Component disconnected callback. -// */ -// disconnectedCallback(): void { -// this._resizeObserver.disconnect(); -// super.disconnectedCallback(); -// } + /** + * Component connected callback. + */ + connectedCallback(): void { + super.connectedCallback(); + this._resizeObserver.observe(this); + } -// /** -// * Set gallery columns. -// */ -// protected _setColumnCount(): void { -// const thumbnailSize = -// this.galleryConfig?.controls.thumbnails.size ?? -// frigateCardConfigDefaults.event_gallery.controls.thumbnails.size; -// const columns = this.galleryConfig?.controls.thumbnails.show_details -// ? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN)) -// : Math.max( -// 1, -// Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX), -// Math.ceil(this.clientWidth / thumbnailSize), -// ); + /** + * Component disconnected callback. + */ + disconnectedCallback(): void { + this._resizeObserver.disconnect(); + super.disconnectedCallback(); + } -// this.style.setProperty('--frigate-card-gallery-columns', String(columns)); -// } + /** + * Set gallery columns. + */ + protected _setColumnCount(): void { + const thumbnailSize = + this.galleryConfig?.controls.thumbnails.size ?? + frigateCardConfigDefaults.event_gallery.controls.thumbnails.size; + const columns = this.galleryConfig?.controls.thumbnails.show_details + ? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN)) + : Math.max( + 1, + Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX), + Math.ceil(this.clientWidth / thumbnailSize), + ); -// /** -// * Handle gallery resize. -// */ -// protected _resizeHandler(): void { -// this._setColumnCount(); -// } + this.style.setProperty('--frigate-card-gallery-columns', String(columns)); + } -// /** -// * Determine whether the back arrow should be displayed. -// * @returns `true` if the back arrow should be displayed, `false` otherwise. -// */ -// protected _shouldShowBackArrow(): boolean { -// return ( -// !!this.view?.context?.gallery?.previous && -// !!this.view.context.gallery.previous.query && -// this.view.context.gallery.previous.view === this.view.view -// ); -// } + /** + * Handle gallery resize. + */ + protected _resizeHandler(): void { + this._setColumnCount(); + } -// /** -// * Called when an update will occur. -// * @param changedProps The changed properties -// */ -// protected willUpdate(changedProps: PropertyValues): void { -// if (changedProps.has('galleryConfig')) { -// if (this.galleryConfig?.controls.thumbnails.show_details) { -// this.setAttribute('details', ''); -// } else { -// this.removeAttribute('details'); -// } -// this._setColumnCount(); -// if (this.galleryConfig?.controls.thumbnails.size) { -// this.style.setProperty( -// '--frigate-card-thumbnail-size', -// `${this.galleryConfig.controls.thumbnails.size}px`, -// ); -// } -// } -// } + /** + * Called when an update will occur. + * @param changedProps The changed properties + */ + protected willUpdate(changedProps: PropertyValues): void { + if (changedProps.has('galleryConfig')) { + if (this.galleryConfig?.controls.thumbnails.show_details) { + this.setAttribute('details', ''); + } else { + this.removeAttribute('details'); + } + this._setColumnCount(); + if (this.galleryConfig?.controls.thumbnails.size) { + this.style.setProperty( + '--frigate-card-thumbnail-size', + `${this.galleryConfig.controls.thumbnails.size}px`, + ); + } + } + } -// // TODO: This is still going to show the gallery view (akin to HA media -// // browser). + /** + * Master render method. + * @returns A rendered template. + */ + protected render(): TemplateResult | void { + const results = this.view?.queryResults?.getResults(); -// /** -// * Master render method. -// * @returns A rendered template. -// */ -// protected render(): TemplateResult | void { -// const results = this.view?.queryResults?.getResults(); + if ( + !results || + !this.hass || + !this.view || + !this.view.isGalleryView() || + !this.cameras + ) { + return html``; + } -// if ( -// !results || -// !this.hass || -// !this.view || -// !this.view.isGalleryView() || -// !this.cameras -// ) { -// return html``; -// } + return html` ${results.map( + (media, index) => + html` { + if (this.view) { + this.view + .evolve({ + view: 'media', + queryResults: this.view.queryResults?.clone().selectResult(index), + }) + .dispatchChangeEvent(this); + } + stopEventFromActivatingCardWideActions(ev); + }} + > + `, + )}`; + } -// return html` -// ${this._shouldShowBackArrow() -// ? html` { -// if (this.view && this.view.context?.gallery?.previous) { -// this.view.context.gallery.previous.dispatchChangeEvent(this); -// } -// stopEventFromActivatingCardWideActions(ev); -// }} -// outlined="" -// > -// -// ` -// : ''} -// ${results.map((child, index) => -// html` -// ${child.can_expand -// ? html` -// { -// if (this.hass && this.view) { -// fetchChildMediaAndDispatchViewChange( -// this, -// this.hass, -// this.view, -// child, -// { -// gallery: { -// previous: this.view, -// }, -// }, -// ); -// } -// stopEventFromActivatingCardWideActions(ev); -// }} -// outlined="" -// > -//
${child.title}
-// -// ` -// : html` { -// if (this.view) { -// const targetView = this.view.getViewerViewForGalleryView(); -// if (targetView) { -// this.view -// .evolve({ -// view: targetView, -// childIndex: index, -// }) -// .dispatchChangeEvent(this); -// } -// } -// stopEventFromActivatingCardWideActions(ev); -// }} -// > -// `} -// `, -// )} -// `; -// } - -// /** -// * Get styles. -// */ -// static get styles(): CSSResultGroup { -// return unsafeCSS(galleryStyle); -// } -// } + /** + * Get styles. + */ + static get styles(): CSSResultGroup { + return unsafeCSS(galleryStyle); + } +} declare global { interface HTMLElementTagNameMap { - //'frigate-card-gallery-core': FrigateCardGalleryCore; + 'frigate-card-gallery-core': FrigateCardGalleryCore; 'frigate-card-gallery': FrigateCardGallery; } }