WIP trying to convince in-player UI to show

src/csui/PlayerOverlay.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="settingsInitialized && uwTriggerZoneVisible"
+    v-if="settingsInitialized && uwTriggerZoneVisible && !isGlobal"
     class="uw-hover uv-hover-trigger-region uw-clickable"
     :style="uwTriggerRegionConf"
     @mouseenter="showUwWindow"
@@ -9,10 +9,7 @@
     <div>Hover to activate</div>
   </div>
 
-
-
   <!-- sss -->
-
   <div
     v-if="settingsInitialized && uwWindowVisible"
     class="uw-window flex flex-column uw-clickable"
@@ -24,7 +21,7 @@
       :settings="settings"
       :eventBus="eventBus"
       :logger="logger"
-      :in-player="true"
+      :in-player="!isGlobal"
       :site="site"
       @close="uwWindowVisible = false"
       @preventClose="(event) => uwWindowFadeOutDisabled = event"
@@ -79,6 +76,8 @@ export default {
       origin: '*', // will be set appropriately once the first uwui-probe event is received
       lastProbeTs: null,
 
+      isGlobal: false,
+
       uiVisible: true,
       debugData: {
         resizer: {},
@@ -146,11 +145,25 @@ export default {
       this.handleMessage(event);
     });
 
+    console.log('UW UI INITALIZED!');
+
     this.eventBus.subscribe('uw-config-broadcast', {function: (data) => {
       if (data.type === 'drm-status') {
         this.statusFlags.hasDrm = data.hasDrm;
       }
     }});
+
+    this.eventBus.subscribe('set-as-global', {function: (data) => {
+      this.isGlobal = true;
+    }});
+
+    this.eventBus.subscribe('uw-set-ui-state', { function: (data) => {
+      console.log('received set ui statW!', data, 'are we global?', this.isGlobal);
+      if (!this.isGlobal) {
+        return; // only intended for global overlay
+      }
+      this.uiVisible = data.uiVisible;
+    }});
   },
 
   methods: {

src/csui/Popup.vue

@@ -13,12 +13,21 @@
         class="popup flex flex-column no-overflow"
         :class="{'popup-chrome': ! BrowserDetect?.firefox}"
     >
-      <div class="flex-row flex-nogrow flex-noshrink relative"
+      <div class="flex-row flex-nogrow flex-noshrink relative header"
-          :class="{'header': !narrowPopup, 'header-small': narrowPopup}"
       >
+        <div class="grow shrink">
+          <h1>
             <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
-        <div class="absolute channel-info" v-if="BrowserDetect?.processEnvChannel !== 'stable'">
+          </h1>
-          Build channel: {{BrowserDetect?.processEnvChannel}}
+        </div>
+        <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
+          Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
+          <label>Version:</label> <br/>
+          {{ settings.getExtensionVersion() }}
+        </div>
+        <div v-else class="version-info">
+          <label>Version:</label> <br/>
+          {{ settings.getExtensionVersion() }}
         </div>
       </div>
 
@@ -50,7 +59,10 @@
         <!-- CONTENT -->
         <div class="scrollable" style="flex: 7 7; padding: 1rem;">
           <template v-if="settings && siteSettings">
-            <InPlayerUIAdvertisement v-if="selectedTab === 'playerUiCtl'" />
+            <InPlayerUIAdvertisement
+              v-if="selectedTab === 'playerUiCtl'"
+              :eventBus="eventBus"
+            />
             <PopupVideoSettings
               v-if="selectedTab === 'videoSettings'"
               :settings="settings"
@@ -221,7 +233,6 @@ export default {
         // CSM.port.postMessage({command: 'get-current-site'});
         this.eventBus.send(
           'get-current-site',
-          undefined,
           {
             comms: {forwardTo: 'active'}
           }
@@ -309,6 +320,30 @@ export default {
 @import 'res/css/common.scss';
 @import './src/res-common/_variables';
 
+.header {
+  background-color: rgb(90, 28, 13);
+  color: #fff;
+  padding: 8px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .version-info {
+    text-align: right;
+    font-size: 0.8rem;
+    opacity: 0.8;
+    label {
+      opacity: 0.5;
+    }
+  }
+
+}
 
 .site-support-info {
   display: flex;

src/csui/res/css/common.scss

@@ -23,7 +23,7 @@ body {
   width: 100%;
 }
 
-.h100 {
+.h100, .h-full {
   height: 100%;
 }
 

src/csui/src/PlayerUIWindow.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="popup-panel flex flex-column uw-clickable"
+    class="popup-panel flex flex-column uw-clickable h-full"
   >
     <div class="popup-window-header">
       <div class="popup-title">Ultrawidify <small>{{settings?.active?.version}} - {{BrowserDetect.processEnvChannel}}</small></div>
@@ -177,6 +177,15 @@ export default {
   },
   created() {
     this.siteSettings = this.settings.getSiteSettings(this.site);
+
+    this.eventBus.subscribe(
+      'uw-show-ui',
+      () => {
+        if (this.inPlayer) {
+          return; // show-ui is only intended for global overlay
+        }
+      }
+    )
   },
   methods: {
     /**

src/csui/src/PlayerUiPanels/InPlayerUiAdvertisement.vue

@@ -1,12 +1,33 @@
-<script setup language="typescript">
-</script>
-
 <template>
   <div>
     <h1>In-player UI</h1>
-    <dbv class="button b3">Show in-player UI</dbv>
+    <div
+      class="button b3"
+      style="margin: 16px; padding: 4px;"
+      @click="showInPlayerUi()"
+    >
+      Show in-player UI
+    </div>
     <p></p>
     <p></p>
     <p>In-player UI should show and hide automatically as you start or stop moving your mouse inside the player window.</p>
   </div>
 </template>
+
+<script>
+import UIProbeMixin from '../utils/UIProbeMixin';
+
+export default {
+  mixins: [
+    UIProbeMixin
+  ],
+  props: [
+    'eventBus',
+  ],
+  methods: {
+    showInPlayerUi() {
+      this.eventBus.send('uw-set-ui-state', {uiVisible: true}, {comms: {forwardTo: 'active'}});
+    }
+  }
+}
+</script>

src/ext/UWContent.ts

@@ -9,6 +9,7 @@ import UWGlobals from './lib/UWGlobals';
 import EventBus from './lib/EventBus';
 import KeyboardHandler from './lib/kbm/KeyboardHandler';
 import { SiteSettings } from './lib/settings/SiteSettings';
+import UI from './lib/uwui/UI';
 
 export default class UWContent {
   pageInfo: PageInfo;
@@ -20,6 +21,8 @@ export default class UWContent {
   eventBus: EventBus;
   isIframe: boolean = false;
 
+  globalUi: any;
+
   commsHandlers: {
     [x: string]: ((a: any, b?: any) => void | Promise<void>)[]
   } = {
@@ -77,12 +80,6 @@ export default class UWContent {
           function: () => this.initPhase2()
         }
       );
-      this.eventBus.subscribe(
-        'uw-show-ui',
-        {
-          function: () => {}
-        }
-      );
       this.comms = new CommsClient('content-main-port', this.logger, this.eventBus);
       this.eventBus.setComms(this.comms);
 
@@ -113,6 +110,8 @@ export default class UWContent {
 
       this.logger.log('info', 'debug', "[uw.js::setup] KeyboardHandler initiated.");
 
+      this.globalUi = new UI('ultrawidify-global-ui', {eventBus: this.eventBus, isGlobal: true})
+
     } catch (e) {
       console.error('Ultrawidify: failed to start extension. Error:', e)
       this.logger.log('error', 'debug', "[uw::init] FAILED TO START EXTENSION. Error:", e);

src/ext/lib/EventBus.ts

@@ -98,6 +98,7 @@ export default class EventBus {
   }
 
   send(command: string, commandData: any, context?: EventBusContext) {
+    console.log('sending command ....', command, commandData, context);
     // execute commands we have subscriptions for
     if (this.commands?.[command]) {
       for (const eventBusCommand of this.commands[command]) {
@@ -166,6 +167,7 @@ export default class EventBus {
 
   //#region iframe tunnelling
   private setupIframeTunnelling() {
+    // forward messages coming from iframe tunnels
     window.addEventListener('message', this.handleIframeMessage);
   }
   private destroyIframeTunnelling() {

src/ext/lib/comms/CommsClient.ts

@@ -133,7 +133,12 @@ class CommsClient {
     return browser.runtime.sendMessage(null, message, null);
   }
 
-  processReceivedMessage(receivedMessage){
+  /**
+   * Processes message we received from CommsServer, and forwards it to eventBus.
+   * @param receivedMessage
+   */
+  private processReceivedMessage(receivedMessage){
+    console.log('message popped out of the comms', receivedMessage, 'event bus:', this.eventBus);
     // when sending between frames, message will be enriched with two new properties
     const {_sourceFrame, _sourcePort, ...message} = receivedMessage;
 

src/ext/lib/uwui/UI.js

@@ -5,11 +5,14 @@ if (process.env.CHANNEL !== 'stable'){
 class UI {
   constructor(
     interfaceId,
-    uiConfig, // {component, parentElement?}
+    uiConfig, // {parentElement?, eventBus?}
   ) {
     this.interfaceId = interfaceId;
     this.uiConfig = uiConfig;
     this.lastProbeResponseTs = null;
+
+    this.isGlobal = uiConfig.isGlobal ?? false;
+    // TODO: at some point, UI should be different for global popup and in-player UI
     this.uiURI = browser.runtime.getURL('/csui/csui.html');
     this.extensionBase = browser.runtime.getURL('').replace(/\/$/, "");
 
@@ -94,6 +97,12 @@ class UI {
 
     iframe.onload = function() {
       document.addEventListener('mousemove', fn, true);
+
+      if (this.isGlobal) {
+        this.uiIframe.contentWindow.postMessage({
+          action: 'set-as-global'
+        });
+      }
     }
 
     rootDiv.appendChild(iframe);
@@ -118,21 +127,19 @@ class UI {
       'uw-config-broadcast',
       {
         function: (config) => {
-          // because existence of UI is not guaranteed — UI is not shown when extension is inactive.
+          this.sendToIframe('uw-config-broadcast', config, uiURI);
-          // If extension is inactive due to "player element isn't big enough to justify it", however,
-          // we can still receive eventBus messages.
-          if (this.element && this.uiIframe) {
-            this.uiIframe.contentWindow.postMessage(
-              {
-                action: 'uw-bus-tunnel',
-                payload: {action: 'uw-config-broadcast', config}
-              },
-              uiURI
-            )
-          }
         }
       }
     );
+    this.eventBus.subscribe(
+      'uw-set-ui-state',
+      {
+        function: (config) => {
+          console.log('hello');
+          this.sendToIframe('uw-set-ui-state', config, uiURI);
+        }
+      }
+    )
   }
 
   async enable() {
@@ -167,6 +174,24 @@ class UI {
     }
   }
 
+  /**
+   * Sends message to iframe
+   */
+  sendToIframe(action, actionConfig, uiURI = this.uiURI) {
+    // because existence of UI is not guaranteed — UI is not shown when extension is inactive.
+    // If extension is inactive due to "player element isn't big enough to justify it", however,
+    // we can still receive eventBus messages.
+    if (this.element && this.uiIframe) {
+      this.uiIframe.contentWindow.postMessage(
+        {
+          action: 'uw-bus-tunnel',
+          payload: {action, config: actionConfig}
+        },
+        uiURI
+      )
+    };
+  }
+
   /**
    * Replaces ui config and re-inits the UI
    * @param {*} newUiConfig

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

@@ -88,7 +88,6 @@ class Resizer {
         this.manualZoom = false; // this only gets called from UI or keyboard shortcuts, making this action safe.
 
         if (config.type !== AspectRatioType.Cycle) {
-          console.log('setting AR from event bus command')
           this.setAr(config);
         } else {
           // if we manually switched to a different aspect ratio, cycle from that ratio forward
@@ -247,6 +246,7 @@ class Resizer {
     }
 
     if ([AspectRatioType.Reset, AspectRatioType.Initial].includes(ar.type)) {
+      console.log('run level is UI only because aspect ratio type is', ar.type)
       this.eventBus.send('set-run-level', RunLevel.UIOnly);
     } else {
       this.eventBus.send('set-run-level', RunLevel.CustomCSSActive);
@@ -902,7 +902,6 @@ class Resizer {
    *   - options.force: remove our CSS regardless of current crop and stretch options
    */
   unsetStyleString(options?: {force: boolean}) {
-
     // check whether it's safe to remove CSS.
     if (!options?.force) {
       if (