Fix legacy canvas loading

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -234,6 +234,7 @@
                 />
                 <input
                   v-model="settings.active.arDetect.timers.playing"
+                  @change="setArCheckFrequency($event.target.value)"
                   class="input"
                   type="text"
                 >
@@ -244,10 +245,10 @@
             <div class="field">
               <div class="label">Frame extraction canvas type:</div>
               <div class="select">
-                <select v-model="settings.active.arDetect.aardType">
+                <select v-model="settings.active.arDetect.aardType" @change="settings.saveWithoutReload">
                   <option value="auto">Automatic</option>
                   <option value="webgl">WebGL only</option>
-                  <option value="fallback">Legacy / fallback</option>
+                  <option value="legacy">Legacy / fallback</option>
                 </select>
               </div>
             </div>

src/ext/lib/aard/Aard.ts

@@ -349,13 +349,13 @@ export class Aard {
     this.startCheck();
   }
 
-  private createCanvas(canvasId: string, canvasType?: 'webgl' | 'fallback') {
+  private createCanvas(canvasId: string, canvasType?: 'webgl' | 'legacy') {
     if (canvasType) {
       if (canvasType === this.settings.active.arDetect.aardType || this.settings.active.arDetect.aardType === 'auto') {
         if (canvasType === 'webgl') {
           return new GlCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-gl'});
-        } else if (canvasType === 'fallback') {
-          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
+        } else if (canvasType === 'legacy') {
+          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
         } else {
           // TODO: throw error
         }
@@ -370,14 +370,14 @@ export class Aard {
         return new GlCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-gl'});
       } catch (e) {
         if (this.settings.active.arDetect.aardType !== 'webgl') {
-          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
+          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
         }
         console.error('[ultrawidify|Aard::createCanvas] could not create webgl canvas:', e);
         this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {webglError: true}});
         throw e;
       }
     } else if (this.settings.active.arDetect.aardType === 'legacy') {
-      return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
+      return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
     } else {
       console.error('[ultrawidify|Aard::createCanvas] invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType);
       this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {invalidSettings: true}});
@@ -556,7 +556,7 @@ export class Aard {
               } else {
                 if (this.settings.active.arDetect.aardType === 'auto') {
                   this.canvasStore.main.destroy();
-                  this.canvasStore.main = this.createCanvas('main-gl', 'fallback');
+                  this.canvasStore.main = this.createCanvas('main-gl', 'legacy');
                 }
                 this.inFallback = true;
                 this.fallbackReason = {cors: true};

src/ext/lib/aard/AardTimers.ts

@@ -23,7 +23,9 @@ export class AardTimer {
 
 
   constructor() {
-    this.aardPerformanceDataBuffer = new Array<AardPerformanceData>(16).fill(this.getEmptyMeasurement());
+    // we need to deep clone, otherwise all buffer objects will point to the same object
+    // (this makes calculating averages impossible)
+    this.aardPerformanceDataBuffer = JSON.parse(JSON.stringify(new Array<AardPerformanceData>(64).fill(this.getEmptyMeasurement())));
     this.current = this.aardPerformanceDataBuffer[0];
     this.previous = undefined;
     this.lastChange = this.getEmptyMeasurement();

src/ext/lib/aard/gl/FallbackCanvas.ts

@@ -2,7 +2,9 @@ import { GlCanvas, GlCanvasOptions } from './GlCanvas';
 
 
 export class FallbackCanvas extends GlCanvas {
-
+  get type() {
+    return 'legacy';
+  }
   context: CanvasRenderingContext2D;
 
   constructor(options: GlCanvasOptions) {
@@ -24,7 +26,7 @@ export class FallbackCanvas extends GlCanvas {
   protected initWebgl() { }
 
   drawVideoFrame(video: HTMLVideoElement) {
-    this.context.drawImage(video, this.context.canvas.width, this.context.canvas.height);
+    this.context.drawImage(video, 0, 0, this.context.canvas.width, this.context.canvas.height);
   }
 
   getImageData() {

src/ext/lib/aard/gl/GlCanvas.ts

@@ -52,6 +52,9 @@ interface GlCanvasProgramInfo {
 }
 
 export class GlCanvas {
+  get type() {
+    return 'webgl';
+  }
 
   private _canvas: HTMLCanvasElement;
   private set canvas(x: HTMLCanvasElement) {

src/options/AutodetectionSettings.vue

@@ -574,7 +574,7 @@
     <div class="flex flex-row button-box sticky-bottom">
       <Button label="Cancel"
               @click.native="cancel()"
-      > 
+      >
       </Button>
       <Button label="Save settings"
               @click.native="saveManual()"
@@ -601,17 +601,6 @@ export default {
   },
   created() {
     this.sensitivity = this.getSensitivity();
-
-    const canvas = document.createElement('canvas');
-    canvas.width = 10;
-    canvas.height = 10;
-    const ctx = canvas.getContext('2d');
-    try {
-      ctx.drawWindow(window,0, 0, 10, 10, "rgba(0,0,0,0)");
-      this.fallbackModeAvailable = true;
-    } catch (e) {
-      this.fallbackModeAvailable = false;
-    }
   },
   methods: {
     setArCheckFrequency(event) {