flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert gallery to new engine (initial draft).

Browse Source
This commit is contained in:
Dermot Duffy
2023-01-24 19:36:54 -08:00
parent 33e7f308ed
commit 7b0cde0e50
1 changed files with 175 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/gallery.ts
+175 -241
View File
@@ -19,25 +19,15 @@ import {
} from '../types.js'; } from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { import {
getFullDependentBrowseMediaQueryParametersOrDispatchError, changeViewToRecentEventsForCameraAndDependents,
} from '../utils/ha/browse-media'; changeViewToRecentRecordingForCameraAndDependents,
import { changeViewToRecentEventsForCameraAndDependents, changeViewToRecentRecordingForCameraAndDependents } from '../utils/media-to-view.js'; } from '../utils/media-to-view.js';
import { CameraManager } from '../camera/manager.js'; import { CameraManager } from '../camera/manager.js';
import { View } from '../view/view.js'; import { View } from '../view/view.js';
import { renderProgressIndicator } from './message.js'; import { renderProgressIndicator } from './message.js';
import './thumbnail.js'; import './thumbnail.js';
import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js'; import { THUMBNAIL_DETAILS_WIDTH_MIN } from './thumbnail.js';
import './media-filter';
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;
}
}
@customElement('frigate-card-gallery') @customElement('frigate-card-gallery')
export class FrigateCardGallery extends LitElement { export class FrigateCardGallery extends LitElement {
@@ -64,54 +54,55 @@ export class FrigateCardGallery extends LitElement {
* @returns A rendered template. * @returns A rendered template.
*/ */
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
// const mediaType = this.view?.getMediaType(); if (
// if ( !this.hass ||
// !this.hass || !this.view ||
// !this.view || !this.cameras ||
// !this.cameras || !this.view.isGalleryView() ||
// !this.view.isGalleryView() || !this.cameraManager
// !mediaType || ) {
// !this.cameraManager return;
// ) { }
// return;
// }
// if (!this.view.query) { if (!this.view.query) {
// if (mediaType === 'recordings') { if (this.view.is('recordings')) {
// changeViewToRecentRecordingForCameraAndDependents( changeViewToRecentRecordingForCameraAndDependents(
// this, this,
// this.hass, this.hass,
// this.cameraManager, this.cameraManager,
// this.cameras, this.cameras,
// this.view, this.view,
// { );
// targetView: 'recordings', } else {
// }, const mediaType = this.view.is('snapshots')
// ); ? 'snapshots'
// } else { : this.view.is('clips')
// changeViewToRecentEventsForCameraAndDependents( ? 'clips'
// this, : null;
// this.hass, changeViewToRecentEventsForCameraAndDependents(
// this.cameraManager, this,
// this.cameras, this.hass,
// this.view, this.cameraManager,
// { this.cameras,
// targetView: mediaType, this.view,
// }, {
// ); ...(mediaType && { mediaType: mediaType }),
// } },
// return renderProgressIndicator({ cardWideConfig: this.cardWideConfig }); );
// } }
return renderProgressIndicator({ cardWideConfig: this.cardWideConfig });
}
// return html` return html`
// <frigate-card-gallery-core <frigate-card-gallery-core
// .hass=${this.hass} .hass=${this.hass}
// .view=${this.view} .view=${this.view}
// .galleryConfig=${this.galleryConfig} .galleryConfig=${this.galleryConfig}
// .cameras=${this.cameras} .cameras=${this.cameras}
// > .cameraManager=${this.cameraManager}
// </frigate-card-gallery-core> >
// `; </frigate-card-gallery-core>
`;
} }
/** /**
@@ -128,206 +119,149 @@ export class FrigateCardGallery extends LitElement {
} }
} }
// @customElement('frigate-card-gallery-core') @customElement('frigate-card-gallery-core')
// export class FrigateCardGalleryCore extends LitElement { export class FrigateCardGalleryCore extends LitElement {
// @property({ attribute: false }) @property({ attribute: false })
// public hass?: ExtendedHomeAssistant; public hass?: ExtendedHomeAssistant;
// @property({ attribute: false }) @property({ attribute: false })
// public view?: Readonly<View>; public view?: Readonly<View>;
// @property({ attribute: false }) @property({ attribute: false })
// public galleryConfig?: GalleryConfig; public galleryConfig?: GalleryConfig;
// @property({ attribute: false }) @property({ attribute: false })
// public cameras?: Map<string, CameraConfig>; public cameras?: Map<string, CameraConfig>;
// protected _resizeObserver: ResizeObserver; @property({ attribute: false })
public cameraManager?: CameraManager;
// constructor() { protected _resizeObserver: ResizeObserver;
// super();
// this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
// }
// /** constructor() {
// * Component connected callback. super();
// */ this._resizeObserver = new ResizeObserver(this._resizeHandler.bind(this));
// connectedCallback(): void { }
// super.connectedCallback();
// this._resizeObserver.observe(this);
// }
// /** /**
// * Component disconnected callback. * Component connected callback.
// */ */
// disconnectedCallback(): void { connectedCallback(): void {
// this._resizeObserver.disconnect(); super.connectedCallback();
// super.disconnectedCallback(); this._resizeObserver.observe(this);
// } }
// /** /**
// * Set gallery columns. * Component disconnected callback.
// */ */
// protected _setColumnCount(): void { disconnectedCallback(): void {
// const thumbnailSize = this._resizeObserver.disconnect();
// this.galleryConfig?.controls.thumbnails.size ?? super.disconnectedCallback();
// 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),
// );
// 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),
);
// /** this.style.setProperty('--frigate-card-gallery-columns', String(columns));
// * Handle gallery resize. }
// */
// protected _resizeHandler(): void {
// this._setColumnCount();
// }
// /** /**
// * Determine whether the back arrow should be displayed. * Handle gallery resize.
// * @returns `true` if the back arrow should be displayed, `false` otherwise. */
// */ protected _resizeHandler(): void {
// protected _shouldShowBackArrow(): boolean { this._setColumnCount();
// return ( }
// !!this.view?.context?.gallery?.previous &&
// !!this.view.context.gallery.previous.query &&
// this.view.context.gallery.previous.view === this.view.view
// );
// }
// /** /**
// * Called when an update will occur. * Called when an update will occur.
// * @param changedProps The changed properties * @param changedProps The changed properties
// */ */
// protected willUpdate(changedProps: PropertyValues): void { protected willUpdate(changedProps: PropertyValues): void {
// if (changedProps.has('galleryConfig')) { if (changedProps.has('galleryConfig')) {
// if (this.galleryConfig?.controls.thumbnails.show_details) { if (this.galleryConfig?.controls.thumbnails.show_details) {
// this.setAttribute('details', ''); this.setAttribute('details', '');
// } else { } else {
// this.removeAttribute('details'); this.removeAttribute('details');
// } }
// this._setColumnCount(); this._setColumnCount();
// if (this.galleryConfig?.controls.thumbnails.size) { if (this.galleryConfig?.controls.thumbnails.size) {
// this.style.setProperty( this.style.setProperty(
// '--frigate-card-thumbnail-size', '--frigate-card-thumbnail-size',
// `${this.galleryConfig.controls.thumbnails.size}px`, `${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();
// /** if (
// * Master render method. !results ||
// * @returns A rendered template. !this.hass ||
// */ !this.view ||
// protected render(): TemplateResult | void { !this.view.isGalleryView() ||
// const results = this.view?.queryResults?.getResults(); !this.cameras
) {
return html``;
}
// if ( return html` ${results.map(
// !results || (media, index) =>
// !this.hass || html`<frigate-card-thumbnail
// !this.view || .hass=${this.hass}
// !this.view.isGalleryView() || .cameraManager=${this.cameraManager}
// !this.cameras .media=${media}
// ) { .cameraConfig=${this.cameras?.get(media.getCameraID())}
// return html``; .view=${this.view}
// } ?details=${!!this.galleryConfig?.controls.thumbnails.show_details}
?show_favorite_control=${!!this.galleryConfig?.controls.thumbnails
.show_favorite_control}
?show_timeline_control=${!!this.galleryConfig?.controls.thumbnails
.show_timeline_control}
@click=${(ev: Event) => {
if (this.view) {
this.view
.evolve({
view: 'media',
queryResults: this.view.queryResults?.clone().selectResult(index),
})
.dispatchChangeEvent(this);
}
stopEventFromActivatingCardWideActions(ev);
}}
>
</frigate-card-thumbnail>`,
)}`;
}
// return html` /**
// ${this._shouldShowBackArrow() * Get styles.
// ? html` <ha-card */
// @click=${(ev) => { static get styles(): CSSResultGroup {
// if (this.view && this.view.context?.gallery?.previous) { return unsafeCSS(galleryStyle);
// this.view.context.gallery.previous.dispatchChangeEvent(this); }
// } }
// stopEventFromActivatingCardWideActions(ev);
// }}
// outlined=""
// >
// <ha-icon .icon=${'mdi:arrow-left'}></ha-icon>
// </ha-card>`
// : ''}
// ${results.map((child, index) =>
// html`
// ${child.can_expand
// ? html`
// <ha-card
// @click=${(ev) => {
// if (this.hass && this.view) {
// fetchChildMediaAndDispatchViewChange(
// this,
// this.hass,
// this.view,
// child,
// {
// gallery: {
// previous: this.view,
// },
// },
// );
// }
// stopEventFromActivatingCardWideActions(ev);
// }}
// outlined=""
// >
// <div>${child.title}</div>
// </ha-card>
// `
// : html`<frigate-card-thumbnail
// .view=${this.view}
// .target=${this.view?.target ?? null}
// .childIndex=${index}
// .hass=${this.hass}
// .cameraConfig=${child.frigate?.cameraID
// ? this.cameras?.get(child.frigate.cameraID)
// : undefined}
// ?details=${!!this.galleryConfig?.controls.thumbnails.show_details}
// ?show_favorite_control=${!!this.galleryConfig?.controls.thumbnails
// .show_favorite_control}
// ?show_timeline_control=${!!this.galleryConfig?.controls.thumbnails
// .show_timeline_control}
// @click=${(ev: Event) => {
// if (this.view) {
// const targetView = this.view.getViewerViewForGalleryView();
// if (targetView) {
// this.view
// .evolve({
// view: targetView,
// childIndex: index,
// })
// .dispatchChangeEvent(this);
// }
// }
// stopEventFromActivatingCardWideActions(ev);
// }}
// >
// </frigate-card-thumbnail>`}
// `,
// )}
// `;
// }
// /**
// * Get styles.
// */
// static get styles(): CSSResultGroup {
// return unsafeCSS(galleryStyle);
// }
// }
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
//'frigate-card-gallery-core': FrigateCardGalleryCore; 'frigate-card-gallery-core': FrigateCardGalleryCore;
'frigate-card-gallery': FrigateCardGallery; 'frigate-card-gallery': FrigateCardGallery;
} }
} }