From bc0198d242c7df5f032399b24bc39cf5078bf554 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Thu, 23 Sep 2021 21:48:44 -0700
Subject: [PATCH] Add aspect ratio editing.

---
 src/editor.ts | 35 +++++++++++++++++++++++++++++++++++
 src/types.ts  |  4 ++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/editor.ts b/src/editor.ts
index a33d4918..a50f0ffa 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -137,6 +137,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
       none: localize('control.none'),
     };
 
+    const aspectRatioModes = {
+      '': '',
+      dynamic: localize('aspect_ratio_mode.dynamic'),
+      static: localize('aspect_ratio_mode.static'),
+      unconstrained: localize('aspect_ratio_mode.unconstrained'),
+    }
+
     return html`
       <div class="card-config">
         <div class="option" @click=${this._toggleOption} .option=${'required'}>
@@ -296,6 +303,34 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                 </paper-listbox>
               </paper-dropdown-menu>
               <br />
+              <paper-dropdown-menu
+                .label=${localize('dimensions.aspect_ratio_mode')}
+                @value-changed=${this._valueChanged}
+                .configValue=${'dimensions.aspect_ratio_mode'}
+              >
+                <paper-listbox
+                  slot="dropdown-content"
+                  .selected=${Object.keys(aspectRatioModes).indexOf(
+                    this._config?.dimensions?.aspect_ratio_mode || '',
+                  )}
+                >
+                  ${Object.keys(aspectRatioModes).map((key) => {
+                    return html`
+                      <paper-item .label="${key}"> ${aspectRatioModes[key]} </paper-item>
+                    `;
+                  })}
+                </paper-listbox>
+              </paper-dropdown-menu>
+              <br />
+              <paper-input
+                label=${localize('dimensions.aspect_ratio')}
+                prevent-invalid-input
+                .value=${this._config?.dimensions?.aspect_ratio
+                  ? String(this._config?.dimensions?.aspect_ratio)
+                  : ''}
+                .configValue=${'dimensions.aspect_ratio'}
+                @value-changed=${this._valueChanged}
+              ></paper-input>
               <ha-formfield
                 .label=${localize('editor.show_button') +
                 ': ' +
diff --git a/src/types.ts b/src/types.ts
index a4cd7aa8..3b0d22bc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -102,8 +102,8 @@ export const frigateCardConfigSchema = z.object({
     aspect_ratio:
       z.number().array().length(2).or(
         z.string()
-        .regex(/^\s*\d+\s*\/\s*\d+\s*$/)
-        .transform((input) => input.split("/").map((d) => Number(d)))
+        .regex(/^\s*\d+\s*[:\/]\s*\d+\s*$/)
+        .transform((input) => input.split(/[:\/]/).map((d) => Number(d)))
       ).default([16, 9]),
   }).optional(),