Youtube: fix alignment issues with square-ish videos in normal player (#162). Fix issue with misalignment of featured videos on channel page

CHANGELOG.md

@@ -18,6 +18,11 @@
 
 ## v5.x (current major)
 
+### v5.0.7 
+
+* Videos of square-ish aspect ratios on 1440p (and lower) resolutions now no longer get misaligned ([#162](https://github.com/tamius-han/ultrawidify/issues/162))
+* Alignment of featured videos on youtube channel page should now also be fixed
+
 ### v5.0.6
 * Added configuration for metaivi.com based on user feedback ([#160](https://github.com/tamius-han/ultrawidify/issues/160))
 * Removed ExtConfPatches for versions < 4.5.0, because nobody should be using a build of this extension that's over a year old

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "5.0.4",
+  "version": "5.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultrawidify",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "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/ExtConfPatches.js

@@ -219,6 +219,21 @@ const ExtensionConfPatch = [
         css: ".shaka-video-container {\n  flex-direction: column !important;\n}"
       };
     }
+  }, {
+    forVersion: '5.0.7',
+    updateFn: (userOptions, defaultOptions) => {
+      // 5.0.5 initially incorrectly had app.plex.tv marked as 'user-added'
+      // when 'user-added' is generally reserved for marking sites with user-
+      // changed configuration. Site patches submitted by community should have 
+      // 'community' type. extConfPatch for 5.0.5 was also retroactively corrected.
+      userOptions.sites['www.youtube.com'].DOM.player = {
+        manual: true,
+        querySelectors: "#movie_player, #player, #c4-player",
+        additionalCss: "",
+        useRelativeAncestor: false,
+        playerNodeCss: "",
+      }
+    }
   }
 ];
 

src/ext/conf/ExtensionConf.ts

@@ -1031,8 +1031,8 @@ const ExtensionConf: SettingsInterface = {
       keyboardShortcutsEnabled: ExtensionMode.Default,
       DOM: {
         player: {
-          manual: false,
+          manual: true,
-          querySelectors: "#movie_player, #player",
+          querySelectors: "#movie_player, #player, #c4-player",
           additionalCss: "",
           useRelativeAncestor: false,
           playerNodeCss: "",

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.6",
+  "version": "5.0.7",
   "applications": {
     "gecko": {
       "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

src/popup/panels/WhatsNewPanel.vue

@@ -2,12 +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.6</p>
+    <p class="label">5.0.7</p>
     <ul>
       <li>
-        Added configuration for metaivi.com based on user feedback (<a href="https://github.com/tamius-han/ultrawidify/issues/160" target="_blank">#160</a>).<br/>
+        Youtube: Videos of square-ish aspect ratios on 1440p (and lower) resolutions now no longer get misaligned (<a href="https://github.com/tamius-han/ultrawidify/issues/162">#162</a>)
+      </li>
+      <li>
+        Youtube: Alignment of featured videos on the channel page should now also be fixed
       </li>
     </ul>
+    <p>
+      Hopefully that didn't break anything because I remember going from query selectors to auto mode for a reason, but when I tested things, things seemed to work across the board.
+    </p>
     <p><small>
       <b>Known issues:</b> zooming is limited in Chromium-based browsers. This is a browser bug that no extension can fix. See <a href="https://github.com/tamius-han/ultrawidify/discussions/161" target="_blank">this</a> for more info.
     </small></p>