attempt at fixing frames

src/ext/lib/comms/Comms.js

@@ -3,6 +3,8 @@ import BrowserDetect from '../../conf/BrowserDetect';
 
 class Comms {
   static async sendMessage(message){
+    message = JSON.parse(JSON.stringify(message)); // vue quirk. We should really use vue store instead
+    
     if(BrowserDetect.firefox){
       return browser.runtime.sendMessage(message)
     } else {

src/ext/lib/comms/CommsClient.js

@@ -99,6 +99,8 @@ class CommsClient {
   }
 
   async sendMessage_nonpersistent(message){
+    message = JSON.parse(JSON.stringify(message)); // vue quirk. We should really use vue store instead
+    
     if(BrowserDetect.firefox){
       return browser.runtime.sendMessage(message)
     } else {

src/ext/lib/comms/CommsServer.js

@@ -20,6 +20,17 @@ class CommsServer {
     }
   }
 
+  async toObject(obj) {
+    console.log("CLONING OBJECT", obj);
+    try {
+      const r = JSON.parse(JSON.stringify(obj));
+      return r;
+    } catch (e) {
+      console.log("ERROR WHILE CLONING", obj);
+      return obj;
+    }
+  }
+
   async getCurrentTabHostname() {
     const activeTab = await this._getActiveTab();
 
@@ -41,6 +52,7 @@ class CommsServer {
   }
 
   sendToAll(message){
+    message = JSON.parse(JSON.stringify(message)); // vue quirk. We should really use vue store instead
     for(var p of this.ports){
       for(var frame in p){
         p[frame].postMessage(message);
@@ -61,7 +73,7 @@ class CommsServer {
   }
 
   async sendToFrame(message, tab, frame) {
-
+    message = JSON.parse(JSON.stringify(message)); // vue quirk. We should really use vue store instead
     if(Debug.debug && Debug.comms){
       console.log(`%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message);
     }
@@ -92,6 +104,8 @@ class CommsServer {
   }
 
   async sendToActive(message) {
+    message = JSON.parse(JSON.stringify(message)); // vue quirk. We should really use vue store instead
+
     if(Debug.debug && Debug.comms){
       console.log("%c[CommsServer::sendToActive] trying to send a message to active tab. Message:", "background: #dda; color: #11D", message);
     }
@@ -152,7 +166,7 @@ class CommsServer {
     if (message.cmd === 'announce-zoom') {
       // forward off to the popup, no use for this here
       try {
-        this.popupPort.postMessage({cmd: 'set-current-zoom', zoom: message.zoom});
+        this.popupPort.postMessage(this.toObject({cmd: 'set-current-zoom', zoom: message.zoom}));
       } catch (e) {
         // can't forward stuff to popup if it isn't open
       }
@@ -161,17 +175,28 @@ class CommsServer {
     }
 
     if (message.cmd === 'get-current-site') {
-      port.postMessage({cmd: 'set-current-site', site: this.server.getVideoTab(), tabHostname: await this.getCurrentTabHostname()});
+      console.log("CCCCC - ss");
+      console.log("[find server] set-current-site — getting site", this.server.getVideoTab(), this.toObject(this.server.getVideoTab()))
+      port.postMessage(this.toObject({
+        cmd: 'set-current-site',
+        site: this.server.getVideoTab(),
+        tabHostname: await this.getCurrentTabHostname()
+      }));
+      console.log("CCCCC -s as")
     }
     if (message.cmd === 'popup-set-selected-tab') {
+      console.log("CCCCaa")
       this.server.setSelectedTab(message.selectedMenu, message.selectedSubitem);
+      console.log("CCCCbb")
     }
 
     if (message.cmd === 'get-config') {
       if(Debug.debug) {
         console.log("CommsServer: received get-config. Active settings?", this.settings.active, "\n(settings:", this.settings, ")")
       }
-      port.postMessage({cmd: "set-config", conf: this.settings.active, site: this.server.currentSite})
+      port.postMessage(this.toObject(
+        {cmd: "set-config", conf: this.settings.active, site: this.server.currentSite}
+      ));
     } else if (message.cmd === 'has-video') {
       this.server.registerVideo(port.sender);
     } else if (message.cmd === 'noVideo') {

src/ext/uw-bg.js

@@ -209,10 +209,13 @@ class UWServer {
   }
 
   setSelectedTab(menu, subitem) {
+    console.log("CCCC1")
     if (Debug.debug && Debug.comms) {
       console.log("[uw-bg::setSelectedTab] saving selected tab for", menu, ":", subitem)
     }
+    console.log("CCCC2")
     this.selectedSubitem[menu] = subitem;
+    console.log("CCCC3")
   }
 
   getVideoTab() {

src/popup/App.vue

@@ -32,12 +32,15 @@
             @click="selectTab('video')"
         >
           <div class="">
-            Video settings
+            Video settings ({{activeFrames.length}})
           </div>
           <div class="">
           </div>
           <div class="">
-            <div v-for="frame of activeFrames">
+            <div v-for="frame of activeFrames"
+                 :key="frame.id"
+            >
+              {{frame.label}}
             </div>
           </div>
         </div>
@@ -106,11 +109,46 @@ export default {
     this.settings.init();
     this.port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
     this.execAction.setSettings(this.settings);
+
+    // get info about current site from background script
+    while (true) {
+      this.getSite();
+      await this.sleep(5000);
+    } 
+    // ensure we'll clean player markings on popup close
+    window.addEventListener("unload", () => {
+      port.postMessage({
+        cmd: 'unmark-player',
+      });
+    });
   },
   components: {
     VideoPanel,
   },
   methods: {
+    async sleep(t) {
+      return new Promise( (resolve,reject) => {
+        setTimeout(() => resolve(), t);
+      });
+    },
+    toObject(obj) {
+      return JSON.parse(JSON.stringify(obj));
+    },
+    getSite() {
+      try {
+        if (Debug.debug) {
+          console.log("[popup.js] requesting current site");
+        }
+        this.port.postMessage({cmd: 'get-current-site'});
+      } catch (e) {
+        if (Debug.debug) {
+          console.log("[popup::getSite] sending get-current-site failed for some reason. Reason:", e)
+        }
+      }
+    },
+    getRandomColor() {
+      return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
+    },
     selectTab(tab) {
       this.selectedTab = tab;
     },
@@ -122,7 +160,7 @@ export default {
     },
     processReceivedMessage(message, port) {
       if (Debug.debug) {
-        console.log("[popup.js] received message", message);
+        console.log("[popup.js] received message set-c", message);
       }
 
       if(message.cmd === 'set-current-site'){
@@ -136,12 +174,48 @@ export default {
           this.port.postMessage({cmd: 'get-current-zoom'});
         }
         this.site = message.site;
-        // loadConfig(site.host);
-        // loadFrames(site);
+        // loadConfig(site.host); TODO
+        this.loadFrames(this.site);
       } else if (message.cmd === 'set-current-zoom') {
-        setCurrentZoom(message.zoom);
+        this.setCurrentZoom(message.zoom);
       }
     },
+    loadFrames(videoTab) {
+      console.log('set-c loading frames', videoTab)
+      if (videoTab.selected) {
+        this.selectedSubitem = videoTab.selected;
+        // selectedSubitemLoaded = true;
+      }
+
+      this.activeFrames = [];
+
+      if (site.frames.length < 2) {
+        this.selectedFrame = '__all';
+        return;
+      }
+
+      for (const frame in videoTab.frames) {
+
+        if (frame && !this.frameStore[frame]) {
+          const fs = {
+            name: this.frameStoreCount++,
+            color: this.getRandomColor()
+          }
+
+          this.frameStore[frame] = fs;
+
+          port.postMessage(this.toObject({
+            cmd: 'mark-player',
+            targetTab: videoTab.id,
+            targetFrame: frame,
+            name: fs.name,
+            color: fs.color
+          }));
+        }
+      }
+      this.activeFrames = [{id: '__all', label: 'All'},{id: '__playing', label: 'Currently playing'}].concat(videoTab.frames);
+      console.log("set-c", this.activeFrames)
+    },
     getRandomColor() {
       return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
     },