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.
 

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

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

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

src/popup/panels/SiteDetailsPanel.vue

@@ -30,8 +30,6 @@
           <QsElement :selector="qse" :key="qse" />
         </template>
       </div>
-
-
     </div> -->
 
     <div class="label">
@@ -46,43 +44,52 @@
                 @change="togglePlayerManualQs"
                 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"
@@ -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
     }
@@ -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/>