Get sliders to update with values from aspect ratio options

src/csui/PlayerUiPanels/VideoSettings.vue

@@ -61,41 +61,18 @@
           </Button>
         </div>
         <template v-if="zoomAspectRatioLocked">
-          <!-- <div class="flex flex-row">
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="-5 %"
-            >
-            </ShortcutButton>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="-1 %"
-            >
-            </ShortcutButton>
-            <div class="flex-grow"></div>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="+1 %"
-            >
-            </ShortcutButton>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="+5 %"
-            >
-            </ShortcutButton>
-          </div> -->
           <input id="_input_zoom_slider"
                   class="input-slider"
                   type="range"
                   step="any"
                   min="-1"
                   max="4"
-                  :value="logarithmicZoom"
+                  :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: {{(zoom * 100).toFixed()}}%
+              Zoom: {{(zoom.x * 100).toFixed()}}%
             </div>
             <div class="flex flex-nogrow flex-noshrink medium-small">
               <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
@@ -104,76 +81,30 @@
         </template>
         <template v-else>
           <div>Horizontal zoom</div>
-          <!-- <div class="flex flex-row">
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="-5 %"
-            >
-            </ShortcutButton>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="-1 %"
-            >
-            </ShortcutButton>
-            <div class="flex-grow"></div>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="+1 %"
-            >
-            </ShortcutButton>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="+5 %"
-            >
-            </ShortcutButton>
-          </div> -->
           <input id="_input_zoom_slider"
                   class="input-slider"
                   type="range"
                   step="any"
                   min="-1"
                   max="4"
-                  :value="logarithmicZoom"
+                  :value="zoom.x"
                   @input="changeZoom($event.target.value, 'x')"
           />
 
           <div>Vertical zoom</div>
-          <div class="flex flex-row">
-            <!-- <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="-5 %"
-            >
-            </ShortcutButton>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="-1 %"
-            >
-            </ShortcutButton>
-            <div class="flex-grow"></div>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="+1 %"
-            >
-            </ShortcutButton>
-            <ShortcutButton
-              class="flex b3 flex-grow button"
-              label="+5 %"
-            >
-            </ShortcutButton> -->
-          </div>
           <input id="_input_zoom_slider"
                   class="input-slider"
                   type="range"
                   step="any"
                   min="-1"
                   max="4"
-                  :value="logarithmicZoom"
+                  :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: {{(zoomX * 100).toFixed()}}% x {{(zoomY * 100).toFixed()}}%
+              Zoom: {{(zoom.x * 100).toFixed()}}% x {{(zoom.y * 100).toFixed()}}%
             </div>
             <div class="flex flex-nogrow flex-noshrink medium-small">
               <a class="_zoom_reset x-pad-1em" @click="resetZoom()">reset</a>
@@ -222,7 +153,11 @@ export default {
       exec: null,
       scope: 'page',
       CropModePersistence: CropModePersistence,
-      zoomAspectRatioLocked: true
+      zoomAspectRatioLocked: true,
+      zoom: {
+        x: 1,
+        y: 1
+      }
     }
   },
   mixins: [
@@ -236,6 +171,15 @@ export default {
   ],
   created() {
     this.exec = new ExecAction(this.settings, window.location.hostname);
+    this.eventBus.subscribe('announce-zoom', {
+      function: (config) => {
+        this.zoom = {
+          x: Math.log2(config.x),
+          y: Math.log2(config.y)
+        };
+      }
+    });
+    // this.eventBus.send('get-current-config');
   },
   components: {
     ShortcutButton,
@@ -243,9 +187,6 @@ export default {
     AlignmentOptionsControlComponent
   },
   computed: {
-    logarithmicZoom: function(){
-      return Math.log2(this.zoom || 1);
-    }
   },
   methods: {
     async openOptionsPage() {
@@ -276,7 +217,9 @@ export default {
       newZoom = Math.pow(2, newZoom);
       console.log('new zoom:', newZoom);
 
-      this.eventBus.send('set-zoom', {zoom: newZoom, axis: axis});
+      this.eventBus.send('set-zoom', {zoom: newZoom, axis: axis, noAnnounce: true});
+
+      // this.zoom = newZoom;
     },
   }
 }

src/ext/conf/ExtensionConf.ts

@@ -552,9 +552,6 @@ const ExtensionConf: SettingsInterface = {
   // -----------------------------------------
   //             ::: ACTIONS :::
   // -----------------------------------------
-  // Nastavitve za ukaze. Zamenja stare nastavitve za bližnične tipke.
-  //
-  // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov.
   actions: [{
     name: 'Trigger automatic detection',    // name displayed in settings
     label: 'Automatic',                     // name displayed in ui (can be overridden in scope/playerUi)
@@ -1353,7 +1350,6 @@ const ExtensionConf: SettingsInterface = {
   // -----------------------------------------
   //       ::: SITE CONFIGURATION :::
   // -----------------------------------------
-  // Nastavitve za posamezno stran
   // Config for a given page:
   //
   // <hostname> : {
@@ -1370,7 +1366,6 @@ const ExtensionConf: SettingsInterface = {
   //    override: <true|false>           // override user settings for this site on update
   // }
   //
-  // Veljavne vrednosti za možnosti
   // Valid values for options:
   //
   //     status, arStatus, statusEmbedded:

src/ext/lib/video-transform/Resizer.ts

@@ -74,7 +74,7 @@ class Resizer {
       }
     }],
     'set-zoom': [{
-      function: (config: any) => this.setZoom(config.zoom, config.axis)
+      function: (config: any) => this.setZoom(config.zoom, config.axis, config.noAnnounce)
     }],
     'change-zoom': [{
       function: (config: any) => this.zoomStep(config.step)
@@ -331,13 +331,15 @@ class Resizer {
     this.applyScaling(stretchFactors);
   }
 
-  private applyScaling(stretchFactors) {
+  applyScaling(stretchFactors, options?: {noAnnounce?: boolean}) {
-    console.log('applying scaling factors:', stretchFactors);
-
     this.stretcher.chromeBugMitigation(stretchFactors);
 
-    let translate = this.computeOffsets(stretchFactors);
+    // let the UI know
+    if(!options?.noAnnounce) {
+      this.conf.eventBus.send('announce-zoom', {x: stretchFactors.xFactor, y: stretchFactors.yFactor});
+    }
 
+    let translate = this.computeOffsets(stretchFactors);
     this.applyCss(stretchFactors, translate);
   }
 
@@ -459,10 +461,10 @@ class Resizer {
     }
   }
 
-  setZoom(zoomLevel: number, axis?: 'x' | 'y', no_announce?) {
+  setZoom(zoomLevel: number, axis?: 'x' | 'y', noAnnounce?) {
     this.manualZoom = true;
     console.log('setting zoom:', zoomLevel);
-    this.zoom.setZoom(zoomLevel, axis, no_announce);
+    this.zoom.setZoom(zoomLevel, axis, noAnnounce);
   }
 
   zoomStep(step){

src/ext/lib/video-transform/Zoom.ts

@@ -59,7 +59,7 @@ class Zoom {
     this.processZoom();
   }
 
-  setZoom(scale: number, axis?: 'x' |'y', no_announce?){
+  setZoom(scale: number, axis?: 'x' |'y', noAnnounce?){
     this.logger.log('info', 'debug', "[Zoom::setZoom] Setting zoom to", scale, "!");
 
     // NOTE: SCALE IS NOT LOGARITHMIC
@@ -87,9 +87,7 @@ class Zoom {
   processZoom() {
     // this.conf.resizer.toFixedAr();
 
-    this.conf.restoreAr();
+    this.conf.resizer.applyScaling({xFactor: this.scale, yFactor: this.scaleY}, {noAnnounce: true});
-    this.conf.announceZoom(this.scale);
-
   }
 
   applyZoom(stretchFactors){