From 5c48747d0f947b20b1c8b43ddce5b6bfc3754002 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 26 Apr 2025 01:11:31 +0200
Subject: [PATCH] Add new zoom options (but they don't do anything yet)

---
 .../PlayerUiPanels/BaseExtensionSettings.vue  |   4 +-
 .../VideoSettings/CropOptionsPanel.vue        |  33 +-
 .../VideoSettings/StretchOptionsPanel.vue     |  28 +-
 .../VideoSettings/ZoomOptionsPanel.vue        | 294 ++++++++++++++----
 .../src/PlayerUiPanels/PlayerUiSettings.vue   |  27 +-
 src/ext/conf/ExtConfPatches.ts                | 147 ++++++++-
 src/ext/conf/ExtensionConf.ts                 |  89 +++++-
 7 files changed, 511 insertions(+), 111 deletions(-)

diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index b5b8a3e..9abbd3f 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -78,9 +78,7 @@
           </Popup>
           <button class="flex-grow" @click="exportSettings()">Export settings</button>
         </div>
-        <div>
-
-        </div>
+        <div></div>
         <ConfirmButton
           dialogType="danger"
           @onConfirmed="resetSettings"
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
index ac07d88..c0865f7 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
@@ -134,16 +134,25 @@
 </template>
 
 <script>
-import ShortcutButton from '../../../components/ShortcutButton.vue';
-import EditShortcutButton from '../../../components/EditShortcutButton';
-import EditModeMixin from '../../../utils/EditModeMixin';
-import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
-import CommsMixin from '../../../utils/CommsMixin';
-import AspectRatioType from '../../../../../common/enums/AspectRatioType.enum';
+import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
+import EditShortcutButton from '@csui/src/components/EditShortcutButton';
+import EditModeMixin from '@csui/src/utils/EditModeMixin';
+import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
+import CommsMixin from '@csui/src/utils/CommsMixin';
+import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
 
 export default {
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+  },
+  mixins: [
+    // ComputeActionsMixin,
+    EditModeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
   data() {
-
     return {
       AspectRatioType: AspectRatioType,
 
@@ -156,12 +165,6 @@ export default {
       }
     }
   },
-  mixins: [
-    // ComputeActionsMixin,
-    EditModeMixin,
-    KeyboardShortcutParserMixin,
-    CommsMixin
-  ],
   props: [
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
@@ -169,10 +172,6 @@ export default {
     'isEditing',
     'allowSettingSiteDefault'
   ],
-  components: {
-    ShortcutButton,
-    EditShortcutButton,
-  },
   computed: {
     siteDefaultCrop()  {
       if (!this.siteSettings) {
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
index 78f10f5..fe71110 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
@@ -50,10 +50,10 @@
               v-model="editModeOptions.stretch.selected.arguments.limit"
             >
           </div>
-          <div class="hint">
-            If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
-            Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
-          </div>
+        </div>
+        <div class="hint">
+          If vertical borders would take up less than this much of screen width, the image will be stretched. If the borders are too thick, image will not be stretched.
+          Value of 1 means 100%. Value of 0.1 means vertical black bars can take up 10% of the width at most. There's no validation on this, use common sense.
         </div>
       </template>
 
@@ -70,12 +70,12 @@
               @blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
             >
           </div>
-          <div class="hint">
+        </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>
         <div class="field">
           <div class="label">
             Label:
@@ -83,9 +83,9 @@
           <div class="input">
             <input v-model="editModeOptions.stretch.selected.label">
           </div>
-          <div class="hint">
-            Label for the button. You can make it say something other than ratio.
-          </div>
+        </div>
+        <div class="hint">
+          Label for the button. You can make it say something other than ratio.
         </div>
       </template>
 
@@ -99,11 +99,11 @@
           >
           </EditShortcutButton>
         </div>
-        <div class="hint">
-          <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
-          The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
-          any keyboard shortcuts defined by the site itself.
-        </div>
+      </div>
+      <div class="hint">
+        <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
+        The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
+        any keyboard shortcuts defined by the site itself.
       </div>
 
       <div class="flex flex-row flex-end">
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
index 9a1d94d..09460b2 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
@@ -1,86 +1,232 @@
 <template>
   <div class="flex flex-col">
-    <!--
-      min, max and value need to be implemented in js as this slider
-      should use logarithmic scale
-    -->
-    <div class="flex flex-row flex-end">
-      <Button
-        v-if="zoomAspectRatioLocked"
-        label="Unlock aspect ratio"
-        icon="lock-open"
-        :fixedWidth="true"
-        @click="toggleZoomAr()"
+
+    <div class="sub-panel-content flex flex-row flex-wrap">
+
+      <ShortcutButton
+        v-for="(command, index) of settings?.active.commands.zoom"
+        class="flex b3 button"
+        :class="{active: editMode ? index === editModeOptions?.zoom?.selectedIndex : isActiveZoom(command)}"
+        :key="index"
+        :label="command.label"
+        :shortcut="getKeyboardShortcutLabel(command)"
+        @click="editMode ? editAction(command, index, 'zoom') : execAction(command)"
       >
-      </Button>
-      <Button
-        v-else
-        label="Lock aspect ratio"
-        icon="lock"
-        :fixedWidth="true"
-        @click="toggleZoomAr()"
-      >
-      </Button>
+      </ShortcutButton>
+
+      <!-- "Add new" button -->
+      <ShortcutButton
+        v-if="editMode"
+        class="button b3"
+        :class="{active: editMode ? editModeOptions?.crop?.selectedIndex === null : isActiveCrop(command)}"
+        label="Add new"
+        @click="editAction(
+          {action: 'set-ar-zoom', label: 'New aspect ratio', arguments: {type: AspectRatioType.Fixed}},
+          null,
+          'zoom'
+        )"
+      ></ShortcutButton>
     </div>
-    <template v-if="zoomAspectRatioLocked">
-      <input id="_input_zoom_slider"
-              class="input-slider"
-              type="range"
-              step="any"
-              min="-1"
-              max="3"
-              :value="zoom.x"
-              @input="changeZoom($event.target.value)"
-              />
-      <div style="overflow: auto" class="flex flex-row">
-        <div class="flex flex-grow medium-small x-pad-1em">
-          Zoom: {{getZoomForDisplay('x')}}
+
+    <template v-if="isEditing">
+      <div v-if="editMode && editModeOptions?.zoom?.selected" class="sub-panel-content">
+        <div class="edit-action-area-header">
+          <span class="text-primary">Editing options for:</span> <b>{{editModeOptions?.zoom?.selected?.label}}</b>&nbsp;
+          <template v-if="editModeOptions?.zoom?.selectedIndex === null && editModeOptions?.zoom?.selected?.label !== 'New aspect ratio'">(New ratio)</template>
         </div>
-        <div class="flex flex-nogrow flex-noshrink medium-small">
-          <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+        <div class="edit-action-area">
+          <!-- Some options are only shown for type 4 (fixed) zooms -->
+          <template v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed">
+            <div class="field">
+              <div class="label">
+                Ratio:
+              </div>
+              <div class="input">
+                <!-- 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"
+                >
+              </div>
+            </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:
+              </div>
+              <div class="input">
+                <input v-model="editModeOptions.zoom.selected.label">
+              </div>
+            </div>
+            <div class="hint">
+              Label for the button. You can make it say something other than ratio.
+            </div>
+          </template>
+
+          <!-- editing keyboard shortcuts is always allowed -->
+          <div class="field">
+            <div class="label">Shortcut:</div>
+            <div class="">
+              <EditShortcutButton
+                :shortcut="editModeOptions?.zoom?.selected?.shortcut"
+                @shortcutChanged="updateSelectedShortcut($event, 'zoom')"
+              >
+              </EditShortcutButton>
+            </div>
+          </div>
+          <div class="hint">
+            <b>Note:</b> Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt.
+            The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override
+            any keyboard shortcuts defined by the site itself.
+          </div>
+
+          <div class="flex flex-row flex-end">
+            <div
+              v-if="editModeOptions?.zoom?.selected?.arguments?.type === AspectRatioType.Fixed && editModeOptions?.zoom?.selectedIndex !== null"
+              class="button"
+              @click="deleteAction('zoom')"
+            >
+              <mdicon name="delete"></mdicon> Delete
+            </div>
+            <div class="flex-grow"></div>
+            <div class="button" @click="cancelEdit('zoom')">Cancel</div>
+            <div class="button" @click="saveShortcut('zoom')">
+              <mdicon name="floppy"></mdicon>
+              &nbsp;
+              <template v-if="editModeOptions?.zoom?.selectedIndex === null">Add</template>
+              <template v-else>Save</template>
+            </div>
+          </div>
+
         </div>
       </div>
+
+      <!-- <div v-if="siteSettings && allowSettingSiteDefault" class="edit-action-area">
+        <div class="field">
+          <div class="label">Default for this site</div>
+          <div class="select">
+            <select
+              :value="siteDefaultZoom"
+              @change="setDefaultZoom($event, 'site')"
+            >
+              <option
+                v-for="(command, index) of settings?.active.commands.zoom"
+                :key="index"
+                :value="JSON.stringify(command.arguments)"
+              >
+                {{command.label}}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div> -->
     </template>
     <template v-else>
-      <div>Horizontal zoom</div>
-      <input id="_input_zoom_slider"
-              class="input-slider"
-              type="range"
-              step="any"
-              min="-1"
-              max="4"
-              :value="zoom.x"
-              @input="changeZoom($event.target.value, 'x')"
-      />
-
-      <div>Vertical zoom</div>
-      <input id="_input_zoom_slider"
-              class="input-slider"
-              type="range"
-              step="any"
-              min="-1"
-              max="3"
-              :value="zoom.y"
-              @input="changeZoom($event.target.value, 'y')"
-      />
-
-      <div style="overflow: auto" class="flex flex-row">
-        <div class="flex flex-grow medium-small x-pad-1em">
-          Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
-        </div>
-        <div class="flex flex-nogrow flex-noshrink medium-small">
-          <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
-        </div>
+      <!--
+        min, max and value need to be implemented in js as this slider
+        should use logarithmic scale
+      -->
+      <div class="flex flex-row flex-end">
+        <Button
+          v-if="zoomAspectRatioLocked"
+          label="Unlock aspect ratio"
+          icon="lock-open"
+          :fixedWidth="true"
+          @click="toggleZoomAr()"
+        >
+        </Button>
+        <Button
+          v-else
+          label="Lock aspect ratio"
+          icon="lock"
+          :fixedWidth="true"
+          @click="toggleZoomAr()"
+        >
+        </Button>
       </div>
+      <template v-if="zoomAspectRatioLocked">
+        <input id="_input_zoom_slider"
+                class="input-slider"
+                type="range"
+                step="any"
+                min="-1"
+                max="3"
+                :value="zoom.x"
+                @input="changeZoom($event.target.value)"
+                />
+        <div style="overflow: auto" class="flex flex-row">
+          <div class="flex flex-grow medium-small x-pad-1em">
+            Zoom: {{getZoomForDisplay('x')}}
+          </div>
+          <div class="flex flex-nogrow flex-noshrink medium-small">
+            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div>Horizontal zoom</div>
+        <input id="_input_zoom_slider"
+                class="input-slider"
+                type="range"
+                step="any"
+                min="-1"
+                max="4"
+                :value="zoom.x"
+                @input="changeZoom($event.target.value, 'x')"
+        />
+
+        <div>Vertical zoom</div>
+        <input id="_input_zoom_slider"
+                class="input-slider"
+                type="range"
+                step="any"
+                min="-1"
+                max="3"
+                :value="zoom.y"
+                @input="changeZoom($event.target.value, 'y')"
+        />
+
+        <div style="overflow: auto" class="flex flex-row">
+          <div class="flex flex-grow medium-small x-pad-1em">
+            Zoom: {{getZoomForDisplay('x')}} x {{getZoomForDisplay('y')}}
+          </div>
+          <div class="flex flex-nogrow flex-noshrink medium-small">
+            <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
+          </div>
+        </div>
+      </template>
     </template>
   </div>
 </template>
 
 <script>
+import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
+import EditShortcutButton from '@csui/src/components/EditShortcutButton';
+import EditModeMixin from '@csui/src/utils/EditModeMixin';
+import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
+import CommsMixin from '@csui/src/utils/CommsMixin';
+import AspectRatioType from '@src/common/enums/AspectRatioType.enum';
 
 export default {
+  components: {
+    ShortcutButton,
+    EditShortcutButton,
+  },
+  mixins: [
+    // ComputeActionsMixin,
+    EditModeMixin,
+    KeyboardShortcutParserMixin,
+    CommsMixin
+  ],
   data() {
     return {
+      AspectRatioType,
+
       zoomAspectRatioLocked: true,
       zoom: {
         x: 0,
@@ -96,15 +242,26 @@ export default {
       }
     }
   },
-  mixins: [
-
-  ],
   props: [
     'settings',      // required for buttons and actions, which are global
     'siteSettings',
     'eventBus',
     'isEditing'
   ],
+  created() {
+    if (this.isEditing) {
+      this.enableEditMode();
+    }
+  },
+  watch: {
+    isEditing(newValue, oldValue) {
+      if (newValue) {
+        this.enableEditMode();
+      } else {
+        this.disableEditMode();
+      }
+    }
+  },
   methods: {
     getZoomForDisplay(axis) {
       // zoom is internally handled logarithmically, because we want to have x0.5, x1, x2, x4 ... magnifications
@@ -146,6 +303,9 @@ export default {
         this.eventBus?.sendToTunnel('set-zoom', {zoom: newZoom, axis: axis ?? 'x'});
       }
     },
+    isActiveZoom(command) {
+      return false;
+    }
   }
 }
 
diff --git a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
index 38535bb..b336059 100644
--- a/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PlayerUiSettings.vue
@@ -135,6 +135,19 @@
             :isEditing="true"
           ></StretchOptionsPanel>
         </div>
+
+        <!-- ZOOM OPTIONS -->
+        <div>
+          <div class="flex flex-row">
+            <h3 class="mth3">ZOOM OPTIONS</h3>
+          </div>
+
+          <ZoomOptionsPanel
+            :settings="settings"
+            :eventBus="eventBus"
+            :isEditing="true"
+          ></ZoomOptionsPanel>
+        </div>
       </div>
 
     </div>
@@ -142,16 +155,18 @@
 </template>
 
 <script>
-import Button from '../components/Button.vue'
-import BrowserDetect from '../../../ext/conf/BrowserDetect';
-import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel.vue'
-import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel.vue'
+import Button from '@csui/src/components/Button.vue'
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
+import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
+import StretchOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue'
+import ZoomOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue'
 
 export default {
   components: {
     Button,
     CropOptionsPanel,
-    StretchOptionsPanel
+    StretchOptionsPanel,
+    ZoomOptionsPanel,
   },
   data() {
     return {
@@ -267,7 +282,7 @@ export default {
   gap: 1rem;
 
   > * {
-    width: calc(50% - 0.5rem);
+    width: calc(33% - 0.5rem);
   }
 }
 
diff --git a/src/ext/conf/ExtConfPatches.ts b/src/ext/conf/ExtConfPatches.ts
index fd45942..be51483 100644
--- a/src/ext/conf/ExtConfPatches.ts
+++ b/src/ext/conf/ExtConfPatches.ts
@@ -10,7 +10,7 @@ import CropModePersistence from '../../common/enums/CropModePersistence.enum';
 import AspectRatioType from '../../common/enums/AspectRatioType.enum';
 import { update } from 'lodash';
 
-const ExtensionConfPatch = [
+const ExtensionConfPatch = Object.freeze([
   {
     forVersion: '6.2.4',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
@@ -35,6 +35,19 @@ const ExtensionConfPatch = [
   }, {
     forVersion: '6.2.6',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
+
+      console.warn('[ultrawidify] STARTING SETTINGS MIGRATION TO 6.2.6');
+
+      if (!userOptions.commands) {
+        userOptions.commands = {
+          zoom: [],
+          crop: [],
+          stretch: [],
+          pan: [],
+          internal: []
+        };
+      }
+
       userOptions.commands.zoom = [{
         action: 'change-zoom',
         label: 'Zoom +5%',
@@ -92,9 +105,139 @@ const ExtensionConfPatch = [
           showDetectionDetails: true
         }
       }
+
+      const newZoomActions = [{
+        action: 'set-zoom',
+        label: 'Reset zoom',
+        shortcut: {
+          key: 'r',
+          code: 'KeyR',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: true,
+          onKeyDown: false,
+        },
+        internalOnly: true,
+        actionId: 'set-zoom-reset'
+      }, {
+        action: 'set-ar-zoom',
+        label: 'Automatic',
+        comment: 'Automatically detect aspect ratio and zoom accordingly',
+        arguments: {
+          type: AspectRatioType.Automatic
+        },
+        shortcut: {
+          key: 'a',
+          code: 'KeyA',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: true,
+          onKeyDown: false,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: 'Cycle',
+        comment: 'Cycle through zoom options',
+        arguments: {
+          type: AspectRatioType.Cycle
+        },
+        shortcut: {
+          key: 'c',
+          code: 'KeyC',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: true,
+          onKeyDown: false,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: '21:9',
+        comment: 'Zoom for 21:9 aspect ratio (1:2.39)',
+        arguments: {
+          type: AspectRatioType.Fixed,
+          ratio: 2.39
+        },
+        shortcut: {
+          key: 'd',
+          code: 'KeyD',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: false,
+          onKeyDown: true,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: '18:9',
+        comment: 'Zoom for 18:9 aspect ratio (1:2)',
+        arguments: {
+          type: AspectRatioType.Fixed,
+          ratio: 1.78
+        },
+        shortcut: {
+          key: 's',
+          code: 'KeyS',
+          ctrlKey: false,
+          metaKey: false,
+          altKey: false,
+          shiftKey: true,
+          onKeyUp: false,
+          onKeyDown: true,
+        }
+      }, {
+        action: 'set-ar-zoom',
+        label: '32:9',
+        comment: 'Zoom for 32:9 aspect ratio',
+        arguments: {
+          type: AspectRatioType.Fixed,
+          ratio: 3.56
+        },
+      }];
+
+      const compareShortcuts = (a: any, b: any) => {
+        if (!a || !b) {
+          return false;
+        }
+
+        return a.key === b.key && b.code === b.code && a.ctrlKey == b.ctrlKey && a.shiftKey == b.shiftKey && a.metaKey == a.metaKey && a.altKey == b.altKey;
+      }
+
+      const hasConflict = (shortcut: any) => {
+        for (const ct in userOptions.commands) {
+          for (const command of userOptions.commands[ct]) {
+            if (compareShortcuts(shortcut, command.shortcut)) {
+              return true;
+            }
+          }
+        }
+
+        return false;
+      }
+
+      for (const zoomAction of newZoomActions) {
+        if (
+          !userOptions.commands.zoom.find(
+            x => x.action === zoomAction.action
+              && x.arguments?.type === zoomAction.arguments?.type
+              && x.arguments?.ratio === zoomAction.arguments?.ratio
+          )
+        ) {
+          userOptions.commands.zoom.push({
+            ...zoomAction,
+            shortcut: hasConflict(zoomAction.shortcut) ? undefined : zoomAction.shortcut
+          });
+        }
+      }
     }
   }
-];
+]);
 
 
 export default ExtensionConfPatch;
diff --git a/src/ext/conf/ExtensionConf.ts b/src/ext/conf/ExtensionConf.ts
index 3258463..a3597dd 100644
--- a/src/ext/conf/ExtensionConf.ts
+++ b/src/ext/conf/ExtensionConf.ts
@@ -401,11 +401,96 @@ const ExtensionConf: SettingsInterface = {
     }, {
       action: 'set-zoom',
       label: 'Reset zoom',
-      arguments: {
-        zoom: 1,
+      shortcut: {
+        key: 'r',
+        code: 'KeyR',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: true,
+        onKeyDown: false,
       },
       internalOnly: true,
       actionId: 'set-zoom-reset'
+    }, {
+      action: 'set-ar-zoom',
+      label: 'Automatic',
+      comment: 'Automatically detect aspect ratio',
+      arguments: {
+        type: AspectRatioType.Automatic
+      },
+      shortcut: {
+        key: 'a',
+        code: 'KeyA',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: true,
+        onKeyDown: false,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: 'Cycle',
+      comment: 'Cycle through crop options',
+      arguments: {
+        type: AspectRatioType.Cycle
+      },
+      shortcut: {
+        key: 'c',
+        code: 'KeyC',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: true,
+        onKeyDown: false,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: '21:9',
+      comment: 'Crop for 21:9 aspect ratio (1:2.39)',
+      arguments: {
+        type: AspectRatioType.Fixed,
+        ratio: 2.39
+      },
+      shortcut: {
+        key: 'd',
+        code: 'KeyD',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: false,
+        onKeyDown: true,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: '18:9',
+      comment: 'Crop for 18:9 aspect ratio (1:2)',
+      arguments: {
+        type: AspectRatioType.Fixed,
+        ratio: 1.78
+      },
+      shortcut: {
+        key: 's',
+        code: 'KeyS',
+        ctrlKey: false,
+        metaKey: false,
+        altKey: false,
+        shiftKey: true,
+        onKeyUp: false,
+        onKeyDown: true,
+      }
+    }, {
+      action: 'set-ar-zoom',
+      label: '32:9',
+      comment: 'Crop for 32:9 aspect ratio',
+      arguments: {
+        type: AspectRatioType.Fixed,
+        ratio: 3.56
+      },
     }],
     pan: [{
       action: 'set-alignment',