From 5043190441fff2789408c6e36a376095a1cca1cb Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 2 Dec 2018 23:51:34 +0100 Subject: [PATCH] Panning works again (while holding shift) --- js/conf/Debug.js | 1 + js/lib/PlayerData.js | 15 --------------- js/lib/VideoData.js | 6 ++++-- js/modules/ActionHandler.js | 37 ++++++++++++++++++++++++++++++------- js/modules/PageInfo.js | 18 +++++++++++++++++- js/modules/Resizer.js | 19 ++++++++++++------- 6 files changed, 64 insertions(+), 32 deletions(-) diff --git a/js/conf/Debug.js b/js/conf/Debug.js index c6e69b2..6037064 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -18,6 +18,7 @@ Debug = { playerDetectDebug: true, periodic: true, videoRescan: true, + mousemove: true, arDetect: { edgeDetect: true }, diff --git a/js/lib/PlayerData.js b/js/lib/PlayerData.js index 6744e78..f1c69de 100644 --- a/js/lib/PlayerData.js +++ b/js/lib/PlayerData.js @@ -47,9 +47,6 @@ class PlayerData { return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width); } - panListener(event) { - this.panHandler(event); - } start(){ this.startChangeDetection(); @@ -61,7 +58,6 @@ class PlayerData { } destroy() { - this.element.removeEventListener('mousemove', this.panListener); this.stopChangeDetection(); } @@ -170,12 +166,6 @@ class PlayerData { } - panHandler(event) { - if (this.extensionMode !== ExtensionMode.Full) { - return; - } - this.videoData.panHandler(event); - } getPlayerDimensions(elementNames){ // element names — reserved for future use. If element names are provided, this function should return first element that @@ -188,7 +178,6 @@ class PlayerData { if(this.element) { const ths = this; - this.element.removeEventListener('mousemove', this.panListener); } this.element = undefined; this.dimensions = undefined; @@ -256,10 +245,8 @@ class PlayerData { } const ths = this; if(this.element) { - this.element.removeEventListener('mousemove', (event) => ths.panListener); } this.element = element; - this.element.addEventListener('mousemove', ths.panListener); } else { this.dimensions = { width: candidate_width, @@ -268,10 +255,8 @@ class PlayerData { }; const ths = this; if(this.element) { - this.element.removeEventListener('mousemove', (event) => ths.panListener); } this.element = playerCandidateNode; - this.element.addEventListener('mousemove', (event) => ths.panListener); } } diff --git a/js/lib/VideoData.js b/js/lib/VideoData.js index 1da351f..b63380f 100644 --- a/js/lib/VideoData.js +++ b/js/lib/VideoData.js @@ -22,6 +22,8 @@ class VideoData { if (Debug.init) { console.log("[VideoData::ctor] Created videoData with vdid", this.vdid,"\nextension mode:", this.extensionMode); } + + this.pageInfo.initMouseActionHandler(this); } firstTimeArdInit(){ @@ -148,7 +150,7 @@ class VideoData { this.resizer.setLastAr('original'); } - panHandler(event) { + panHandler(event, forcePan) { if(this.destroyed) { throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}}; } @@ -156,7 +158,7 @@ class VideoData { this.destroy(); return; } - this.resizer.panHandler(event); + this.resizer.panHandler(event, forcePan); } setPanMode(mode) { diff --git a/js/modules/ActionHandler.js b/js/modules/ActionHandler.js index 27cf015..d99ec62 100644 --- a/js/modules/ActionHandler.js +++ b/js/modules/ActionHandler.js @@ -68,12 +68,23 @@ class ActionHandler { document.addEventListener('keydown', (event) => ths.handleKeydown(event) ); document.addEventListener('keyup', (event) => ths.handleKeyup(event) ); - + this.pageInfo.setActionHandler(this); if (Debug.debug) { console.log("[ActionHandler::init] initialization complete"); } } + registerHandleMouse(videoData) { + if (Debug.debug) { + console.log("[ActionHandler::registerHandleMouse] registering handle mouse for videodata:", videoData) + } + var ths = this; + if (videoData.player && videoData.player.element) { + videoData.player.element.addEventListener('mousemove', (event) => ths.handleMouseMove(event, videoData)); + } + } + + preventAction() { var activeElement = document.activeElement; @@ -96,9 +107,11 @@ class ActionHandler { Debug.debug = true; // undisable } - if (PlayerData.isFullScreen()) { - return false; - } + // lately youtube has allowed you to read and write comments while watching video in + // fullscreen mode. We can no longer do this. + // if (PlayerData.isFullScreen()) { + // return false; + // } if (this.inputs.indexOf(activeElement.tagName.toLocaleLowerCase()) !== -1) { return true; } @@ -119,7 +132,7 @@ class ActionHandler { shortcut.shiftKey === event.shiftKey } - execAction(actions, event, shortcutIndex) { + execAction(actions, event, shortcutIndex, videoData) { if(Debug.debug && Debug.keyboard ){ console.log("%c[ActionHandler::execAction] Trying to find and execute action for event. Actions/event: ", "color: #ff0", actions, event); } @@ -144,9 +157,10 @@ class ActionHandler { } else if (cmd.action === "toggle-pan") { this.pageInfo.setPanMode(cmd.arg) } else if (cmd.action === "pan") { - // todo: handle this + if (videoData) { + videoData.panHandler(event, true); + } } - } return; @@ -154,6 +168,7 @@ class ActionHandler { } } + handleKeyup(event) { if(Debug.debug && Debug.keyboard ){ console.log("%c[ActionHandler::handleKeyup] we pressed a key: ", "color: #ff0", event.key , " | keydown: ", event.keyup, "event:", event); @@ -184,4 +199,12 @@ class ActionHandler { this.execAction(this.keyDownActions, event, 0); } + handleMouseMove(event, videoData) { + if (Debug.debug && Debug.mousemove) { + console.log("[ActionHandler::handleMouseMove] mouse move is being handled.\nevent:", event, "\nvideo data:", videoData); + } + videoData.panHandler(event); + this.execAction(this.mouseMoveActions, event, undefined, videoData) + } + } \ No newline at end of file diff --git a/js/modules/PageInfo.js b/js/modules/PageInfo.js index 89dcc4b..05a4ea5 100644 --- a/js/modules/PageInfo.js +++ b/js/modules/PageInfo.js @@ -7,6 +7,7 @@ class PageInfo { this.siteDisabled = false; this.videos = []; this.settings = settings; + this.actionHandlerInitQueue = []; this.lastUrl = window.location.href; this.extensionMode = extensionMode; @@ -41,6 +42,22 @@ class PageInfo { this.rescan(RescanReason.MANUAL); } + initMouseActionHandler(videoData) { + if (this.actionHandler) { + this.actionHandler.registerHandleMouse(videoData); + } else { + this.actionHandlerInitQueue.push(videoData); + } + } + + setActionHandler(actionHandler) { + this.actionHandler = actionHandler; + for (var item of this.actionHandlerInitQueue) { + this.actionHandler.registerHandleMouse(item); + } + this.actionHandlerInitQueue = []; + } + rescan(rescanReason){ const oldVideoCount = this.videos.length; @@ -249,7 +266,6 @@ class PageInfo { } - startArDetection(playingOnly){ if (Debug.debug) { console.log('[PageInfo::startArDetection()] starting automatic ar detection!') diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index 4d32829..59bd00b 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -151,20 +151,25 @@ if(Debug.debug) this.restore(); } - panHandler(event) { + panHandler(event, forcePan) { // console.log("this.conf.canPan:", this.conf.canPan) - if (this.canPan) { - // console.log("event?", event) - // console.log("this?", this) - + if (this.canPan || forcePan) { if(!this.conf.player || !this.conf.player.element) { return; } + // dont allow weird floats + this.videoFloat = 'center'; + const player = this.conf.player.element; const relativeX = (event.pageX - player.offsetLeft) / player.offsetWidth; const relativeY = (event.pageY - player.offsetTop) / player.offsetHeight; + if (Debug.debug && Debug.mousemove) { + console.log("[Resizer::panHandler] mousemove.pageX, pageY:", event.pageX, event.pageY, + "\nrelativeX/Y:", relativeX, relativeY) + } + this.setPan(relativeX, relativeY); } } @@ -324,8 +329,8 @@ if(Debug.debug) if(wdiff < 0 && hdiff < 0) { return translate; } - translate.x = wdiff * this.pan.relativeOffsetX / this.zoom.scale; - translate.y = hdiff * this.pan.relativeOffsetY / this.zoom.scale; + translate.x = wdiff * this.pan.relativeOffsetX * this.zoom.scale; + translate.y = hdiff * this.pan.relativeOffsetY * this.zoom.scale; } else { if (this.videoFloat == "left") { translate.x += wdiffAfterzoom * 0.5;