diff --git a/js/lib/Comms.js b/js/lib/Comms.js index 094404f..8b5c0ed 100644 --- a/js/lib/Comms.js +++ b/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); } } diff --git a/js/lib/PlayerData.js b/js/lib/PlayerData.js index f1c69de..4060f0f 100644 --- a/js/lib/PlayerData.js +++ b/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 = `
${name}
`; + + this.overlayNode = overlay; + this.element.appendChild(overlay); + } + + unmarkPlayer() { + if (this.overlayNode) { + this.overlayNode.remove(); + } + } + scheduleGhettoWatcher(timeout, force_reset) { if(! timeout){ timeout = 100; diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index b63380f..32ab87b 100644 --- a/js/lib/VideoData.js +++ b/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, diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index 05a4ea5..c0ce0b0 100644 --- a/js/modules/PageInfo.js +++ b/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); diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index ddd73cd..e9fb5ff 100644 --- a/res/popup/js/popup.js +++ b/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)) { diff --git a/res/settings/settings.html b/res/settings/settings.html index b99bde7..a21a41c 100644 --- a/res/settings/settings.html +++ b/res/settings/settings.html @@ -215,10 +215,6 @@

Plans for the future

Acknowledgements

This extension uses font Overpass.

- - - -

Special thanks to me for making this extension. You're welcome.