From c1012c59a60e9840e5cf72ee97cf5fb0216363ce Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 31 Aug 2019 18:21:49 +0200
Subject: [PATCH 1/5] Fix player detection

---
 src/ext/lib/video-data/PlayerData.js | 67 ++++++++++++++--------------
 src/ext/lib/video-data/VideoData.js  |  3 ++
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index 1b654bf..a3633f4 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -236,6 +236,7 @@ class PlayerData {
   getPlayer(isFullScreen) {
     const host = window.location.host;
     let element = this.video.parentNode;
+    const videoWidth = this.video.offsetWidth, videoHeight = this.video.offsetHeight;
 
     if(! element ){
       if(Debug.debug) {
@@ -274,18 +275,11 @@ class PlayerData {
       }
     }
 
+    const elementQ = [];
+    let scorePenalty = 0;
+    let score;
 
-    var trustCandidateAfterGrows = 2; // if candidate_width or candidate_height increases in either dimensions this many
-                                      // times, we say we found our player. (This number ignores weird elements)
-    // in case our <video> is bigger than player in one dimension but smaller in the other
-    // if site is coded properly, player can't be wider than that
-    var candidate_width = Math.max(element.offsetWidth, window.innerWidth);
-    var candidate_height = Math.max(element.offsetHeight, window.innerHeight);
-    var playerCandidateNode = element;
-
-    // if we haven't found element using fancy methods, we resort to the good old fashioned way
-    var grows = trustCandidateAfterGrows;
-    while(element != undefined){    
+    while (element != undefined){    
       // odstranimo čudne elemente, ti bi pokvarili zadeve
       // remove weird elements, those would break our stuff
       if ( element.offsetWidth == 0 || element.offsetHeight == 0){
@@ -293,40 +287,47 @@ class PlayerData {
         continue;
       }
   
-      if ( element.offsetHeight <= candidate_height &&
-           element.offsetWidth  <= candidate_width  ){
+      // element je player, če je ena stranica enako velika kot video, druga pa večja ali enaka. 
+      // za enakost dovolimo mala odstopanja
+      // element is player, if one of the sides is as long as the video and the other bigger (or same)
+      // we allow for tiny variations when checking for equality
+      if ( (element.offsetWidth >= videoWidth && this.equalish(element.offsetHeight, videoHeight, 2))
+           || (element.offsetHeight >= videoHeight && this.equalish(element.offsetWidth, videoHeight, 2))) {
         
-        // if we're in fullscreen, we only consider elements that are exactly as big as the monitor.
-        if( ! isFullScreen || 
-            (element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
+        // todo — in case the match is only equalish and not exact, take difference into account when 
+        // calculating score
         
-          playerCandidateNode = element;
-          candidate_width = element.offsetWidth;
-          candidate_height = element.offsetHeight;
-        
-          grows = trustCandidateAfterGrows;
-        
-          if(Debug.debug){
-            console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
-          }
+        score = 100;
+
+        if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
+          score += 75;
         }
-      }
-      else if(grows --<= 0){
-        
-        if(Debug.debug && Debug.playerDetect){
-          console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
+        if (element.classList.toString().indexOf('player') !== -1) {  // prefer elements with 'player' in classlist, but a bit less than id
+          score += 50;
         }
-        break;
+        score -= scorePenalty++; // prefer elements closer to <video>
+        
+        elementQ.push({
+          element: element,
+          score: score,
+        });
       }
       
       element = element.parentNode;
     }
 
+    if (elementQ.length) {
+      // return biggest score
+      return elementQ.sort( (a,b) => b.score - a.score)[0];
+    }
 
-
-    return playerCandidateNode;
+    // if no candidates were found, return parent node
+    return this.video.parentNode;
   }
 
+  equalish(a,b, tolerance) {
+    return a > b - tolerance && a < b + tolerance;
+  }
 
   getPlayerDimensions(){
     const isFullScreen = PlayerData.isFullScreen();
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index a45e240..7f8be7a 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -49,6 +49,7 @@ class VideoData {
     this.pageInfo.initMouseActionHandler(this);
 
     this.video.classList.add(this.userCssClassName); // this also needs to be applied BEFORE we initialize resizer!
+
   }
 
   onVideoDimensionsChanged(mutationList, observer) {
@@ -144,6 +145,8 @@ class VideoData {
       console.log(`[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
     }
 
+    this.video.classList.remove(this.userCssClassName);
+
     this.pause();
     this.destroyed = true;
     if (this.arDetector){

From 1dacc66ead8d0b43e2842e03ea637818d6faaf20 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 31 Aug 2019 18:22:13 +0200
Subject: [PATCH 2/5] Fix "what's new" notification not going away (hopefully)

---
 src/ext/lib/Settings.js | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/ext/lib/Settings.js b/src/ext/lib/Settings.js
index bcca4db..c2190f6 100644
--- a/src/ext/lib/Settings.js
+++ b/src/ext/lib/Settings.js
@@ -78,7 +78,9 @@ class Settings {
     const settings = await this.get();
 
     //                 |—> on first setup, settings is undefined & settings.version is haram
-    const oldVersion = (settings && settings.version) || '0.0.0';
+    //                 |   since new installs ship with updates by default, no patching is
+    //                 |   needed. In this case, we assume we're on the current version
+    const oldVersion = (settings && settings.version) || this.getExtensionVersion();
     const currentVersion = this.getExtensionVersion();
 
     if(Debug.debug) {
@@ -90,43 +92,43 @@ class Settings {
       if (Debug.flushStoredSettings) {
         console.log("%c[Settings::init] Debug.flushStoredSettings is true. Using default settings", "background: #d00; color: #ffd");
         Debug.flushStoredSettings = false; // don't do it again this session
-        this.setDefaultSettings();
         this.active = this.getDefaultSettings();
+        this.active.version = currentVersion;
+        this.set(this.active);
         return this.active;
       }
     }
 
     // if there's no settings saved, return default settings.
     if(! settings || (Object.keys(settings).length === 0 && settings.constructor === Object)) {
-      this.setDefaultSettings();
       this.active = this.getDefaultSettings();
+      this.active.version = currentVersion;
+      this.set(this.active);
       return this.active;
     }
 
     // if last saved settings was for version prior to 4.x, we reset settings to default
     // it's not like people will notice cos that version didn't preserve settings at all
     if (settings.version && !settings.version.startsWith('4')) {
-      this.setDefaultSettings();
       this.active = this.getDefaultSettings();
+      this.active.version = currentVersion;
+      this.set(this.active);
       return this.active;
     }
 
+    // in every case, we'll update the version number:
+    settings.version = currentVersion;
+
     // if there's settings, set saved object as active settings
     this.active = settings;
 
-    // from some point to 4.2.3.1, settings version wasn't saved. Fix that.
-    if (!settings.version) {
-      this.active.version = currentVersion;
-    }
-
     // check if extension has been updated. If not, return settings as they were retreived
     
 
-    if(oldVersion === currentVersion) {
+    if (oldVersion == currentVersion) {
       if(Debug.debug) {
         console.log("[Settings::init] extension was saved with current version of ultrawidify. Returning object as-is.");
       }
-
       return this.active;
     }
 
@@ -223,6 +225,7 @@ class Settings {
   }
 
   setDefaultSettings() {
+    this.default.version = this.getExtensionVersion();
     this.set(this.default);
   }
 

From c275e389a1b938084c37fea9bce4b39a84c45235 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 31 Aug 2019 18:22:57 +0200
Subject: [PATCH 3/5] Updating version numbers & stuff

---
 CHANGELOG.md                       |  5 +++++
 package.json                       |  2 +-
 src/manifest.json                  |  2 +-
 src/popup/panels/WhatsNewPanel.vue | 11 ++---------
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6516863..54bac72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@
 
 * Settings page looks ugly af right now. Maybe fix it some time later
 
+### v4.2.4
+
+* Improvements to player detection. More details in the [blog post](https://stuff.tamius.net/sacred-texts/2019/08/31/ultrawidify-and-the-improper-cropping/).</li>
+
+
 ### v4.2.3 / 4.2.3.1
 
 * Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a [blog post](https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/) that covers the issue in more detail.
diff --git a/package.json b/package.json
index 2725202..784df83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ultravidify",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "Aspect ratio fixer for youtube that works around some people's disability to properly encode 21:9 (and sometimes, 16:9) videos.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {
diff --git a/src/manifest.json b/src/manifest.json
index cbe47f3..0869dd4 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
-  "version": "4.2.3.3",
+  "version": "4.2.4",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
diff --git a/src/popup/panels/WhatsNewPanel.vue b/src/popup/panels/WhatsNewPanel.vue
index 17daf47..fe12d09 100644
--- a/src/popup/panels/WhatsNewPanel.vue
+++ b/src/popup/panels/WhatsNewPanel.vue
@@ -2,17 +2,10 @@
   <div>
     <h2>What's new</h2>
     <p>Full changelog for older versions <a href="https://github.com/xternal7/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
-    <p class="label">4.2.3[.x]</p>
+    <p class="label">4.2.4</p>
     <ul>
-      <li>Fixed twitchy behaviour on Twitch, Facebook and Twatter. Here's a <a href="https://stuff.tamius.net/sacred-texts/2019/08/24/ultrawidify-the-twitchy-twitch-problem/" target="_blank">blog post</a> that covers the issue in more detail.</li>
-      <li>Cropping now uses user styles (as opposed to modifying element's style attribute)</li>
-      <li>Fixed the issue where one-pixel letterbox would result in constant aspect ratio corrections.</li>
-      <li>Started using mutation observers to watch for anything modifying the size of our video.</li>
-      <li><b>[4.2.3.1]</b> fixed some bugs in popup.</li>
-      <li><b>[4.2.3.2]</b> fixed settings initialization for new users.</li>
-      <li><b>[4.2.3.3]</b> fixed autodetection not starting.</li>
+      <li>Improvements to player detection. More details in the <a href="https://stuff.tamius.net/sacred-texts/2019/08/31/ultrawidify-and-the-improper-cropping/" target="_blank">blog post</a>.</li>
     </ul>
-    <p>As you can tell, I don't leave reddit and youtube much. To be fair, the twitching issue was intermittent on twitch.</p>
     <p v-if="BrowserDetect.chrome"><b>Chrome users:</b> as a result of Chrome's shortcomings, there now exists one potential performance issue.
     If you notice any performance issues, please contact me via github, email or reddit (see: 'report a problem' tab
     of this popup).</p>

From 67f031e5490d94d5784f6ed293459619ceeb2ed7 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 31 Aug 2019 22:10:51 +0200
Subject: [PATCH 4/5] Additional fixes for player element discovery. Force
 player element refresh on every video element size change.

---
 src/ext/conf/Debug.js                |  4 +---
 src/ext/lib/video-data/PlayerData.js | 10 ++++++++--
 src/ext/lib/video-data/VideoData.js  |  2 ++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/ext/conf/Debug.js b/src/ext/conf/Debug.js
index 9c3e9bf..d1b8387 100644
--- a/src/ext/conf/Debug.js
+++ b/src/ext/conf/Debug.js
@@ -10,16 +10,14 @@ var Debug = {
   // resizer: true,
   // debugArDetect: true,
   // scaler: true,
-  // debugStorage: false,
   // debugStorage: true,
   // comms: false,
   // comms: true,
   // showArDetectCanvas: true,
   // flushStoredSettings: true,
-  // flushStoredSettings: false,
   // playerDetect: true,
   // periodic: true,
-  // // videoRescan: true,
+  // videoRescan: true,
   // mousemove: true,
   // arDetect: {
     // edgeDetect: true
diff --git a/src/ext/lib/video-data/PlayerData.js b/src/ext/lib/video-data/PlayerData.js
index a3633f4..acbda74 100644
--- a/src/ext/lib/video-data/PlayerData.js
+++ b/src/ext/lib/video-data/PlayerData.js
@@ -317,8 +317,8 @@ class PlayerData {
     }
 
     if (elementQ.length) {
-      // return biggest score
-      return elementQ.sort( (a,b) => b.score - a.score)[0];
+      // return element with biggest score
+      return elementQ.sort( (a,b) => b.score - a.score)[0].element;
     }
 
     // if no candidates were found, return parent node
@@ -367,6 +367,10 @@ class PlayerData {
     }
   }
 
+  forceRefreshPlayerElement() {
+    this.getPlayerDimensions();
+  }
+
   checkPlayerSizeChange(){
     if(Debug.debug){
       if(this.element == undefined){
@@ -395,8 +399,10 @@ class PlayerData {
     }
     
     if(this.element == undefined){
+      this.element = this.getPlayer();
       return true;
     } else if(this.dimensions.width != this.element.offsetWidth || this.dimensions.height != this.element.offsetHeight ){
+      this.element = this.getPlayer();
       return true;
     }
 
diff --git a/src/ext/lib/video-data/VideoData.js b/src/ext/lib/video-data/VideoData.js
index 7f8be7a..8d4b7f6 100644
--- a/src/ext/lib/video-data/VideoData.js
+++ b/src/ext/lib/video-data/VideoData.js
@@ -75,10 +75,12 @@ class VideoData {
           console.log("style changed")
           // if size of the video has changed, this may mean we need to recalculate/reapply
           // last calculated aspect ratio
+          this.player.forceRefreshPlayerElement();
           this.restoreAr();
         } else if (mutation.attribute = 'src' && mutation.attributeOldValue !== this.video.getAttribute('src')) {
           // try fixing alignment issue on video change
           try {
+            this.player.forceRefreshPlayerElement();
             this.restoreAr();
           } catch (e) {
             console.error("[VideoData::onVideoDimensionsChanged] There was an error when handling src change.", e);

From 149b9cb7def00e020405a7a7107ec6234327f10d Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sat, 31 Aug 2019 22:45:56 +0200
Subject: [PATCH 5/5] Reverse query selectors order in extconfpatches for
 reddit

---
 src/ext/conf/ExtConfPatches.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ext/conf/ExtConfPatches.js b/src/ext/conf/ExtConfPatches.js
index 83e36f1..9a1c841 100644
--- a/src/ext/conf/ExtConfPatches.js
+++ b/src/ext/conf/ExtConfPatches.js
@@ -10,7 +10,7 @@ const ExtensionConfPatch = {
           player: {
             manual: true,
             useRelativeAncestor: false,
-            querySelectors: '.media-preview-content, .reddit-video-player-root'
+            querySelectors: '.reddit-video-player-root, .media-preview-content'
           }
         },
         css: '',
@@ -21,7 +21,7 @@ const ExtensionConfPatch = {
           player: {
             manual: true,
             useRelativeAncestor: false,
-            querySelectors: '.media-preview-content, .reddit-video-player-root'
+            querySelectors: '.reddit-video-player-root, .media-preview-content'
           }
         },
         css: '',