Marking frames (todo: sort out the comms)

js/lib/Comms.js

@@ -86,6 +86,10 @@ class CommsClient {
       this.pageInfo.resumeProcessing(message.autoArStatus, message.playing);
     } else if (message.cmd === 'set-zoom') {
       this.pageInfo.setZoom(message.zoom, true, message.playing);
+    } else if (message.cmd === 'mark-player') {
+      console.log("COMMS CLIENT MARKING PLAYER!")
+
+      this.pageInfo.markPlayer(message.name, message.color);
     }
   }
 
@@ -343,6 +347,8 @@ class CommsServer {
       this.server.registerVideo(port.sender);
     } else if (message.cmd === 'noVideo') {
       this.server.unregisterVideo(port.sender);
+    } else if (message.cmd === 'mark-player') {
+      this.sendToFrame(message, this.tab, message.targetFrame);
     }
   }
 

js/lib/PlayerData.js

@@ -36,6 +36,7 @@ class PlayerData {
     this.extensionMode = videoData.extensionMode;
     this.element = undefined;
     this.dimensions = undefined;
+    this.overlayNode = undefined;
 
     if (this.extensionMode === ExtensionMode.Full) {
       this.getPlayerDimensions();
@@ -68,6 +69,23 @@ class PlayerData {
     clearTimeout(this.watchTimeout);
   }
 
+  markPlayer(name, color) {
+    console.log("PLAYERDATA — MARKING PLAYER!")
+    var overlay = document.createElement('div');
+    overlay.style.width = '100%';
+    overlay.style.height = '100%';
+    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() {
+    if (this.overlayNode) {
+      this.overlayNode.remove();
+    }
+  }
+
   scheduleGhettoWatcher(timeout, force_reset) {
     if(! timeout){
       timeout = 100;

js/lib/VideoData.js

@@ -189,6 +189,16 @@ class VideoData {
     this.pageInfo.announceZoom(scale);
   }
 
+  markPlayer(name, color) {
+    console.log("VIDEO DATA — MARKING PLAYER!")
+    if (this.player) {
+      this.player.markPlayer(name, color)
+    }
+  }
+  unmarkPlayer() {
+    this.player.unmarkPlayer();
+  }
+
   isPlaying() {
 
     console.log("is playing? video:", this.video, "ctime:", this.video.currentTime, 

js/modules/PageInfo.js

@@ -419,6 +419,19 @@ class PageInfo {
     }
   }
 
+  markPlayer(name, color) { 
+    console.log("PAGEINFO — MARKING PLAYER!")
+
+    for (var vd of this.videos) {
+      vd.markPlayer(name,color);
+    }
+  }
+  unmarkPlayer() {
+    for (var vd of this.video) {
+      vd.unmarkPlayer();
+    }
+  }
+
   announceZoom(scale) {
     if (this.announceZoomTimeout) {
       clearTimeout(this.announceZoom);

res/popup/js/popup.js

@@ -102,6 +102,13 @@ function loadFrames(videoTab) {
     
     tablist['siteSettings'].tab.insertSubitem(newItem);
     tablist['videoSettings'].tab.insertSubitem(newItem);
+
+    port.postMessage({
+      cmd: 'mark-player',
+      targetFrame: videoTab.frames[frame].id,
+      name: videoTab.frames[frame].id,
+      color: '#fa6'
+    });
   }
 
   if (! selectedSubitem.siteSettings || !tablist['siteSettings'].tab.existsSubitem(selectedSubitem.siteSettings)) {

res/settings/settings.html

@@ -215,10 +215,6 @@
         <h2>Plans for the future</h2>
         <h2>Acknowledgements</h2>
         <p>This extension uses font <a href="http://overpassfont.org/">Overpass</a>.</p>
-        <!-- <p>Special thanks to CD Project Red (The Witcher 2), Cyanide Studios (Styx, Of Orcs and Men), and Valve (CS:GO), which made it possible for me to untrigger myself after seeing so many improperly encoded videos.</p> -->
-        <!-- <small><p>More or less.</p> -->
-        <!-- <p>GW2 is also roughly how the avatar was obtained. Noone tell Anet, though.</p></small> -->
-        <!-- <p>Special one-finger salute to all incompetent people who don't know how to properly encode videos and upload them to youtube (to word it most nicely).</p> -->
         <p>Special thanks to me for making this extension. You're welcome.</p>
       </div>
     </div>