Show last selected aspect ratio in the UI

src/csui/PlayerUiBase.vue

@@ -82,6 +82,8 @@
           <template v-if="settingsInitialized">
             <VideoSettings
               :settings="settings"
+              :eventBus="eventBus"
+              :site="site"
             ></VideoSettings>
             <!-- <ResizerDebugPanel :debugData="debugData">
             </ResizerDebugPanel> -->
@@ -101,6 +103,7 @@ import BrowserDetect from '../ext/conf/BrowserDetect';
 import ExecAction from './src/ui-libs/ExecAction';
 import Logger from '../ext/lib/Logger';
 import Settings from '../ext/lib/Settings';
+import EventBus from '../ext/lib/EventBus';
 
 export default {
   components: {
@@ -114,6 +117,7 @@ export default {
       BrowserDetect: BrowserDetect,
       settingsInitialized: false,
       execAction: new ExecAction(),
+      eventBus: new EventBus(),
       logger: null,
 
       // NOTE: chromium doesn't allow us to access window.parent.location
@@ -227,6 +231,8 @@ export default {
           this.site = event.origin.split('//')[1];
         }
         this.handleProbe(event.data, event.origin);
+      } else if (event.data.action === 'uw-bus-tunnel') {
+        this.handleBusTunnelIn(event.data.payload);
       }
     },
 
@@ -273,6 +279,10 @@ export default {
       );
     },
 
+    handleBusTunnelIn(payload) {
+      this.eventBus.send(payload.action, payload.config);
+    },
+
     selectTab(tab) {
       console.log('selected tab:', tab);
       console.warn('NOTE: tab selection is not syet inplemented!')
@@ -282,12 +292,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 @import 'res/css/uwui-base.scss';
 @import 'res/css/colors.scss';
 @import 'res/css/font/overpass.css';
 @import 'res/css/font/overpass-mono.css';
 @import 'res/css/common.scss';
+@import './src/res-common/_variables';
 
 // .relative-wrapper {
 //   position: relative;
@@ -436,8 +446,8 @@ export default {
         opacity: 1;
       }
       &.active {
-        opacity: 1;
-        background-color: rgba(54, 31, 21, 0.5);
+        opacity: 1.0;
+        background-color: $primaryBg;
         color: rgb(255, 174, 107);
         border-bottom: 1px solid rgba(116, 78, 47, 0.5);
         border-top: 1px solid rgba(116, 78, 47, 0.5);

src/csui/src/PlayerUiPanels/VideoSettings.vue

@@ -39,6 +39,7 @@
         <div class="sub-panel-content flex flex-row flex-wrap">
           <ShortcutButton v-for="(command, index) of settings?.active.commands.crop"
                           class="flex b3 button"
+                          :class="{active: isActiveCrop(command)}"
                           :key="index"
                           :label="command.label"
                           :shortcut="parseShortcut(command)"
@@ -272,6 +273,12 @@ export default {
         y: 0
       },
       editMode: true,
+      resizerConfig: {
+        crop: null,
+        stretch: null,
+        zoom: null,
+        pan: null
+      }
     }
   },
   mixins: [
@@ -282,6 +289,7 @@ export default {
     'frame',
     'cropModePersistence',
     'eventBus',
+    'site'
   ],
   created() {
     this.exec = new ExecAction(this.settings, window.location.hostname);
@@ -295,6 +303,10 @@ export default {
     //   }
     // });
     // this.eventBus.send('get-current-config');
+    this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});
+  },
+  mounted() {
+    this.eventBus.sendToTunnel('get-ar');
   },
   components: {
     ShortcutButton,
@@ -340,8 +352,7 @@ export default {
     },
     execAction(command) {
       const cmd = JSON.parse(JSON.stringify(command));
-      window.parent.postMessage(cmd, '*');
-      // this.eventBus?.send(command.action, command.arguments);
+      this.eventBus?.sendToTunnel(cmd.action, cmd.arguments);
     },
     parseShortcut(command) {
       if (! command.shortcut) {
@@ -418,6 +429,44 @@ export default {
           this.settings.active.stretch.default = commandArguments;
       }
       this.settings.saveWithoutReload();
+    },
+
+    /**
+     * Handles 'uw-config-broadcast' messages
+     */
+    handleConfigBroadcast(message) {
+      if (message.type === 'ar') {
+        this.resizerConfig.crop = message.config;
+      }
+
+      this.$nextTick( () => this.$forceUpdate() );
+    },
+
+    /**
+     * Determines whether a given crop command is the currently active one
+     */
+    isActiveCrop(cropCommand) {
+      if (! this.resizerConfig.crop) {
+        return false;
+      }
+
+      const defaultCrop = this.settings.getDefaultCrop(this.site);
+
+      if (cropCommand.arguments.type === AspectRatioType.Automatic) {
+        return this.resizerConfig.crop.type === AspectRatioType.Automatic
+          || this.resizerConfig.crop.type === AspectRatioType.AutomaticUpdate
+          || this.resizerConfig.crop.type === AspectRatioType.Initial && defaultCrop === AspectRatioType.Automatic;
+      }
+      if (cropCommand.arguments.type === AspectRatioType.Reset) {
+        return this.resizerConfig.crop.type === AspectRatioType.Reset
+          || this.resizerConfig.crop.type === AspectRatioType.Initial && defaultCrop !== AspectRatioType.Automatic;
+      }
+      if (cropCommand.arguments.type === AspectRatioType.Fixed) {
+        return this.resizerConfig.crop.type === AspectRatioType.Fixed
+          && this.resizerConfig.crop.ratio === cropCommand.arguments.ratio;
+      }
+      // only legacy options (fitw, fith) left to handle:
+      return cropCommand.arguments.type === this.resizerConfig.crop.type;
     }
   }
 }

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

@@ -1,3 +1,5 @@
 $warning-color: #d6ba4a;
 
 $primary: rgb(255, 147, 85);
+$primaryBrighter: rgb(255, 174, 127);
+$primaryBg: rgba(54, 31, 21, 0.5);

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

@@ -40,6 +40,12 @@ h1, h2, h3 {
     background-color: rgba(11,11,11,0.9);
     border-bottom: 1px solid rgba($primary, 0.5);
   }
+
+  &.active {
+    color: $primary;
+    background-color: $primaryBg;
+    border-color: rgba($primary, .5);
+  }
 }
 .b3 {
   margin: 0.25rem;

src/ext/lib/EventBus.ts

@@ -35,6 +35,22 @@ export default class EventBus {
     }
   }
 
+  /**
+   * Send, but intended for sending commands from iframe to content scripts
+   * @param command
+   * @param config
+   */
+  sendToTunnel(command: string, config: any) {
+    window.parent.postMessage(
+      {
+        action: 'uw-bus-tunnel',
+        payload: {action: command, config}
+      },
+      '*'
+    );
+  }
+
+
   sendGlobal(command: string, config: any) {
     if (!this.commands ||!this.commands[command]) {
       // ensure send is not being called for commands that we have no subscriptions for

src/ext/lib/uwui/UI.js

@@ -87,6 +87,25 @@ class UI {
 
     // set uiIframe for handleMessage
     this.uiIframe = iframe;
+
+    /* set up event bus tunnel from content script to UI — necessary if we want to receive
+     * like current zoom levels & current aspect ratio & stuff. Some of these things are
+     * necessary for UI display in the popup.
+     */
+    this.eventBus.subscribe(
+      'uw-config-broadcast',
+      {
+        function: (config) => {
+          iframe.contentWindow.postMessage(
+            {
+              action: 'uw-bus-tunnel',
+              payload: {action: 'uw-config-broadcast', config}
+            },
+            uiURI
+          )
+        }
+      }
+    );
   }
 
 
@@ -102,8 +121,9 @@ class UI {
         }
         this.lastProbeResponseTs = event.data.ts;
         this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
-      } else {
-        this.eventBus.send(event.data.action, event.data.arguments);
+      } else if (event.data.action === 'uw-bus-tunnel') {
+        const busCommand = event.data.payload;
+        this.eventBus.send(busCommand.action, busCommand.config);
       }
     }
   }

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

@@ -46,7 +46,17 @@ class Resizer {
   currentPlayerStyleString: any;
   currentCssValidFor: any;
   currentVideoSettings: any;
-  lastAr: {type: any, ratio?: number} = {type: AspectRatioType.Initial};
+
+  _lastAr: {type: any, ratio?: number} = {type: AspectRatioType.Initial};
+  set lastAr(x: {type: any, ratio?: number}) {
+    this._lastAr = x;
+    // emit updates for UI when setting lastAr
+    this.eventBus.send('uw-config-broadcast', {type: 'ar', config: x})
+  }
+  get lastAr() {
+    return this._lastAr;
+  }
+
   resizerId: any;
   videoAlignment: {x: VideoAlignmentType, y: VideoAlignmentType};
   userCss: string;
@@ -79,6 +89,9 @@ class Resizer {
     'change-zoom': [{
       function: (config: any) => this.zoomStep(config.step)
     }],
+    'get-ar': [{
+      function: () => this.eventBus.send('uw-config-broadcast', {type: 'ar', config: this.lastAr})
+    }]
   }
   //#endregion
 
@@ -484,7 +497,6 @@ class Resizer {
 
   setZoom(zoomLevel: number, axis?: 'x' | 'y', noAnnounce?) {
     this.manualZoom = true;
-    // console.log('setting zoom:', zoomLevel);
     this.zoom.setZoom(zoomLevel, axis, noAnnounce);
   }