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

Improve quantity/display of thumbnail details.

Browse Source
This commit is contained in:
Dermot Duffy
2023-02-27 20:51:56 -08:00
parent bd52db3e31
commit d87c4244f6
5 changed files with 109 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/thumbnail.ts
+75 -33
View File
@@ -15,7 +15,12 @@ import thumbnailFeatureEventStyle from '../scss/thumbnail-feature-event.scss';
import thumbnailFeatureRecordingStyle from '../scss/thumbnail-feature-recording.scss';
import thumbnailStyle from '../scss/thumbnail.scss';
import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
import { errorToConsole, getDurationString, prettifyTitle } from '../utils/basic.js';
import {
errorToConsole,
formatDateAndTime,
getDurationString,
prettifyTitle,
} from '../utils/basic.js';
import { renderTask } from '../utils/task.js';
import { createFetchThumbnailTask, FetchThumbnailTaskArgs } from '../utils/thumbnail.js';
import { View } from '../view/view.js';
@@ -150,6 +155,9 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
@property({ attribute: false })
public seek?: Date;
@property({ attribute: false })
public cameraTitle?: string;
protected render(): TemplateResult | void {
if (!this.media) {
return;
@@ -158,35 +166,48 @@ export class FrigateCardThumbnailDetailsEvent extends LitElement {
const startTime = this.media.getStartTime();
const endTime = this.media.getEndTime();
const what = this.media.getWhat();
const where = this.media.getWhere();
return html` <div class="left">
${what ? html`<div class="larger">${prettifyTitle(what.join(', '))}</div>` : ``}
${startTime
? html` <div>
<span class="heading">${localize('event.start')}:</span>
<span>${format(startTime, 'HH:mm:ss')}</span>
</div>
<div>
<span class="heading">${localize('event.duration')}:</span>
<span
>${endTime
? getDurationString(startTime, endTime)
: localize('event.in_progress')}</span
>
return html`
${what
? html` <div class="title" title=${localize('event.what')}>
${prettifyTitle(what.join(', '))}
${score ? html`(${(score * 100).toFixed(2) + '%'})` : ''}
</div>`
: ``}
<div class="details">
${startTime
? html` <div title=${localize('event.start')}>
<ha-icon .icon=${'mdi:calendar-clock-outline'}></ha-icon>
${formatDateAndTime(startTime)}
</div>
<div title=${localize('event.duration')}>
<ha-icon .icon=${'mdi:clock-outline'}></ha-icon>
${endTime
? getDurationString(startTime, endTime)
: localize('event.in_progress')}
</div>`
: ''}
${this.cameraTitle
? html` <div title=${localize('event.camera')}>
<ha-icon .icon=${'mdi:cctv'}></ha-icon>
${this.cameraTitle}
</div>`
: ''}
${where
? html` <div title=${localize('event.where')}>
<ha-icon .icon=${'mdi:map-marker-outline'}></ha-icon>
${prettifyTitle(where.join(', '))}
</div>`
: html``}
${this.seek
? html` <div>
<span class="heading">${localize('event.seek')}</span>
<span>${format(this.seek, 'HH:mm:ss')}</span>
? html` <div title=${localize('event.seek')}>
<ha-icon .icon=${'mdi:clock-fast'}></ha-icon>
${format(this.seek, 'HH:mm:ss')}
</div>`
: html``}
</div>
${score
? html`<div class="right">
<span class="larger">${(score * 100).toFixed(2) + '%'}</span>
</div>`
: ``}`;
`;
}
static get styles(): CSSResult {
@@ -209,22 +230,42 @@ export class FrigateCardThumbnailDetailsRecording extends LitElement {
if (!this.media) {
return;
}
const startTime = this.media.getStartTime();
const endTime = this.media.getEndTime();
const eventCount = this.media.getEventCount();
return html`<div class="left">
<div class="larger">${this.cameraTitle ?? ''}</div>
return html`
${this.cameraTitle
? html` <div class="title" title=${localize('recording.camera')}>
${this.cameraTitle}
</div>`
: ``}
<div class="details">
${startTime
? html` <div title=${localize('recording.start')}>
<ha-icon .icon=${'mdi:calendar-clock-outline'}></ha-icon>
${formatDateAndTime(startTime)}
</div>
<div title=${localize('recording.duration')}>
<ha-icon .icon=${'mdi:clock-outline'}></ha-icon>
${endTime
? getDurationString(startTime, endTime)
: localize('event.in_progress')}
</div>`
: ''}
${this.seek
? html` <div>
<span class="heading">${localize('recording.seek')}</span>
<span>${format(this.seek, 'HH:mm:ss')}</span>
? html` <div title=${localize('event.seek')}>
<ha-icon .icon=${'mdi:clock-fast'}></ha-icon>
${format(this.seek, 'HH:mm:ss')}
</div>`
: html``}
</div>
${eventCount !== null
? html`<div class="right">
<span class="larger">${eventCount}</span>
<span>${localize('recording.events')}</span>
? html`<div title=${localize('recording.events')}>
<ha-icon .icon=${'mdi:shield-alert'}></ha-icon>
${eventCount}
</div>`
: ``}`;
: ``}
</div>
`;
}
static get styles(): CSSResult {
@@ -336,6 +377,7 @@ export class FrigateCardThumbnail extends LitElement {
${this.details && ViewMediaClassifier.isEvent(this.media)
? html`<frigate-card-thumbnail-details-event
.media=${this.media ?? undefined}
.cameraTitle=${cameraTitle}
.seek=${this.seek}
></frigate-card-thumbnail-details-event>`
: this.details && ViewMediaClassifier.isRecording(this.media)
src/localize/languages/en.json
+8 -2
View File
@@ -392,11 +392,14 @@
"webrtc_card_waiting": "Waiting for WebRTC Card to load ..."
},
"event": {
"camera": "Camera",
"duration": "Duration",
"in_progress": "In Progress",
"score": "Score",
"seek": "Seek",
"start": "Start",
"seek": "Seek"
"what": "What",
"where": "Where"
},
"media_filter": {
"all": "All",
@@ -426,8 +429,11 @@
"where": "Where"
},
"recording": {
"camera": "Camera",
"duration": "Duration",
"events": "Events",
"seek": "Seek"
"seek": "Seek",
"start": "Start"
},
"thumbnail": {
"no_thumbnail": "No thumbnail available",
src/localize/languages/it.json
+8 -2
View File
@@ -385,11 +385,14 @@
"webrtc_card_waiting": "Aspettando che la scheda WebRTC si carichi ..."
},
"event": {
"camera": "",
"duration": "Durata",
"in_progress": "In corso",
"score": "Punteggio",
"seek": "Cercare",
"start": "Avvia",
"seek": "Cercare"
"what": "",
"where": ""
},
"media_filter": {
"all": "",
@@ -419,8 +422,11 @@
"where": ""
},
"recording": {
"camera": "",
"duration": "",
"events": "Eventi",
"seek": "Cercare"
"seek": "Cercare",
"start": ""
},
"thumbnail": {
"no_thumbnail": "Nessuna miniatura disponibile",
src/localize/languages/pt-BR.json
+8 -2
View File
@@ -385,11 +385,14 @@
"webrtc_card_waiting": "Aguardando o cartão WebRTC carregar ..."
},
"event": {
"camera": "",
"duration": "Duração",
"in_progress": "Em andamento",
"score": "Pontuação",
"seek": "Procurar",
"start": "Início",
"seek": "Procurar"
"what": "",
"where": ""
},
"media_filter": {
"all": "",
@@ -419,8 +422,11 @@
"where": ""
},
"recording": {
"camera": "",
"duration": "",
"events": "Eventos",
"seek": "Procurar"
"seek": "Procurar",
"start": ""
},
"thumbnail": {
"no_thumbnail": "Nenhuma miniatura disponível",
src/scss/thumbnail-details.scss
+10 -30
View File
@@ -1,48 +1,28 @@
:host {
display: flex;
flex-direction: column;
width: 100%;
margin-left: 5px;
padding: 8px;
padding: 5px;
color: var(--primary-text-color);
overflow: hidden;
column-gap: 5%;
}
div.right,
div.left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 0.8rem;
line-height: normal;
}
div.right {
align-items: center;
div.title {
font-size: 1.2rem;
font-weight: bold;
}
div.left {
div.details {
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
--mdc-icon-size: 16px;
overflow: hidden;
column-gap: 5%;
}
div.left div {
width: 100%;
}
span.heading {
font-weight: bold;
}
div.larger,
span.larger {
font-size: 1.4rem;
// Details panel can shrink as well as grow.
min-height: 0px;
}