Fixes for autoar

src/ext/conf/Debug.js

@@ -3,24 +3,26 @@
 const _prod = false; 
 
 var Debug = {
+  performanceMetrics: true, // should not be affected by debug.debug in order to allow benchmarking of the impact logging in console has
   init: true,
   debug: true,
+  // debug: false,
   // keyboard: true,
   debugResizer: true,
   debugArDetect: true,
   // debugStorage: false,
-  debugStorage: true,
+  // debugStorage: true,
   // comms: false,
-  comms: true,
+  // comms: true,
   // showArDetectCanvas: true,
   // flushStoredSettings: true,
   flushStoredSettings: false,
-  playerDetectDebug: true,
+  // playerDetectDebug: true,
   periodic: true,
   // videoRescan: true,
   // mousemove: true,
   arDetect: {
-    edgeDetect: true
+    // edgeDetect: true
   },
   canvas: {
     debugDetection: true

src/ext/lib/ar-detect/ArDetector.js

@@ -30,19 +30,35 @@ class ArDetector {
     this._halted = true;
     this._exited = true;
 
+    // we can tick manually, for debugging
+    this._manualTicks = false;
+    this._nextTick = false;
+
     this.canDoFallbackMode = false; 
     if (Debug.init) {
       console.log("[ArDetector::ctor] creating new ArDetector. arid:", this.arid);
     }
   }
 
+  setManualTick(manualTick) {
+    this._manualTicks = manualTick;
+  }
+
+  tick() {
+    this._nextTick = true;
+  }
+
   init(){
     if (Debug.debug || Debug.init) {
       console.log("[ArDetect::init] Initializing autodetection. arid:", this.arid);
     }
 
     try {
-      this.setup();
+      if (this.settings.canStartAutoAr()) {
+        this.setup();
+      } else {
+        throw "Settings prevent autoar from starting"
+      }
     } catch (e) {
       console.log("[ArDetect::init] INITIALIZATION FAILED!\n", e);
     }
@@ -182,7 +198,7 @@ class ArDetector {
     this.canvasImageDataRowLength = cwidth << 2;
     this.noLetterboxCanvasReset = false;
     
-    if(forceStart || this.settings.canStartAutoAr() ) {
+    if (this.settings.canStartAutoAr() ) {
       this.start();
     }
   
@@ -194,11 +210,14 @@ class ArDetector {
     this.conf.arSetupComplete = true;
   }
 
-  start(){
+  start() {
     if (Debug.debug) {
       console.log("%c[ArDetect::setup] Starting automatic aspect ratio detection.", _ard_console_start);
     }
-    this.conf.resizer.resetLastAr();
+    if (this.conf.resizer.lastAr.type === 'auto') {
+      // ensure first autodetection will run in any case
+      this.conf.resizer.setLastAr({type: 'auto', ar: null});
+    }
 
     // launch main() if it's currently not running:
     this.main();
@@ -218,7 +237,7 @@ class ArDetector {
     // (we are running when _halted is neither true nor undefined)
     if (this._halted === false) {
       this._paused = true;
-      this.conf.resizer.resetLastAr();
+      // this.conf.resizer.resetLastAr();
     }
   }
 
@@ -227,7 +246,7 @@ class ArDetector {
       console.log("%c[ArDetect::_ard_stop] Stopping automatic aspect ratio detection", _ard_console_stop);    
     }
     this._halted = true;
-    this.conf.resizer.resetLastAr();
+    // this.conf.resizer.resetLastAr();
   }
 
   async main() {
@@ -266,15 +285,32 @@ class ArDetector {
     // set initial timestamps so frame check will trigger the first time we run the loop
     let lastFrameCheckStartTime = Date.now() - (this.settings.active.arDetect.timers.playing << 1);
 
+    //
+    console.log("MAIN: BLACKFRAME CONTEXT:", this.blackframeContext)
+
+    const frameCheckTimes = new Array(10).fill(-1);
+    let frameCheckBufferIndex = 0;
+    let fcstart, fctime;
+
     while (this && !this._halted) {
       // NOTE: we separated tickrate and inter-check timeouts so that when video switches
       // state from 'paused' to 'playing', we don't need to wait for the rest of the longer
       // paused state timeout to finish.
 
-      if (this.canTriggerFrameCheck(lastFrameCheckStartTime)) {
-        lastFrameCheckStartTime = Date.now();
+      if ( (!this._manualTicks && this.canTriggerFrameCheck(lastFrameCheckStartTime)) || this._nextTick) {
+        this._nextTick = false;
 
+        lastFrameCheckStartTime = Date.now();
+        fcstart = performance.now();
+        
         this.frameCheck();
+
+        if (Debug.performanceMetrics) {
+          fctime = performance.now() - fcstart;
+          frameCheckTimes[frameCheckBufferIndex % frameCheckTimes.length] = fctime;
+          this.conf.pageInfo.sendPerformanceUpdate({frameCheckTimes: frameCheckTimes, lastFrameCheckTime: fctime});
+          ++frameCheckBufferIndex;
+        }
       }
 
       await this.sleep(this.settings.active.arDetect.timers.tickrate);
@@ -485,6 +521,11 @@ class ArDetector {
       this.conf.destroy();
       return;
     }
+
+    if (!this.blackframeContext) {
+      console.log("BLACKFRAME CONTEXT IS NOT DEFINED", this.blackframeContext);
+      this.init();
+    }
     
     var startTime = performance.now();
     let sampleCols = this.sampleCols.slice(0);

src/ext/lib/comms/CommsClient.js

@@ -91,6 +91,10 @@ class CommsClient {
       this.pageInfo.markPlayer(message.name, message.color);
     } else if (message.cmd === 'unmark-player') {
       this.pageInfo.unmarkPlayer();
+    } else if (message.cmd === 'autoar-set-manual-tick') {
+      this.pageInfo.setManualTick(message.arg);
+    } else if (message.cmd === 'autoar-tick') {
+      this.pageInfo.tick();
     }
   }
 
@@ -154,7 +158,10 @@ class CommsClient {
     } else {
       // this.port.postMessage({cmd: "has-video"});
     }
-    
+  }
+
+  sendPerformanceUpdate(message){
+    this.port.postMessage({cmd: 'performance-update', message: message});
   }
 
   unregisterVideo(){

src/ext/lib/video-data/PageInfo.js

@@ -443,6 +443,24 @@ class PageInfo {
     this.announceZoomTimeout = setTimeout(() => ths.comms.announceZoom(scale), this.settings.active.zoom.announceDebounce);
   }
 
+  setManualTick(manualTick) {
+    for(var vd of this.videos) {
+      vd.setManualTick();
+    }
+  }
+
+  tick() {
+    for(var vd of this.videos) {
+      vd.tick();
+    }
+  }
+
+  sendPerformanceUpdate(performanceUpdate) {
+    if(this.comms) {
+      this.comms.sendPerformanceUpdate(performanceUpdate);
+    }
+  }
+
   requestCurrentZoom() {
     this.comms.announceZoom(this.currentZoomScale);
   }

src/ext/lib/video-data/VideoData.js

@@ -139,6 +139,18 @@ class VideoData {
     }
   }
 
+  setManualTick(manualTick) {
+    if(this.arDetector){
+      this.arDetector.setManualTick(manualTick);
+    }
+  }
+  
+  tick() {
+    if(this.arDetector){
+      this.arDetector.tick();
+    }
+  }
+
   setLastAr(lastAr){
     this.resizer.setLastAr(lastAr);
   }

src/ext/lib/video-transform/Resizer.js

@@ -279,7 +279,7 @@ class Resizer {
 
   restore() {
     if(Debug.debug){
-      console.log("[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio. this & settings:", {'this': this, "settings": this.settings} );
+      console.log("[Resizer::restore] <rid:"+this.resizerId+"> attempting to restore aspect ratio. this & settings:", {'a_lastAr': this.lastAr, 'this': this, "settings": this.settings} );
     }
     
     // this is true until we verify that css has actually been applied
@@ -414,7 +414,7 @@ class Resizer {
             styleArray[i].startsWith("top:") ||
             styleArray[i].startsWith("left:") ||
             styleArray[i].startsWith("right:") ||
-            styleArray[i].startsWith("bottom") ){
+            styleArray[i].startsWith("bottom:") ){
           delete styleArray[i];
         }
       }
@@ -487,7 +487,7 @@ class Resizer {
     
     // this means video went missing. videoData will be re-initialized when the next video is found
     if(! this.video){
-      if(Debug.debug) {
+      if(Debug.debug && Debug.debugResizer) {
         console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> no video detecting, issuing destroy command");
       }
       this.conf.destroy();
@@ -495,7 +495,7 @@ class Resizer {
     }
     
     if(this.destroyed) {
-      if(Debug.debug) {
+      if(Debug.debug && Debug.debugResizer) {
         console.log("[Resizer::cssCheck] <rid:"+this.resizerId+"> destroyed flag is set, we shouldnt be running");
       }
       this.stopCssWatcher();
@@ -507,6 +507,9 @@ class Resizer {
     // first, a quick test:
     // if (this.currentVideoSettings.validFor == this.conf.player.dimensions ){
     if (this.currentStyleString !== styleString){
+      if(Debug.debug && Debug.debugResizer) {
+        console.log(`%c[Resizer::cssCheck] <rid:${this.resizerId}> something touched our style string. We need to re-apply the style.`, {background: '#ddf', color: '#007'});
+      }
       this.restore();
       this.scheduleCssWatcher(10);
       return;

src/popup/App.vue

@@ -50,6 +50,21 @@
             </div>
           </div>
         </div>
+
+         <div 
+             class="menu-item"
+             :class="{'selected-tab': selectedTab === 'performance-metrics'}"
+             @click="selectTab('performance-metrics')"
+        >
+          <div class="">
+            Performance debug
+          </div>
+          <div class="">
+          </div>
+        </div>
+
+
+
         <div class="menu-item"
             :class="{'selected-tab': selectedTab === 'about'}"
             @click="selectTab('about')"
@@ -93,6 +108,8 @@
                               :scope="selectedTab"
                               :site="site.host"
         />
+        <PerformancePanel v-if="selectedTab === 'performance-metrics'" 
+                          :performance="performance" />
       </div>
     </div>
   </div>
@@ -103,6 +120,7 @@ import Debug from '../ext/conf/Debug';
 import BrowserDetect from '../ext/conf/BrowserDetect';
 import Comms from '../ext/lib/comms/Comms';
 import VideoPanel from './panels/VideoPanel';
+import PerformancePanel from './panels/PerformancePanel';
 import Settings from '../ext/lib/Settings';
 import ExecAction from './js/ExecAction.js';
 import DefaultSettingsPanel from './panels/DefaultSettingsPanel'
@@ -117,6 +135,7 @@ export default {
       comms: new Comms(),
       frameStore: {},
       frameStoreCount: 0,
+      performance: {},
       site: null,
       currentZoom: 1,
       execAction: new ExecAction(),
@@ -143,6 +162,8 @@ export default {
   components: {
     VideoPanel,
     DefaultSettingsPanel,
+    PerformancePanel,
+    Debug,
   },
   methods: {
     async sleep(t) {
@@ -198,6 +219,10 @@ export default {
         this.loadFrames(this.site);
       } else if (message.cmd === 'set-current-zoom') {
         this.setCurrentZoom(message.zoom);
+      } else if (message.cmd === 'performance-update') {
+        for (let key in message.message) {
+          this.performance[key] = message.message[key];
+        }
       }
     },
     loadFrames(videoTab) {

src/popup/panels/PerformancePanel.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    PERFORMANCE PANEL :: This is here for debugging purposes.
+
+    <pre>{{performance}}</pre>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  props: {
+    performance: Object,
+  },
+  watch: {
+    performance: {
+      deep: true,
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>