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 = `
${name}
`;
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 = `${name}
`;
+
+ 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 @@
-