Get basic messaging from popup to CS working. TODO: Forwarding to specific iframes/videos

src/ext/UWServer.ts

@@ -312,6 +312,7 @@ export default class UWServer {
 
     if (!activeTab || activeTab.length < 1) {
       this.logger.log('warn', 'comms', 'There is no active tab for some reason. activeTab:', activeTab);
+      return null;
     }
 
     const url = activeTab[0].url;

src/ext/lib/EventBus.ts

@@ -26,6 +26,14 @@ export default class EventBus {
   private upstreamBus?: EventBus;
   private comms?: CommsClient | CommsServer;
 
+  private disableTunnel: boolean = false;
+  private popupContext: any = {};
+
+  setupPopupTunnelWorkaround(context: EventBusContext): void {
+    this.disableTunnel = true;
+    this.popupContext = context;
+  }
+
   //#region lifecycle
   destroy() {
     this.commands = null;
@@ -107,13 +115,22 @@ export default class EventBus {
    * @param config
    */
   sendToTunnel(command: string, config: any) {
-    window.parent.postMessage(
+    if (!this.disableTunnel) {
-      {
+      window.parent.postMessage(
-        action: 'uw-bus-tunnel',
+        {
-        payload: {action: command, config}
+          action: 'uw-bus-tunnel',
-      },
+          payload: {action: command, config}
-      '*'
+        },
-    );
+        '*'
+      );
+    } else {
+      // because iframe UI components get reused in the popup, we
+      // also need to set up a detour because the tunnel is closed
+      // in the popup
+      if (this.comms) {
+        this.comms.sendMessage({command, config, context: this.popupContext}, this.popupContext);
+      }
+    }
   }
 
 

src/ext/lib/comms/CommsServer.ts

@@ -134,7 +134,7 @@ class CommsServer {
       return;
     }
     for (const framePort in this.ports[tab][frame]) {
-      this.ports[tab][frame][framePort].postMessage(message);
+      this.ports[tab][frame][framePort].postMessage(JSON.parse(JSON.stringify(message)));
     }
   }
 
@@ -156,6 +156,7 @@ class CommsServer {
     this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message);
 
     try {
+
       this.sendToFrameContentScripts(message, tab, frame, port);
     } catch (e) {
       this.logger.log('error', 'comms', `%c[CommsServer::sendToFrame] Sending message failed. Reason:`, "background: #dda; color: #11D", e);

src/popup/App.vue

@@ -32,7 +32,7 @@
           :settings="settings"
           :eventBus="eventBus"
           :site="site"
-          :frame="site.frame[0]"
+          :frame="selectedFrame"
         ></PopupVideoSettings>
       </div>
       <pre>
@@ -48,10 +48,11 @@
 </template>
 
 <script>
+import PopupVideoSettings from './panels/PopupVideoSettings.vue'
 import Debug from '../ext/conf/Debug';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import Comms from '../ext/lib/comms/Comms';
-import CommsClient from '../ext/lib/comms/CommsClient';
+import CommsClient, {CommsOrigin} from '../ext/lib/comms/CommsClient';
 import Settings from '../ext/lib/Settings';
 import Logger from '../ext/lib/Logger';
 import EventBus from '../ext/lib/EventBus';
@@ -69,6 +70,8 @@ export default {
       sideMenuVisible: null,
       logger: undefined,
       site: undefined,
+
+      selectedFrame: '__playing',
     }
   },
   async created() {
@@ -99,13 +102,25 @@ export default {
           this.site = config.site;
           this.selectedSite = this.selectedSite || config.site.host;
 
+          this.eventBus.setupPopupTunnelWorkaround({
+            origin: CommsOrigin.Popup,
+            comms: {
+              forwardTo: 'active'
+            }
+          });
+
           this.loadFrames(this.site);
+
         }
       }
     );
 
     this.comms = new CommsClient('popup-port', this.logger, this.eventBus);
     this.eventBus.setComms(this.comms);
+    this.eventBus.setupPopupTunnelWorkaround({
+      origin: CommsOrigin.Popup,
+      comms: {forwardTo: 'active'}
+    });
 
 
     // ensure we'll clean player markings on popup close
@@ -144,7 +159,7 @@ export default {
   },
   components: {
     Debug,
-    BrowserDetect,
+    BrowserDetect, PopupVideoSettings
   },
   methods: {
     async sleep(t) {

src/popup/panels/PopupVideoSettings.vue

@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import CropOptionsPanel from '../../csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue'
 import ExecAction from '../../csui/src/ui-libs/ExecAction';
 
 export default {
@@ -36,6 +37,9 @@ export default {
     'eventBus',
     'site'
   ],
+  components: {
+    CropOptionsPanel
+  },
   created() {
     this.exec = new ExecAction(this.settings, window.location.hostname);
     this.eventBus.subscribe('uw-config-broadcast', {function: (config) => this.handleConfigBroadcast(config)});

src/popup/popup.js

@@ -3,4 +3,6 @@ import App from './App';
 import mdiVue from 'mdi-vue/v3';
 import * as mdijs from '@mdi/js';
 
-createApp(App).mount('#app') //.use(mdiVue, {icons: mdijs});
+createApp(App)
+  .use(mdiVue, {icons: mdijs})
+  .mount('#app');