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

Add event starring from the card.

Browse Source
This commit is contained in:
Dermot Duffy
2022-06-28 20:19:32 -07:00
parent 7f430298da
commit 0f04e9383a
15 changed files with 152 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/gallery.ts
+9 -1
View File
@@ -86,6 +86,7 @@ export class FrigateCardGallery extends LitElement {
.hass=${this.hass}
.view=${this.view}
.galleryConfig=${this.galleryConfig}
.cameras=${this.cameras}
>
</frigate-card-gallery-core>
`;
@@ -116,6 +117,9 @@ export class FrigateCardGalleryCore extends LitElement {
@property({ attribute: false })
public galleryConfig?: GalleryConfig;
@property({ attribute: false })
public cameras?: Map<string, CameraConfig>;
protected _resizeObserver: ResizeObserver;
constructor() {
@@ -207,11 +211,13 @@ export class FrigateCardGalleryCore extends LitElement {
!this.view ||
!this.view.target ||
!this.view.target.children ||
!(this.view.is('clips') || this.view.is('snapshots'))
!(this.view.is('clips') || this.view.is('snapshots')) ||
!this.cameras
) {
return html``;
}
const cameraConfig = this.cameras.get(this.view.camera);
return html`
${this._showBackArrow()
? html` <ha-card
@@ -253,6 +259,8 @@ export class FrigateCardGalleryCore extends LitElement {
.view=${this.view}
.target=${this.view?.target ?? null}
.childIndex=${index}
.hass=${this.hass}
.clientID=${cameraConfig?.frigate.client_id}
?details=${!!this.galleryConfig?.controls.thumbnails.show_details}
?controls=${!!this.galleryConfig?.controls.thumbnails.show_controls}
@click=${(ev: Event) => {
src/components/live.ts
+1
View File
@@ -146,6 +146,7 @@ export class FrigateCardLive extends LitElement {
.view=${this.view}
.config=${config.controls.thumbnails}
.browseMediaParams=${browseMediaParams ?? undefined}
.cameras=${this.cameras}
?fetch=${!this._preloaded}
>
<frigate-card-live-carousel
src/components/surround-thumbnails.ts
+6
View File
@@ -11,6 +11,7 @@ import { customElement, property } from 'lit/decorators.js';
import surroundThumbnailsStyle from '../scss/surround.scss';
import {
BrowseMediaQueryParameters,
CameraConfig,
FrigateBrowseMediaSource,
FrigateCardError,
FrigateCardView,
@@ -46,6 +47,9 @@ export class FrigateCardSurround extends LitElement {
@property({ attribute: false, hasChanged: contentsChanged })
public browseMediaParams?: BrowseMediaQueryParameters | BrowseMediaQueryParameters[];
@property({ attribute: false })
public cameras?: Map<string, CameraConfig>;
/**
* Fetch thumbnail media when a target is not specified in the view (e.g. for
* the live view).
@@ -137,10 +141,12 @@ export class FrigateCardSurround extends LitElement {
${this.config && this.config.mode !== 'none'
? html` <frigate-card-thumbnail-carousel
slot=${this.config.mode}
.hass=${this.hass}
.config=${this.config}
.view=${this.view}
.target=${this.view.target}
.selected=${this.view.childIndex}
.cameras=${this.cameras}
@frigate-card:change-view=${(ev: CustomEvent) => changeDrawer(ev, 'close')}
@frigate-card:carousel:tap=${(ev: CustomEvent<ThumbnailCarouselTap>) => {
// Send the view change from the source of the tap event, so the
src/components/thumbnail-carousel.ts
+11 -1
View File
@@ -1,10 +1,11 @@
import { HomeAssistant } from 'custom-card-helpers';
import { EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
import { CSSResultGroup, html, PropertyValues, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import thumbnailCarouselStyle from '../scss/thumbnail-carousel.scss';
import type { FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import type { CameraConfig, FrigateBrowseMediaSource, ThumbnailsControlConfig } from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { contentsChanged, dispatchFrigateCardEvent } from '../utils/basic.js';
import { isTrueMedia } from '../utils/ha/browse-media';
@@ -20,6 +21,9 @@ export interface ThumbnailCarouselTap {
@customElement('frigate-card-thumbnail-carousel')
export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
@property({ attribute: false })
public hass?: HomeAssistant;
@property({ attribute: false })
public view?: Readonly<View>;
@@ -28,6 +32,9 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
@property({ attribute: false, hasChanged: contentsChanged })
public target?: FrigateBrowseMediaSource | null;
@property({ attribute: false })
public cameras?: Map<string, CameraConfig>;
// Thumbnail carousels can expand (e.g. drawer-based carousels after the main
// media loads). The carousel must be re-initialized in these cases, or the
// dynamic sizing fails (and users can scroll past the end of the carousel).
@@ -195,10 +202,13 @@ export class FrigateCardThumbnailCarousel extends FrigateCardCarousel {
'slide-selected': this._selected === childIndex,
};
const cameraConfig = this.view?.camera ? this.cameras?.get(this.view.camera) : null;
return html` <frigate-card-thumbnail
.hass=${this.hass}
.view=${this.view}
.target=${parent}
.childIndex=${childIndex}
.clientID=${cameraConfig?.frigate.client_id}
?details=${this._config?.show_details}
?controls=${this._config?.show_controls}
class="${classMap(classes)}"
src/components/thumbnail.ts
+49 -12
View File
@@ -1,6 +1,8 @@
import { HomeAssistant } from 'custom-card-helpers';
import { format, fromUnixTime } from 'date-fns';
import { CSSResult, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { localize } from '../localize/localize.js';
import thumbnailDetailsStyle from '../scss/thumbnail-details.scss';
import thumbnailFeatureEventStyle from '../scss/thumbnail-feature-event.scss';
@@ -9,10 +11,11 @@ import thumbnailStyle from '../scss/thumbnail.scss';
import type {
FrigateBrowseMediaSource,
FrigateEvent,
FrigateRecording
FrigateRecording,
} from '../types.js';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { prettifyTitle } from '../utils/basic.js';
import { errorToConsole, prettifyTitle } from '../utils/basic.js';
import { retainEvent } from '../utils/frigate.js';
import { getEventDurationString } from '../utils/ha/browse-media.js';
import { View } from '../view.js';
@@ -152,6 +155,15 @@ export class FrigateCardThumbnail extends LitElement {
@property({ attribute: true })
public event?: string;
// ================================
// Optional parameters for controls
// ================================
@property({ attribute: false })
public hass?: HomeAssistant;
@property({ attribute: false })
public clientID?: string;
/**
* Render the element.
* @returns A template to display to the user.
@@ -182,6 +194,11 @@ export class FrigateCardThumbnail extends LitElement {
return;
}
const starClasses = {
star: true,
starred: !!event?.retain_indefinitely,
};
return html` ${event
? html`<frigate-card-thumbnail-feature-event
aria-label="${label ?? ''}"
@@ -194,11 +211,31 @@ export class FrigateCardThumbnail extends LitElement {
title="${label ?? ''}"
.date=${recording ? fromUnixTime(recording.start_time) : undefined}
></frigate-card-thumbnail-feature-recording>`}
${this.controls && event?.retain_indefinitely
${this.controls && this.hass && this.clientID
? html` <ha-icon
class="favorite"
icon="mdi:star"
class="${classMap(starClasses)}"
icon=${event?.retain_indefinitely ? 'mdi:star' : 'mdi:star-outline'}
title=${localize('thumbnail.retain_indefinitely')}
@click=${(ev: Event) => {
stopEventFromActivatingCardWideActions(ev);
if (event && this.hass && this.clientID) {
retainEvent(
this.hass,
this.clientID,
event.id,
!event.retain_indefinitely,
)
.then(() => {
if (event) {
event.retain_indefinitely = !event.retain_indefinitely;
this.requestUpdate();
}
})
.catch((e) => {
errorToConsole(e);
});
}
}}
/></ha-icon>`
: ``}
${this.details && event
@@ -255,11 +292,11 @@ export class FrigateCardThumbnail extends LitElement {
}
declare global {
interface HTMLElementTagNameMap {
"frigate-card-thumbnail": FrigateCardThumbnail
"frigate-card-thumbnail-details-recording": FrigateCardThumbnailDetailsRecording
"frigate-card-thumbnail-details-event": FrigateCardThumbnailDetailsEvent
"frigate-card-thumbnail-feature-recording": FrigateCardThumbnailFeatureRecording
"frigate-card-thumbnail-feature-event": FrigateCardThumbnailFeatureEvent
}
interface HTMLElementTagNameMap {
'frigate-card-thumbnail': FrigateCardThumbnail;
'frigate-card-thumbnail-details-recording': FrigateCardThumbnailDetailsRecording;
'frigate-card-thumbnail-details-event': FrigateCardThumbnailDetailsEvent;
'frigate-card-thumbnail-feature-recording': FrigateCardThumbnailFeatureRecording;
'frigate-card-thumbnail-feature-event': FrigateCardThumbnailFeatureEvent;
}
}
src/components/timeline.ts
+1
View File
@@ -450,6 +450,7 @@ export class FrigateCardTimeline extends LitElement {
.hass=${this.hass}
.view=${this.view}
.config=${this.timelineConfig.controls.thumbnails}
.cameras=${this.cameras}
>
<frigate-card-timeline-core
.hass=${this.hass}
src/components/viewer.ts
+1
View File
@@ -109,6 +109,7 @@ export class FrigateCardViewer extends LitElement {
.hass=${this.hass}
.view=${this.view}
.config=${this.viewerConfig.controls.thumbnails}
.cameras=${this.cameras}
>
<frigate-card-viewer-carousel
.hass=${this.hass}