From d87c4244f6108eb861a3c5d0e94579ac38621990 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Mon, 27 Feb 2023 20:51:56 -0800 Subject: [PATCH] Improve quantity/display of thumbnail details. --- src/components/thumbnail.ts | 108 +++++++++++++++++++++--------- src/localize/languages/en.json | 10 ++- src/localize/languages/it.json | 10 ++- src/localize/languages/pt-BR.json | 10 ++- src/scss/thumbnail-details.scss | 40 +++-------- 5 files changed, 109 insertions(+), 69 deletions(-) diff --git a/src/components/thumbnail.ts b/src/components/thumbnail.ts index e20f06b3..8ac0c52a 100644 --- a/src/components/thumbnail.ts +++ b/src/components/thumbnail.ts @@ -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`
- ${what ? html`
${prettifyTitle(what.join(', '))}
` : ``} + return html` + ${what + ? html`
+ ${prettifyTitle(what.join(', '))} + ${score ? html`(${(score * 100).toFixed(2) + '%'})` : ''} +
` + : ``} +
${startTime - ? html`
- ${localize('event.start')}: - ${format(startTime, 'HH:mm:ss')} + ? html`
+ + ${formatDateAndTime(startTime)}
-
- ${localize('event.duration')}: - ${endTime - ? getDurationString(startTime, endTime) - : localize('event.in_progress')} +
+ + ${endTime + ? getDurationString(startTime, endTime) + : localize('event.in_progress')}
` - : ``} + : ''} + ${this.cameraTitle + ? html`
+ + ${this.cameraTitle} +
` + : ''} + ${where + ? html`
+ + ${prettifyTitle(where.join(', '))} +
` + : html``} ${this.seek - ? html`
- ${localize('event.seek')} - ${format(this.seek, 'HH:mm:ss')} + ? html`
+ + ${format(this.seek, 'HH:mm:ss')}
` : html``}
- ${score - ? html`
- ${(score * 100).toFixed(2) + '%'} -
` - : ``}`; + `; } 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`
-
${this.cameraTitle ?? ''}
+ return html` + ${this.cameraTitle + ? html`
+ ${this.cameraTitle} +
` + : ``} +
+ ${startTime + ? html`
+ + ${formatDateAndTime(startTime)} +
+
+ + ${endTime + ? getDurationString(startTime, endTime) + : localize('event.in_progress')} +
` + : ''} ${this.seek - ? html`
- ${localize('recording.seek')} - ${format(this.seek, 'HH:mm:ss')} + ? html`
+ + ${format(this.seek, 'HH:mm:ss')}
` : html``} + ${eventCount !== null + ? html`
+ + ${eventCount} +
` + : ``}
- ${eventCount !== null - ? html`
- ${eventCount} - ${localize('recording.events')} -
` - : ``}`; + `; } static get styles(): CSSResult { @@ -336,6 +377,7 @@ export class FrigateCardThumbnail extends LitElement { ${this.details && ViewMediaClassifier.isEvent(this.media) ? html`` : this.details && ViewMediaClassifier.isRecording(this.media) diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index c332fec9..85a9e6d9 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -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", diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json index d6659bc5..f1fb00f2 100644 --- a/src/localize/languages/it.json +++ b/src/localize/languages/it.json @@ -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", diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json index 79ed6eec..dbfd2241 100644 --- a/src/localize/languages/pt-BR.json +++ b/src/localize/languages/pt-BR.json @@ -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", diff --git a/src/scss/thumbnail-details.scss b/src/scss/thumbnail-details.scss index 44a521f5..fe16c652 100644 --- a/src/scss/thumbnail-details.scss +++ b/src/scss/thumbnail-details.scss @@ -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; }