From 0cdd70b2d3d74bef67aa99698aaa9715f4f2faf8 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Fri, 22 Feb 2019 00:32:44 +0100
Subject: [PATCH] Autodetection settings page

---
 src/common/enums/anti-gradient-mode.enum.js |   2 +-
 src/options/App.vue                         |   3 +
 src/options/autodetection-settings.vue      | 383 +++++++++++++++++++-
 3 files changed, 385 insertions(+), 3 deletions(-)

diff --git a/src/common/enums/anti-gradient-mode.enum.js b/src/common/enums/anti-gradient-mode.enum.js
index 6a2787f..c8924da 100644
--- a/src/common/enums/anti-gradient-mode.enum.js
+++ b/src/common/enums/anti-gradient-mode.enum.js
@@ -4,4 +4,4 @@ var AntiGradientMode = Object.freeze({
   Strict: 2
 });
 
-export default EdgeDetectPrimaryDirection;
+export default AntiGradientMode;
diff --git a/src/options/App.vue b/src/options/App.vue
index 3de51b4..04c227b 100644
--- a/src/options/App.vue
+++ b/src/options/App.vue
@@ -110,6 +110,8 @@ import GeneralSettings from './general-settings';
 import ControlsSettings from './controls-settings/controls-settings';
 import AddEditActionPopup from './controls-settings/add-edit-action-popup';
 
+import AutodetectionSettings  from './autodetection-settings';
+
 
 export default {
   name: "Ultrawidify",
@@ -133,6 +135,7 @@ export default {
     GeneralSettings,
     ControlsSettings,
     AddEditActionPopup,
+    AutodetectionSettings,
   },
   methods: {
     setSelectedTab(newTab) {
diff --git a/src/options/autodetection-settings.vue b/src/options/autodetection-settings.vue
index dd7ed59..872f3fc 100644
--- a/src/options/autodetection-settings.vue
+++ b/src/options/autodetection-settings.vue
@@ -1,9 +1,388 @@
 <template>
-  
+  <div>
+    <div>
+      <input type="checkbox"
+             v-model="showAdvancedOptions"
+      />
+      Show advanced options
+    </div>
+
+    <div class="label">Autodetection frequency</div>
+    <div class="description">
+      Determines how often we check for aspect ratio changes.
+      More frequent aspect ratio checks can result in insane RAM usage.
+      Less frequent aspect ratio checks result in bigger delay between aspect ratio change and correction.
+      Delays are given in milliseconds.
+    </div>
+
+    <div class="indent">
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Frequency while playing:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                step="any"
+                v-model="settings.active.arDetect.timers.playing"
+                >
+        </div>
+      </div>
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Frequency while paused:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                step="any"
+                v-model="settings.active.arDetect.timers.paused"
+                >
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Error timeout:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                step="any"
+                v-model="settings.active.arDetect.timers.error"
+                >
+        </div>
+      </div>
+    </div>
+
+    <div class="info">Setting values under 100 milliseconds will have no effect unless you also reduce the tickrate.
+      <a href="#"
+         @click="showAdvancedOptions = true"
+      >Show advanced options</a>
+    </div> 
+
+    <div class="indent">
+      <div class="flex flex-row row-padding"  v-if="showAdvancedOptions">
+        <div class="flex label-secondary">
+          Tick rate:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                step="any"
+                v-model="settings.active.arDetect.timers.tickrate"
+                >
+        </div>
+      </div>
+    </div>
+
+    <div class="label">Fallback mode</div>
+    <div class="description">
+      Some streaming sites implement stuff (DRM) that prevents us from detecting aspect ratio using our favourite way.
+      Fortunately for us, some browsers (most notably: Firefox) allow us to work around that limitation using an alternative.
+      Said alternative is not without downsides, though:<br />
+      <ul><li> it's less accurate and leaves a thin black edge all around the video</li>
+      <li> Uses bigger image sample, which translates into slightly to moderately increased RAM and CPU usage <small>(increase in resource usage depends on your monitor resolution)</small></li>
+      </ul>
+      This is why fallback mode can be toggled off separately from the main thing.
+      <span v-if="!fallbackModeAvailable">Unfortunately for you, <b>this option doesn't seem to be available in the browser you're using.</b></span>
+    </div>
+    <div class="indent">
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+
+        </div>
+        <div class="flex flex-input">
+          <input type="checkbox"
+                 v-model="settings.active.arDetect.fallbackMode.enabled"
+          /> Enable fallback mode&nbsp;<span v-if="!fallbackModeAvailable">because I'm super duper sure I'm using firefox right now.</span>
+        </div>
+      </div>
+
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Safety border thickness (in px)
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                step="any"
+                v-model="settings.active.arDetect.fallbackMode.safetyBorderPx"
+                >
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Don't react if detected edge is less than this many pixels thick:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                step="any"
+                v-model="settings.active.arDetect.fallbackMode.noTriggerZonePx"
+                >
+        </div>
+      </div>
+    </div>
+
+    <div class="label">Letterbox misallignment treshold</div>
+    <div class="description">
+      If top and bottom bar differ by more than this (0 — 0%, 1 — 100%), we do not correct aspect ratio.
+    </div>
+    <div class="indent">
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Letterbox misalignment treshold
+        </div>
+        <div class="flex flex-input">
+          <input type=""
+                 v-model="settings.active.arDetect.allowedMisaligned"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="label">Sampling options</div>
+    <div class="description">
+      Various sampling related options. Some options may be hidden behind <a href="#" @click="showAdvancedOptions = true">advanced options</a><br/>
+      <b>Static columns:</b> Image is sampled in this many columns, spaced at regular intervals between both edges.<br/>
+      <b>Random columns:</b> (ADVANCED; NOT IMPLEMENTED/PLANNED) In addition to static colums, sample image at this many random columns.<br/>
+      <b>Static rows:</b> (ADVANCED) Image is sampled in this many rows, spaced at regular intervals between both edges.<br/>
+      <b>Sample width, height:</b> (ADVANCED) size of the sample. Bigger -> more accurate aspect ratio detection, but uses more resources.<br/>
+
+    </div>
+    <div class="indent">
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Static sample columns:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.sampling.staticCols"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Random sample columns:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.sampling.randomCols"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Static rows:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.sampling.staticRows"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Sample width:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.width"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Static rows:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.canvasDimensions.sampleCanvas.height"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="label">Blackbar</div>
+    <div class="description">
+      These settings determine what's considered black and what's considered non-black.<br/>
+      <b>Black level:</b> 0-255, where 0 is black. Anything below this number across all RGB components is considered black.
+      Black level can decrease if we detect darker blacks in the video. Lower values —> more accurate edge detection;
+      higher values —> detection is more forgiving to videos with less-than-ideal contrast ratios.<br/>
+      <b>Treshold:</b> If pixel is darker than the sum of black level and this value, it's considered black. In theory, lower -> better.
+      In practice, this value needs to be kept surprisingly high (8 might not be high enough), otherwise compression artifacts in videos
+      start having an adverse effect on quality of automatic detection.
+      <b>Gradient detection:</b> Attempt to discriminate between hard edges and gradients. 'Strict' and 'Lax' prevent aspect ratio
+      changes if we detected gradients instead of a legit edge. This results in fewer false positives, but may cause aspect ratio
+      detection to not work on darker frames.<br/>
+      <b>Image treshold:</b> When gradient detection is enabled, everything that's brighter than the sum of black level, treshold and
+      ths is considered to be non-black.<br/>
+      <b>Gradient treshold:</b> If the distance between last black pixel and the first non-black pixel in a given column is more than this value,
+      we're looking at a gradient. If this happens while gradient detection is on, we don't change aspect ratio.<br/>
+      <b>Gradient sample size:</b> This option is really only relevant when using 'lax' gradient detection. If we don't find a non-black pixel
+      within this distance after last known black pixel when scanning a column, we presume we're not on a gradient.
+    </div>
+    <div class="indent">
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Black level:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.blackbar.blackLevel"
+          />
+        </div>
+      </div>
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Treshold:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.blackbar.treshold"
+          />
+        </div>
+      </div>
+      <div class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Gradient detection:
+        </div>
+        <div class="flex flex-input">
+          TODO: insert select here
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Image treshold
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.blackbar.imageTreshold"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Gradient treshold:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.blackbar.gradientTreshold"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvancedOptions" class="flex flex-row row-padding">
+        <div class="flex label-secondary">
+          Gradient sample size:
+        </div>
+        <div class="flex flex-input">
+          <input type="number"
+                 v-model="settings.active.arDetect.blackbar.gradientSampleSize"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="label">Edge detection</div>
+    <div class="description">
+      alan pls add
+    </div>
+    <div class="indent">
+
+    </div>
+
+    <div v-if="showAdvancedOptions">
+      <div class="label">Black frame detection</div>
+      <div class="description">
+        Black frame detection is a quick test that tries to determine whether we're looking at a black frame. This test prevents
+        us from wasting precious time trying to detect aspect ratio on frames that are too dark for reliable aspect ratio detection.<br/>
+        <b>Sample width, height:</b> Sample size. Since we're checking <i>every</i> pixel in this sample, dimensions should be kept small.<br/>
+        <b>Cumulative treshold:</b> If we add the maximum of red, green, blue values of every pixel in the sample and they total more than this, the frame is bright enough.<br/>
+        <b>Black pixel treshold:</b> If more than this fraction of pixels from the sample are "black", we consider the frame black. This overrules cumulative treshold.
+      </div>
+      <div class="indent">
+        <div class="flex flex-row row-padding">
+          <div class="flex label-secondary">
+            Blackframe sample width:
+          </div>
+          <div class="flex flex-input">
+            <input type="number"
+                  v-model="settings.active.arDetect.canvasDimensions.blackframeCanvas.width"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row row-padding">
+          <div class="flex label-secondary">
+            Blackframe sample height:
+          </div>
+          <div class="flex flex-input">
+            <input type="number"
+                   v-model="settings.active.arDetect.canvasDimensions.blackframeCanvas.height"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row row-padding">
+          <div class="flex label-secondary">
+            Cumulative treshold:
+          </div>
+          <div class="flex flex-input">
+            <input type="number"
+                   v-model="settings.active.arDetect.blackframe.cumulativeTreshold"
+            />
+          </div>
+        </div>
+        <div class="flex flex-row row-padding">
+          <div class="flex label-secondary">
+            Black pixel treshold:
+          </div>
+          <div class="flex flex-input">
+            <input type=""
+                   v-model="settings.active.arDetect.blackframe.blackPixelsCondition"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showAdvancedOptions">
+      <div class="label">Aspect ratio change treshold</div>
+      <div class="description">
+        New and old aspect ratio must differ by at least this much (%, 1=100%) before we trigger aspect ratio correction.
+      </div>
+      <div class="indent">
+        <div class="flex flex-row row-padding">
+          <div class="flex label-secondary">
+            Aspect ratio change treshold.
+          </div>
+          <div class="flex flex-input">
+            <input type=""
+                  v-model="settings.active.arDetect.allowedMisaligned"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  props: ['settings']
+  props: ['settings'],
+  data() {
+    return {
+      showAdvancedOptions: false,
+      fallbackModeAvailable: false,
+    }
+  },
+  created() {
+    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) {
+      console.log("DrawWindow failed:", e)
+      this.fallbackModeAvailable = false;
+    }
+  },
+  methods: {
+
+  }
 }
 </script>