Fix stretch mode while not cropped

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "6.2.0",
+  "version": "6.2.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/csui/PlayerOverlay.vue

@@ -24,7 +24,7 @@
       @mouseleave="allowContextMenuHide()"
     >
       <template v-slot:activator>
-        <div class="context-item uw-clickable">
+        <div class="context-item uw-clickable uw-menu-trigger">
           Ultrawidify
         </div>
         </template>
@@ -300,7 +300,6 @@ export default {
       this.debugDataPrettified = JSON.stringify(this.debugData, null, 2);
     }
   },
-
   async created() {
     this.logger = new Logger();
 

src/csui/src/components/SupportLevelIndicator.vue

@@ -8,7 +8,7 @@
     </div>
   </div>
   <div v-if="siteSupportLevel === 'community'" class="site-support community">
-    <mdicon name="handshake" />
+    <mdicon name="account-group" />
     <div v-if="!small">Community</div>
     <div class="tooltip">
       <template v-if="small">Community&nbsp;—&nbsp;</template>
@@ -35,7 +35,7 @@
       You have manually changed settings for this site. The extension is doing what you told it to do.
     </div>
   </div>
-  <div v-if="siteSupportLevel === 'community'">
+  <div v-if="siteSupportLevel === 'officially-disabled'" class="site-support officially-disabled">
     <mdicon  class="site-support no-support" name="checkbox-marked-circle" />
     <div v-if="!small">Not supported</div>
     <div class="tooltip">
@@ -113,7 +113,7 @@ export default {
       }
     }
 
-    &.no-support {
+    &.officially-disabled {
       background-color: rgb(132, 24, 40);
       color: #eee;
 
@@ -122,6 +122,15 @@ export default {
       }
     }
 
+    &.no-support {
+      background-color: rgb(83, 76, 77);
+      color: #eee;
+
+      .mdi {
+        fill: #eee !important;
+      }
+    }
+
     &.user-added {
       border: 1px solid #ff0;
 

src/csui/src/utils/UIProbeMixin.js

@@ -72,6 +72,7 @@ export default {
       let isClickable = false;
       let isOverTriggerZone = false;
       let isOverUIArea = false;
+      let isOverMenuTrigger = false;
       const elements = document.elementsFromPoint(eventData.coords.x, eventData.coords.y);
 
       for (const element of elements) {
@@ -84,6 +85,9 @@ export default {
         if (element.classList?.contains('uw-ui-area')) {
           isOverUIArea = true;
         }
+        if (element.classList?.contains('uw-menu-trigger')) {
+          isOverMenuTrigger = true;
+        }
       }
 
       this.triggerZoneActive = isOverTriggerZone;
@@ -112,6 +116,12 @@ export default {
         {
           action: 'uwui-clickable',
           clickable: isClickable,
+          hoverStats: {
+            isOverTriggerZone,
+            isOverMenuTrigger,
+            isOverUIArea,
+            hasMouse: !!document.querySelector(':hover'),
+          },
           ts: +new Date()
         },
         origin

src/ext/conf/ExtConfPatches.ts

@@ -187,7 +187,7 @@ const ExtensionConfPatch = [
       userOptions.newFeatureTracker['uw6.ui-popup'] = {show: 10};
     }
   }, {
-    forVersion: '6.1.9',
+    forVersion: '6.2.1',
     updateFn: (userOptions: SettingsInterface, defaultOptions) => {
       userOptions.ui = defaultOptions.ui;
       userOptions.arDetect = defaultOptions.arDetect;

src/ext/lib/uwui/UI.js

@@ -19,6 +19,8 @@ const csuiVersions = {
   // 'dark': 'csui-dark'       // csui-overlay-dark.html,   maps to csui-dark.html
 };
 
+const MAX_IFRAME_ERROR_COUNT = 5;
+
 class UI {
   constructor(
     interfaceId,
@@ -43,6 +45,8 @@ class UI {
     this.playerData = uiConfig.playerData;
     this.uiSettings = uiConfig.uiSettings;
 
+    this.iframeErrorCount = 0;
+    this.iframeConfirmed = false;
   }
 
   async init() {
@@ -280,7 +284,43 @@ class UI {
             return;
           }
           this.lastProbeResponseTs = event.data.ts;
+
+          // If iframe returns 'yes, we are clickable' and iframe is currently set to pointerEvents=auto,
+          // but hasMouse is false, then UI is attached to the wrong element. This probably means our
+          // detected player element is wrong. We need to perform this check if we aren't in global UI
+          /**
+           * action: 'uwui-clickable',
+           * clickable: isClickable,
+           * hoverStats: {
+           *   isOverTriggerZone,
+           *   isOverMenuTrigger,
+           *   isOverUIArea,
+           *   hasMouse: !!document.querySelector(':hover'),
+           * },
+           * ts: +new Date()
+           */
+
+          if (!this.global) {
+            if (
+              this.uiIframe.style.pointerEvents === 'auto'
+            ) {
+              if (
+                event.data.hoverStats.isOverTriggerZone
+                && !event.data.hoverStats.hasMouse
+              ) {
+                if (!this.iframeConfirmed) {
+                  if (this.iframeErrorCount++ > MAX_IFRAME_ERROR_COUNT) {
+                    // this.
+                  }
+                }
+              } else {
+                this.iframeConfirmed = true;
+              }
+            }
+          }
+
           this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
+          this.uiIframe.style.display = event.data.opacity ? '100' : '0';
           break;
         case 'uw-bus-tunnel':
           const busCommand = event.data.payload;

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

@@ -280,8 +280,13 @@ class Resizer {
       return;
     }
 
-    if ([AspectRatioType.Reset, AspectRatioType.Initial].includes(ar.type)) {
-      // console.log('run level is UI only because aspect ratio type is', ar.type)
+    // If no aspect ratio is applied AND if no stretch mode is active,
+    // we disable our CSS in order to prevent breaking websites by default,
+    // without any human interaction
+    if (
+      [AspectRatioType.Reset, AspectRatioType.Initial].includes(ar.type) &&
+      [StretchType.NoStretch, StretchType.Default].includes(this.stretcher.mode)
+    ) {
       this.eventBus.send('set-run-level', RunLevel.UIOnly);
     } else {
       this.eventBus.send('set-run-level', RunLevel.CustomCSSActive);

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.2.0",
+  "version": "6.2.1",
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"