package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.0.2",
+  "version": "6.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.0.2",
+  "version": "6.0.1",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

src/common/interfaces/SettingsInterface.ts

@@ -213,15 +213,7 @@ interface SettingsInterface {
 
   ui: {
     inPlayer: {
-      enabled: boolean,
+      enabled: boolean
-      minEnabledWidth: number,                 // don't show UI if player is narrower than % of screen width
-      activation: 'trigger-zone' | 'player',   // what needs to be hovered in order for UI to be visible
-      triggerZoneDimensions: {                 // how large the trigger zone is (relative to player size)
-        width: number
-        height: number,
-        offsetX: number,                       // fed to translateX(offsetX + '%'). Valid range [-100,   0]
-        offsetY: number                        // fed to translateY(offsetY + '%'). Valid range [-100, 100]
-      },
     }
   }
 
@@ -319,7 +311,6 @@ interface SettingsInterface {
     internal?: CommandInterface[],
   },
   whatsNewChecked: boolean,
-  newFeatureTracker: any,
   // -----------------------------------------
   //       ::: SITE CONFIGURATION :::
   // -----------------------------------------

src/csui/PlayerOverlay.vue

@@ -1,29 +1,12 @@
 <template>
-  <div
-    class="context-spawn uw-ui-trigger"
-    style="z-index: 1000"
-    @mouseenter="(ev) => setTriggerZoneActive(true, ev)"
-    @mouseleave="(ev) => setTriggerZoneActive(false, ev)"
-  >
-    <div
-      class="spawn-container uw-trigger"
-      :style="triggerZoneStyles"
-    >
-      &nbsp;
-    </div>
-  </div>
-
   <div
     v-if="contextMenuActive || settingsInitialized && uwTriggerZoneVisible && !isGlobal"
     class="context-spawn uw-clickable"
-    style="z-index: 1001"
     @mouseenter="preventContextMenuHide()"
     @mouseleave="allowContextMenuHide()"
   >
-    <GhettoContextMenu
+
-      alignment="right" class="uw-menu"
+    <GhettoContextMenu alignment="right">
-      @mouseenter="newFeatureViewUpdate('uw6.ui-popup')"
-    >
       <template v-slot:activator>
         <div class="context-item">
           Ultrawidify
@@ -85,38 +68,12 @@
             </GhettoContextMenuItem>
           </slot>
         </GhettoContextMenu>
-
-        <!-- shortcut for configuring UI  -->
-        <GhettoContextMenuOption
-          v-if="settings.active.newFeatureTracker?.['uw6.ui-popup']?.show > 0"
-          @click="showUwWindow('ui-config')"
-        >
-          <span style="color: #fa6;">I hate this popup<br/></span>
-          <span style="font-size: 0.8em">
-            <span style="text-transform: uppercase; font-size: 0.8em">
-              <a @click="showUwWindow('ui-config')">
-                Do something about it
-              </a> × <a @click="acknowledgeNewFeature('uw6.ui-popup')">keep the popup</a>
-            </span>
-            <br/>
-            <span style="opacity: 0.5">This menu option will show {{settings.active.newFeatureTracker?.['uw6.ui-popup']?.show}} more<br/> times; or until clicked or dismissed.<br/>
-            Also accessible via <span style="font-variant: small-caps">extension settings</span>.
-            </span>
-          </span>
-        </GhettoContextMenuOption>
-
-        <!--  -->
-
         <GhettoContextMenuOption
           @click="showUwWindow()"
           label="Extension settings"
         >
         </GhettoContextMenuOption>
-        <GhettoContextMenuOption
+        <button @click="showUwWindow()">Not working?</button>
-          @click="showUwWindow('about')"
-          label="Not working?"
-        >
-        </GhettoContextMenuOption>
         </div>
       </slot>
     </GhettoContextMenu>
@@ -203,7 +160,6 @@ export default {
       disabled: false,
 
       contextMenuActive: false,
-      triggerZoneActive: false,
 
       uiVisible: true,
       debugData: {
@@ -355,34 +311,6 @@ export default {
       }
     },
 
-    /**
-     * Handles trigger zone
-     */
-    handleTriggerZone(mouseInside) {
-      console.log('handing trigger zone!', mouseInside);
-      // this.triggerZoneActive = mouseInside;
-    },
-
-    acknowledgeNewFeature(featureKey) {
-      delete this.settings.active.newFeatureTracker[featureKey];
-      this.settings.saveWithoutReload();
-    },
-    newFeatureViewUpdate(featureKey) {
-      if (!this.settings.active.newFeatureTracker[featureKey]) {
-        return;
-      }
-      try {
-        this.settings.active.newFeatureTracker[featureKey].show--;
-        this.settings.saveWithoutReload();
-
-        if (this.settings.active.newFeatureTracker[featureKey]?.show < 0) {
-          this.acknowledgeNewFeature(featureKey);
-        }
-      } catch (e) {
-        // do nothing
-      }
-    },
-
     /**
      * Sends message to parent _without_ using event bus.
      */
@@ -396,16 +324,14 @@ export default {
     },
 
     preventContextMenuHide() {
+      console.log('entered context menu ...');
       this.contextMenuActive = true;
     },
     allowContextMenuHide() {
+      console.log('exited context menu ...');
       this.contextMenuActive = false;
     },
 
-    setTriggerZoneActive(active, event) {
-      this.triggerZoneActive = active;
-    },
-
     showUwWindow() {
       this.uwWindowFadeOut = false;
       this.uwWindowVisible = true;
@@ -547,10 +473,6 @@ export default {
 
   //   white-space: nowrap;
   // }
-
-  // .spawn-container {
-    // border: 1px solid white;
-  // }
 }
 
 </style>

src/csui/src/PlayerUiPanels/AboutPanel.vue

@@ -43,8 +43,26 @@
         <p class="text-center">
           <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
         </p>
+        <h2>Fun stuff</h2>
         <p>
-          I also have <a href="https://instagram.com/shaman_urkog" target="_blank">instagram with nerdy shit</a> <small>(mini painting + various fantasy events)</small>.
+          This is probably a bad idea but—
+        </p>
+        <p>
+          Are you attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6.? So am I, by official duty.
+        </p>
+        <p>
+          Club Amulet D20 is forecasted to have a stand there, and I am forecasted to be in the general vicinity of it (barring any unexpected circumstances). I'll be either taking photos, painting minis, or doing heatstroke any% in rather rudamentary costume.
+        </p>
+        <p>
+          If you're there, you can swing around to say 'hi' or provide some validation, or paint some minis. Rumor has it Conquest will have paint&take event.
+        </p>
+        <p>
+          — Tamius
+        </p>
+        <p>
+        </p>
+        <p>
+          <small>I am not paid to shill this.</small>
         </p>
       </div>
     </div>

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -77,7 +77,27 @@
         <p class="text-center">
           <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
         </p>
-
+        <h2>Fun stuff</h2>
+        <p>
+          This is probably a bad idea but—
+        </p>
+        <p>
+          Are you attending Isle of Wonders on Cres, Croatia, between 28. 6. and 30. 6.? So am I, by official duty.
+        </p>
+        <p>
+          Club Amulet D20 is forecasted to have a stand there, and I am forecasted to be in the general vicinity of it (barring any unexpected circumstances). I'll be either taking photos, painting minis, or doing heatstroke any% in rather rudamentary costume.
+        </p>
+        <p>
+          If you're there, you can swing around to say 'hi' or provide some validation, or paint some minis. Rumor has it Conquest will have paint&take event.
+        </p>
+        <p>
+          — Tamius
+        </p>
+        <p>
+        </p>
+        <p>
+          <small>I am not paid to shill this.</small>
+        </p>
       </div>
     </div>
   </div>

src/csui/src/components/GhettoContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="context-container" @mouseleave="hideContextMenu()">
     <GhettoContextMenuItem
-      class="activator uw-clickable"
+      class="activator"
       :css="{
         'expand-left': alignment === 'left',
         'expand-right': alignment === 'right',
@@ -13,7 +13,7 @@
     </GhettoContextMenuItem>
     <div
       v-if="contextMenuVisible"
-      class="context-menu uw-clickable"
+      class="context-menu"
       :class="{
         'menu-left': alignment === 'left',
         'menu-right': alignment === 'right'

src/csui/src/components/GhettoContextMenuOption.vue

@@ -1,12 +1,7 @@
 <template>
 <div>
   <GhettoContextMenuItem>
-    <template v-if="label">
+    {{label}} {{shortcut ? `(${shortcut})` : ''}}
-      {{label}} {{shortcut ? `(${shortcut})` : ''}}
-    </template>
-    <template v-else>
-      <slot></slot>
-    </template>
   </GhettoContextMenuItem>
   </div>
 </template>

src/csui/src/utils/UIProbeMixin.js

@@ -14,29 +14,7 @@ export default {
           }, this.origin);
         });
   },
-  data() {
-    return {
-      playerDimensions: undefined,
-      triggerZoneStyles: {
-        height: '50dvh',
-        width: '50dvw',
-        transform: 'translateX(-50%)'
-      },
-    }
-  },
   methods: {
-    playerDimensionsUpdate(dimensions) {
-      if (dimensions?.width !== this.playerDimensions?.width || dimensions?.height !== this.playerDimensions?.height) {
-        this.playerDimensions = dimensions;
-
-        this.triggerZoneStyles = {
-          height: `${this.playerDimensions.height * 0.5}px`,
-          width: `${this.playerDimensions.width * 0.5}px`,
-          transform: `translate(${(this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetX)}%, ${this.settings.active.ui.inPlayer.triggerZoneDimensions.offsetY}%)`,
-        };
-      }
-    },
-
     /**
      * Handles 'uwui-probe' events. It checks whether there's a clickable element under
      * cursor, and sends a reply to the content scripts that indicates whether pointer-events
@@ -48,6 +26,16 @@ export default {
       }
       this.lastProbeTs = eventData.ts;
 
+      // show ultrawidify trigger zone and set it to vanish after 250ms
+      // but don't show the trigger zone behind an active popup
+      if (! this.uwWindowVisible) {
+        this.uwTriggerZoneVisible = true;
+        clearTimeout(this.uwTriggerZoneTimeout);
+        this.uwTriggerZoneTimeout = setTimeout(
+          () => this.uwTriggerZoneVisible = false,
+          250
+        );
+      }
 
       /* we check if our mouse is hovering over an element.
        *
@@ -59,36 +47,16 @@ export default {
        * our top-level element.
        */
       let isClickable = false;
-      let isOverTriggerZone = false;
+      let element = document.elementFromPoint(eventData.coords.x, eventData.coords.y);
-      const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y);
 
-      for (const element of elements) {
+      while (element) {
-        if (element.classList?.contains('uw-clickable')) {
+        if (element?.classList.contains('uw-clickable')) {
+          // we could set 'pointerEvents' here and now & simply use return, but that
+          // might cause us a problem if we ever try to add more shit to this function
           isClickable = true;
+          break;
         }
-        if (element.classList?.contains('uw-ui-trigger')) {
+        element = element.parentElement;
-          isOverTriggerZone = true;
-        }
-      }
-
-      this.triggerZoneActive = isOverTriggerZone;
-
-      // show ultrawidify trigger zone and set it to vanish after 250ms
-      // but don't show the trigger zone behind an active popup
-      if (
-        eventData.canShowUI
-        && (this.settings.active.ui.inPlayer.activation !== 'player' || isOverTriggerZone)
-      ) {
-        if (! this.uwWindowVisible) {
-          this.uwTriggerZoneVisible = true;
-          clearTimeout(this.uwTriggerZoneTimeout);
-          this.uwTriggerZoneTimeout = setTimeout(
-            () => this.uwTriggerZoneVisible = false,
-            250
-          );
-        }
-      } else {
-        this.uwTriggerZoneVisible = false;
       }
 
       window.parent.postMessage(

src/ext/conf/ExtConfPatches.ts

@@ -159,7 +159,7 @@ const ExtensionConfPatch = [
       userOptions.sites['@empty'].defaultType = 'modified';
     }
   }, {
-    forVersion: '6.0.2-0',
+    forVersion: '6.0.1-7',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       // remove custom CSS, as it is no longer needed
       for (const site in userOptions.sites) {
@@ -168,18 +168,9 @@ const ExtensionConfPatch = [
       }
       userOptions.ui = {
         inPlayer: {
-          enabled: true, // enable by default on new installs
+          enabled: false, // keep disabled for existing users
-          minEnabledWidth: 0.75,
-          activation: 'player',
-          triggerZoneDimensions: {
-            width: 0.5,
-            height: 0.5,
-            offsetX: -50,
-            offsetY: 0,
-          }
         }
-      },
+      }
-      userOptions.newFeatureTracker['uw6.ui-popup'] = {show: 10};
     }
   }
 ];

src/ext/conf/ExtensionConf.ts

@@ -160,14 +160,6 @@ const ExtensionConf: SettingsInterface = {
   ui: {
     inPlayer: {
       enabled: true, // enable by default on new installs
-      minEnabledWidth: 0.75,
-      activation: 'player',
-      triggerZoneDimensions: {
-        width: 0.5,
-        height: 0.5,
-        offsetX: -50,
-        offsetY: 0
-      }
     }
   },
 
@@ -1423,9 +1415,6 @@ const ExtensionConf: SettingsInterface = {
     }
   },
   whatsNewChecked: true,
-  newFeatureTracker: {
-    'uw6.ui-popup': {show: 10}
-  },
   // -----------------------------------------
   //       ::: SITE CONFIGURATION :::
   // -----------------------------------------

src/ext/lib/aard/Aard.ts

@@ -262,7 +262,13 @@ export class Aard {
     this.settings = videoData.settings;
     this.eventBus = videoData.eventBus;
 
+    this.testResults = initAardTestResults(this.settings.active.arDetect)
+
     this.initEventBus();
+
+    // this.sampleCols = [];
+    // this.blackLevel = this.settings.active.arDetect.blackbar.blackLevel;
+
     this.arid = (Math.random()*100).toFixed();
 
     // we can tick manually, for debugging
@@ -313,9 +319,6 @@ export class Aard {
       this.videoData.resizer.lastAr = {type: AspectRatioType.AutomaticUpdate, ratio: this.defaultAr};
     }
 
-    // do full reset of test samples
-    this.testResults = initAardTestResults(this.settings.active.arDetect);
-
     if (this.animationFrame) {
       window.cancelAnimationFrame(this.animationFrame);
     }
@@ -634,6 +637,9 @@ export class Aard {
       return;
     }
 
+    const cornerViolations = [0,0,0,0];
+    let subpixelViolation = false;
+
     let edgePosition = this.settings.active.arDetect.sampling.edgePosition;
     const segmentPixels = width * edgePosition;
     const edgeSegmentSize = segmentPixels * 4;
@@ -649,12 +655,14 @@ export class Aard {
 
       let i = rowStart;
       while (i < firstSegment) {
+        subpixelViolation = false;
+
         if (
           imageData[i] > this.testResults.blackThreshold
           || imageData[i + 1] > this.testResults.blackThreshold
           || imageData[i + 2] > this.testResults.blackThreshold
         ) {
-          this.testResults.guardLine.cornerPixelsViolated[Corner.TopLeft]++;
+          cornerViolations[Corner.TopLeft]++;
         }
         i += 4;
       }
@@ -664,10 +672,6 @@ export class Aard {
           || imageData[i + 1] > this.testResults.blackThreshold
           || imageData[i + 2] > this.testResults.blackThreshold
         ) {
-          // DONT FORGET TO INVALIDATE GUARDL LINE
-          this.testResults.guardLine.top = -1;
-          this.testResults.guardLine.bottom = -1;
-          this.testResults.guardLine.invalidated = true;
           return;
         };
         i += 4;
@@ -678,7 +682,7 @@ export class Aard {
           || imageData[i + 1] > this.testResults.blackThreshold
           || imageData[i + 2] > this.testResults.blackThreshold
         ) {
-          this.testResults.guardLine.cornerPixelsViolated[Corner.TopRight]++;
+          cornerViolations[Corner.TopRight]++;
         }
         i += 4; // skip over alpha channel
       }
@@ -700,7 +704,7 @@ export class Aard {
           || imageData[i + 1] > this.testResults.blackThreshold
           || imageData[i + 2] > this.testResults.blackThreshold
         ) {
-          this.testResults.guardLine.cornerPixelsViolated[Corner.BottomLeft]++;
+          cornerViolations[Corner.BottomLeft]++;
         }
         i += 4; // skip over alpha channel
       }
@@ -713,10 +717,6 @@ export class Aard {
           || imageData[i + 1] > this.testResults.blackThreshold
           || imageData[i + 2] > this.testResults.blackThreshold
         ) {
-          // DONT FORGET TO INVALIDATE GUARDL LINE
-          this.testResults.guardLine.top = -1;
-          this.testResults.guardLine.bottom = -1;
-          this.testResults.guardLine.invalidated = true;
           return;
         };
         i += 4;
@@ -730,7 +730,7 @@ export class Aard {
           || imageData[i + 1] > this.testResults.blackThreshold
           || imageData[i + 2] > this.testResults.blackThreshold
         ) {
-          this.testResults.guardLine.cornerPixelsViolated[Corner.BottomRight]++;
+          cornerViolations[Corner.BottomRight]++;
         }
         i += 4; // skip over alpha channel
       }
@@ -738,23 +738,21 @@ export class Aard {
 
     const maxViolations = segmentPixels * 0.20; // TODO: move the 0.2 threshold into settings
 
-    console.log('Corner violations counts — segment px & max violations,', segmentPixels, maxViolations )
-
     // we won't do a loop for this few elements
     // corners with stuff in them will also be skipped in image test
-    this.testResults.guardLine.cornerViolated[0] = this.testResults.guardLine.cornerPixelsViolated[0] > maxViolations;
+    this.testResults.guardLine.cornerViolations[0] = cornerViolations[0] > maxViolations;
-    this.testResults.guardLine.cornerViolated[1] = this.testResults.guardLine.cornerPixelsViolated[1] > maxViolations;
+    this.testResults.guardLine.cornerViolations[1] = cornerViolations[1] > maxViolations;
-    this.testResults.guardLine.cornerViolated[2] = this.testResults.guardLine.cornerPixelsViolated[2] > maxViolations;
+    this.testResults.guardLine.cornerViolations[2] = cornerViolations[2] > maxViolations;
-    this.testResults.guardLine.cornerViolated[3] = this.testResults.guardLine.cornerPixelsViolated[3] > maxViolations;
+    this.testResults.guardLine.cornerViolations[3] = cornerViolations[3] > maxViolations;
 
     const maxInvalidCorners = 1; // TODO: move this into settings — by default, we allow one corner to extend past the
                                  // guard line in order to prevent watermarks/logos from preventing cropping the video
 
     // this works because +true converts to 1 and +false converts to 0
-    const dirtyCount = +this.testResults.guardLine.cornerViolated[0]
+    const dirtyCount = +this.testResults.guardLine.cornerViolations[0]
-      + +this.testResults.guardLine.cornerViolated[1]
+      + +this.testResults.guardLine.cornerViolations[1]
-      + +this.testResults.guardLine.cornerViolated[2]
+      + +this.testResults.guardLine.cornerViolations[2]
-      + +this.testResults.guardLine.cornerViolated[3];
+      + +this.testResults.guardLine.cornerViolations[3];
 
     if (dirtyCount > maxInvalidCorners) {
       this.testResults.guardLine.invalidated = true;
@@ -804,7 +802,7 @@ export class Aard {
 
       // we don't run image detection in corners that may contain logos, as such corners
       // may not be representative
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
         while (i < firstSegment) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -828,7 +826,7 @@ export class Aard {
         };
         i++; // skip over alpha channel
       }
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
         while (i < rowEnd) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -844,7 +842,7 @@ export class Aard {
 
       // we don't run image detection in corners that may contain logos, as such corners
       // may not be representative
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
         while (i < firstSegment) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -868,7 +866,7 @@ export class Aard {
         };
         i++; // skip over alpha channel
       }
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
         while (i < rowEnd) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -894,7 +892,7 @@ export class Aard {
 
       // we don't run image detection in corners that may contain logos, as such corners
       // may not be representative
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
         while (i < firstSegment) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -918,7 +916,7 @@ export class Aard {
         };
         i++; // skip over alpha channel
       }
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
         while (i < rowEnd) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -934,7 +932,7 @@ export class Aard {
 
       // we don't run image detection in corners that may contain logos, as such corners
       // may not be representative
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopLeft]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopLeft]) {
         while (i < firstSegment) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -958,7 +956,7 @@ export class Aard {
         };
         i++; // skip over alpha channel
       }
-      if (! this.testResults.guardLine.cornerViolated[Corner.TopRight]) {
+      if (! this.testResults.guardLine.cornerViolations[Corner.TopRight]) {
         while (i < rowEnd) {
           imagePixel = false;
           imagePixel ||= imageData[i++] > this.testResults.blackThreshold;
@@ -1540,9 +1538,7 @@ export class Aard {
       }
     }
 
-    // BOTTOM
+    // BOTTOM:
-    // Note that bottomRows candidates are measured from the top
-    // Well have to invert our candidate after we're done
     if (
       this.testResults.aspectRatioCheck.bottomRows[0] === this.testResults.aspectRatioCheck.bottomRows[1]
       && this.testResults.aspectRatioCheck.bottomRows[0] === this.testResults.aspectRatioCheck.bottomRows[2]
@@ -1590,9 +1586,6 @@ export class Aard {
       }
     }
 
-    // Convert bottom candidate to letterbox width
-    this.testResults.aspectRatioCheck.bottomCandidateDistance = this.testResults.aspectRatioCheck.bottomCandidate === Infinity ? -1 : height - this.testResults.aspectRatioCheck.bottomCandidate;
-
     /**
      * Get final results.
      * Let candidateA hold better-quality candidate, and let the candidateB hold the lower-quality candidate.
@@ -1616,8 +1609,8 @@ export class Aard {
     }
 
     const maxOffset = ~~(height * this.settings.active.arDetect.edgeDetection.maxLetterboxOffset)
-    const diff = this.testResults.aspectRatioCheck.topCandidate - this.testResults.aspectRatioCheck.bottomCandidateDistance;
+    const diff = this.testResults.aspectRatioCheck.topCandidate - this.testResults.aspectRatioCheck.bottomCandidate;
-    const candidateAvg = ~~((this.testResults.aspectRatioCheck.topCandidate + this.testResults.aspectRatioCheck.bottomCandidateDistance) / 2);
+    const candidateAvg = ~~((this.testResults.aspectRatioCheck.topCandidate + this.testResults.aspectRatioCheck.bottomCandidate) / 2);
 
     if (diff > maxOffset) {
       this.testResults.aspectRatioUncertain = true;
@@ -1627,7 +1620,7 @@ export class Aard {
       this.testResults.imageLine.top = this.testResults.aspectRatioCheck.topCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.topCandidate;
       this.testResults.imageLine.bottom = this.testResults.aspectRatioCheck.bottomCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.bottomCandidate;
       this.testResults.guardLine.top = Math.max(this.testResults.imageLine.top - 2, 0);
-      this.testResults.guardLine.bottom = Math.min(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
+      this.testResults.guardLine.bottom = Math.max(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
     }
     this.testResults.aspectRatioUncertain = false;
     this.testResults.letterboxWidth = candidateAvg;

src/ext/lib/aard/interfaces/aard-test-results.interface.ts

@@ -10,8 +10,7 @@ export interface AardTestResults {
     top: number,            // is cumulative
     bottom: number,         // is cumulative
     invalidated: boolean,
-    cornerViolated: [boolean, boolean, boolean, boolean],
+    cornerViolations: [boolean, boolean, boolean, boolean],
-    cornerPixelsViolated: [0,0,0,0]
   },
   imageLine: {
     top: number,            // is cumulative
@@ -26,7 +25,6 @@ export interface AardTestResults {
     topCandidate: number,
     topCandidateQuality: number,
     bottomCandidate: number,
-    bottomCandidateDistance: number,
     bottomCandidateQuality: number,
   },
   aspectRatioUncertain: boolean,
@@ -47,8 +45,7 @@ export function initAardTestResults(settings: AardSettings): AardTestResults {
       top: -1,
       bottom: -1,
       invalidated: false,
-      cornerViolated: [false, false, false, false],
+      cornerViolations: [false, false, false, false],
-      cornerPixelsViolated: [0,0,0,0]
     },
     imageLine: {
       top: -1,
@@ -63,7 +60,6 @@ export function initAardTestResults(settings: AardSettings): AardTestResults {
       topCandidate: 0,
       topCandidateQuality: 0,
       bottomCandidate: 0,
-      bottomCandidateDistance: 0,
       bottomCandidateQuality: 0,
     },
     aspectRatioUncertain: false,
@@ -80,14 +76,10 @@ export function resetAardTestResults(results: AardTestResults): void {
   results.notLetterbox = false;
   results.imageLine.invalidated = false;
   results.guardLine.invalidated = false;
-  results.guardLine.cornerViolated[0] = false;
+  results.guardLine.cornerViolations[0] = false;
-  results.guardLine.cornerViolated[1] = false;
+  results.guardLine.cornerViolations[1] = false;
-  results.guardLine.cornerViolated[2] = false;
+  results.guardLine.cornerViolations[2] = false;
-  results.guardLine.cornerViolated[3] = false;
+  results.guardLine.cornerViolations[3] = false;
-  results.guardLine.cornerPixelsViolated[0] = 0;
-  results.guardLine.cornerPixelsViolated[1] = 0;
-  results.guardLine.cornerPixelsViolated[2] = 0;
-  results.guardLine.cornerPixelsViolated[3] = 0;
   results.letterboxWidth = 0;
   results.letterboxOffset = 0;
   results.aspectRatioUpdated = false;

src/ext/lib/uwui/UI.js

@@ -13,7 +13,7 @@ const csuiVersions = {
 class UI {
   constructor(
     interfaceId,
-    uiConfig, // {parentElement?, eventBus?, isGlobal?, playerData}
+    uiConfig, // {parentElement?, eventBus?}
   ) {
     this.interfaceId = interfaceId;
     this.uiConfig = uiConfig;
@@ -31,9 +31,6 @@ class UI {
     this.disablePointerEvents = false;
 
     this.saveState = undefined;
-    this.playerData = uiConfig.playerData;
-    this.uiSettings = uiConfig.uiSettings;
-
   }
 
   async init() {
@@ -111,16 +108,12 @@ class UI {
         y: event.pageY - this.uiIframe.offsetTop
       };
 
-      const playerData = this.canShowUI(coords);
-
       // ask the iframe to check whether there's a clickable element
       this.uiIframe.contentWindow.postMessage(
         {
           action: 'uwui-probe',
           coords,
-          playerDimensions: playerData.playerDimensions,
+          ts: +new Date()   // this should be accurate enough for our purposes
-          canShowUI: playerData.canShowUI,
-          ts: +new Date()   // this should be accurate enough for our purposes,
         },
         uiURI
       );
@@ -137,7 +130,6 @@ class UI {
 
     rootDiv.appendChild(iframe);
   }
-
   initMessaging() {
     // subscribe to events coming back to us. Unsubscribe if iframe vanishes.
     const messageHandlerFn = (message) => {
@@ -217,51 +209,6 @@ class UI {
     }
   }
 
-  /**
-   * Checks whether mouse is moving over either:
-   *   * <video> element
-   *   * player element ()
-   *   * uwui-clickable element
-   */
-  canShowUI(coords) {
-    const playerCssClass = 'uw-ultrawidify-player-css';
-
-    const result = {
-      playerDimensions: undefined,
-      canShowUI: false
-    }
-
-    if (this.playerData?.dimensions) {
-      result.playerDimensions = this.playerData.dimensions;
-    }
-
-    // if player is not wide enough, we do nothing
-    if (
-      !this.isGlobal &&                 // this.isGlobal is basically 'yes, do as I say'
-      !document.fullscreenElement &&    // if we are in full screen, we allow it in every case as player detection is not 100% reliable,
-      result.playerDimensions?.width && // which makes playerDimensions.width unreliable as well (we assume nobody uses browser in
-                                        // fullscreen mode unless watching videos)
-      result.playerDimensions.width < window.screen.width * (this.uiSettings.inPlayer.minEnabledWidth ?? 0)
-    ) {
-      result.canShowUI = false;
-      return result;
-    }
-
-    const elements = document.elementsFromPoint(coords.x, coords.y);
-
-    for (const element of elements) {
-      if (
-        element instanceof HTMLVideoElement
-        || element.classList.contains(playerCssClass)
-      ) {
-        result.canShowUI = true;
-        return result;
-      }
-    }
-
-    return result;
-  }
-
   /**
    * Handles events received from the iframe.
    * @param {*} event

src/ext/lib/video-data/PlayerData.ts

@@ -157,9 +157,7 @@ class PlayerData {
           'ultrawidifyUi',
           {
             parentElement: this.element,
-            eventBus: this.eventBus,
+            eventBus: this.eventBus
-            playerData: this,
-            uiSettings: this.videoData.settings.active.ui
           }
         );
       }

src/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "6.0.2",
+  "version": "6.0.1",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"