popup picks up current zoom level

js/conf/ExtensionConf.js

@@ -96,6 +96,11 @@ var ExtensionConf = {
   arChange: {
     samenessTreshold: 0.025,  // if aspect ratios are within 2.5% within each other, don't resize
   },
+  zoom: {
+    minLogZoom: -1,
+    maxLogZoom: 3,
+    announceDebounce: 200     // we wait this long before announcing new zoom
+  },
   miscFullscreenSettings: {
     videoFloat: "center",
     mousePan: {

js/lib/Comms.js

@@ -57,6 +57,10 @@ class CommsClient {
       return;
     }
 
+    if (message.cmd === 'get-current-zoom') {
+      this.pageInfo.requestCurrentZoom();
+    }
+
     if (message.cmd === "set-ar") {
       this.pageInfo.setAr(message.ratio);
     } else if (message.cmd === 'set-video-float') {
@@ -77,7 +81,7 @@ class CommsClient {
       // todo: autoArStatus
       this.pageInfo.resumeProcessing(message.autoArStatus);
     } else if (message.cmd === 'set-zoom') {
-      this.pageInfo.setZoom(message.zoom);
+      this.pageInfo.setZoom(message.zoom, true);
     }
   }
 
@@ -132,6 +136,10 @@ class CommsClient {
     this.port.postMessage({cmd: "has-video"});
   }
 
+  announceZoom(scale){
+    this.port.postMessage({cmd: "announce-zoom", zoom: scale});
+  }
+
   unregisterVideo(){
     this.port.postMessage({cmd: "noVideo"});  // ayymd
   }
@@ -245,6 +253,13 @@ class CommsServer {
       console.log("[CommsServer.js::processMessage] Received message from background script!", message, "port", port, "\nsettings and server:", this.settings,this.server);
     }
 
+    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});
+    } else if (message.cmd === 'get-current-zoom') {
+      this.sendToActive(message);
+    }
+
     if (message.cmd === 'get-current-site') {
       port.postMessage({cmd: 'set-current-site', site: await this.getCurrentTabHostname()});
     }

js/lib/VideoData.js

@@ -1,6 +1,6 @@
 class VideoData {
   
-  constructor(video, settings){
+  constructor(video, settings, pageInfo){
     this.arSetupComplete = false;
     this.video = video;
     this.destroyed = false;
@@ -13,6 +13,7 @@ class VideoData {
     this.arDetector = new ArDetector(this);  // this starts Ar detection. needs optional parameter that prevets ardetdctor from starting
     // player dimensions need to be in:
     // this.player.dimensions
+    this.pageInfo = pageInfo;
   }
 
   firstTimeArdInit(){
@@ -130,13 +131,15 @@ class VideoData {
     this.resizer.setStretchMode(stretchMode);
   }
 
-  setZoom(zoomLevel){
-    this.resizer.setZoom(zoomLevel);
+  setZoom(zoomLevel, no_announce){
+    this.resizer.setZoom(zoomLevel, no_announce);
   }
 
   zoomStep(step){
     this.resizer.zoomStep(step);
   }
 
-
+  announceZoom(scale){
+    this.pageInfo.announceZoom(scale);
+  }
 }

js/modules/PageInfo.js

@@ -21,6 +21,8 @@ class PageInfo {
       console.log("registering video")
       comms.registerVideo();
     }
+
+    this.currentZoomScale = 1;
   }
 
   destroy() {
@@ -91,7 +93,7 @@ class PageInfo {
         if(Debug.debug && Debug.periodic && Debug.videoRescan){
           console.log("[PageInfo::rescan] found new video candidate:", video)
         }
-        v = new VideoData(video, this.settings);
+        v = new VideoData(video, this.settings, this);
         // console.log("[PageInfo::rescan] v is:", v)
         // debugger;
         v.initArDetection();
@@ -253,9 +255,9 @@ class PageInfo {
     }
   }
 
-  setZoom(zoomLevel) {
+  setZoom(zoomLevel, no_announce) {
     for(var vd of this.videos) {
-      vd.setZoom(zoomLevel);
+      vd.setZoom(zoomLevel, no_announce);
     }
   }
 
@@ -264,6 +266,19 @@ class PageInfo {
       vd.zoomStep(step);
     }
   }
+
+  announceZoom(scale) {
+    if (this.announceZoomTimeout) {
+      clearTimeout(this.announceZoom);
+    }
+    this.currentZoomScale = scale;
+    const ths = this;
+    this.announceZoomTimeout = setTimeout(() => ths.comms.announceZoom(scale), this.settings.active.zoom.announceDebounce);
+  }
+
+  requestCurrentZoom() {
+    this.comms.announceZoom(this.currentZoomScale);
+  }
 }
 
 var RescanReason = {

js/modules/Resizer.js

@@ -264,8 +264,8 @@ class Resizer {
     this.pan = undefined;
   }
 
-  setZoom(zoomLevel) {
-    this.zoom.setZoom(zoomLevel);
+  setZoom(zoomLevel, no_announce) {
+    this.zoom.setZoom(zoomLevel, no_announce);
   }
   
   zoomStep(step){

js/modules/Zoom.js

@@ -19,26 +19,6 @@ class Zoom {
     this.scale = 1;
   }
 
-  zoomIn(){
-    this.logScale += this.scaleStep;
-
-    if (this.logScale >= this.maxScale) {
-      this.logScale = this.maxScale;
-    }
-
-    this.scale = Math.pow(2, this.logScale);
-  }
-
-  zoomOut(){
-    this.logScale -= this.scaleStep;
-
-    if (this.logScale <= this.minScale) {
-      this.logScale = this.minScale;
-    }
-    
-    this.scale = Math.pow(2, this.logScale);
-  }
-
   zoomStep(amount){
     this.logScale += amount;
 
@@ -56,9 +36,10 @@ class Zoom {
     }
 
     this.conf.restoreAr();
+    this.conf.announceZoom(this.scale);
   }
 
-  setZoom(scale){
+  setZoom(scale, no_announce){
     // NOTE: SCALE IS NOT LOGARITHMIC
     if(scale < Math.pow(this.minScale)) {
       scale = this.minScale;
@@ -69,6 +50,9 @@ class Zoom {
     this.scale = scale;
 
     this.conf.restoreAr();
+    if (!no_announce) {
+      this.conf.announceZoom(this.scale);
+    }
   }
 
   applyZoom(videoDimensions){

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Ultrawidify",
-  "version": "3.2.0-a1",
+  "version": "3.2.0-a2",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

res/popup/js/popup.js

@@ -123,8 +123,13 @@ async function processReceivedMessage(message, port){
   }
 
   if(message.cmd === 'set-current-site'){
+    if (site !== message.site) {
+      port.postMessage({cmd: 'get-current-zoom'});
+    }
     site = message.site;
     loadConfig(message.site);
+  } else if (message.cmd === 'set-current-zoom') {
+    setCurrentZoom(message.zoom);
   }
 }
 
@@ -138,6 +143,15 @@ async function updateConfig() {
   }
 }
 
+async function setCurrentZoom(scale) {
+  if(Debug.debug) {
+    console.log("[popup.js::setCurrentZoom] we're setting zoom:", scale);
+  }
+
+  VideoPanel.inputs.zoomSlider.value = Math.log2(scale);
+  VideoPanel.labels.zoomLevel.textContent = (scale * 100).toFixed();
+}
+
 function hideWarning(warn){
   document.getElementById(warn).classList.add("hidden");
 }