+### Single Camera Recordings
+
+View recordings for a camera across time:
+
+
+
+### Multiple Camera Recordings
+
+View recordings for multiple cameras at a given time:
+
+
+
+### Dark Mode
+
+Dim the card when not used.
+
+
+
Expand: Event Viewer section
+Expand: Media Viewer section
-Reference: [Event Viewer Options](#event-viewer-options). +Reference: [Media Viewer Options](#event-viewer-options). ```yaml -event_viewer: +media_viewer: auto_play: all auto_pause: all auto_mute: all @@ -1617,6 +1640,7 @@ Reference: [Timeline Options](#timeline-options). timeline: clustering_threshold: 3 media: all + show_recordings: true window_seconds: 3600 controls: thumbnails: @@ -2559,6 +2583,14 @@ You must be using a version of the [Frigate integration](https://github.com/blak to use JSMPEG proxying. The `frigate-jsmpeg` live provider will not work with earlier integration versions. + +### Timeline shows error message + +If the timeline shows a message such as `Failed to receive response from Home +Assistant for request.` make sure you are running a version of the [Frigate +integration](https://github.com/blakeblackshear/frigate-hass-integration) >= +3.0.0. + ### Fullscreen Button Does Not Appear On iPhone Unfortunately, [iOS does not support the Javascript fullscreen @@ -2602,7 +2634,7 @@ Dragging the Safari video controls "progress bar" conflicts with carousel "dragg ```yaml live: draggable: false -event_viewer: +media_viewer: draggable: false ``` diff --git a/images/dark-mode.gif b/images/dark-mode.gif new file mode 100644 index 00000000..cf21c4f8 Binary files /dev/null and b/images/dark-mode.gif differ diff --git a/images/recording-seek-all-cameras.gif b/images/recording-seek-all-cameras.gif new file mode 100644 index 00000000..4878c5a8 Binary files /dev/null and b/images/recording-seek-all-cameras.gif differ diff --git a/images/recording-seek.gif b/images/recording-seek.gif new file mode 100644 index 00000000..26573faf Binary files /dev/null and b/images/recording-seek.gif differ diff --git a/src/card.ts b/src/card.ts index e0a2f98c..ddbf2987 100644 --- a/src/card.ts +++ b/src/card.ts @@ -5,7 +5,7 @@ import { LitElement, PropertyValues, TemplateResult, - unsafeCSS, + unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -20,7 +20,7 @@ import { ConditionState, conditionStateRequestHandler, getOverriddenConfig, - getOverridesByKey, + getOverridesByKey } from './card-condition.js'; import './components/elements.js'; import { FrigateCardElements } from './components/elements.js'; @@ -40,7 +40,7 @@ import { CAMERA_BIRDSEYE, CARD_VERSION, MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA, - REPO_URL, + REPO_URL } from './const.js'; import './editor.js'; import { localize } from './localize/localize.js'; @@ -63,14 +63,14 @@ import { MediaShowInfo, MenuButton, Message, - RawFrigateCardConfig, + RawFrigateCardConfig } from './types.js'; import { convertActionToFrigateCardCustomAction, createFrigateCardCustomAction, frigateCardHandleAction, frigateCardHasAction, - getActionConfigGivenAction, + getActionConfigGivenAction } from './utils/action.js'; import { contentsChanged } from './utils/basic.js'; import { getCameraIcon, getCameraID, getCameraTitle } from './utils/camera.js'; @@ -81,14 +81,14 @@ import { homeAssistantSignPath, isHassDifferent, isTriggeredState, - sideLoadHomeAssistantElements, + sideLoadHomeAssistantElements } from './utils/ha'; import { getEventID } from './utils/ha/browse-media.js'; import { ExtendedEntityCache, getAllEntities, getExtendedEntities, - getExtendedEntity, + getExtendedEntity } from './utils/ha/entity-registry.js'; import { ResolvedMediaCache } from './utils/ha/resolved-media.js'; import { supportsFeature } from './utils/ha/update.js'; @@ -975,7 +975,7 @@ export class FrigateCard extends LitElement { * @returns A boolean indicating whether the camera was changed. */ protected _updateTriggeredCameras(oldHass: HomeAssistant): boolean { - if (!this._view) { + if (!this._view || !this._isAutomatedViewUpdateAllowed(true)) { return false; } @@ -1001,7 +1001,7 @@ export class FrigateCard extends LitElement { } } - if (triggerChanges && this._isAutomatedViewUpdateAllowed(true)) { + if (triggerChanges) { if (!this._triggers.size) { this._changeView(); changedCamera = true; @@ -1545,7 +1545,7 @@ export class FrigateCard extends LitElement { } else if (this._view?.isGalleryView()) { specificActions = this._getConfig().event_gallery?.actions; } else if (this._view?.isViewerView()) { - specificActions = this._getConfig().event_viewer.actions; + specificActions = this._getConfig().media_viewer.actions; } else if (this._view?.is('image')) { specificActions = this._getConfig().image?.actions; } else if (this._view?.is('timeline')) { @@ -1678,7 +1678,7 @@ export class FrigateCard extends LitElement { .hass=${this._hass} .view=${this._view} .cameras=${this._cameras} - .viewerConfig=${this._getConfig().event_viewer} + .viewerConfig=${this._getConfig().media_viewer} .resolvedMediaCache=${this._resolvedMediaCache} > ` diff --git a/src/components/elements.ts b/src/components/elements.ts index e815a5fe..10960763 100644 --- a/src/components/elements.ts +++ b/src/components/elements.ts @@ -12,6 +12,7 @@ import { ConditionState, fetchStateAndEvaluateCondition } from '../card-conditio import { localize } from '../localize/localize.js'; import elementsStyle from '../scss/elements.scss'; import { + FrigateCardError, FrigateConditional, MenuButton, MenuIcon, @@ -21,7 +22,7 @@ import { PictureElements } from '../types.js'; import { dispatchFrigateCardEvent } from '../utils/basic.js'; -import { dispatchErrorMessageEvent } from './message.js'; +import { dispatchFrigateCardErrorEvent } from './message.js'; /* A note on picture element rendering: * @@ -108,7 +109,7 @@ export class FrigateCardElementsCore extends LitElement { element.setConfig(config); } catch (e) { console.error(e, (e as Error).stack); - throw new Error(localize('error.invalid_elements_config')); + throw new FrigateCardError(localize('error.invalid_elements_config')); } return element; } @@ -125,7 +126,7 @@ export class FrigateCardElementsCore extends LitElement { this._root = this._createRoot(); } } catch (e) { - return dispatchErrorMessageEvent(this, (e as Error).message); + return dispatchFrigateCardErrorEvent(this, e as FrigateCardError); } } diff --git a/src/components/gallery.ts b/src/components/gallery.ts index 80fabf2a..92cb52d8 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -11,7 +11,12 @@ import { } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import galleryStyle from '../scss/gallery.scss'; -import { CameraConfig, frigateCardConfigDefaults, GalleryConfig } from '../types.js'; +import { + CameraConfig, + frigateCardConfigDefaults, + GalleryConfig, + THUMBNAIL_WIDTH_MAX +} from '../types.js'; import { stopEventFromActivatingCardWideActions } from '../utils/action.js'; import { fetchChildMediaAndDispatchViewChange, @@ -135,20 +140,28 @@ export class FrigateCardGalleryCore extends LitElement { } /** - * Handle gallery resize. + * Set gallery columns. */ - protected _resizeHandler(): void { + protected _setColumnCount(): void { const thumbnailSize = this.galleryConfig?.controls.thumbnails.size ?? frigateCardConfigDefaults.event_gallery.controls.thumbnails.size; - this.style.setProperty( - '--frigate-card-gallery-columns', - String( - !this.galleryConfig?.controls.thumbnails.show_details - ? Math.round(this.clientWidth / thumbnailSize) - : Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN)), - ), - ); + 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(); } /** @@ -174,6 +187,7 @@ export class FrigateCardGalleryCore extends LitElement { } else { this.removeAttribute('details'); } + this._setColumnCount(); if (this.galleryConfig?.controls.thumbnails.size) { this.style.setProperty( '--frigate-card-thumbnail-size', @@ -230,7 +244,6 @@ export class FrigateCardGalleryCore extends LitElement { stopEventFromActivatingCardWideActions(ev); }} outlined="" - class="foo" >${child.title}
diff --git a/src/components/live.ts b/src/components/live.ts
index 8cf3c6f0..9b408375 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -612,6 +612,13 @@ export class FrigateCardLiveProvider extends LitElement {
this._providerRef.value?.unmute();
}
+ /**
+ * Seek the video.
+ */
+ public seek(seconds: number): void {
+ this._providerRef.value?.seek(seconds);
+ }
+
protected _getResolvedProvider(): LiveProvider {
if (this.cameraConfig?.live_provider === 'auto') {
if (
@@ -711,6 +718,13 @@ export class FrigateCardLiveFrigate extends LitElement {
this._playerRef.value?.unmute();
}
+ /**
+ * Seek the video.
+ */
+ public seek(seconds: number): void {
+ this._playerRef.value?.seek(seconds);
+ }
+
/**
* Master render method.
* @returns A rendered template.
@@ -810,6 +824,16 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
}
}
+ /**
+ * Seek the video.
+ */
+ public seek(seconds: number): void {
+ const player = this._getPlayer();
+ if (player) {
+ player.currentTime = seconds;
+ }
+ }
+
/**
* Get the underlying video player.
* @returns The player or `null` if not found.
@@ -867,8 +891,9 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
return dispatchErrorMessageEvent(
this,
e instanceof FrigateCardError
- ? (e as FrigateCardError).message
+ ? e.message
: localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message,
+ (e as FrigateCardError).context
);
}
return html`${webrtcElement}`;
@@ -964,6 +989,14 @@ export class FrigateCardLiveJSMPEG extends LitElement {
}
}
+ /**
+ * Seek the video (unsupported).
+ */
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ public seek(_seconds: number): void {
+ // JSMPEG does not support seeking.
+ }
+
/**
* Get a signed player URL.
* @returns A URL or null.
diff --git a/src/components/message.ts b/src/components/message.ts
index 12547788..74156297 100644
--- a/src/components/message.ts
+++ b/src/components/message.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { TROUBLESHOOTING_URL } from '../const.js';
import { localize } from '../localize/localize.js';
import messageStyle from '../scss/message.scss';
-import { Message } from '../types.js';
+import { FrigateCardError, Message } from '../types.js';
import { dispatchFrigateCardEvent } from '../utils/basic.js';
@customElement('frigate-card-message')
@@ -140,3 +140,19 @@ export function dispatchErrorMessageEvent(
context: context,
});
}
+
+/**
+ * Dispatch an event with an error message to show to the user.
+ * @param element The element to send the event.
+ * @param message The message to show.
+ */
+export function dispatchFrigateCardErrorEvent(
+ element: HTMLElement,
+ error: FrigateCardError
+): void {
+ dispatchFrigateCardEvent${format(this.date, 'HH:mm')}
+ ${format(this.date, 'MMM do')}
+ `;
+ }
+
+ static get styles(): CSSResult {
+ return unsafeCSS(thumbnailFeatureRecordingStyle);
+ }
+}
+
+@customElement('frigate-card-thumbnail-details-event')
+export class FrigateCardThumbnailDetailsEvent extends LitElement {
@property({ attribute: false })
public event?: FrigateEvent;
@@ -39,9 +86,35 @@ export class FrigateCardThumbnailDetails extends LitElement {
`;
}
- /**
- * Get element styles.
- */
+ static get styles(): CSSResult {
+ return unsafeCSS(thumbnailDetailsStyle);
+ }
+}
+
+@customElement('frigate-card-thumbnail-details-recording')
+export class FrigateCardThumbnailDetailsRecording extends LitElement {
+ @property({ attribute: false })
+ public recording?: FrigateRecording;
+
+ protected render(): TemplateResult | void {
+ if (!this.recording) {
+ return;
+ }
+ return html`
+
+ ${prettifyTitle(this.recording.camera) || ''}
+ ${this.recording.seek_time
+ ? html`
+ ${localize('recording.seek')}
+ ${format(fromUnixTime(this.recording.seek_time), 'HH:mm:ss')}
+
`
+ : html``}
+
+ ${this.recording.events}
+ ${localize('recording.events')}
+
`;
+ }
+
static get styles(): CSSResult {
return unsafeCSS(thumbnailDetailsStyle);
}
@@ -55,11 +128,6 @@ export class FrigateCardThumbnail extends LitElement {
@property({ attribute: true, type: Boolean })
public controls = false;
- @property({ attribute: true, type: Number })
- set thumbnail_size(size: number) {
- this.style.setProperty('--frigate-card-thumbnail-size', `${size}px`);
- }
-
// ============================
// Data-binding based interface
// ============================
@@ -90,6 +158,7 @@ export class FrigateCardThumbnail extends LitElement {
*/
protected render(): TemplateResult | void {
let event: FrigateEvent | null = null;
+ let recording: FrigateRecording | null = null;
let thumbnail: string | null = null;
let label: string | null = null;
@@ -97,6 +166,7 @@ export class FrigateCardThumbnail extends LitElement {
if (this.target && this.target.children && this.childIndex !== undefined) {
const media = this.target.children[this.childIndex];
event = media.frigate?.event ?? null;
+ recording = media.frigate?.recording ?? null;
thumbnail = media.thumbnail;
label = media.title;
}
@@ -108,34 +178,46 @@ export class FrigateCardThumbnail extends LitElement {
thumbnail = this.thumbnail ? this.thumbnail : thumbnail;
label = this.label ? this.label : label;
- if (!thumbnail) {
+ if (!event && !recording) {
return;
}
- return html`
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_AUTO_PLAY,
+ CONF_MEDIA_VIEWER_AUTO_PLAY,
this._mediaActionPositiveConditions,
)}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_AUTO_PAUSE,
+ CONF_MEDIA_VIEWER_AUTO_PAUSE,
this._mediaActionNegativeConditions,
)}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_AUTO_MUTE,
+ CONF_MEDIA_VIEWER_AUTO_MUTE,
this._mediaActionNegativeConditions,
)}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_AUTO_UNMUTE,
+ CONF_MEDIA_VIEWER_AUTO_UNMUTE,
this._mediaActionPositiveConditions,
)}
${this._renderSwitch(
- CONF_EVENT_VIEWER_DRAGGABLE,
- defaults.event_viewer.draggable,
+ CONF_MEDIA_VIEWER_DRAGGABLE,
+ defaults.media_viewer.draggable,
)}
${this._renderSwitch(
- CONF_EVENT_VIEWER_LAZY_LOAD,
- defaults.event_viewer.lazy_load,
+ CONF_MEDIA_VIEWER_LAZY_LOAD,
+ defaults.media_viewer.lazy_load,
)}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
+ CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
this._eventViewerNextPreviousControlStyles,
)}
- ${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
+ ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE, {
min: BUTTON_SIZE_MIN,
})}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
+ CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
)}
- ${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
+ ${this._renderNumberInput(CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SIZE, {
min: THUMBNAIL_WIDTH_MIN,
max: THUMBNAIL_WIDTH_MAX,
})}
${this._renderSwitch(
- CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
- defaults.event_viewer.controls.thumbnails.show_details,
+ CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
+ defaults.media_viewer.controls.thumbnails.show_details,
)}
${this._renderSwitch(
- CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
- defaults.event_viewer.controls.thumbnails.show_controls,
+ CONF_MEDIA_VIEWER_CONTROLS_THUMBNAILS_SHOW_CONTROLS,
+ defaults.media_viewer.controls.thumbnails.show_controls,
)}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_CONTROLS_TITLE_MODE,
+ CONF_MEDIA_VIEWER_CONTROLS_TITLE_MODE,
this._titleModes,
)}
${this._renderNumberInput(
- CONF_EVENT_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
+ CONF_MEDIA_VIEWER_CONTROLS_TITLE_DURATION_SECONDS,
{ min: 0, max: 60 },
)}
${this._renderOptionSelector(
- CONF_EVENT_VIEWER_TRANSITION_EFFECT,
+ CONF_MEDIA_VIEWER_TRANSITION_EFFECT,
this._transitionEffects,
)}
`
@@ -1223,6 +1221,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_TIMELINE_MEDIA,
this._timelineMediaTypes,
)}
+ ${this._renderSwitch(
+ CONF_TIMELINE_SHOW_RECORDINGS,
+ defaults.timeline.show_recordings,
+ )}
${this._renderOptionSelector(
CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
index 4f7dd1a5..75659d49 100644
--- a/src/localize/languages/en.json
+++ b/src/localize/languages/en.json
@@ -7,7 +7,8 @@
"no_clips": "No clips",
"no_snapshot": "No recent snapshot",
"no_clip": "No recent clip",
- "live": "Live"
+ "live": "Live",
+ "recordings": "Recordings"
},
"config": {
"cameras": {
@@ -84,22 +85,22 @@
}
}
},
- "event_viewer": {
+ "media_viewer": {
"auto_play": "Automatically play media",
"auto_pause": "Automatically pause media",
"auto_mute": "Automatically mute media",
"auto_unmute": "Automatically unmute media",
- "draggable": "Event Viewer can be dragged/swiped",
- "lazy_load": "Event Viewer media is lazily loaded in carousel",
- "transition_effect": "Event Viewer transition effect",
+ "draggable": "Media Viewer can be dragged/swiped",
+ "lazy_load": "Media Viewer media is lazily loaded in carousel",
+ "transition_effect": "Media Viewer transition effect",
"transition_effects": {
"none": "No transition",
"slide": "Slide transition"
},
"controls": {
"next_previous": {
- "style": "Event Viewer next & previous control style",
- "size": "Event Viewer next & previous control size in pixels",
+ "style": "Media Viewer next & previous control style",
+ "size": "Media Viewer next & previous control size in pixels",
"styles": {
"thumbnails": "Thumbnails",
"chevrons": "Chevrons",
@@ -107,10 +108,10 @@
}
},
"thumbnails": {
- "mode": "Event Viewer thumbnails mode",
- "size": "Event Viewer thumbnails size in pixels",
- "show_details": "Show event details with thumbnails",
- "show_controls": "Show event controls with thumbnails",
+ "mode": "Media Viewer thumbnails mode",
+ "size": "Media Viewer thumbnails size in pixels",
+ "show_details": "Show details with thumbnails",
+ "show_controls": "Show controls with thumbnails",
"modes": {
"below": "Thumbnails below the media",
"above": "Thumbnails above the media",
@@ -120,7 +121,7 @@
}
},
"title": {
- "mode": "Event Viewer media title display mode",
+ "mode": "Media Viewer media title display mode",
"modes": {
"none": "No title display",
"popup-top-left": "Popup on the top left",
@@ -229,6 +230,7 @@
"window_seconds": "The default length of the timeline view in seconds",
"clustering_threshold": "The count of events at which they are clustered (0=no clustering)",
"media": "The media the timeline displays",
+ "show_recordings": "Show recordings",
"medias": {
"all": "All media types",
"clips": "Clips",
@@ -267,8 +269,8 @@
"live_secondary": "Live camera view options",
"event_gallery": "Event gallery",
"event_gallery_secondary": "Snapshots & clips gallery options",
- "event_viewer": "Event viewer",
- "event_viewer_secondary": "Snapshots & clips viewer options",
+ "media_viewer": "Media viewer",
+ "media_viewer_secondary": "Viewer for static media (clips, snapshots or recordings)",
"image": "Image",
"image_secondary": "Static image view options",
"dimensions": "Dimensions",
@@ -292,13 +294,21 @@
"in_progress": "In Progress",
"score": "Score"
},
+ "recording": {
+ "events": "Events",
+ "seek": "Seek"
+ },
"thumbnail": {
"retain_indefinitely": "Event will be indefinitely retained",
- "timeline": "See event in timeline"
+ "timeline": "See event in timeline",
+ "no_thumbnail": "No thumbnail available"
},
"error": {
+ "undecodable_response": "Could not decode response from Home Assistant for request",
"empty_response": "Received empty response from Home Assistant for request",
"invalid_response": "Received invalid response from Home Assistant for request",
+ "failed_response": "Failed to receive response from Home Assistant for request",
+ "failed_sign": "Could not sign Home Assistant URL",
"invalid_keys": "Invalid keys",
"unknown": "Unknown error",
"troubleshooting": "Check troubleshooting",
diff --git a/src/localize/languages/pt_br.json b/src/localize/languages/pt_br.json
index 98b3b497..5d29b6d4 100644
--- a/src/localize/languages/pt_br.json
+++ b/src/localize/languages/pt_br.json
@@ -52,7 +52,7 @@
"event_gallery": {
"min_columns": "Número mínimo de colunas"
},
- "event_viewer": {
+ "media_viewer": {
"auto_play": "Reproduzir mídia automaticamente",
"auto_unmute": "Ativar mídia automaticamente",
"draggable": "Visualizador de eventos pode ser arrastado/deslizado",
@@ -188,8 +188,8 @@
"live_secondary": "Opções de visualização da câmera ao vivo",
"event_gallery": "Galeria de eventos",
"event_gallery_secondary": "Opções da galeria de Snapshots e clipes",
- "event_viewer": "Visualizador de eventos",
- "event_viewer_secondary": "Opções do visualizador de Snapshots e clipes",
+ "media_viewer": "Visualizador de eventos",
+ "media_viewer_secondary": "Opções do visualizador de Snapshots e clipes",
"image": "Imagem",
"image_secondary": "Opções de visualização de imagem estática",
"dimensions": "Dimensões",
diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index 0d41744f..516f4a2c 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/src/patches/ha-camera-stream.ts
@@ -77,6 +77,13 @@ customElements.whenDefined('ha-camera-stream').then(() => {
this._player?.unmute();
}
+ /**
+ * Seek the video (unsupported).
+ */
+ public seek(seconds: number): void {
+ this._player?.seek(seconds);
+ }
+
/**
* Master render method.
* @returns A rendered template.
diff --git a/src/patches/ha-hls-player.ts b/src/patches/ha-hls-player.ts
index 693acfb3..92b24c1e 100644
--- a/src/patches/ha-hls-player.ts
+++ b/src/patches/ha-hls-player.ts
@@ -59,6 +59,15 @@ customElements.whenDefined('ha-hls-player').then(() => {
}
}
+ /**
+ * Seek the video.
+ */
+ public seek(seconds: number): void {
+ if (this._video) {
+ this._video.currentTime = seconds;
+ }
+ }
+
// =====================================================================================
// Minor modifications from:
// - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-hls-player.ts
diff --git a/src/patches/ha-web-rtc-player.ts b/src/patches/ha-web-rtc-player.ts
index ecafbc30..74283264 100644
--- a/src/patches/ha-web-rtc-player.ts
+++ b/src/patches/ha-web-rtc-player.ts
@@ -59,6 +59,15 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
}
}
+ /**
+ * Seek the video.
+ */
+ public seek(seconds: number): void {
+ if (this._video) {
+ this._video.currentTime = seconds;
+ }
+ }
+
// =====================================================================================
// Minor modifications from:
// - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-web-rtc-player.ts
diff --git a/src/scss/carousel.scss b/src/scss/carousel.scss
index 32dc9147..d72a6def 100644
--- a/src/scss/carousel.scss
+++ b/src/scss/carousel.scss
@@ -55,7 +55,6 @@ img,video {
.embla__slide {
position: relative;
- height: 100%;
overflow: visible;
}
:host([direction=vertical]) .embla__slide {
diff --git a/src/scss/const.scss b/src/scss/const.scss
index 38cc2113..8c612c78 100644
--- a/src/scss/const.scss
+++ b/src/scss/const.scss
@@ -1,5 +1,4 @@
:host {
- --frigate-card-thumbnail-size: 100px;
--frigate-card-thumbnail-size-max: 175px;
--frigate-card-thumbnail-details-width: calc(var(--frigate-card-thumbnail-size) + 200px);
}
\ No newline at end of file
diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss
index 2777fd32..09c63520 100644
--- a/src/scss/gallery.scss
+++ b/src/scss/gallery.scss
@@ -1,8 +1,6 @@
-@use "const.scss";
-
:host {
width: 100%;
- height: 100%;
+ height: auto;
overflow: auto;
// Hide scrollbar: IE and Edge
@@ -16,8 +14,8 @@
display: grid;
grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
- grid-auto-rows: var(--frigate-card-thumbnail-size);
- grid-column-gap: var(--frigate-card-gallery-gap);
+ grid-auto-rows: 1fr;
+ gap: var(--frigate-card-gallery-gap);
}
// Hide scrollbar for Chrome, Safari and Opera
@@ -32,16 +30,21 @@ ha-card {
box-sizing: border-box;
text-align: center;
opacity: 0.7;
- color: var(--secondary-text-color, white);
- border: 2px ridge var(--secondary-text-color, black);
+ color: var(--primary-text-color, white);
+ border: 2px ridge var(--primary-text-color, black);
border-radius: 5px;
background-color: var(--primary-background-color, black);
padding: 10px;
line-height: 1;
overflow: hidden;
+
+ transition: transform 0.2s linear;
+}
+ha-card:hover {
+ transform: scale(1.04)
}
-:host(:not([details])) ha-card,
-:host(:not([details])) frigate-card-thumbnail {
- aspect-ratio: 1 / 1;
-}
+ha-card, frigate-card-thumbnail {
+ height: 100%;
+ max-height: var(--frigate-card-thumbnail-size);
+}
\ No newline at end of file
diff --git a/src/scss/media-carousel.scss b/src/scss/media-carousel.scss
index 5611628f..d0d0142d 100644
--- a/src/scss/media-carousel.scss
+++ b/src/scss/media-carousel.scss
@@ -4,4 +4,5 @@
.embla__slide {
flex: 0 0 100%;
+ height: 100%;
}
\ No newline at end of file
diff --git a/src/scss/message.scss b/src/scss/message.scss
index 384525e5..696f2507 100644
--- a/src/scss/message.scss
+++ b/src/scss/message.scss
@@ -2,6 +2,11 @@
height: 100%;
width: 100%;
display: block;
+
+ // Ensure error messages are selectable.
+ user-select: text;
+ // Safari only has prefixed support.
+ -webkit-user-select: text;
}
div.wrapper {
@@ -20,6 +25,7 @@ div.message {
div.message div.contents {
padding: 10px;
height: 100%;
+ max-width: 100%;
}
div.message div.icon {
@@ -37,4 +43,6 @@ div.message div.icon {
.message pre {
margin-top: 20px;
+ white-space: pre-wrap;
+ word-break: break-all;
}
diff --git a/src/scss/next-previous-control.scss b/src/scss/next-previous-control.scss
index c031ffbb..d72d61bd 100644
--- a/src/scss/next-previous-control.scss
+++ b/src/scss/next-previous-control.scss
@@ -32,6 +32,7 @@
box-shadow: 0px 0px 20px 5px black;
transition: all 0.2s ease-out;
opacity: 0.8;
+ aspect-ratio: 1 / 1;
}
.controls.thumbnails:hover {
opacity: 1 !important;
diff --git a/src/scss/thumbnail-carousel.scss b/src/scss/thumbnail-carousel.scss
index 033d09fd..71f70170 100644
--- a/src/scss/thumbnail-carousel.scss
+++ b/src/scss/thumbnail-carousel.scss
@@ -1,13 +1,13 @@
-@use "const.scss";
+@use 'const.scss';
:host {
- --frigate-card-carousel-thumbnail-opacity: 1.0;
+ --frigate-card-carousel-thumbnail-opacity: 1;
}
-:host([direction=vertical]) {
+:host([direction='vertical']) {
height: 100%;
}
-:host([direction=horizontal]) {
+:host([direction='horizontal']) {
// In fullscreen mode, without explicitly setting the height to auto Chrome
// will construct a stylesheet with 100% height.
height: auto;
@@ -19,14 +19,13 @@
transition: opacity 0.6s ease;
}
.embla__slide.slide-selected {
- opacity: 1.0;
+ opacity: 1;
}
-frigate-card-thumbnail[details] {
- width: var(--frigate-card-thumbnail-details-width);
- height: var(--frigate-card-thumbnail-size);
-}
-frigate-card-thumbnail:not([details]) {
+frigate-card-thumbnail {
width: var(--frigate-card-thumbnail-size);
height: var(--frigate-card-thumbnail-size);
-}
\ No newline at end of file
+}
+frigate-card-thumbnail[details] {
+ width: var(--frigate-card-thumbnail-details-width);
+}
diff --git a/src/scss/thumbnail-details.scss b/src/scss/thumbnail-details.scss
index df77a6c2..f8ea64e7 100644
--- a/src/scss/thumbnail-details.scss
+++ b/src/scss/thumbnail-details.scss
@@ -8,11 +8,15 @@
column-gap: 5%;
}
-div.right, div.left {
+div.right,
+div.left {
display: flex;
flex-direction: column;
justify-content: center;
}
+div.right {
+ align-items: center;
+}
div.left {
flex: 1;
@@ -36,6 +40,7 @@ span.heading {
font-weight: bold;
}
-.larger {
+div.larger,
+span.larger {
font-size: 1.5rem;
}
diff --git a/src/scss/thumbnail-feature-event.scss b/src/scss/thumbnail-feature-event.scss
new file mode 100644
index 00000000..87e0a836
--- /dev/null
+++ b/src/scss/thumbnail-feature-event.scss
@@ -0,0 +1,37 @@
+:host {
+ display: block;
+ max-width: var(--frigate-card-thumbnail-size);
+ max-height: var(--frigate-card-thumbnail-size);
+ overflow: hidden;
+
+ // Restrict images to a maximum of thumbnail size.
+ aspect-ratio: 1 / 1;
+}
+
+img, ha-icon {
+ border-radius: var(--ha-card-border-radius, 4px);
+
+ width: 100%;
+ height: 100%;
+
+ // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
+ // should be clipped to fill the thumbnail div whilst maintaining
+ // aspect-ratio.
+ object-fit: cover;
+
+ transition: transform 0.2s linear;
+}
+
+ha-icon {
+ --mdc-icon-size: 50%;
+ color: var(--primary-text-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid rgba(255,255,255,0.3);
+ box-sizing: border-box;
+}
+
+img:hover {
+ transform: scale(1.04);
+}
\ No newline at end of file
diff --git a/src/scss/thumbnail-feature-recording.scss b/src/scss/thumbnail-feature-recording.scss
new file mode 100644
index 00000000..a165b971
--- /dev/null
+++ b/src/scss/thumbnail-feature-recording.scss
@@ -0,0 +1,29 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+ max-width: var(--frigate-card-thumbnail-size);
+ max-height: var(--frigate-card-thumbnail-size);
+ padding: 10px;
+
+ border: 1px solid var(--secondary-color);
+ background-color: var(--secondary-background-color);
+ border-radius: var(--ha-card-border-radius, 4px);
+ box-sizing: border-box;
+
+ color: var(--primary-text-color);
+
+ transition: transform 0.2s linear;
+}
+
+:host(:hover) {
+ transform: scale(1.04);
+}
+
+div.title {
+ font-size: 1.5rem;
+}
diff --git a/src/scss/thumbnail.scss b/src/scss/thumbnail.scss
index 5eaf92c4..35a443a8 100644
--- a/src/scss/thumbnail.scss
+++ b/src/scss/thumbnail.scss
@@ -1,5 +1,3 @@
-@use "const.scss";
-
:host {
display: flex;
flex-direction: row;
@@ -7,6 +5,11 @@
// Ensure control icons are relative to the thumbnail.
position: relative;
+ overflow: hidden;
+}
+
+:host(:not([details])) {
+ aspect-ratio: 1 / 1;
}
:host([details]) {
@@ -19,39 +22,21 @@
background-color: var(--primary-background-color, black);
}
-img {
- border-radius: var(--ha-card-border-radius, 4px);
-
- // Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
- // should be clipped to fill the thumbnail div whilst maintaining
- // aspect-ratio.
- object-fit: cover;
-
- // Restrict images to a maximum of thumbnail size.
- aspect-ratio: 1 / 1;
- height: 100%;
-
- max-width: var(--frigate-card-thumbnail-size-max);
- max-height: var(--frigate-card-thumbnail-size-max);
-
- transition: transform 0.2s linear;
-}
-img:hover {
- transform: scale(1.04);
+ha-icon {
+ position: absolute;
+ border-radius: 50%;
}
ha-icon.favorite {
- position: absolute;
color: gold;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 50%;
opacity: 0.8;
}
ha-icon.timeline {
- position: absolute;
color: var(--primary-color);
right: 0px;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 50%;
}
+
+frigate-card-thumbnail-details-event, frigate-card-thumbnail-details-recording {
+ flex: 1;
+}
\ No newline at end of file
diff --git a/src/scss/timeline-core.scss b/src/scss/timeline-core.scss
index 479c7175..84c4cab0 100644
--- a/src/scss/timeline-core.scss
+++ b/src/scss/timeline-core.scss
@@ -1,5 +1,6 @@
@use 'vis-timeline/dist/vis-timeline-graph2d.css';
@use 'drawer';
+@use 'const.scss';
:host {
width: 100%;
@@ -15,6 +16,14 @@
position: relative;
}
+frigate-card-thumbnail {
+ height: var(--frigate-card-thumbnail-size);
+ width: var(--frigate-card-thumbnail-size);
+}
+frigate-card-thumbnail[details] {
+ width: var(--frigate-card-thumbnail-details-width);
+}
+
div.timeline {
flex: 1;
}
@@ -46,10 +55,19 @@ div.timeline.right-margin {
color: var(--primary-text-color);
background-color: var(--primary-color);
}
+.vis-item.vis-background {
+ background-color: var(--primary-color);
+ opacity: 0.1;
+}
-.vis-item:hover {
- // Float icons upwards when the user hovers over them.
- z-index: 2;
+.vis-item:not(.vis-background) {
+ cursor: pointer;
+}
+.vis-item.vis-background, .vis-labelset, .vis-time-axis {
+ cursor: crosshair;
+}
+.vis-item:active {
+ cursor: unset;
}
.vis-item.vis-box {
@@ -71,6 +89,14 @@ div.timeline.right-margin {
border-color: var(--secondary-color);
}
+// Give an indication that the user can interact with the axes.
+.vis-text.vis-minor, .vis-label {
+ transition: background-color 0.5s ease-out;
+}
+.vis-text.vis-minor:hover, .vis-label:hover {
+ background-color: var(--primary-color);
+}
+
.vis-time-axis .vis-grid.vis-major {
border-color: var(--secondary-color);
}
diff --git a/src/types.ts b/src/types.ts
index d01a00e1..0b429c85 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -48,8 +48,8 @@ export const FRIGATE_CARD_VIEWS_USER_SPECIFIED = [
const FRIGATE_CARD_VIEWS = [
...FRIGATE_CARD_VIEWS_USER_SPECIFIED,
- // Event: A clip or snapshot (timeline may produce mixed media lists).
- 'event',
+ // Media: A generic piece of media (could be clip, snapshot, recording).
+ 'media',
] as const;
export type FrigateCardView = typeof FRIGATE_CARD_VIEWS[number];
@@ -83,7 +83,14 @@ const MEDIA_ACTION_POSITIVE_CONDITIONS = [
export type AutoUnmuteCondition = typeof MEDIA_ACTION_POSITIVE_CONDITIONS[number];
export type AutoPlayCondition = typeof MEDIA_ACTION_POSITIVE_CONDITIONS[number];
-export class FrigateCardError extends Error {}
+export class FrigateCardError extends Error {
+ context?: unknown;
+
+ constructor(message: string, context?: unknown) {
+ super(message);
+ this.context = context;
+ }
+}
/**
* Action Types (for "Picture Elements" / Menu)
@@ -400,7 +407,10 @@ const cameraConfigSchema = z
trigger_by_motion: z.boolean().default(cameraConfigDefault.trigger_by_motion),
trigger_by_occupancy: z.boolean().default(cameraConfigDefault.trigger_by_occupancy),
- trigger_by_entities: z.string().array().default(cameraConfigDefault.trigger_by_entities),
+ trigger_by_entities: z
+ .string()
+ .array()
+ .default(cameraConfigDefault.trigger_by_entities),
})
.default(cameraConfigDefault);
export type CameraConfig = z.infer