Merge branch '4.2.4' into stable

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.

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": {

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

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: '',

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);
   }
 

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,17 +275,10 @@ 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){    
       // odstranimo čudne elemente, ti bi pokvarili zadeve
       // remove weird elements, those would break our stuff
@@ -293,40 +287,47 @@ class PlayerData {
         continue;
       }
   
-      if ( element.offsetHeight <= candidate_height &&
+      // element je player, če je ena stranica enako velika kot video, druga pa večja ali enaka. 
-           element.offsetWidth  <= candidate_width  ){
+      // 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.
+        // todo — in case the match is only equalish and not exact, take difference into account when 
-        if( ! isFullScreen || 
+        // calculating score
-            (element.offsetWidth == window.innerWidth && element.offsetHeight == window.innerHeight) ){
         
-          playerCandidateNode = element;
+        score = 100;
-          candidate_width = element.offsetWidth;
-          candidate_height = element.offsetHeight;
 
-          grows = trustCandidateAfterGrows;
+        if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
-        
+          score += 75;
-          if(Debug.debug){
-            console.log("Found new candidate for player. Dimensions: w:", candidate_width, "h:",candidate_height, "node:", playerCandidateNode);
         }
+        if (element.classList.toString().indexOf('player') !== -1) {  // prefer elements with 'player' in classlist, but a bit less than id
+          score += 50;
         }
-      }
+        score -= scorePenalty++; // prefer elements closer to <video>
-      else if(grows --<= 0){
         
-        if(Debug.debug && Debug.playerDetect){
+        elementQ.push({
-          console.log("Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
+          element: element,
-        }
+          score: score,
-        break;
+        });
       }
       
       element = element.parentNode;
     }
 
-
+    if (elementQ.length) {
-
+      // return element with biggest score
-    return playerCandidateNode;
+      return elementQ.sort( (a,b) => b.score - a.score)[0].element;
     }
 
+    // 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();
@@ -366,6 +367,10 @@ class PlayerData {
     }
   }
 
+  forceRefreshPlayerElement() {
+    this.getPlayerDimensions();
+  }
+
   checkPlayerSizeChange(){
     if(Debug.debug){
       if(this.element == undefined){
@@ -394,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;
     }
 

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) {
@@ -74,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);
@@ -144,6 +147,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){

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}"

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>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>
-      <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>
     </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>