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

feat: Increase max thumbnail size to 300px (#1703)

Browse Source 
* feat: Remove max thumbnail size

* Remove old comment.

* Set max to 350px

* Decrease max size to 300px
This commit is contained in:
Dermot Duffy
2024-12-08 13:03:47 -08:00
committed by GitHub
parent b2b7a0853c
commit 649b0280ee
10 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/configuration/cameras/engine.md
+6 -6
View File
@@ -4,12 +4,12 @@
A "Camera Engine" defines what "type" of camera is being configured (e.g. `frigate`), each engine offers different capabilities: A "Camera Engine" defines what "type" of camera is being configured (e.g. `frigate`), each engine offers different capabilities:
| Engine | Live | Supports clips | Supports Snapshots | Supports Recordings | Supports Timeline | Supports PTZ out of the box | Supports manually configured PTZ | Favorite events | Favorite recordings | Detect new events | Detect new snapshots | Detect new clips | May requiring [proxying](./README.md?id=proxy) | | Engine | Live | Supports clips | Supports Snapshots | Supports Recordings | Supports Timeline | Supports PTZ out of the box | Supports manually configured PTZ | Favorite events | Favorite recordings | Detect new events | Detect new snapshots | Detect new clips | May requiring [proxying](./README.md?id=proxy) | Thumbnails |
| ----------- | ------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | --------------------------- | -------------------------------- | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ---------------------------------------------- | | ----------- | ------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | --------------------------- | -------------------------------- | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ---------------------------------------------- | ------------------------ |
| `frigate` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | | `frigate` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: |
| `generic` | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | | `generic` | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: |
| `motioneye` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | | `motioneye` | :white_check_mark: | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :white_check_mark: |
| `reolink` | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | | `reolink` | :white_check_mark: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :heavy_multiplication_x: | :white_check_mark: | :heavy_multiplication_x: |
### Live providers supported per Engine ### Live providers supported per Engine
docs/configuration/live.md
+1 -1
View File
@@ -101,7 +101,7 @@ live:
| `show_download_control` | `true` | Whether to show the download control on each thumbnail. | | `show_download_control` | `true` | Whether to show the download control on each thumbnail. |
| `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. | | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. |
| `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. | | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. |
| `size` | `100` | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `175`. | | `size` | `100` | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `300`. |
### `timeline` ### `timeline`
docs/configuration/media-gallery.md
+1 -1
View File
@@ -46,7 +46,7 @@ media_gallery:
| `show_download_control` | `true` | Whether to show the download control on each thumbnail. | | `show_download_control` | `true` | Whether to show the download control on each thumbnail. |
| `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. | | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. |
| `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. | | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. |
| `size` | `100` | The size of the thumbnails in the gallery. Must be >= `75` and <= `175`. | | `size` | `100` | The size of the thumbnails in the gallery. Must be >= `75` and <= `300`. |
## Fully expanded reference ## Fully expanded reference
docs/configuration/media-viewer.md
+1 -1
View File
@@ -95,7 +95,7 @@ media_viewer:
| `show_download_control` | `true` | Whether to show the download control on each thumbnail. | | `show_download_control` | `true` | Whether to show the download control on each thumbnail. |
| `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. | | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. |
| `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. | | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. |
| `size` | `100` | The size of the thumbnails in the thumbnail carousel pixels. Must be >= `75` and <= `175`. | | `size` | `100` | The size of the thumbnails in the thumbnail carousel pixels. Must be >= `75` and <= `300`. |
### `timeline` ### `timeline`
docs/configuration/timeline.md
+1 -1
View File
@@ -55,7 +55,7 @@ timeline:
| `show_download_control` | `true` | Whether to show the download control on each thumbnail. | | `show_download_control` | `true` | Whether to show the download control on each thumbnail. |
| `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. | | `show_favorite_control` | `true` | Whether to show the favorite ('star') control on each thumbnail. |
| `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. | | `show_timeline_control` | `true` | Whether to show the timeline ('target') control on each thumbnail. |
| `size` | `100` | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `175`. | | `size` | `100` | The size of the thumbnails in the thumbnail carousel in pixels. Must be >= `75` and <= `300`. |
## Fully expanded reference ## Fully expanded reference
src/components/gallery.ts
+1 -6
View File
@@ -16,7 +16,6 @@ import {
CardWideConfig, CardWideConfig,
frigateCardConfigDefaults, frigateCardConfigDefaults,
GalleryConfig, GalleryConfig,
THUMBNAIL_WIDTH_MAX,
} from '../config/types'; } from '../config/types';
import { localize } from '../localize/localize'; import { localize } from '../localize/localize';
import galleryCoreStyle from '../scss/gallery-core.scss'; import galleryCoreStyle from '../scss/gallery-core.scss';
@@ -266,11 +265,7 @@ export class FrigateCardGalleryCore extends LitElement {
frigateCardConfigDefaults.media_gallery.controls.thumbnails.size; frigateCardConfigDefaults.media_gallery.controls.thumbnails.size;
const columns = this.galleryConfig?.controls.thumbnails.show_details const columns = this.galleryConfig?.controls.thumbnails.show_details
? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN)) ? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN))
: Math.max( : Math.max(1, Math.ceil(this.clientWidth / thumbnailSize));
1,
Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX),
Math.ceil(this.clientWidth / thumbnailSize),
);
this.style.setProperty('--frigate-card-gallery-columns', String(columns)); this.style.setProperty('--frigate-card-gallery-columns', String(columns));
} }
src/config/types.ts
+2 -2
View File
@@ -976,9 +976,9 @@ export type ImageViewConfig = z.infer<typeof imageConfigSchema>;
// Thumbnail Configuration // Thumbnail Configuration
// ************************************************************************* // *************************************************************************
// The min/max width thumbnail (Frigate returns a maximum of 175px). // The min/max width thumbnail.
export const THUMBNAIL_WIDTH_MAX = 175;
export const THUMBNAIL_WIDTH_MIN = 75; export const THUMBNAIL_WIDTH_MIN = 75;
export const THUMBNAIL_WIDTH_MAX = 300;
const thumbnailControlsBaseDefaults = { const thumbnailControlsBaseDefaults = {
size: 100, size: 100,
src/scss/const.scss
+1 -1
View File
@@ -1,5 +1,5 @@
:host { :host {
--frigate-card-thumbnail-size-max: 175px; --frigate-card-thumbnail-size-max: 300px;
--frigate-card-thumbnail-details-width: calc( --frigate-card-thumbnail-details-width: calc(
var(--frigate-card-thumbnail-size) + 200px var(--frigate-card-thumbnail-size) + 200px
); );
src/scss/thumbnail-details.scss
+1 -1
View File
@@ -17,7 +17,7 @@ div.title {
div.details { div.details {
flex: 1; flex: 1;
justify-content: space-evenly; justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
src/scss/thumbnail-feature-thumbnail.scss
+1 -1
View File
@@ -27,7 +27,7 @@ ha-icon {
var(--ha-card-border-radius, 4px) var(--ha-card-border-radius, 4px)
); );
max-width: var(--frigate-card-thumbnail-size); width: var(--frigate-card-thumbnail-size);
max-height: 100%; max-height: 100%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;