Merge branch 'master' into stable

.vscode/settings.json

@@ -1,30 +1,71 @@
 {
   "cSpell.words": [
+    "PILLARBOX",
+    "PILLARBOXED",
+    "aard",
     "ardetector",
+    "autodetect",
     "autodetection",
+    "beforeunload",
     "blackbar",
+    "blackbars",
     "blackframe",
     "canvas",
+    "com",
     "comms",
+    "csui",
     "decycle",
+    "disneyplus",
     "equalish",
+    "fuckup",
+    "gfycat",
+    "gmail",
+    "guardline",
+    "han",
+    "iframe",
+    "imgur",
     "insta",
+    "letterboxed",
+    "manjaro",
     "minification",
+    "nogrow",
+    "noshrink",
+    "outro",
+    "polyfill",
     "recursing",
     "reddit",
     "rescan",
     "resizer",
+    "scrollbar",
+    "shitiness",
+    "smallcaps",
+    "suboption",
+    "tabitem",
+    "tablist",
+    "tamius",
     "textbox",
+    "ultrawidify",
+    "unmark",
+    "unmarking",
+    "unshift",
+    "uwid",
+    "uwui",
     "videodata",
+    "vids",
+    "vuejs",
     "vuex",
+    "webextension",
+    "webextensions",
     "youtube"
   ],
   "cSpell.ignoreWords": [
+    "abcdefghijklmnopqrstuvwxyz",
     "autoar",
     "cheight",
     "cwidth",
     "fcstart",
     "fctime",
+    "legacycd",
     "ncol",
     "nrow",
     "tickrate",

CHANGELOG.md

@@ -13,7 +13,12 @@ QoL improvements for me:
 
 * logging: allow to enable logging at will and export said logs to a file
 
-### v4.4.7 (Current)
+### v4.4.8 (Current)
+
+* Fixed the bug where on pages with more than one video, the list of available videos in the extension popup wouldn't remove videos that are no longer displayed on site. This resulted in extension listing videos that were no longer on the page. Reboot or navigation would also not clear the list if navigating between various pages on the same host.
+* Fixed the chrome-only bug where on sites with more than one video, the number wouldn't get hidden when the extension popup closed.
+
+### v4.4.7
 
 * Removed unnecessary font files and image files from the package.
 * LoggerUI is now functional.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultravidify",
-  "version": "4.4.7",
+  "version": "4.4.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ultravidify",
+  "name": "ultrawidify",
-  "version": "4.4.7",
+  "version": "4.4.8",
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {

src/ext/conf/BrowserDetect.js

@@ -8,6 +8,7 @@ const BrowserDetect = {
   chrome: process.env.BROWSER === 'chrome',
   edge: process.env.BROWSER === 'edge',
   processEnvBrowser: process.env.BROWSER,
+  processEnvChannel: process.env.CHANNEL,
 } 
 
 if (process.env.CHANNEL !== 'stable') {

src/ext/conf/ExtConfPatches.js

@@ -351,7 +351,7 @@ const ExtensionConfPatch = [
                     '100%'
                   ]
                 }
-                // 'width': true            // this would prevent aard from runing if <video> had a 'width' property in style, regardless of value
+                // 'width': true            // this would prevent aard from running if <video> had a 'width' property in style, regardless of value
                                             // could also be an empty object, in theory.
               }
             }

src/ext/conf/ExtensionConf.js

@@ -50,7 +50,7 @@ var ExtensionConf = {
                                       // component. Average intensity is normalized to where 0 is black and 1 is biggest value for
                                       // that component. If sum of differences between normalized average intensity and normalized
                                       // component varies more than this % between color components, we can afford to use less strict
-                                      // cummulative treshold.
+                                      // cumulative threshold.
       cumulativeThresholdLax: 1600,    
       cumulativeThresholdStrict: 2560,// if we add values of all pixels together and get more than this, the frame is bright enough.
                                  // (note: blackframe is 16x9 px -> 144px total. cumulative threshold can be reached fast)
@@ -64,7 +64,7 @@ var ExtensionConf = {
       threshold: 16,          // if pixel is darker than the sum of black level and this value, we count it as black
                               // on 0-255. Needs to be fairly high (8 might not cut it) due to compression
                               // artifacts in the video itself
-      frameThreshold: 4,      // treshold, but when doing blackframe test
+      frameThreshold: 4,      // threshold, but when doing blackframe test
       imageThreshold: 16,     // in order to detect pixel as "not black", the pixel must be brighter than
                               // the sum of black level, threshold and this value.
       gradientThreshold: 2,   // When trying to determine thickness of the black bars, we take 2 values: position of
@@ -72,7 +72,7 @@ var ExtensionConf = {
                               // brighter than our image threshold. If positions are more than this many pixels apart,
                               // we assume we aren't looking at letterbox and thus don't correct the aspect ratio.
       gradientSampleSize: 16, // How far do we look to find the gradient
-      maxGradient: 6,         // if two neighbouring pixels in gradientSampleSize differ by more than this, then we aren't
+      maxGradient: 6,         // if two neighboring pixels in gradientSampleSize differ by more than this, then we aren't
                               // looking at a gradient
       gradientNegativeTreshold: -2,
       gradientMaxSD: 6,    // reserved for future use
@@ -173,7 +173,7 @@ var ExtensionConf = {
   // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov. 
   actions: [{
     name: 'Trigger automatic detection',    // name displayed in settings
-    label: 'Automatic',                     // name displayed in ui (can be overriden in scope/playerUi)
+    label: 'Automatic',                     // name displayed in ui (can be overridden in scope/playerUi)
     cmd: [{
       action: 'set-ar',
       arg: AspectRatio.Automatic,
@@ -1047,7 +1047,7 @@ var ExtensionConf = {
                 '100%'
               ]
             }
-            // 'width': true            // this would prevent aard from runing if <video> had a 'width' property in style, regardless of value
+            // 'width': true            // this would prevent aard from running if <video> had a 'width' property in style, regardless of value
                                         // could also be an empty object, in theory.
           }
         }
@@ -1079,7 +1079,7 @@ var ExtensionConf = {
                 '100%'
               ]
             }
-            // 'width': true            // this would prevent aard from runing if <video> had a 'width' property in style, regardless of value
+            // 'width': true            // this would prevent aard from running if <video> had a 'width' property in style, regardless of value
                                         // could also be an empty object, in theory.
           }
         }

src/ext/lib/comms/CommsServer.js

@@ -212,7 +212,7 @@ class CommsServer {
         this.sendToAll(message);
         return;
       }
-      [tab, frame] = tab.split('-')
+      [tab, frame] = frame.split('-');
     }
 
     this.logger.log('info', 'comms', `%c[CommsServer::sendToFrame] attempting to send message to tab ${tab}, frame ${frame}`, "background: #dda; color: #11D", message);
@@ -328,6 +328,12 @@ class CommsServer {
     
     this.handleMessage(message, sender, sendResponse);
   }
+
+  // chrome shitiness mitigation
+  sendUnmarkPlayer(message) {
+    this.logger.log('info', 'comms', '[CommsServer.js::sendUnmarkPlayer] Chrome is a shit browser that doesn\'t do port.postMessage() in unload events, so we have to resort to inelegant hacks. If you see this, then the workaround method works.');
+    this.processReceivedMessage(message, this.popupPort);
+  }
 }
 
 export default CommsServer;

src/ext/lib/video-data/PageInfo.js

@@ -178,7 +178,7 @@ class PageInfo {
 
           if (this.readOnly) {
             // in lite mode, we're done. This is all the info we want, but we want to actually start doing 
-            // things that interfere with the website. We still want to be runnig a rescan, tho.
+            // things that interfere with the website. We still want to be running a rescan, tho.
 
             if(rescanReason == RescanReason.PERIODIC){
               this.scheduleRescan(RescanReason.PERIODIC);
@@ -237,12 +237,28 @@ class PageInfo {
       // if we're left without videos on the current page, we unregister the page.
       // if we have videos, we call register.
       if (this.comms) {
-        if (this.videos.length != oldVideoCount) { // only if number of videos changed, tho
+        // We used to send "register video" requests only on the first load, or if the number of 
-          if (this.videos.length > 0) {
+        // videos on the page has changed. However, since Chrome Web Store started to require every
-            this.comms.registerVideo({host: window.location.host, location: window.location});
+        // extension requiring "broad permissions" to undergo manual review
-          } else {
+        // ... and since Chrome Web Store is known for taking their sweet ass time reviewing extensions,
-            this.comms.unregisterVideo({host: window.location.host, location: window.location});
+        // with review times north of an entire fucking month
-          }
+        // ... and since the legacy way of checking whether our frames-with-videos cache in background 
+        // script contains any frames that no longer exist required us to use webNavigation.getFrame()/
+        // webNavigation.getAllFrames(), which requires a permission that triggers a review. 
+        //
+        // While the extension uses some other permissions that trigger manual review, it's said that
+        // less is better / has a positive effect on your manual review times ... So I guess we'll do 
+        // things in the less-than-optimal. more-than-retarded way.
+        //
+        // no but honestly fuck Chrome.
+
+        // if (this.videos.length != oldVideoCount) {
+        // } 
+        
+        if (this.videos.length > 0) {
+          this.comms.registerVideo({host: window.location.host, location: window.location});
+        } else {
+          this.comms.unregisterVideo({host: window.location.host, location: window.location});
         }
       }
 
@@ -252,7 +268,7 @@ class PageInfo {
       // našli ob naslednjem preiskovanju
       //
       // if we encounter a fuckup, we can assume that no videos were found on the page. We destroy all videoData
-      // objects to prevent multiple initalization (which happened, but I don't know why). No biggie if we destroyed
+      // objects to prevent multiple initialization (which happened, but I don't know why). No biggie if we destroyed
       // videoData objects in error — they'll be back in the next rescan
       this.logger.log('error', 'debug', "rescan error: — destroying all videoData objects",e);
       for (const v of this.videos) {
@@ -567,7 +583,7 @@ class PageInfo {
   }
 
   setKeyboardShortcutsEnabled(state) {
-    this.actionHandler.setKeybordLocal(state);
+    this.actionHandler.setKeyboardLocal(state);
   }
 
   setArPersistence(persistenceMode) {

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

@@ -129,7 +129,7 @@ class PlayerData {
       try {
         this.doPeriodicPlayerElementChangeCheck();
       } catch (e) {
-        console.error('[playerdata::legacycd] this message is pretty high on the list of messages you shouldnt see', e);
+        console.error('[PlayerData::legacycd] this message is pretty high on the list of messages you shouldnt see', e);
       }
     }
   }
@@ -187,8 +187,9 @@ class PlayerData {
   }
 
   unmarkPlayer() {
-    this.logger.log('info', 'debug', "[PlayerData::unmarkPlayer] unmarking player!")
+    this.logger.log('info', 'debug', "[PlayerData::unmarkPlayer] unmarking player!", {playerIdElement: this.playerIdElement});
     if (this.playerIdElement) {
+      this.playerIdElement.innerHTML = '';
       this.playerIdElement.remove();
     }
     this.playerIdElement = undefined;

src/ext/lib/video-transform/Stretcher.js

@@ -76,7 +76,7 @@ class Stretcher {
     // poznamo. Torej jih moramo računati.
     //
     //
-    // video.videoWidht and video.videoHeight describe the size of the video file.
+    // video.videoWidth and video.videoHeight describe the size of the video file.
     // Size of the video file can be different than the size of the <video> tag.
     // This can leave us with the following situation:
     //     * Video resolution is 850x480-ish (as reported by videoWidth and videoHeight)
@@ -103,7 +103,7 @@ class Stretcher {
     const videoAr = this.conf.video.videoWidth / this.conf.video.videoHeight;
     const playerAr = this.conf.player.dimensions.width / this.conf.player.dimensions.height;
 
-    const squezeFactor = this.fixedStretchRatio / videoAr;
+    const squeezeFactor = this.fixedStretchRatio / videoAr;
 
     // Whether squeezing happens on X or Y axis depends on whether required AR is wider or narrower than
     // the player, in which the video is displayed
@@ -115,13 +115,13 @@ postCropStretchFactors: x=${postCropStretchFactors.xFactor} y=${postCropStretchF
 fixedStretchRatio:      ${this.fixedStretchRatio}
 videoAr:                ${videoAr}
 playerAr:               ${playerAr}
-squeezeFactor:          ${squezeFactor}`, '\nvideo', this.conf.video);
+squeezeFactor:          ${squeezeFactor}`, '\nvideo', this.conf.video);
 
 
     if (this.fixedStretchRatio < playerAr) {
-      postCropStretchFactors.xFactor *= squezeFactor;
+      postCropStretchFactors.xFactor *= squeezeFactor;
     } else {
-      postCropStretchFactors.yFactor *= squezeFactor; 
+      postCropStretchFactors.yFactor *= squeezeFactor; 
     }
 
     this.logger.log('info', 'stretcher', `[Stretcher::applyStretchFixedSource] here's what we'll apply:\npostCropStretchFactors: x=${postCropStretchFactors.x} y=${postCropStretchFactors.y}`);

src/ext/uw-bg.js

@@ -173,14 +173,11 @@ class UWServer {
     }
 
     if (this.videoTabs[sender.tab.id]) {
-      if (this.videoTabs[sender.tab.id].frames[sender.frameId]) {
+      this.videoTabs[sender.tab.id].frames[sender.frameId] = {
-        return; // existing value is fine, no need to act
+        id: sender.frameId,
-      } else {
+        host: frameHostname,
-        this.videoTabs[sender.tab.id].frames[sender.frameId] = {
+        url: sender.url,
-          id: sender.frameId,
+        registerTime: Date.now(),
-          host: frameHostname,
-          url: sender.url
-        }
       }
     } else {
       this.videoTabs[sender.tab.id] = {
@@ -192,7 +189,8 @@ class UWServer {
       this.videoTabs[sender.tab.id].frames[sender.frameId] = {
         id: sender.frameId,
         host: frameHostname,
-        url: sender.url
+        url: sender.url,
+        registerTime: Date.now(),
       }
     }
 
@@ -290,6 +288,25 @@ class UWServer {
     }
 
     if (this.videoTabs[ctab.id]) {
+      // if video is older than PageInfo's video rescan period (+ 4000ms of grace),
+      // we clean it up from videoTabs[tabId].frames array.
+      const ageLimit = Date.now() - this.settings.active.pageInfo.timeouts.rescan - 4000;
+      console.log("videoTabs[tabId]:", this.videoTabs[ctab.id])
+      try {
+        for (const key in this.videoTabs[ctab.id].frames) {
+          if (this.videoTabs[ctab.id].frames[key].registerTime < ageLimit) {
+            delete this.videoTabs[ctab.id].frames[key];
+          }
+        }
+      } catch (e) {
+        // something went wrong. There's prolly no frames.
+        return {
+          host: this.extractHostname(ctab.url),
+          frames: [],
+          selected: this.selectedSubitem
+        }
+      }
+
       return {
         ...this.videoTabs[ctab.id],
         host: this.extractHostname(ctab.url),
@@ -305,6 +322,15 @@ class UWServer {
       selected: this.selectedSubitem
     }
   }
+
+  // chrome shitiness mitigation 
+  sendUnmarkPlayer(message) {
+    this.comms.sendUnmarkPlayer(message);
+  }
 }
 
-var server = new UWServer();
+var server = new UWServer();
+
+window.sendUnmarkPlayer = (message) => {
+  server.sendUnmarkPlayer(message)
+}

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.4.7.2",
+  "version": "4.4.8",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
@@ -29,6 +29,7 @@
   }],
 
   "background": {
+    "persistent": true,
     "scripts": [
       "ext/uw-bg.js"
     ]

src/popup/App.vue

@@ -2,8 +2,11 @@
   <div v-if="settingsInitialized" 
        class="popup flex flex-column no-overflow"
   >
-    <div class="header flex-row flex-nogrow flex-noshrink">
+    <div class="header flex-row flex-nogrow flex-noshrink relative">
       <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
+      <div class="absolute channel-info" v-if="BrowserDetect.processEnvChannel !== 'stable'">
+        Build channel: {{BrowserDetect.processEnvChannel}}
+      </div>
     </div>
 
     <div class="flex flex-row body no-overflow flex-grow">
@@ -202,6 +205,7 @@ export default {
       videoTabDisabled: false,
       canShowVideoTab: {canShow: true, warning: true},
       showWhatsNew: false,
+      BrowserDetect: BrowserDetect,
     }
   },
   async created() {
@@ -223,6 +227,12 @@ export default {
         cmd: 'unmark-player',
         forwardToAll: true,
       });
+      if (BrowserDetect.chrome) {
+        chrome.extension.getBackgroundPage().sendUnmarkPlayer({
+          cmd: 'unmark-player',
+          forwardToAll: true,
+        });
+      }
     });
 
     // get info about current site from background script
@@ -240,6 +250,7 @@ export default {
     DefaultSettingsPanel,
     PerformancePanel,
     Debug,
+    BrowserDetect,
     AboutPanel,
     Donate,
     SiteDetailsPanel,
@@ -344,7 +355,7 @@ export default {
       // Extension global disabled — show 'extension settings'
       // Extension site disabled, no embedded videos — show 'site settings'
       // Extension site disabled, embedded videos from non-blacklisted hosts — show video settings
-      // Extension site enabled — show vido settings
+      // Extension site enabled — show video settings
 
       // note: this if statement is ever so slightly unnecessary
       if (! this.settings.canStartExtension('@global')) {
@@ -582,4 +593,17 @@ html, body {
   // width: 800px;
   height: 600px;
 }
+
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.channel-info {
+  height: 0px;
+  right: 1.5rem;
+  bottom: 0.85rem;
+  font-size: 0.75rem;
+}
 </style>

src/popup/panels/WhatsNewPanel.vue

@@ -2,14 +2,18 @@
   <div>
     <h2>What's new</h2>
     <p>Full changelog for older versions <a href="https://github.com/tamius-han/ultrawidify/blob/master/CHANGELOG.md">is available here</a>.</p>
-    <p class="label">4.4.7</p>
+    <p class="label">4.4.8</p>
     <ul>
-      <li><b>[4.4.7.1]</b> CSS fixes</li>
+      <li>
-      <li><b>[4.4.7.1~2]</b> Delay CSS changes if video dimensions are invalid (attempt to fix youtube alignment problems
+        Fixed the bug where on pages with more than one video, the list of available videos in the extension popup
-      that appear in certain circumstances). 4.4.7.2 increased number of retries.
+        wouldn't remove videos that are no longer displayed on site. This resulted in extension listing videos that
+        were no longer on the page. Reboot or navigation would also not clear the list if navigating between various
+        pages on the same host.
+      </li>
+      <li>
+        Fixed the chrome-only bug where on sites with more than one video, the number wouldn't get hidden when the
+        extension popup closed.
       </li>
-      <li>Removed unnecessary font files and image files from the package.</li>
-      <li>(For testing/debugging purposes) Logger UI in swatter mode is now somewhat functional and user-friendly.</li>
     </ul>
   </div>
 </template>