Add validation to aspect ratio input in shortcut settings, fix parsing of aspect ratios given as X:Y

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue

@@ -55,10 +55,13 @@
             <!-- We do an ugly in order to avoid spamming functions down at the bottom -->
             <input
               v-model="editModeOptions.crop.selected.arguments.ratio"
-              @blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
+              @blur="updateLabel('crop')"
             >
           </div>
         </div>
+        <div v-if="editModeOptions.crop?.error" class="hint error">
+          {{editModeOptions.crop.error}}
+        </div>
         <div class="hint">
           You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
           (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue

@@ -70,10 +70,13 @@
             <!-- We do an ugly in order to avoid spamming functions down at the bottom -->
             <input
               v-model="editModeOptions.stretch.selected.arguments.ratio"
-              @blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
+              @blur="updateLabel('stretch')"
             >
           </div>
         </div>
+        <div v-if="editModeOptions.stretch?.error" class="hint error">
+          {{editModeOptions.stretch.error}}
+        </div>
         <div class="hint">
             You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
             (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter

src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue

@@ -48,16 +48,20 @@
                 <!-- We do an ugly in order to avoid spamming functions down at the bottom -->
                 <input
                   v-model="editModeOptions.zoom.selected.arguments.ratio"
-                  @blur="editModeOptions.zoom.selected.label === 'New aspect ratio' ? editModeOptions.zoom.selected.label = editModeOptions.zoom.selected.arguments.ratio : null"
+                  @blur="updateLabel('zoom')"
                 >
               </div>
             </div>
+            <div v-if="editModeOptions.zoom?.error" class="hint error">
+              {{editModeOptions.zoom.error}}
+            </div>
             <div class="hint">
               You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
               (in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
               your numbers without quote marks. Number will be converted to factor form on save.
             </div>
 
+
             <div class="field">
               <div class="label">
                 Label:

src/csui/src/res-common/common.scss

@@ -210,6 +210,10 @@ button, .button {
   margin-left: 5rem;
   // width: 100%;
   box-sizing:border-box;
+
+  &.error {
+    color: #f41;
+  }
 }
 
 .options-bar {

src/csui/src/utils/EditModeMixin.js

@@ -52,7 +52,47 @@ export default {
       }
     },
 
+    validateAspectRatio(actionType) {
+      // deal with potentially invalid aspect ratios
+      if (this.editModeOptions[actionType].selected.arguments.ratio.includes(':')) {
+        const ratioParts = this.editModeOptions[actionType].selected.arguments.ratio.split(':');
+        if (ratioParts.length !== 2) {
+          this.editModeOptions[actionType].error = 'Entered aspect ratio is not valid.';
+          return false;
+        } else {
+          const ratio = ratioParts[0] / ratioParts[1];
+          if (isNaN(ratio) || ratio <= 0) {
+            this.editModeOptions[actionType].error = 'Entered aspect ratio is not valid.';
+            return false;
+          }
+          this.editModeOptions[actionType].selected.arguments.ratio = ratio;
+        }
+      } else {
+        if (isNaN(this.editModeOptions[actionType].selected.arguments.ratio)) {
+          this.editModeOptions[actionType].error = "Entered aspect ratio is not valid.";
+          return false;
+        }
+      }
+
+      delete this.editModeOptions[actionType].error;
+      return true;
+    },
+
+    /**
+     *  Updates button label, ideally after aspect ratio is entered,
+     *  after input field blurred, and only if aspect ratio is valid.
+     */
+    updateLabel(actionType) {
+      if (this.validateAspectRatio(actionType) && this.editModeOptions[actionType].selected.label === 'New aspect ratio') {
+        this.editModeOptions[actionType].selected.label = this.editModeOptions[actionType].selected.arguments.ratio;
+      }
+    },
+
     saveShortcut(actionType) {
+      if (! this.validateAspectRatio(actionType)) {
+        return;
+      }
+
       if (!this.editModeOptions[actionType]?.selectedIndex) {
         this.settings.active.commands[actionType].push(this.editModeOptions[actionType].selected);
       }