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';
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`
// <frigate-card-gallery-core
// .hass=${this.hass}
// .view=${this.view}
// .galleryConfig=${this.galleryConfig}
// .cameras=${this.cameras}
// >
// </frigate-card-gallery-core>
// `;
return html`
<frigate-card-gallery-core
.hass=${this.hass}
.view=${this.view}
.galleryConfig=${this.galleryConfig}
.cameras=${this.cameras}
.cameraManager=${this.cameraManager}
>
</frigate-card-gallery-core>
`;
}
/**
@@ -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<View>;
@property({ attribute: false })
public view?: Readonly<View>;
// @property({ attribute: false })
// public galleryConfig?: GalleryConfig;
@property({ attribute: false })
public galleryConfig?: GalleryConfig;
// @property({ attribute: false })
// public cameras?: Map<string, CameraConfig>;
@property({ attribute: false })
public cameras?: Map<string, CameraConfig>;
// 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`<frigate-card-thumbnail
.hass=${this.hass}
.cameraManager=${this.cameraManager}
.media=${media}
.cameraConfig=${this.cameras?.get(media.getCameraID())}
.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()
// ? html` <ha-card
// @click=${(ev) => {
// if (this.view && this.view.context?.gallery?.previous) {
// 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);
// }
// }
/**
* 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;
}
}