Pan: eventhandler unbinding. Fixed 'reset zoom' in popup

js/conf/Debug.js

@@ -1,9 +1,10 @@
 // Set prod to true when releasing
-_prod = true; 
-// _prod = false; 
+// _prod = true; 
+_prod = false; 
 
 Debug = {
-  debug: true,
+  init: true,
+  debug: false,
   keyboard: true,
   debugResizer: true,
   debugArDetect: true,

js/lib/Comms.js

@@ -255,7 +255,11 @@ class CommsServer {
 
     if (message.cmd === 'announce-zoom') {
       // forward off to the popup, no use for this here
-      this.popupPort.postMessage({cmd: 'set-current-zoom', zoom: message.zoom});
+      try {
+        this.popupPort.postMessage({cmd: 'set-current-zoom', zoom: message.zoom});
+      } catch (e) {
+        // can't forward stuff to popup if it isn't open
+      }
     } else if (message.cmd === 'get-current-zoom') {
       this.sendToActive(message);
     }

js/lib/PlayerData.js

@@ -45,7 +45,9 @@ class PlayerData {
     return ( window.innerHeight == window.screen.height && window.innerWidth == window.screen.width);
   }
 
-
+  panListener(event) {
+    this.panHandler(event);
+  } 
 
   start(){
     this.startChangeDetection();
@@ -57,6 +59,7 @@ class PlayerData {
   }
 
   destroy() {
+    this.element.removeEventListener('mousemove', this.panListener);
     this.stopChangeDetection();
   }
 
@@ -156,7 +159,7 @@ class PlayerData {
       
       if(this.element) {
         const ths = this;
-        this.element.removeEventListener('mousemove', (event) => ths.panHandler(event));      
+        this.element.removeEventListener('mousemove', this.panListener);      
       }
       this.element = undefined;
       this.dimensions = undefined;
@@ -224,10 +227,10 @@ class PlayerData {
       }
       const ths = this;
       if(this.element) {
-        this.element.removeEventListener('mousemove', (event) => ths.panHandler(event));
+        this.element.removeEventListener('mousemove', (event) => ths.panListener);
       }
       this.element = element;
-      this.element.addEventListener('mousemove', (event) => ths.panHandler(event));
+      this.element.addEventListener('mousemove', ths.panListener);
     } else {
       this.dimensions = {
         width: candidate_width,
@@ -236,10 +239,10 @@ class PlayerData {
       };
       const ths = this;
       if(this.element) {
-        this.element.removeEventListener('mousemove', (event) => ths.panHandler(event));
+        this.element.removeEventListener('mousemove', (event) => ths.panListener);
       }
       this.element = playerCandidateNode;
-      this.element.addEventListener('mousemove', (event) => ths.panHandler(event));
+      this.element.addEventListener('mousemove', (event) => ths.panListener);
     }
   }
 

js/lib/VideoData.js

@@ -14,15 +14,25 @@ class VideoData {
     // player dimensions need to be in:
     // this.player.dimensions
     this.pageInfo = pageInfo;
+    this.vdid = (Math.random()*100).toFixed();
+    if (Debug.init) {
+      console.log("[VideoData::ctor] Created videoData with vdid", this.vdid);
+    }
   }
 
   firstTimeArdInit(){
+    if(this.destroyed) {
+      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+    }
     if(! this.arSetupComplete){
       this.arDetector = new ArDetector(this);
     }
   }
 
   initArDetection() {
+    if(this.destroyed) {
+      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+    }
     if(this.arDetector){
       this.arDetector.init();
     }
@@ -33,6 +43,9 @@ class VideoData {
   }
   
   startArDetection() {
+    if(this.destroyed) {
+      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+    }
     if(!this.arDetector) {
       this.arDetector.init();
     }
@@ -46,10 +59,11 @@ class VideoData {
   }
 
   destroy() {
-    if(Debug.debug){ 
-      console.log("[VideoData::destroy] received destroy command");
+    if(Debug.debug || Debug.init){ 
+      console.log(`[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
     }
 
+    this.pause();
     this.destroyed = true;
     if(this.arDetector){
       this.arDetector.stop();
@@ -81,6 +95,9 @@ class VideoData {
   }
 
   resume(){
+    if(this.destroyed) {
+      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+    }
     this.paused = false;
     try {
       this.resizer.start();
@@ -112,6 +129,9 @@ class VideoData {
   }
 
   panHandler(event) {
+    if(this.destroyed) {
+      throw {error: 'VIDEO_DATA_DESTROYED', data: {videoData: this}};
+    }
     if(!this.resizer) {
       this.destroy();
       return;

js/modules/ArDetect.js

@@ -15,17 +15,27 @@ class ArDetector {
     this.fallbackMode = false;
 
     this.blackLevel = this.settings.active.arDetect.blackLevel_default;
+
+    this.arid = (Math.random()*100).toFixed();
+
+    if (Debug.init) {
+      console.log("[ArDetector::ctor] creating new ArDetector. arid:", this.arid);
+    }
   }
 
   init(){
-    if(Debug.debug){
-      console.log("[ArDetect::init] Initializing autodetection")
+    if (Debug.debug || Debug.init) {
+      console.log("[ArDetect::init] Initializing autodetection. arid:", this.arid);
     }
     this.setup(this.settings.active.arDetect.hSamples, this.settings.active.arDetect.vSamples);
   }
 
   destroy(){
+    if(Debug.debug || Debug.init) {
+      console.log(`[ArDetect::destroy] <arid:${this.arid}>`)
+    }
     this.debugCanvas.destroy();
+    this.stop();
   }
 
   setup(cwidth, cheight, forceStart){
@@ -34,8 +44,8 @@ class ArDetector {
     this.edgeDetector = new EdgeDetect(this);
     this.debugCanvas = new DebugCanvas(this);
 
-    if(Debug.debug) {
-      console.log("[ArDetect::setup] Starting autodetection setup");
+    if(Debug.debug || Debug.init) {
+      console.log("[ArDetect::setup] Starting autodetection setup. arid:", this.arid);
     }
 
     if (this.fallbackMode || cheight !== this.settings.active.arDetect.hSamples) {

js/modules/PageInfo.js

@@ -26,7 +26,7 @@ class PageInfo {
   }
 
   destroy() {
-    if(Debug.debug){
+    if(Debug.debug || Debug.init){
       console.log("[PageInfo::destroy] destroying all videos!")
     }
     if(this.rescanTimer){

js/modules/Resizer.js

@@ -49,7 +49,9 @@ class Resizer {
   }
   
   start(){
-    this.startCssWatcher();
+    if(!this.destroyed) {
+      this.startCssWatcher();
+    }
   }
 
   stop(){
@@ -57,7 +59,7 @@ class Resizer {
   }
 
   destroy(){
-    if(Debug.debug){
+    if(Debug.debug || Debug.init){
       console.log(`[Resizer::destroy] <rid:${this.resizerId}> received destroy command.`);
     }
     this.destroyed = true;
@@ -91,7 +93,7 @@ class Resizer {
       this.videoData.destroy();
     }
 
-    // pause AR on basic stretch, unpause when using other mdoes
+    // // pause AR on basic stretch, unpause when using other mdoes
     // fir sine reason unpause doesn't unpause. investigate that later
     // if (this.stretcher.mode === StretchMode.BASIC) {
     //   this.conf.arDetector.pause();
@@ -186,9 +188,13 @@ class Resizer {
   }
 
   startCssWatcher(){
+    if(Debug.debug) {
+      console.log("[Resizer.js::startCssWatcher] starting css watcher. Is resizer destroyed?", this.destroyed);
+    }
     if (this.destroyed) {
       return;
     }
+
     // this.haltCssWatcher = false;
     if(!this.cssWatcherTimer){
       this.scheduleCssWatcher(1);
@@ -441,6 +447,7 @@ class Resizer {
       if(Debug.debug) {
         console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
       }
+      this.stopCssWatcher();
       return;
     }
 

res/popup/js/popup.js

@@ -766,8 +766,10 @@ document.addEventListener("click", (e) => {
       return;
     }
     if (e.target.classList.contains("_zoom_reset")) {
+      zoom_videoScale = scale;
       VideoPanel.labels.zoomLevel.textContent = 100;
       VideoPanel.inputs.zoomSlider.value = 0;         // log₂(1)
+      
       command.cmd = 'set-zoom';
       command.zoom = 1;
       return command;