Remove player mark when closing player popup

js/lib/Comms.js

@@ -88,6 +88,8 @@ class CommsClient {
       this.pageInfo.setZoom(message.zoom, true, message.playing);
     } else if (message.cmd === 'mark-player') {
       this.pageInfo.markPlayer(message.name, message.color);
+    } else if (message.cmd === 'unmark-player') {
+      this.pageInfo.unmarkPlayer();
     }
   }
 
@@ -347,6 +349,8 @@ class CommsServer {
       this.server.unregisterVideo(port.sender);
     } else if (message.cmd === 'mark-player') {
       this.sendToFrame(message, message.targetTab, message.targetFrame);
+    } else if (message.cmd === 'unmark-player') {
+      this.sendToAll(message);
     }
   }
 

js/lib/PlayerData.js

@@ -60,6 +60,7 @@ class PlayerData {
 
   destroy() {
     this.stopChangeDetection();
+    this.destroyOverlay();
   }
 
   startChangeDetection(){
@@ -69,7 +70,11 @@ class PlayerData {
     clearTimeout(this.watchTimeout);
   }
 
-  markPlayer(name, color) {
+  makeOverlay() {
+    if (!this.overlayNode) {
+      this.destroyOverlay();
+    }
+
     var overlay = document.createElement('div');
     overlay.style.width = '100%';
     overlay.style.height = '100%';
@@ -78,18 +83,45 @@ class PlayerData {
     overlay.style.left = '0';
     overlay.style.zIndex = '1000000000';
     overlay.style.pointerEvents = 'none';
-    overlay.innerHTML = `<div style="background-color: ${color}; color: #fff; position: absolute; top: 0; left: 0">${name}</div>`;
 
     this.overlayNode = overlay;
     this.element.appendChild(overlay);
   }
 
-  unmarkPlayer() {
+  destroyOverlay() {
+    if(this.playerIdElement) {
+      this.playerIdElement.remove();
+      this.playerIdElement = undefined;
+    }
     if (this.overlayNode) {
       this.overlayNode.remove();
+      this.overlayNode = undefined;
     }
   }
 
+  markPlayer(name, color) {
+    if (!this.overlayNode) {
+      this.makeOverlay();
+    }
+    if (this.playerIdElement) {
+      this.playerIdElement.remove();
+    }
+    this.playerIdElement = document.createElement('div');
+    this.playerIdElement.innerHTML = `<div style="background-color: ${color}; color: #fff; position: absolute; top: 0; left: 0">${name}</div>`;
+
+    this.overlayNode.appendChild(this.playerIdElement);
+  }
+
+  unmarkPlayer() {
+    if (Debug.debug) {
+      console.log("[PlayerData::unmarkPlayer] unmarking player!")
+    }
+    if (this.playerIdElement) {
+      this.playerIdElement.remove();
+    }
+    this.playerIdElement = undefined;
+  }
+
   scheduleGhettoWatcher(timeout, force_reset) {
     if(! timeout){
       timeout = 100;
@@ -266,9 +298,11 @@ class PlayerData {
         fullscreen: true
       }
       const ths = this;
-      if(this.element) {
+
+      if (this.element != element) {
+        this.element = element;
+        this.makeOverlay()
       }
-      this.element = element;
     } else {
       this.dimensions = {
         width: candidate_width,
@@ -276,9 +310,10 @@ class PlayerData {
         fullscreen: isFullScreen
       };
       const ths = this;
-      if(this.element) {
+      if(this.element != playerCandidateNode) {
+        this.element = playerCandidateNode;
+        this.makeOverlay();
       }
-      this.element = playerCandidateNode;
     }
   }
 

js/modules/PageInfo.js

@@ -425,7 +425,7 @@ class PageInfo {
     }
   }
   unmarkPlayer() {
-    for (var vd of this.video) {
+    for (var vd of this.videos) {
       vd.unmarkPlayer();
     }
   }

res/popup/js/popup.js

@@ -94,19 +94,6 @@ function loadFrames(videoTab) {
 
 
   for (var frame in videoTab.frames) {
-    const nid = `${videoTab.id}-${videoTab.frames[frame].id}`;
-    var newItem = new TabItem(
-      undefined,
-      nid,
-      videoTab.frames[frame].host,
-      videoTab.frames[frame].url != videoTab.url,
-      (click) => onTabitemClick(nid)
-    );
-    
-    tablist['siteSettings'].tab.insertSubitem(newItem);
-    tablist['videoSettings'].tab.insertSubitem(newItem);
-
-
 
     if (frame && !frameStore[frame]) {
       var fs = {
@@ -125,6 +112,23 @@ function loadFrames(videoTab) {
       });
     }
 
+    const nid = `${videoTab.id}-${videoTab.frames[frame].id}`;
+    var newItem = new TabItem(
+      undefined,
+      nid,
+      videoTab.frames[frame].host,
+      videoTab.frames[frame].url != videoTab.url,
+      (click) => onTabitemClick(nid),
+      frameStore[frame]
+    );
+    
+    tablist['siteSettings'].tab.insertSubitem(newItem);
+    tablist['videoSettings'].tab.insertSubitem(newItem);
+
+
+
+
+
     
   }
 
@@ -629,4 +633,10 @@ async function popup_init() {
   }
 }
 
-popup_init();
+popup_init();
+window.addEventListener("unload", () => {
+  console.log("SENDING UNMARK COMMAND")
+  port.postMessage({
+    cmd: 'unmark-player',
+  });
+});

res/popup/popup.html

@@ -172,7 +172,6 @@
     </div>
     
     <!-- load all scripts. ordering is important!  -->
-    
     <script src="../../js/conf/Debug.js"></script>
     
     <script src="../../js/lib/BrowserDetect.js"></script>