From 7c1d3e52e55d0f2f815dbc7570d74e87fb083b80 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 31 Mar 2025 23:26:03 +0200
Subject: [PATCH] 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.
---
 src/ext/lib/video-data/PlayerData.ts | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts
index 14e9902..2d4e1b3 100644
--- a/src/ext/lib/video-data/PlayerData.ts
+++ b/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;
   }