Instead of elements closer to the <video> tag, prefer best-matching element closer to page root.

This ensures UI always renders on top of player if enabled.

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## v6.0 (current major)
 
+### v6.2.5
+
+* Popup appearance changed — UI advertisement panel was moved to the popup header
+* Fixed the bug where popup wouldn't be showing the correct settings
+* Fixed the bug where site settings would default to 'disabled', even if Extension default setting was not disabled.
+* Added ability to export and import settings from file (ft. developer mode editor)
+
+
 ### v6.2.4
 * [#264](https://github.com/tamius-han/ultrawidify/issues/264) — fixed issue with white screen that affected some youtube users. Special thanks to [SnowyOwlNugget](https://github.com/SnowyOwlNugget">SnowyOwlNugget), who instead of whining provided the necessary information.
 * Minor updates to the settings

src/csui/Popup.vue

@@ -175,7 +175,7 @@ export default {
     }
   },
   mounted() {
-    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active.whatsNewChecked;
+    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
   },
   async created() {
     this.logger = new Logger();

src/csui/res/css/common.scss

@@ -5,6 +5,10 @@
 
 // @import "form.scss";
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   background-color: $background-primary;
   color: $text-normal;
@@ -19,7 +23,7 @@ body {
 }
 
 .main-window::before {
-  content: ' backdrop-filter machine broke :(     googlo pls fix';
+  content: ' ';
   color: #000;
   position: absolute;
   left: -0.5rem;

src/csui/src/PlayerUIWindow.vue

@@ -206,7 +206,7 @@ export default {
       this.selectedTab = this.defaultTab;
     }
     this.siteSettings = this.settings.getSiteSettings(this.site);
-    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active.whatsNewChecked;
+    this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
 
     this.eventBus.subscribe(
       'uw-show-ui',

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -5,15 +5,12 @@
         <h1>What's new</h1>
         <!-- <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md" target="_blank">is available here</a>.</p> -->
 
-        <h2>6.2.4</h2>
+        <h2>6.2.5</h2>
         <ul>
-          <li>[<a href="https://github.com/tamius-han/ultrawidify/issues/264" target="_blank">#264</a>] Fixed issue with white screen that affected <i>some</i> youtube users.<br/>Special thanks to <a href="https://github.com/SnowyOwlNugget">SnowyOwlNugget</a>, who instead of whining provided the necessary information.</li>
+          <li>'Show UI' button was moved to popup header. Extension popup now defaults to 'crop options' tab</li>
-          <li>Minor updates to the settings</li>
+          <li>Fixed the bug where current extension settings wouldn't be displayed correctly in the popup</li>
-          <li>Switching between full screen, theater, and normal player now correctly enables and disables the extension according to the settings.</li>
+          <li>Fixed the issue where extension options using the "Extension default" mode would always be disabled</li>
-          <li>Does anyone even read these?</li>
+          <li>Added the ability to import and export settings (ft. developer mode editor)</li>
-          <li>By default, extension is now only enabled for sites with 'official' and 'community' support for new installs. Extension will need to be manually enabled for other sites.</li>
-          <li>Gussief1, you owe me 5 bucks. Time to put your money where your mouth is. Paypal is <a href="https://www.paypal.com/paypalme/tamius" target="_blank">here.</a></li>
-          <li>Added background to in-player UI due to chrome bug affecting <code>backdrop-filter</code> inside transparent iframes.</li>
         </ul>
 
         <p>

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -352,12 +352,15 @@ export default {
       return '??';
     }
   },
+  mounted() {
+    this.forceRefreshPage();
+  },
   methods: {
     /**
      * Compiles our extension settings into more user-friendly options
      */
     compileSimpleSettings(component, getFor = 'site') {
-      // console.log('compiling simple settings!', component, getFor, 'site settings?', this.siteSettings);
+
       let settingsData;
       switch (getFor) {
         case 'site':
@@ -517,6 +520,9 @@ export default {
 
       // we also need to force re-compute all watchers, otherwise UI will lag behind
       // actual state of settings until reload
+      this.forceRefreshPage();
+    },
+    forceRefreshPage() {
       this._computedWatchers?.simpleExtensionSettings?.run();
       this._computedWatchers?.simpleDefaultSettings?.run();
       this._computedWatchers?.siteDefaultCrop?.run();
@@ -527,6 +533,7 @@ export default {
 
       this.$nextTick( () => this.$forceUpdate());
     },
+
     setExtensionMode(component, event) {
       const option = event.target.value;
 

src/ext/lib/settings/SiteSettings.ts

@@ -30,7 +30,7 @@ export class SiteSettings {
     this.settings = settings;
     this.raw = settings.active.sites[site];
     this.site = site;
-    this.defaultSettings = settings.default.sites['@global'];
+    this.defaultSettings = settings.active.sites['@global'];
 
     this.compileSettingsObject();
 

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

@@ -699,6 +699,7 @@ class PlayerData {
     let penaltyMultiplier = 1;
     const sizePenaltyMultiplier = 0.1;
     const perLevelScorePenalty = 10;
+    let sameSizeBonus = 0;
 
     for (const [index, element] of elementStack.entries()) {
       element.index = index;
@@ -747,7 +748,13 @@ class PlayerData {
 
         // we prefer elements closer to the video, so the score of each potential
         // candidate gets dinked a bit
-        score -= perLevelScorePenalty * penaltyMultiplier;
+        // score -= perLevelScorePenalty * penaltyMultiplier;
+
+        if (element.width === elementStack[index - 1].width && element.height === elementStack[index - 1].height) {
+          score += ++sameSizeBonus;
+        } else {
+          sameSizeBonus = 0;
+        }
 
         element.autoScore = score;
         element.heuristics['autoScoreDetails'] = {
@@ -762,12 +769,14 @@ class PlayerData {
       }
     }
 
+
     let bestCandidate: any = {autoScore: -99999999, initialValue: true};
     for (const element of elementStack) {
       if (element.autoScore > bestCandidate.autoScore) {
         bestCandidate = element;
       }
     }
+
     if (bestCandidate.initialValue) {
       bestCandidate = null;
     } else {
@@ -777,6 +786,22 @@ class PlayerData {
       }
     }
 
+    // BUT WAIT! THERE'S MORE
+    // Some sites (youtube) can re-parent elements, causing current player element to vanish from DOM
+    if (bestCandidate) {
+      const observer = new MutationObserver( (mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.removedNodes.forEach((node) => {
+            if (node === bestCandidate.element) {
+              observer.disconnect();
+              this.updatePlayer();
+            }
+          })
+        });
+      });
+      observer.observe(bestCandidate.element.parentNode, {childList: true});
+    }
+
     return bestCandidate;
   }