Panning works again (while holding shift)

js/conf/Debug.js

@@ -18,6 +18,7 @@ Debug = {
   playerDetectDebug: true,
   periodic: true,
   videoRescan: true,
+  mousemove: true,
   arDetect: {
     edgeDetect: true
   },

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);
     }
   }
 

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) {

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)
+  }
+
 }

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!')

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;