Merge branch '4.2.4'

CHANGELOG.md

@@ -7,6 +7,10 @@
 * Settings page looks ugly af right now. Maybe fix it some time later
 
 ### v4.3.0 (future release)
+### 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>
+
 
 * Added user-friendly way to export/import settings
 * Reworked logging

src/ext/conf/Debug.js

@@ -14,10 +14,9 @@ var Debug = {
   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

@@ -168,6 +168,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 ){
       this.logger.log('info', 'debug', "[PlayerDetect::_pd_getPlayer] element is not valid, doing nothing.", element)
@@ -204,18 +205,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
+    while (element != undefined){    
-                                      // 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
       if ( element.offsetWidth == 0 || element.offsetHeight == 0){
@@ -223,37 +217,49 @@ 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;
+        if (element.id.indexOf('player') !== -1) { // prefer elements with 'player' in id
-        
+          score += 75;
-          grows = trustCandidateAfterGrows;
-        
-          this.logger.log('info', 'debug', "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
-      else if(grows --<= 0){
+          score += 50;
-        this.logger.log('info', 'playerDetect', "Current element grew in comparrison to the child. We probably found the player. breaking loop, returning current result");
+        }
-        break;
+        score -= scorePenalty++; // prefer elements closer to <video>
+        
+        elementQ.push({
+          element: element,
+          score: score,
+        });
       }
       
       element = element.parentNode;
     }
 
+    if (elementQ.length) {
+      // return element with biggest score
+      return elementQ.sort( (a,b) => b.score - a.score)[0].element;
+    }
 
-
+    // if no candidates were found, return parent node
-    return playerCandidateNode;
+    return this.video.parentNode;
   }
 
+  equalish(a,b, tolerance) {
+    return a > b - tolerance && a < b + tolerance;
+  }
 
-  getPlayerDimensions() {
+  getPlayerDimensions(){
     const isFullScreen = PlayerData.isFullScreen();
 
     const element = this.getPlayer(isFullScreen);
@@ -289,6 +295,10 @@ class PlayerData {
     }
   }
 
+  forceRefreshPlayerElement() {
+    this.getPlayerDimensions();
+  }
+
   checkPlayerSizeChange(){
     // this 'if' is just here for debugging — real code starts later. It's safe to collapse and
     // ignore the contents of this if (unless we need to change how logging works)
@@ -310,9 +320,11 @@ class PlayerData {
       }
     }
     
-    if (this.element == undefined){
+    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

@@ -48,6 +48,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) {
@@ -72,10 +73,12 @@ class VideoData {
         } else if (mutation.attributeName === 'style' && mutation.attributeOldValue !== this.video.getAttribute('style')) {
           // 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);
@@ -138,6 +141,8 @@ class VideoData {
   destroy() {
     this.logger.log('info', ['debug', 'init'], `[VideoData::destroy] <vdid:${this.vdid}> received destroy command`);
 
+    this.video.classList.remove(this.userCssClassName);
+
     this.pause();
     this.destroyed = true;
     if (this.arDetector){