Merge branch 'master' into stable

CHANGELOG.md

@@ -18,6 +18,11 @@
 
 ## v5.x (current major)
 
+### v5.0.5
+
+* improved UX a bit
+* Fixed white background on app.plex.tv ([#158](https://github.com/tamius-han/ultrawidify/issues/158))
+
 ### v5.0.4
 * Attempt to fix disney+ again, courtesy of [@jwannebo](https://github.com/tamius-han/ultrawidify/issues/84#issuecomment-846334005) on github.
 
@@ -29,7 +34,7 @@
 
 ### v5.0.2
 
-* When in full screen, the extension will assume player element dimensions are the same as the screen resolution. This should help with sites where ultrawidify doesn't correctly identify the player, as cropping generally doesn't work if player element is not identified. Old behaviour can be restored in advanced extension settings by toggling the "use player aspect ratio in fullscreen" checkbox under 'player detection settings'. 
+* When in full screen, the extension will assume player element dimensions are the same as the screen resolution. This should help with sites where ultrawidify doesn't correctly identify the player, as cropping generally doesn't work if player element is not identified. Old behaviour can be restored in advanced extension settings by toggling the "use player aspect ratio in fullscreen" checkbox under 'player detection settings'.
 * Extension should now respect 'disable extension' option for real.
 * Fixed the issue where player wouldn't get detected if video was wider than the player.
 
@@ -83,7 +88,7 @@ There's been some big-ish changes under the hood:
 * The extension will now show a notification when autodetection can't run due to DRM
 * Videos on facebook and reddit no longer get shifted up and to the left for me (cropping most of the video off-screen), but I haven't been deliberately trying to fix that issue. If you experience that issue, please consider contacting me (via github or email) with a link to a problematic video.
 
-### v4.4.10 
+### v4.4.10
 
 * Video alignment should now work on Twitch — [#109](https://github.com/tamius-han/ultrawidify/issues/109)
 * Videos should now align properly on Hulu while cropped — [#111](https://github.com/tamius-han/ultrawidify/issues/111) & via email
@@ -121,7 +126,7 @@ In addition to that, as of 4.4.9.1 the build process ensures removal of `node_mo
 * Fixed netflix (and possibly disney+ )
 * It's been almost a month and Chrome Web Store still hasn't finished the review of the 4.4.4.1 (and 4.4.4.2) revisions because when it comes to incompetence, it's hard to expect anything less from Google. I've did some proverbial yelling at the support in hopes that Chrome version will finally see an update (disclaimer: when I said yelling I really mean a polite request, because support staff doesn't deserve abuse because a different department is utter shite at doing their jobs).
 
-### v4.4.5 
+### v4.4.5
 
 * Extension no longer requires `allTabs` and `webNavigation` permissions
 * Some CSS on the debugger popup was not scoped, causing issues with some sites.
@@ -151,7 +156,7 @@ In addition to that, as of 4.4.9.1 the build process ensures removal of `node_mo
 
 * Changes to player detection that fix issues with vk
 * Extension tries to avoid setting aspect ratio pointlessly
-* (Hopefully) fixed mailto: and reddit compose links. 
+* (Hopefully) fixed mailto: and reddit compose links.
 * When reporting bugs, email/reddit template now automatically gathers browser, extension version and OS.
 
 ### v4.4.0
@@ -197,23 +202,23 @@ and OS are automatically included in email/reddit template.
 * Started using mutation observers to watch for anything modifying the size of our video.
 * **[4.2.3.1]** fixed some bugs in popup.
 
-### v4.2.2 
+### v4.2.2
 
 * Fixed player detection on reddit (for videos from v.reddit)
 
 ### v4.2.1
 * Fixed bug where custom CSS didn't get applied to pages
 
-### v4.2.0 
+### v4.2.0
 
 * Slightly improved popup design. (Design change suggested by PortaTrekos)
-* Player detection: youtube and twitch now have manual player element detection, with strictly defined players. 
+* Player detection: youtube and twitch now have manual player element detection, with strictly defined players.
 * Improved site settings control in extension popup. It's possible to enable extension for previously disabled embedded sites.
 * Improved incompatibilities with reddit, where videos would be vertically misaligned when not using RES
 * Fixed imcompatibilities with Iridium. Flicker when clicking play/pause or switching between big and popup player is caused by either Youtube or Iridium trying to apply their styles over mine.
 * Issues with inconsistent alignment that some people reported are potentially fixed
 
-### v4.1.2 
+### v4.1.2
 
 * Fixed video alignment issues on www.reddit as well (for people who use old reddit without going to old.reddit)
 * Fixed bug with 'player detection' tab
@@ -225,17 +230,17 @@ and OS are automatically included in email/reddit template.
 ### v4.1.0
 
 * Added ability to add custom CSS to page
-* Fixed video alignment issues on old.reddit. Disabled extension on imgur by default. 
+* Fixed video alignment issues on old.reddit. Disabled extension on imgur by default.
 * Extension now works on vimeo again
 * **UX:** Renamed 'about' to 'report a problem' in order to make contact info more discoverable
 
 
 ### v4.0.1
 
-* Fixed bug where sites using 'default' option in 'Extension mode' settings would be disabled, even if extension was not. 
+* Fixed bug where sites using 'default' option in 'Extension mode' settings would be disabled, even if extension was not.
 * Fixed bug where extension sometimes wouldn't work on Netflix.
 
-### v4.0.0 
+### v4.0.0
 
 * Fixed the bug where saving settings wouldn't work
 * Massive under-the-hood changes. The extension popup and settings page use VueJS
@@ -265,7 +270,7 @@ and OS are automatically included in email/reddit template.
 
 Never happened, got bumped to 4.0.0.
 
-### v3.2.2 
+### v3.2.2
 
 * Pan event listener now gets properly unbound
 * Fixed 'reset zoom' button in popup
@@ -274,7 +279,7 @@ Never happened, got bumped to 4.0.0.
 
 * Fixed issue where global video alignment setting didn't get saved properly
 
-### v3.2.0 
+### v3.2.0
 
 * Zoom and panning
 * Reorganized popup
@@ -314,7 +319,7 @@ User-facing changes:
 
 Added some anti-lag measures. This seems to be an issue affecting _only_ Chrome (and only then some installs), where canvas.drawImage() won't work properly for some reason.
 
-### v2.2.4 
+### v2.2.4
 
 Lots of mostly incredibly minor stuff.
 
@@ -325,11 +330,11 @@ Lots of mostly incredibly minor stuff.
 * Fixed some under-the-hood bugs nobody knew they even existed
 * A lil bit of refactoring
 
-### v2.2.3 
+### v2.2.3
 
 * Fixed automatic aspect ratio detection on DRM-protected sites.
 
-### v2.2.2  
+### v2.2.2
 
 * Fixes problems with switching from normal to fullscreen player on youtube. If 2.2.1 didn't fix the font issue, this version should have.
 
@@ -345,9 +350,9 @@ Various improvements to automatic aspect ratio detection:
 * **Fixed the situation with insane memory usage due to the automatic aspect ratio detection (#25, #32) and lag that appeared in certain cases after the extension has been running for a while.** There's still fun stuff going on — see notes below.
 * Improved accuracy of automatic detection. This should fix the issue of rapid switching in dark videos or videos with otherwise uneven edges (#12 - [video](https://www.youtube.com/watch?v=NaTGwlfRB_c); #24 - [video](https://www.youtube.com/watch?v=xvZqHgFz51I) (see the car at the beginning))
 
-Improved accuracy has increased the base RAM usage, and not by a small amount (I seem to have fixed my blunders, so that could _actually_ be on Firefox). As a result, I've reduced both resolution of the sample as well as polling frequency. 
+Improved accuracy has increased the base RAM usage, and not by a small amount (I seem to have fixed my blunders, so that could _actually_ be on Firefox). As a result, I've reduced both resolution of the sample as well as polling frequency.
 
-Polling of 1 check per second shouldn't use too much RAM. If you want automatic aspect ratio detection to react faster, you can up that number to 30 in the settings. 30 checks per second can be expensive: up to 400 MB if you've just started Firefox and went to youtube. Can go north of 2 gigs if you've been running Firefox for longer than that (seems to be a problem with Javascript garbage collection). 
+Polling of 1 check per second shouldn't use too much RAM. If you want automatic aspect ratio detection to react faster, you can up that number to 30 in the settings. 30 checks per second can be expensive: up to 400 MB if you've just started Firefox and went to youtube. Can go north of 2 gigs if you've been running Firefox for longer than that (seems to be a problem with Javascript garbage collection).
 
 Videos that aren't playing (e.g. videos that are paused or ended) do (should) ***not*** use any meaningful amount of RAM.
 
@@ -365,11 +370,11 @@ Videos that aren't playing (e.g. videos that are paused or ended) do (should) **
 
 Youtube fix seems to have broken Chrome compatibility (again), so any quick fix for this point forward will land in Chrome version along with v2.2.
 
-### v2.1.2 
+### v2.1.2
 
 * Fixed some bugs with autodetection sometimes not working properly on Youtube.
 
-Problem: there's this bit of code that keeps aspect ratio from changing when the difference between 'previous' and 'current' aspect ratio is too small. Unfortunately, the 'previous' value was _not_ updated on every aspect ratio switch for some reason. Also `ArDetect.init()` — for some reason — didn't always clean the 'previous' value even though it should. 
+Problem: there's this bit of code that keeps aspect ratio from changing when the difference between 'previous' and 'current' aspect ratio is too small. Unfortunately, the 'previous' value was _not_ updated on every aspect ratio switch for some reason. Also `ArDetect.init()` — for some reason — didn't always clean the 'previous' value even though it should.
 
 ### v2.1.1
 
@@ -381,7 +386,7 @@ Problem: there's this bit of code that keeps aspect ratio from changing when the
 * Popup should work more reliably now
 * Twitch works ... kinda but not always
 
-### v2.0.3 
+### v2.0.3
 
 * Fixed the bug where Netflix videos weren't vertically centered in Firefox 57+ (not present in Chrome or FF 56 or earlier)
 
@@ -442,15 +447,15 @@ The extension is being rewritten almost ground-up, around automatic aspect ratio
 
 * Introduced Netflix support.
 
-As Netflix relies on extension re-initializing at least the UI ***a lot***, the optimization introduced in 1.0.2 was reversed (as waiting 2 seconds for the UI to appear is just too much). 
+As Netflix relies on extension re-initializing at least the UI ***a lot***, the optimization introduced in 1.0.2 was reversed (as waiting 2 seconds for the UI to appear is just too much).
 
 Furthermore, triggering UI re-initialisation on onUpdated events turned out to not be the proper way to go: immediately after the extension is initialized, onUpdated gets triggered even more often than your average Buzzfeed writer/reader. But change the episode on Netflix and suddenly, onUpdated gets barely triggered at all — which means that more often than not, the UI extension injects into the page wasn't visible. (the fuck, really)
 
 This is why Netflix uses another function that manually checks whether the player bar is present. Ideally that check happens every tenth of a second, but Firefox may be limiting that to one per second.
 
-### v1.0.2  
+### v1.0.2
 
-The 'extension sometimes not working' bug was fixed (by having extension try to setup every time a page got updated), but the fix had some problems. Namely, the extension would re-initiate (complete with re-adding the entire UI) itself very _very_ often. 
+The 'extension sometimes not working' bug was fixed (by having extension try to setup every time a page got updated), but the fix had some problems. Namely, the extension would re-initiate (complete with re-adding the entire UI) itself very _very_ often.
 
 This could be a problem, so it was fixed. Extension is notified of updates only every ~2 seconds (which absorbs most of the "page was updated" events on page load) and doesn't attempt to reload the UI if the UI was already loaded. (Unless `debugmsg` is set to true. It's generally not, but any commits to this repo could potentially still have it enabled).
 
@@ -464,7 +469,7 @@ Fixed the bug where sometimes the extension would fail to work. (example: you op
 
 ### v1.0-rc1
 
-* Settings page is added and mostly working. 
+* Settings page is added and mostly working.
 
 ### v0.9.9.6
 
@@ -480,7 +485,7 @@ Fixed the bug where sometimes the extension would fail to work. (example: you op
 
 ### v0.9.9.1
 
-* Keybinds `a` and `w` now work. 
+* Keybinds `a` and `w` now work.
 * Some changes under the bonnet, mostly regarding the way keypresses are handled.
 * 'Settings' page is ~15% done.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "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": {
@@ -16,6 +16,9 @@
     "build-zip": "node scripts/build-zip.js",
     "build:dev": "webpack --hide-modules",
     "dev": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- --watch\" \"cross-env BROWSER=chrome npm run build:dev -- --watch\"  \"cross-env BROWSER=edge npm run build:dev -- --watch\"",
+    "dev-ff": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
+    "dev-chrome": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=chrome npm run build:dev -- --watch",
+    "dev-edge": "cross-env NODE_ENV=development CHANNEL=dev BROWSER=edge npm run build:dev -- --watch",
     "pre-build": "rm -rf ./dist-ff; rm -rf ./dist-chrome; rm -rf ./node_modules; npm ci",
     "start": "npm run dev"
   },

src/ext/conf/ExtConfPatches.js

@@ -126,7 +126,7 @@ const ExtensionConfPatch = [
     updateFn: (userOptions, defaultOptions) => {
       // remove 'press P to toggle panning mode' thing
       const togglePan = userOptions.actions.find(x => x.cmd && x.cmd.length === 1 && x.cmd[0].action === 'toggle-pan');
-      if (togglePan) { 
+      if (togglePan) {
         togglePan.scopes = {};
       }
 
@@ -221,7 +221,7 @@ const ExtensionConfPatch = [
           show: true,
         }
       });
-      
+
       // patch shortcuts for non-latin layouts, but only if the user hasn't changed default keys
       for (const action of userOptions.actions) {
         if (!action.cmd || action.cmd.length !== 1) {
@@ -263,7 +263,7 @@ const ExtensionConfPatch = [
     updateFn: (userOptions, defaultOptions) => {
       try {
         userOptions.actions.push(
-          { 
+          {
             name: 'Stretch source to 4:3',
             label: '4:3 stretch (src)',
             cmd: [{
@@ -280,7 +280,7 @@ const ExtensionConfPatch = [
               show: true,
               path: 'crop'
             }
-          }, { 
+          }, {
             name: 'Stretch source to 16:9',
             label: '16:9 stretch (src)',
             cmd: [{
@@ -337,7 +337,7 @@ const ExtensionConfPatch = [
       if (!userOptions.sites['www.disneyplus.com']) {
         userOptions.sites['www.disneyplus.com'] = {
           mode: ExtensionMode.Enabled,
-          autoar: ExtensionMode.Enabled,     
+          autoar: ExtensionMode.Enabled,
           override: false,
           type: 'community',
           stretch: StretchType.Default,
@@ -456,7 +456,7 @@ const ExtensionConfPatch = [
             limit: 0.997,
             fullscreenOnly: true
           }
-        } 
+        }
       } catch (e) {
         // do nothing
       }
@@ -471,7 +471,7 @@ const ExtensionConfPatch = [
             limit: 0.997,
             fullscreenOnly: true
           }
-        } 
+        }
       } catch (e) {
         // do nothing
       }
@@ -487,7 +487,7 @@ const ExtensionConfPatch = [
               limit: 0.997,
               fullscreenOnly: true
             }
-          } 
+          }
         } else if (BrowserDetect.chrome) {
           userOptions.mitigations = {
             zoomLimit: {
@@ -495,7 +495,7 @@ const ExtensionConfPatch = [
               limit: 0.997,
               fullscreenOnly: true
             }
-          } 
+          }
         }
       } catch (e) {
         // do nothing
@@ -511,6 +511,28 @@ const ExtensionConfPatch = [
         videoAncestor: 1
       }
     }
+  }, {
+    forVersion: '5.0.5',
+    sites: {
+      "app.plex.tv": {
+        mode: 3,
+        autoar: 3,
+        type: "user-added",
+        stretch: -1,
+        videoAlignment: -1,
+        keyboardShortcutsEnabled: 0,
+        DOM: {
+          player: {
+            manual: false,
+            querySelectors: "",
+            additionalCss: "",
+            useRelativeAncestor: false,
+            playerNodeCss: ""
+          }
+        },
+        css: "body {\n  background-color: #000;\n}\n\n.application {\n  background-color: #000;\n}"
+      }
+    }
   }
 ];
 

src/ext/conf/ExtensionConf.ts

@@ -15,7 +15,7 @@ if(Debug.debug)
 const ExtensionConf: SettingsInterface = {
   arDetect: {
     disabledReason: "",       // if automatic aspect ratio has been disabled, show reason
-    allowedMisaligned: 0.05,  // top and bottom letterbox thickness can differ by this much. 
+    allowedMisaligned: 0.05,  // top and bottom letterbox thickness can differ by this much.
                               // Any more and we don't adjust ar.
     allowedArVariance: 0.075, // amount by which old ar can differ from the new (1 = 100%)
     timers: {                 // autodetection frequency
@@ -46,14 +46,14 @@ const ExtensionConf: SettingsInterface = {
       },
     },
 
-    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1] 
+    // samplingInterval: 10,     // we sample at columns at (width/this) * [ 1 .. this - 1]
     blackframe: {
       sufficientColorVariance: 0.10,  // calculate difference between average intensity and pixel, for every pixel for every color
                                       // 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
                                       // cumulative threshold.
-      cumulativeThresholdLax: 1600,    
+      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)
       blackPixelsCondition: 0.6, // How much pixels must be black (1 all, 0 none) before we consider frame as black. Takes
@@ -93,7 +93,7 @@ const ExtensionConf: SettingsInterface = {
       randomCols: 0,      // we add this many randomly selected columns to the static columns
       staticRows: 9,      // forms grid with staticSampleCols. Determined in the same way. For black frame checks
     },
-    guardLine: {              // all pixels on the guardline need to be black, or else we trigger AR recalculation 
+    guardLine: {              // all pixels on the guardline need to be black, or else we trigger AR recalculation
                               // (if AR fails to be recalculated, we reset AR)
       enabled: true,
       ignoreEdgeMargin: 0.20, // we ignore anything that pokes over the black line this close to the edge
@@ -107,14 +107,14 @@ const ExtensionConf: SettingsInterface = {
       safetyBorderPx: 5,        // determines the thickness of safety border in fallback mode
       noTriggerZonePx: 8        // if we detect edge less than this many pixels thick, we don't correct.
     },
-    arSwitchLimiter: {          // to be implemented 
+    arSwitchLimiter: {          // to be implemented
       switches: 2,              // we can switch this many times
         period: 2.0             // per this period
     },
     edgeDetection: {
       sampleWidth: 8,        // we take a sample this wide for edge detection
       detectionThreshold: 4,  // sample needs to have this many non-black pixels to be a valid edge
-      confirmationThreshold: 1,  // 
+      confirmationThreshold: 1,  //
       singleSideConfirmationThreshold: 3,    // we need this much edges (out of all samples, not just edges) in order
                                              // to confirm an edge in case there's no edges on top or bottom (other
                                             // than logo, of course)
@@ -128,11 +128,11 @@ const ExtensionConf: SettingsInterface = {
                                    // are now. (NOTE: keep this less than 1 in case we implement logo detection)
     },
     pillarTest: {
-      ignoreThinPillarsPx: 5, // ignore pillars that are less than this many pixels thick. 
+      ignoreThinPillarsPx: 5, // ignore pillars that are less than this many pixels thick.
       allowMisaligned: 0.05   // left and right edge can vary this much (%)
     },
     textLineTest: {
-      nonTextPulse: 0.10,     // if a single continuous pulse has this many non-black pixels, we aren't dealing 
+      nonTextPulse: 0.10,     // if a single continuous pulse has this many non-black pixels, we aren't dealing
                               // with text. This value is relative to canvas width (%)
       pulsesToConfirm: 10,    // this is a threshold to confirm we're seeing text.
       pulsesToConfirmIfHalfBlack: 5, // this is the threshold to confirm we're seeing text if longest black pulse
@@ -171,8 +171,8 @@ const ExtensionConf: SettingsInterface = {
   //             ::: ACTIONS :::
   // -----------------------------------------
   // Nastavitve za ukaze. Zamenja stare nastavitve za bližnične tipke.
-  // 
+  //
-  // Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov. 
+  // 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 overridden in scope/playerUi)
@@ -197,7 +197,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyA',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -223,7 +223,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyR',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -249,7 +249,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyW',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -275,7 +275,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyE',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -303,7 +303,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyS',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: false,
           onKeyDown: true,
@@ -331,7 +331,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyD',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: false,
           onKeyDown: true,
@@ -359,7 +359,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyX',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -472,7 +472,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyY',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -497,7 +497,7 @@ const ExtensionConf: SettingsInterface = {
           code: 'KeyU',
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: false,
           onKeyUp: true,
           onKeyDown: false,
@@ -532,7 +532,7 @@ const ExtensionConf: SettingsInterface = {
         shortcut: [{
           ctrlKey: false,
           metaKey: false,
-          altKey: false, 
+          altKey: false,
           shiftKey: true,
           onKeyDown: false,
           onKeyUp: false,
@@ -657,7 +657,7 @@ const ExtensionConf: SettingsInterface = {
       }
     }
   }, // NEW OPTIONS
-  { 
+  {
     name: 'Stretch source to 4:3',
     label: '4:3 stretch (src)',
     cmd: [{
@@ -674,7 +674,7 @@ const ExtensionConf: SettingsInterface = {
       show: true,
       path: 'crop'
     }
-  }, { 
+  }, {
     name: 'Stretch source to 16:9',
     label: '16:9 stretch (src)',
     cmd: [{
@@ -778,7 +778,7 @@ const ExtensionConf: SettingsInterface = {
   //    E N A B L E   E X T E N S I O N / A U T O A R
   //    (for sites/extension tab in the popup)
   //
-  { 
+  {
     name: 'Enable extension',
     label: 'Enable',
     cmd: [{
@@ -889,7 +889,7 @@ const ExtensionConf: SettingsInterface = {
     scopes: {
       global: {
         show: true,
-      }, 
+      },
       site: {
         show: true,
       }
@@ -899,7 +899,7 @@ const ExtensionConf: SettingsInterface = {
   //
   // Enable/disable keyboard shortcuts
   //
-  { 
+  {
     name: 'Enable keyboard shortcuts',
     label: 'Enable',
     cmd: [{
@@ -974,31 +974,31 @@ const ExtensionConf: SettingsInterface = {
   // -----------------------------------------
   // Nastavitve za posamezno stran
   // Config for a given page:
-  // 
+  //
   // <hostname> : {
   //    status: <option>              // should extension work on this site?
   //    arStatus: <option>            // should we do autodetection on this site?
-  //    
+  //
   //    defaultAr?: <ratio>          // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
   //    stretch? <stretch mode>       // automatically stretch video on this site in this manner
   //    videoAlignment? <left|center|right>
   //
-  //    type: <official|community|user>  // 'official' — blessed by Tam. 
+  //    type: <official|community|user>  // 'official' — blessed by Tam.
   //                                     // 'community' — blessed by reddit.
   //                                     // 'user' — user-defined (not here)
   //    override: <true|false>           // override user settings for this site on update
-  // } 
+  // }
-  //  
+  //
-  // Veljavne vrednosti za možnosti 
+  // Veljavne vrednosti za možnosti
   // Valid values for options:
   //
   //     status, arStatus, statusEmbedded:
-  //    
+  //
   //    * enabled     — always allow, full
   //    * basic       — allow, but only the basic version without playerData
   //    * default     — allow if default is to allow, block if default is to block
   //    * disabled    — never allow
-  // 
+  //
   sites: {
     "@global": {                        // global defaults. Possible options will state site-only options in order
                                         // to avoid writing this multiple times. Tags:
@@ -1010,12 +1010,12 @@ const ExtensionConf: SettingsInterface = {
                                         //       'disabled'  - work nowhere
                                         //       'basic'     - (Possible future use)
                                         //       'default'   - follow global rules (#s)
-      autoar: ExtensionMode.Enabled,    //  Should we try to automatically detect aspect ratio? 
+      autoar: ExtensionMode.Enabled,    //  Should we try to automatically detect aspect ratio?
                                         //  Options: 'enabled', 'whitelist' (#g), 'default' (#s), 'disabled'
       autoarFallback: currentBrowser.firefox ?     // if autoAr fails, try fallback mode?
                        ExtensionMode.Enabled :     // Options same as in autoar.
                        ExtensionMode.Disabled,     // if autoar is disabled, this setting is irrelevant
-      stretch: StretchType.NoStretch,                  // Default stretch mode. 
+      stretch: StretchType.NoStretch,                  // Default stretch mode.
       videoAlignment: VideoAlignmentType.Center,       // Video alignment
       keyboardShortcutsEnabled: ExtensionMode.Enabled,
     },
@@ -1041,7 +1041,7 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.netflix.com" : {
       mode: ExtensionMode.Enabled,
-      autoar: ExtensionMode.Enabled,     
+      autoar: ExtensionMode.Enabled,
       override: false,
       type: 'official',
       stretch: StretchType.Default,
@@ -1060,7 +1060,7 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.disneyplus.com" : {
       mode: ExtensionMode.Enabled,
-      autoar: ExtensionMode.Enabled,     
+      autoar: ExtensionMode.Enabled,
       override: false,
       type: 'community',
       stretch: StretchType.Default,
@@ -1081,7 +1081,7 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.twitch.tv": {
       mode: ExtensionMode.Enabled,
-      autoar: ExtensionMode.Enabled,     
+      autoar: ExtensionMode.Enabled,
       override: true,
       type: 'official',
       stretch: StretchType.Default,
@@ -1124,7 +1124,7 @@ const ExtensionConf: SettingsInterface = {
     },
     "old.reddit.com" : {
       mode: ExtensionMode.Enabled,
-      autoar:ExtensionMode.Enabled,     
+      autoar:ExtensionMode.Enabled,
       override: false,
       type: 'testing',
       stretch: StretchType.Default,
@@ -1141,7 +1141,7 @@ const ExtensionConf: SettingsInterface = {
     },
     "www.reddit.com" : {
       mode: ExtensionMode.Enabled,
-      autoar: ExtensionMode.Enabled,     
+      autoar: ExtensionMode.Enabled,
       override: false,
       type: 'testing',
       stretch: StretchType.Default,
@@ -1192,6 +1192,24 @@ const ExtensionConf: SettingsInterface = {
         }
       }
     },
+    "app.plex.tv": {
+      mode: 3,
+      autoar: 3,
+      type: "user-added",
+      stretch: -1,
+      videoAlignment: -1,
+      keyboardShortcutsEnabled: 0,
+      DOM: {
+        player: {
+          manual: false,
+          querySelectors: "",
+          additionalCss: "",
+          useRelativeAncestor: false,
+          playerNodeCss: ""
+        }
+      },
+      css: "body {\n  background-color: #000;\n}\n\n.application {\n  background-color: #000;\n}"
+    }
   }
 }
 

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": "5.0.4",
+  "version": "5.0.5",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
@@ -19,7 +19,7 @@
 
   "content_scripts": [{
     "matches": ["*://*/*"],
-    "js": [ 
+    "js": [
       "common/lib/browser-polyfill.js",
       "ext/uw.js"
     ],
@@ -36,7 +36,7 @@
       "ext/uw-bg.js"
     ]
   },
-  
+
   "options_ui": {
     "page": "options/options.html",
     "browser_style": false,

src/popup/App.vue

@@ -8,7 +8,7 @@
     non-firefox builds of this extension and be done with it. No need to complicate things
     further than that.
   -->
-  <div v-if="settingsInitialized" 
+  <div v-if="settingsInitialized"
        class="popup flex flex-column no-overflow"
        :class="{'popup-chrome': ! BrowserDetect.firefox}"
   >
@@ -20,7 +20,7 @@
         Build channel: {{BrowserDetect.processEnvChannel}}
       </div>
     </div>
-    <div 
+    <div
       v-if="narrowPopup"
       class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
       @click="toggleSideMenu()"
@@ -160,7 +160,7 @@
       </div>
 
       <!-- PANELS/CONTENT -->
-      <div id="tab-content" 
+      <div id="tab-content"
            v-show="!(narrowPopup && sideMenuVisible)"
            class="flex-grow h100 overflow-y-auto"
            :class="{'narrow-content': narrowPopup}"
@@ -184,7 +184,7 @@
                               :settings="settings"
                               :site="selectedSite"
         />
-        <PerformancePanel v-if="selectedTab === 'performance-metrics'" 
+        <PerformancePanel v-if="selectedTab === 'performance-metrics'"
                           :performance="performance" />
         <WhatsNewPanel v-if="selectedTab === 'whats-new'" />
         <AboutPanel v-if="selectedTab === 'about'" />
@@ -279,7 +279,7 @@ export default {
 
       }
       await this.sleep(5000);
-    } 
+    }
   },
   async updated() {
     const body = document.getElementsByTagName('body')[0];
@@ -287,7 +287,7 @@ export default {
     // ensure that narrowPopup only gets set the first time the popup renders
     // if popup was rendered before, we don't do anything because otherwise
     // we'll be causing an unwanted re-render
-    // 
+    //
     // another thing worth noting — the popup gets first initialized with
     // offsetWidth set to 0. This means proper popup will be displayed as a
     // mini popup if we don't check for that.
@@ -695,7 +695,7 @@ html {
   non-firefox builds of this extension and be done with it. No need to complicate things
   further than that.
 
-  It also seems that Chrome doesn't like if we set the width of the popup all the way to 
+  It also seems that Chrome doesn't like if we set the width of the popup all the way to
   800px (probably something something scrollbar), so let's just take away a few px.
  */
 .popup-chrome {

src/popup/panels/SiteDetailsPanel.vue

@@ -6,7 +6,7 @@
         If extension doesn't detect player correctly, you can override it.
         <small>(NOTE: this currently doesn't work for embedded videos)</small>
       </div>
-      
+
       <div>Meaning of outlines:</div>
 
       <div class="flex flex-row flex-wrap">
@@ -30,8 +30,6 @@
           <QsElement :selector="qse" :key="qse" />
         </template>
       </div>
-
-
     </div> -->
 
     <div class="label">
@@ -44,50 +42,59 @@
       <div class="">
         <input :checked="playerManualQs"
                 @change="togglePlayerManualQs"
-                type="checkbox" 
+                type="checkbox"
         /> Manually specify player
+        <span v-if="playerManualQs" class="small-samecolor">
+          &nbsp;
+          <a
+            v-if="playerByNodeIndex"
+            @click="toggleByNodeIndex"
+          >(use advanced options)</a>
+          <a
+            v-if="!playerByNodeIndex"
+            @click="toggleByNodeIndex"
+          >(use basic options)</a>
+        </span>
       </div>
 
-      <div class="flex flex-column">
+      <div v-if="playerManualQs">
-        <div class="">Query selectors for player:</div>
+        <div v-if="!playerByNodeIndex" class="flex flex-column">
-        <input type="text"
+          <div class="">Query selectors for player:</div>
-               v-model="playerQs"
+          <input type="text"
-               @change="updatePlayerQuerySelector"
+                v-model="playerQs"
-               @blur="updatePlayerQuerySelector"
+                @change="updatePlayerQuerySelector"
-               :disabled="playerByNodeIndex || !playerManualQs"
+                @blur="updatePlayerQuerySelector"
-        />
+                :disabled="playerByNodeIndex || !playerManualQs"
-      </div>
+          />
-
+        </div>
-      <div class="flex flex-row">
+
-        <input :checked="playerByNodeIndex"
+        <div v-if="playerByNodeIndex" class="flex flex-row">
-               :disabled="!playerManualQs"
+          <div>
-                @change="toggleByNodeIndex"
+            Player is n-th parent of video:
-                type="checkbox" 
+          </div>
-        />
+          <input v-model="playerParentNodeIndex"
-        <div>
+                  :disabled="!playerManualQs"
-          Player is n-th parent of video:
+                  @change="updatePlayerParentNodeIndex"
+                  @blur="updatePlayerParentNodeIndex"
+                  type="number"
+          />
+        </div>
+
+        <div class="description">
+          <small>
+            <b>Hint:</b> Player is a HTML element that represents the portion of the page you expect the video to play in.
+            The correct value for n-th player value should normally between 1-10 (depends on the site). If none of these
+            values works, then the site probably has a different issue.
+            Note that you need to save settings and reload the page every time you change the number.
+          </small>
         </div>
-        <input v-model="playerParentNodeIndex"
-                :disabled="!playerByNodeIndex || !playerManualQs"
-                @change="updatePlayerParentNodeIndex"
-                @blur="updatePlayerParentNodeIndex"
-                type="number" 
-        />
       </div>
 
-      <div class="description">
-        <small>
-          <b>Hint:</b> Player is a HTML element that represents the portion of the page you expect the video to play in.
-          You can provide player's query selector, or you can tick the 'player is the n-th parent of video'
-          checkbox and try entering values 1-12ish and see if anything works. Note that you need to save
-          settings and reload the page every time you change the number.
-        </small>
-      </div>
 
       <div class="flex flex-row">
         <input :checked="usePlayerAr"
                 @change="toggleUsePlayerAr"
-                type="checkbox" 
+                type="checkbox"
         />
         <div>
           Do not use monitor AR in fullscreen
@@ -116,7 +123,7 @@
         >
         </textarea>
     </div>
-    
+
     <div class="label">
       Video detection settings<br/><small>for {{site}}</small>
     </div>
@@ -125,7 +132,7 @@
       <div class="">
         <input :checked="!videoManualQs"
                 @change="toggleVideoManualQs"
-                type="checkbox" 
+                type="checkbox"
         /> Detect automatically
       </div>
       <div class="flex flex-column">
@@ -161,7 +168,7 @@
           <div class="flex label-secondary form-label">
             <input :checked="settings?.active?.mitigations?.zoomLimit?.enabled"
                   @change="setMitigation(['zoomLimit', 'enabled'], $event.target.checked)"
-                  type="checkbox" 
+                  type="checkbox"
             /> Limit zoom.
           </div>
           <div class="flex flex-row">
@@ -181,7 +188,7 @@
             <input :checked="settings?.active?.mitigations?.zoomLimit?.fullscreenOnly"
                   @change="setMitigation(['zoomLimit', 'fullscreenOnly'], $event.target.checked)"
                   :disabled="!settings?.active?.mitigations?.zoomLimit?.enabled"
-                  type="checkbox" 
+                  type="checkbox"
             /> Limit zoom only while in fullscreen
           </div>
           <div class="description">
@@ -235,7 +242,7 @@ export default {
       playerManualQs: false,
       playerQs: '',
       playerCss: '',
-      playerByNodeIndex: false,
+      playerByNodeIndex: true,
       playerParentNodeIndex: undefined,
       usePlayerAr: false,
       BrowserDetect
@@ -247,19 +254,19 @@ export default {
   },
   created() {
     try {
-      this.videoManualQs = this.settings.active.sites[this.site].DOM.video.manual || this.videoManualQs;
+      this.videoManualQs = this.settings.active.sites[this.site]?.DOM?.video?.manual ?? this.videoManualQs;
-      this.videoQs = this.settings.active.sites[this.site].DOM.video.querySelectors;
+      this.videoQs = this.settings.active.sites[this.site]?.DOM?.video?.querySelectors;
-      this.videoCss = this.settings.active.sites[this.site].DOM.video.additionalCss;
+      this.videoCss = this.settings.active.sites[this.site]?.DOM?.video?.additionalCss;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
     }
-    
+
     try {
-      this.playerManualQs = this.settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
+      this.playerManualQs = this.settings.active.sites[this.site]?.DOM?.player?.manual ?? this.playerManualQs;
-      this.playerQs = this.settings.active.sites[this.site].DOM.player.querySelectors;
+      this.playerQs = this.settings.active.sites[this.site]?.DOM?.player?.querySelectors;
-      this.playerByNodeIndex = this.settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex;
+      this.playerByNodeIndex = this.settings.active.sites[this.site]?.DOM?.player?.useRelativeAncestor ?? this.playerByNodeIndex;
-      this.playerParentNodeIndex = this.settings.active.sites[this.site].DOM.player.videoAncestor;
+      this.playerParentNodeIndex = this.settings.active.sites[this.site]?.DOM?.player?.videoAncestor;
-      this.usePlayerAr = this.settings.active.sites[this.site].usePlayerArInFullscreen;
+      this.usePlayerAr = this.settings.active.sites[this.site]?.usePlayerArInFullscreen;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
     }
@@ -278,7 +285,7 @@ export default {
       const saveButtonBait = document.getElementById('save-banner-observer-bait');
       const saveButton = document.getElementById('save-banner');
 
-      const observer = new IntersectionObserver( 
+      const observer = new IntersectionObserver(
         ([e]) => {
           // console.log('observer triggered. intersection ratio?', e.intersectionRatio)
           saveButton.classList.toggle('floating', e.intersectionRatio < 0.95);
@@ -380,7 +387,7 @@ export default {
         }
 
         currentMitigationsParent[mitigation[mitigation.length - 1]] = value;
-      
+
       } else {
         this.settings.active.mitigations[mitigation] = value;
       }
@@ -434,4 +441,8 @@ export default {
     box-shadow: 0 2rem 3rem 1rem $selected-color;
   }
 }
+
+.small-samecolor {
+  font-size: 0.8em;
+}
 </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">5.0.4</p>
+    <p class="label">5.0.5</p>
     <ul>
       <li>
-        Updated config for disney+. Hopefully it works now. Special thanks to <a href="https://github.com/tamius-han/ultrawidify/issues/84#issuecomment-846334005" target="_blank">@jwannebo</a>.
+        In 'Advanced Settings' tab of the popup: Player Detection Settings are now a bit less of a mess.
+      </li>
+      <li>
+        Fixed the background issue with app.plex.tv (<a href="https://github.com/tamius-han/ultrawidify/issues/158" target="_blank">#158</a>).<br/>
+        <small><b>NOTE:</b> if you're using self-hosted plex, you will have to configure the extension for flex yourself. Refer to the <a href="https://github.com/tamius-han/ultrawidify/issues/158" target="_blank">github issue</a> for details.</small>
       </li>
     </ul>
     <p>
-      <small><b>NOTE from older versions:</b> zoom limitations were introduced as a workaround for a bug caused by Chrome's/Edge's faulty hardware acceleration.</small>
+      <small><b>NOTE from older versions:</b> zoom limitations were introduced as a workaround for a bug caused by Chrome's/Edge's faulty hardware acceleration. Yes I know this message has been here since march, but nothing has changed.</small>
     </p>
     <p>
       <small>If you experience issues with videos being stretched incorrectly at certain zoom levels, go to:</small><br/>