diff --git a/src/frigate-hass-card.scss b/src/frigate-hass-card.scss
index c78d2eaf..dfca1566 100644
--- a/src/frigate-hass-card.scss
+++ b/src/frigate-hass-card.scss
@@ -51,6 +51,7 @@ ha-card .frigate-card-image-list-folder {
box-sizing: border-box;
text-align: center;
border-style: 2px solid;
+ opacity: 0.7;
color: var(--secondary-text-color, white);
border-color: var(--secondary-text-color, black);
background-color: var(--primary-background-color, black);
@@ -86,10 +87,10 @@ webrtc-camera ha-card {
position: absolute;
z-index: 1;
overflow: hidden;
- opacity: 0.8;
+ opacity: 0.9;
border-radius: 50%;
- top: calc(50% - (54px /2));
- height: 54px;
+ top: calc(50% - (48px /2));
+ height: 48px;
}
.frigate-media-controls.previous {
diff --git a/src/frigate-hass-card.ts b/src/frigate-hass-card.ts
index 7f6daf8d..fe0ca2f1 100644
--- a/src/frigate-hass-card.ts
+++ b/src/frigate-hass-card.ts
@@ -351,11 +351,9 @@ export class FrigateCard extends LitElement {
}
// Update the card view.
- protected _changeView(
- view?: View | undefined,
- ): void {
+ protected _changeView(view?: View | undefined): void {
if (view === undefined) {
- this._view = new View({view: this.config.view_default})
+ this._view = new View({ view: this.config.view_default });
} else {
this._view = view;
}
@@ -514,6 +512,23 @@ export class FrigateCard extends LitElement {
}
return html`
+ ${this._view.previous
+ ? html`-
+
+
+ {
+ this._changeView(this._view.previous);
+ }}
+ outlined=""
+ class="frigate-card-image-list-folder"
+ >
+
+
+
+
+ `
+ : ''}
${parent.children.map(
(child, index) =>
html` -
@@ -522,10 +537,13 @@ export class FrigateCard extends LitElement {
? html`
{
- this._changeView(new View({
- view: this._view.view,
- target: child,
- previous: this._view}))
+ this._changeView(
+ new View({
+ view: this._view.view,
+ target: child,
+ previous: this._view,
+ }),
+ );
}}
outlined=""
class="frigate-card-image-list-folder"
@@ -539,11 +557,14 @@ export class FrigateCard extends LitElement {
class="mdc-image-list__image"
src="${child.thumbnail}"
@click=${() => {
-\ this._changeView(new View({
- view: this._view.is('clips') ? 'clip' : 'snapshot',
- target: parent,
- childIndex: index,
- previous: this._view}));
+ this._changeView(
+ new View({
+ view: this._view.is('clips') ? 'clip' : 'snapshot',
+ target: parent,
+ childIndex: index,
+ previous: this._view,
+ }),
+ );
}}
/>`}
@@ -567,7 +588,7 @@ export class FrigateCard extends LitElement {
case 'live':
case 'clips':
case 'snapshots':
- this._changeView(new View({view: name}));
+ this._changeView(new View({ view: name }));
break;
case 'frigate_ui':
const frigate_url = this._getFrigateURLFromContext();
@@ -633,7 +654,9 @@ export class FrigateCard extends LitElement {
// From a BrowseMediaSource item extract the first true media item (i.e. a
// clip/snapshot, not a folder).
- protected _getFirstTrueMediaChildIndex(media: BrowseMediaSource | null): number | null {
+ protected _getFirstTrueMediaChildIndex(
+ media: BrowseMediaSource | null,
+ ): number | null {
if (!media || !media.children) {
return null;
}
@@ -704,7 +727,8 @@ export class FrigateCard extends LitElement {
if (!parent || !parent.children || childIndex == null) {
return this._renderAttentionIcon(
this._view.is('clip') ? 'mdi:filmstrip-off' : 'mdi:camera-off',
- this._view.is('clip') ? 'No recent clip' : 'No recent snapshots');
+ this._view.is('clip') ? 'No recent clip' : 'No recent snapshots',
+ );
}
mediaToRender = parent.children[childIndex];
@@ -739,38 +763,40 @@ export class FrigateCard extends LitElement {
target: parent || undefined,
childIndex: neighbors.previousIndex ?? undefined,
previous: this._view,
- })
+ });
}}
/>`
: ``}
- ${this._view.is('clip') ?
- html`
- `
- : html`
{
- // Get clips potentially related to this snapshot.
- this._findRelatedClips(mediaToRender).then((relatedClip) => {
- if (relatedClip) {
- this._changeView(new View({
- view: 'clip',
- target: relatedClip,
- previous: this._view,
- }));
- }
- });
- }}
- />`}
+ ${this._view.is('clip')
+ ? html`
+ `
+ : html`
{
+ // Get clips potentially related to this snapshot.
+ this._findRelatedClips(mediaToRender).then((relatedClip) => {
+ if (relatedClip) {
+ this._changeView(
+ new View({
+ view: 'clip',
+ target: relatedClip,
+ previous: this._view,
+ }),
+ );
+ }
+ });
+ }}
+ />`}
${neighbors?.next
? html`
`
: ``}