Add new zoom options (but they don't do anything yet)

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"

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

@@ -134,16 +134,25 @@
 </template>
 
 <script>
-import ShortcutButton from '../../../components/ShortcutButton.vue';
+import ShortcutButton from '@csui/src/components/ShortcutButton.vue';
-import EditShortcutButton from '../../../components/EditShortcutButton';
+import EditShortcutButton from '@csui/src/components/EditShortcutButton';
-import EditModeMixin from '../../../utils/EditModeMixin';
+import EditModeMixin from '@csui/src/utils/EditModeMixin';
-import KeyboardShortcutParserMixin from '../../../utils/KeyboardShortcutParserMixin';
+import KeyboardShortcutParserMixin from '@csui/src/utils/KeyboardShortcutParserMixin';
-import CommsMixin from '../../../utils/CommsMixin';
+import CommsMixin from '@csui/src/utils/CommsMixin';
-import AspectRatioType from '../../../../../common/enums/AspectRatioType.enum';
+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) {

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

@@ -50,11 +50,11 @@
               v-model="editModeOptions.stretch.selected.arguments.limit"
             >
           </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>
-        </div>
       </template>
 
       <!-- Some options are only shown for type 5 (fixed) stretch -->
@@ -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>
         <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,10 +83,10 @@
           <div class="input">
             <input v-model="editModeOptions.stretch.selected.label">
           </div>
+        </div>
         <div class="hint">
           Label for the button. You can make it say something other than ratio.
         </div>
-        </div>
       </template>
 
       <!-- editing keyboard shortcuts is always allowed -->
@@ -99,12 +99,12 @@
           >
           </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>
 
       <div class="flex flex-row flex-end">
         <div

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

@@ -1,5 +1,132 @@
 <template>
   <div class="flex flex-col">
+
+    <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)"
+      >
+      </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="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="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>
       <!--
         min, max and value need to be implemented in js as this slider
         should use logarithmic scale
@@ -73,14 +200,33 @@
           </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;
+    }
   }
 }
 

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 Button from '@csui/src/components/Button.vue'
-import BrowserDetect from '../../../ext/conf/BrowserDetect';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
-import CropOptionsPanel from './PanelComponents/VideoSettings/CropOptionsPanel.vue'
+import CropOptionsPanel from '@csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
-import StretchOptionsPanel from './PanelComponents/VideoSettings/StretchOptionsPanel.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);
   }
 }
 

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;

src/ext/conf/ExtensionConf.ts

@@ -401,11 +401,96 @@ const ExtensionConf: SettingsInterface = {
     }, {
       action: 'set-zoom',
       label: 'Reset zoom',
-      arguments: {
+      shortcut: {
-        zoom: 1,
+        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',