From 93e767be0bc2b8d9a91364ce5cdf8da0c42b4908 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 9 Dec 2018 01:37:19 +0100
Subject: [PATCH] Remove player mark when closing player popup

---
 js/lib/Comms.js        |  4 ++++
 js/lib/PlayerData.js   | 49 ++++++++++++++++++++++++++++++++++++------
 js/modules/PageInfo.js |  2 +-
 res/popup/js/popup.js  | 38 ++++++++++++++++++++------------
 res/popup/popup.html   |  1 -
 5 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/js/lib/Comms.js b/js/lib/Comms.js
index b531bc2..cfea43a 100644
--- a/js/lib/Comms.js
+++ b/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);
     }
   }
 
diff --git a/js/lib/PlayerData.js b/js/lib/PlayerData.js
index fa132db..e21bc07 100644
--- a/js/lib/PlayerData.js
+++ b/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;
     }
   }
 
diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js
index 18db9fd..39871fd 100644
--- a/js/modules/PageInfo.js
+++ b/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();
     }
   }
diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index 24efd1b..ca1c51c 100644
--- a/res/popup/js/popup.js
+++ b/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();
\ No newline at end of file
+popup_init();
+window.addEventListener("unload", () => {
+  console.log("SENDING UNMARK COMMAND")
+  port.postMessage({
+    cmd: 'unmark-player',
+  });
+});
\ No newline at end of file
diff --git a/res/popup/popup.html b/res/popup/popup.html
index e852207..e2f008d 100644
--- a/res/popup/popup.html
+++ b/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>