diff --git a/docs/configuration/cameras/engine.md b/docs/configuration/cameras/engine.md index a90cef2a..b1af506e 100644 --- a/docs/configuration/cameras/engine.md +++ b/docs/configuration/cameras/engine.md @@ -4,12 +4,12 @@ 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) | -| ----------- | ------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | --------------------------- | -------------------------------- | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ------------------------ | ---------------------------------------------- | -| `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: | -| `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: | -| `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: | -| `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: | +| 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: | :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: | :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: | :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 diff --git a/docs/configuration/live.md b/docs/configuration/live.md index adec3581..c3bc2843 100644 --- a/docs/configuration/live.md +++ b/docs/configuration/live.md @@ -101,7 +101,7 @@ live: | `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_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` diff --git a/docs/configuration/media-gallery.md b/docs/configuration/media-gallery.md index d04bb9b8..efb0bf0a 100644 --- a/docs/configuration/media-gallery.md +++ b/docs/configuration/media-gallery.md @@ -46,7 +46,7 @@ media_gallery: | `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_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 diff --git a/docs/configuration/media-viewer.md b/docs/configuration/media-viewer.md index f0594629..0a4dcb0e 100644 --- a/docs/configuration/media-viewer.md +++ b/docs/configuration/media-viewer.md @@ -95,7 +95,7 @@ media_viewer: | `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_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` diff --git a/docs/configuration/timeline.md b/docs/configuration/timeline.md index 28ebfffc..047d4bc1 100644 --- a/docs/configuration/timeline.md +++ b/docs/configuration/timeline.md @@ -55,7 +55,7 @@ timeline: | `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_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 diff --git a/src/components/gallery.ts b/src/components/gallery.ts index 36da8b25..da820884 100644 --- a/src/components/gallery.ts +++ b/src/components/gallery.ts @@ -16,7 +16,6 @@ import { CardWideConfig, frigateCardConfigDefaults, GalleryConfig, - THUMBNAIL_WIDTH_MAX, } from '../config/types'; import { localize } from '../localize/localize'; import galleryCoreStyle from '../scss/gallery-core.scss'; @@ -266,11 +265,7 @@ export class FrigateCardGalleryCore extends LitElement { frigateCardConfigDefaults.media_gallery.controls.thumbnails.size; const columns = this.galleryConfig?.controls.thumbnails.show_details ? Math.max(1, Math.floor(this.clientWidth / THUMBNAIL_DETAILS_WIDTH_MIN)) - : Math.max( - 1, - Math.ceil(this.clientWidth / THUMBNAIL_WIDTH_MAX), - Math.ceil(this.clientWidth / thumbnailSize), - ); + : Math.max(1, Math.ceil(this.clientWidth / thumbnailSize)); this.style.setProperty('--frigate-card-gallery-columns', String(columns)); } diff --git a/src/config/types.ts b/src/config/types.ts index b2f8c416..3f91cdf5 100644 --- a/src/config/types.ts +++ b/src/config/types.ts @@ -976,9 +976,9 @@ export type ImageViewConfig = z.infer; // Thumbnail Configuration // ************************************************************************* -// The min/max width thumbnail (Frigate returns a maximum of 175px). -export const THUMBNAIL_WIDTH_MAX = 175; +// The min/max width thumbnail. export const THUMBNAIL_WIDTH_MIN = 75; +export const THUMBNAIL_WIDTH_MAX = 300; const thumbnailControlsBaseDefaults = { size: 100, diff --git a/src/scss/const.scss b/src/scss/const.scss index f2dac2a8..35264fd3 100644 --- a/src/scss/const.scss +++ b/src/scss/const.scss @@ -1,5 +1,5 @@ :host { - --frigate-card-thumbnail-size-max: 175px; + --frigate-card-thumbnail-size-max: 300px; --frigate-card-thumbnail-details-width: calc( var(--frigate-card-thumbnail-size) + 200px ); diff --git a/src/scss/thumbnail-details.scss b/src/scss/thumbnail-details.scss index 99b6a066..e6265dc2 100644 --- a/src/scss/thumbnail-details.scss +++ b/src/scss/thumbnail-details.scss @@ -17,7 +17,7 @@ div.title { div.details { flex: 1; - justify-content: space-evenly; + justify-content: center; display: flex; flex-direction: column; diff --git a/src/scss/thumbnail-feature-thumbnail.scss b/src/scss/thumbnail-feature-thumbnail.scss index ea67c4a4..1ed44506 100644 --- a/src/scss/thumbnail-feature-thumbnail.scss +++ b/src/scss/thumbnail-feature-thumbnail.scss @@ -27,7 +27,7 @@ ha-icon { var(--ha-card-border-radius, 4px) ); - max-width: var(--frigate-card-thumbnail-size); + width: var(--frigate-card-thumbnail-size); max-height: 100%; aspect-ratio: 1 / 1;