Add an unconstrained aspect ratio mode.

This commit is contained in:
Dermot Duffy
2021-09-23 21:14:21 -07:00
parent e3ccbb0787
commit ea71a2ed4b
2 changed files with 14 additions and 11 deletions
+13 -10
View File
@@ -372,10 +372,9 @@ export class FrigateCard extends LitElement {
if (mediaInfo.height < MEDIA_HEIGHT_CUTOFF || mediaInfo.width < MEDIA_WIDTH_CUTOFF) { if (mediaInfo.height < MEDIA_HEIGHT_CUTOFF || mediaInfo.width < MEDIA_WIDTH_CUTOFF) {
return; return;
} }
let requestRefresh = false; let requestRefresh = false;
if ( if (
this.config.dimensions?.aspect_ratio_mode != 'static' && (this.config.dimensions?.aspect_ratio_mode ?? 'dynamic') == 'dynamic' &&
(mediaInfo.width != this._mediaInfo?.width || (mediaInfo.width != this._mediaInfo?.width ||
mediaInfo.height != this._mediaInfo?.height) mediaInfo.height != this._mediaInfo?.height)
) { ) {
@@ -389,19 +388,23 @@ export class FrigateCard extends LitElement {
} }
protected _getAspectRatioPadding(): number | null { protected _getAspectRatioPadding(): number | null {
const aspect_ratio_mode = this.config.dimensions?.aspect_ratio_mode ?? 'auto'; const aspect_ratio_mode = this.config.dimensions?.aspect_ratio_mode ?? 'dynamic';
// Do not constrain aspect ratio if it's not a gallery (clips or snapshots), // Do not constrain aspect ratio if either it's entire disabled or it's a
// if the aspect ratio is not static and if there is a loaded media item. // media view (i.e. not the gallery) and there's a loaded media item in
if ( // dynamic mode (as the aspect_ratio is essentially whatever the media
!this._view.isGalleryView() && // dimensions are).
aspect_ratio_mode != 'static' && if (aspect_ratio_mode == 'unconstrained' ||
this._mediaInfo (
!this._view.isGalleryView() &&
aspect_ratio_mode == 'dynamic' &&
this._mediaInfo
)
) { ) {
return null; return null;
} }
if (aspect_ratio_mode == 'auto' && this._mediaInfo) { if (aspect_ratio_mode == 'dynamic' && this._mediaInfo) {
return (this._mediaInfo.height / this._mediaInfo.width) * 100; return (this._mediaInfo.height / this._mediaInfo.width) * 100;
} }
+1 -1
View File
@@ -98,7 +98,7 @@ export const frigateCardConfigSchema = z.object({
}) })
.optional(), .optional(),
dimensions: z.object({ dimensions: z.object({
aspect_ratio_mode: z.enum(['dynamic', 'static']).default('dynamic'), aspect_ratio_mode: z.enum(['dynamic', 'static', 'unconstrained']).default('dynamic'),
aspect_ratio: aspect_ratio:
z.number().array().length(2).or( z.number().array().length(2).or(
z.string() z.string()