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

Fix thumbnails for non-gallery views.

Browse Source
This commit is contained in:
Dermot Duffy
2022-04-16 21:59:36 -07:00
parent ba196ff003
commit 0e751478d2
12 changed files with 91 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/gallery.ts
+1 -2
View File
@@ -1,6 +1,5 @@
// TODO: Add details & controls & size support
// TODO: Remove mini support if it's not actually needed?
// TODO: automatic upgrade for thumbnail sizes in px
// TODO: automatic upgrade for thumbnail sizes in px and menu buttons in px
// TODO: automatic remove of min_columns
/* eslint-disable @typescript-eslint/no-explicit-any */
src/components/menu.ts
+4 -1
View File
@@ -60,7 +60,10 @@ export class FrigateCardMenu extends LitElement {
set menuConfig(menuConfig: MenuConfig) {
this._menuConfig = menuConfig;
if (menuConfig) {
this.style.setProperty('--frigate-card-menu-button-size', menuConfig.button_size);
this.style.setProperty(
'--frigate-card-menu-button-size',
`${menuConfig.button_size}px`,
);
}
// Store the menu mode as an attribute (used for CSS attribute selectors).
this.setAttribute('data-mode', menuConfig.mode);
src/components/thumbnail.ts
+3 -7
View File
@@ -30,20 +30,16 @@ export class FrigateCardThumbnailDetails extends LitElement {
return html`<div class="left">
<div class="larger">${prettifyFrigateName(this.event.label)}</div>
<div>
<span>
<span class="heading">${localize('event.start')}:</span>
${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}
</span>
<span>${format(fromUnixTime(this.event.start_time), 'HH:mm:ss')}</span>
</div>
<div>
<span>
<span class="heading">${localize('event.duration')}:</span>
${getEventDurationString(this.event)}
</span>
<span>${getEventDurationString(this.event)}</span>
</div>
</div>
<div class="right">
<div class="larger">${score}</div>
<span class="larger">${score}</span>
</div>`;
}
src/editor.ts
+25 -8
View File
@@ -5,9 +5,11 @@ import { customElement, property, state } from 'lit/decorators.js';
import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers';
import { localize } from './localize/localize.js';
import {
frigateCardConfigDefaults,
RawFrigateCardConfig,
RawFrigateCardConfigArray,
THUMBNAIL_WIDTH_MAX,
THUMBNAIL_WIDTH_MIN,
frigateCardConfigDefaults,
} from './types.js';
import {
@@ -843,7 +845,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html`
<div class="values">
${this._renderOptionSelector(CONF_MENU_MODE, this._menuModes)}
${this._renderStringInput(CONF_MENU_BUTTON_SIZE)}
${this._renderNumberInput(CONF_MENU_BUTTON_SIZE)}
${this._renderSwitch(
CONF_MENU_BUTTONS_FRIGATE,
defaults.menu.buttons.frigate,
@@ -900,7 +902,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_CONTROLS_NEXT_PREVIOUS_STYLE,
this._liveNextPreviousControlStyles,
)}
${this._renderStringInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE)}
${this._renderNumberInput(CONF_LIVE_CONTROLS_NEXT_PREVIOUS_SIZE)}
${this._renderOptionSelector(
CONF_LIVE_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
@@ -909,7 +911,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_LIVE_CONTROLS_THUMBNAILS_MEDIA,
this._thumbnailMedias,
)}
${this._renderStringInput(CONF_LIVE_CONTROLS_THUMBNAILS_SIZE)}
${this._renderNumberInput(
CONF_LIVE_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderOptionSelector(
CONF_LIVE_CONTROLS_TITLE_MODE,
this._titleModes,
@@ -963,12 +969,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
this._eventViewerNextPreviousControlStyles,
)}
${this._renderStringInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE)}
${this._renderNumberInput(CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE)}
${this._renderOptionSelector(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
)}
${this._renderStringInput(CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE)}
${this._renderNumberInput(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderSwitch(
CONF_EVENT_VIEWER_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.event_viewer.controls.thumbnails.show_details,
@@ -1005,12 +1015,19 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
? html` <div class="values">
${this._renderNumberInput(CONF_TIMELINE_WINDOW_SECONDS)}
${this._renderNumberInput(CONF_TIMELINE_CLUSTERING_THRESHOLD)}
${this._renderOptionSelector(CONF_TIMELINE_MEDIA, this._timelineMediaTypes)}
${this._renderOptionSelector(
CONF_TIMELINE_MEDIA,
this._timelineMediaTypes,
)}
${this._renderOptionSelector(
CONF_TIMELINE_CONTROLS_THUMBNAILS_MODE,
this._thumbnailModes,
)}
${this._renderStringInput(CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE)}
${this._renderNumberInput(
CONF_TIMELINE_CONTROLS_THUMBNAILS_SIZE,
THUMBNAIL_WIDTH_MIN,
THUMBNAIL_WIDTH_MAX,
)}
${this._renderSwitch(
CONF_TIMELINE_CONTROLS_THUMBNAILS_SHOW_DETAILS,
defaults.timeline.controls.thumbnails.show_details,
src/localize/languages/en.json
+6 -6
View File
@@ -66,7 +66,7 @@
"controls": {
"next_previous": {
"style": "Event Viewer next & previous control style",
"size": "Event Viewer next & previous control size (e.g. '48px')",
"size": "Event Viewer next & previous control size in pixels",
"styles": {
"thumbnails": "Thumbnails",
"chevrons": "Chevrons",
@@ -75,7 +75,7 @@
},
"thumbnails": {
"mode": "Event Viewer thumbnails mode",
"size": "Event Viewer thumbnails size (e.g. '100px')",
"size": "Event Viewer thumbnails size in pixels",
"show_details": "Show event details with thumbnails",
"show_controls": "Show event controls with thumbnails",
"modes": {
@@ -109,7 +109,7 @@
"controls": {
"next_previous": {
"style": "Live view next & previous control style",
"size": "Live view next & previous control size (e.g. '48px')",
"size": "Live view next & previous control size in pixels",
"styles": {
"chevrons": "Chevrons",
"icons": "Icons",
@@ -118,7 +118,7 @@
},
"thumbnails": {
"mode": "Live thumbnails mode",
"size": "Live thumbnails size (e.g. '100px')",
"size": "Live thumbnails size in pixels",
"show_details": "Show event details with thumbnails",
"show_controls": "Show event controls with thumbnails",
"media": "Whether to show thumbnails of clips or snapshots",
@@ -169,7 +169,7 @@
"above": "Above",
"below": "Below"
},
"button_size": "Menu button size (e.g. '40px')"
"button_size": "Menu button size in pixels"
},
"timeline": {
"window_seconds": "The default length of the timeline view in seconds",
@@ -183,7 +183,7 @@
"controls": {
"thumbnails": {
"mode": "Timeline thumbnails mode",
"size": "Timeline thumbnails size (e.g. '100px')",
"size": "Timeline thumbnails size in pixels",
"show_details": "Show event details with thumbnails",
"show_controls": "Show event controls with thumbnails"
}
src/scss/const.scss
+5
View File
@@ -0,0 +1,5 @@
:host {
--frigate-card-thumbnail-size: 100px;
--frigate-card-thumbnail-size-max: 175px;
--frigate-card-thumbnail-details-width: calc(var(--frigate-card-thumbnail-size) + 200px);
}
src/scss/gallery.scss
+2 -1
View File
@@ -1,3 +1,5 @@
@use "const.scss";
:host {
width: 100%;
height: 100%;
@@ -11,7 +13,6 @@
--frigate-card-gallery-gap: 3px;
--frigate-card-gallery-columns: 4;
--frigate-card-thumbnail-size: 100px;
display: grid;
grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
src/scss/thumbnail-carousel.scss
+11
View File
@@ -1,3 +1,5 @@
@use "const.scss";
:host {
--frigate-card-carousel-thumbnail-opacity: 1.0;
}
@@ -18,4 +20,13 @@
}
.embla__slide.slide-selected {
opacity: 1.0;
}
frigate-card-thumbnail[details] {
width: var(--frigate-card-thumbnail-details-width);
height: var(--frigate-card-thumbnail-size);
}
frigate-card-thumbnail:not([details]) {
width: var(--frigate-card-thumbnail-size);
height: var(--frigate-card-thumbnail-size);
}
src/scss/thumbnail-details.scss
+19 -4
View File
@@ -2,12 +2,13 @@
display: flex;
width: 100%;
margin-left: 5px;
padding: 15px;
padding: 8px;
color: var(--primary-text-color);
overflow: hidden;
column-gap: 5%;
}
div {
div.right, div.left {
display: flex;
flex-direction: column;
justify-content: center;
@@ -15,12 +16,26 @@ div {
div.left {
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
overflow: hidden;
column-gap: 5%;
}
div.larger {
font-size: 1.5rem;
div.left div {
width: 100%;
}
span.heading {
font-weight: bold;
}
.larger {
font-size: 1.5rem;
}
src/scss/thumbnail.scss
+5 -4
View File
@@ -1,3 +1,5 @@
@use "const.scss";
:host {
display: flex;
flex-direction: row;
@@ -5,8 +7,6 @@
// Ensure control icons are relative to the thumbnail.
position: relative;
--frigate-card-max-thumbnail-size: 175px;
}
:host([details]) {
@@ -29,9 +29,10 @@ img {
// Restrict images to a maximum of thumbnail size.
aspect-ratio: 1 / 1;
height: 100%;
max-width: var(--frigate-card-max-thumbnail-size);
max-height: var(--frigate-card-max-thumbnail-size);
max-width: var(--frigate-card-thumbnail-size-max);
max-height: var(--frigate-card-thumbnail-size-max);
transition: transform 0.2s linear;
}
src/types.ts
+4 -3
View File
@@ -16,6 +16,7 @@ import { deepRemoveDefaults } from './zod-util';
// The maximum width thumbnail Frigate returns
export const THUMBNAIL_WIDTH_MAX = 175;
export const THUMBNAIL_WIDTH_MIN = 75;
declare global {
interface HTMLElementTagNameMap {
@@ -442,7 +443,7 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
const thumbnailsControlSchema = z.object({
mode: z.enum(['none', 'above', 'below', 'left', 'right']),
size: z.number().min(1).max(THUMBNAIL_WIDTH_MAX).optional(),
size: z.number().min(THUMBNAIL_WIDTH_MIN).max(THUMBNAIL_WIDTH_MAX).optional(),
show_details: z.boolean().optional(),
show_controls: z.boolean().optional(),
});
@@ -617,7 +618,7 @@ const menuConfigDefault = {
frigate_ui: true,
fullscreen: true,
},
button_size: '40px',
button_size: 40,
};
const menuConfigSchema = z
@@ -637,7 +638,7 @@ const menuConfigSchema = z
fullscreen: z.boolean().default(menuConfigDefault.buttons.fullscreen),
})
.default(menuConfigDefault.buttons),
button_size: z.string().default(menuConfigDefault.button_size),
button_size: z.number().min(1).default(menuConfigDefault.button_size),
})
.default(menuConfigDefault);
export type MenuConfig = z.infer<typeof menuConfigSchema>;