new resize script detection (needs more testing possibly)

ktg5 · Mar 15, 2024 · 6961d12 · 6961d12
1 parent ffa71b8
commit 6961d12
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 37 deletions.
diff --git a/css/base.css b/css/base.css
@@ -2,15 +2,15 @@
     display: none;
 }
 
-.ytp-spinner-container {
-    display: none;
-}
-
-.ytp-spinner-container .ytp-spinner {
+.ytp-spinner {
     background: url("chrome-extension://__MSG_@@extension_id__/img/loading.gif") center center / contain no-repeat;
     height: 64px;
 }
 
+.ytp-spinner-container {
+    display: none;
+}
+
 /* BEZEL ICONS */
 
 .ytp-bezel[aria-label="Pause"] {

diff --git a/html/update.html b/html/update.html
@@ -17,10 +17,29 @@
             </div>
 
             <div class="text">
-                <b>Make sure to check the <a href="extensions.html">Extension Support page</a> every update to see if you need to do manual configuration!</b>
+                <!-- <b>New updates to the <a href="extensions.html">Extension Support page</a>! Please check it to see if you need to do manual configuration for your extensions!</b>
+                <br> -->
+                <div class="v1dot7dot1">
+                    <h2 class="showVersion">PlayerTube has been updated to </h2>
+                    <li>Improvements to resize script (using new detection).</li>
+                </div>
+
+                <br>
+
+                As always, if you have any issues,
+                <a href='https://github.com/ktg5/PlayerTube/issues'>please report them on the GitHub page!</a>
                 <br>
+                Enjoy!
+
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+
+                <h3>Past versions...</h3>
                 <div class="v1dot7">
-                    <h2 class="showVersion">PlayerTube has been updated to </h2>
+                    <div style="font-weight: 600;">v1.7</div>
                     This update took too long to make... <b>But I can say that this extension is now 90% stable & finished.</b>
                     <br>
                     <li>Fix <a href="https://github.com/ktg5/PlayerTube/issues/20">#20 -- "narrow video is stretched (zoomed) to fit"</a>.</li>
@@ -37,18 +56,6 @@ <h2 class="showVersion">PlayerTube has been updated to </h2>
 
                 <br>
 
-                As always, if you have any issues,
-                <a href='https://github.com/ktg5/PlayerTube/issues'>please report them on the GitHub page!</a>
-                <br>
-                Enjoy!
-
-                <br>
-                <br>
-                <br>
-                <br>
-                <br>
-
-                <h3>Past versions...</h3>
                 <div class="v1dot6dot2">
                     <div style="font-weight: 600;">v1.6.2</div>
                     <li>Fix <a href="https://github.com/ktg5/PlayerTube/issues/18">#18 -- "HD Lettering Not Showing on Settings Button"</a>.</li>

diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "PlayerTube",
     "description": "The secret ingredient for a older (and better) looking YouTube.",
-    "version": "1.7",
+    "version": "1.7.1",
     "homepage_url": "https://github.com/ktg5/PlayerTube",
 
     "background": {

diff --git a/src/resize.js b/src/resize.js
@@ -8,6 +8,7 @@ var tempInterval = setInterval(() => {
         clearInterval(tempInterval);
     }
 }, 1000);
+var pastWidth;
 
 // Add CSS fixes too
 var CSSPatches = `
@@ -34,24 +35,31 @@ document.body.insertAdjacentHTML('afterbegin', `<style id="playertube-css" class
 var checkBar = setInterval(() => {
     // Actual check
     if (document.getElementById('movie_player') && ytVideo && ytVideo.src.includes('blob')) {
+        // Get current progress bar width
         var completeWidth = document.querySelector('.ytp-chapters-container').clientWidth;
         // Actual width
         var actualWidth = parseInt(getVideoWidth());
-        // Video width + add possible offset (say for 2006 theme)
-        var videoWidth;
-        switch (userConfig.year) {
-            case '2006':
-                videoWidth = getOffset(userConfig.year) - 24;
-            break;
-
-            default:
-                videoWidth = actualWidth;
-            break;
-        }
-        // console.log('hello', completeWidth, videoWidth);
 
-        // Detection...
-        if (completeWidth !== videoWidth && (completeWidth + 1) !== videoWidth && completeWidth !== (videoWidth + 1)) {
+        // Debug detection
+        // console.log('resize debug detection:', actualWidth, pastWidth);
+        // Detection... v2...
+        if (actualWidth !== pastWidth) {
+            // Set pastWidth
+            pastWidth = parseInt(actualWidth);
+
+            // Video width + add possible offset (say for 2006 theme)
+            var videoWidth;
+            switch (userConfig.year) {
+                case '2006':
+                    videoWidth = getOffset(userConfig.year) - 24;
+                break;
+
+                default:
+                    videoWidth = actualWidth;
+                break;
+            }
+
+            // Go!
             console.log(`%cPlayerTube resize script: Detected big progress bar change! Fixing...`, styles2, `${completeWidth} !== ${videoWidth}`)
             fixBar();
         }
@@ -68,7 +76,7 @@ var checkBar = setInterval(() => {
 
 // Easy call to progress bar width
 function getVideoWidth() {
-    return document.getElementById('movie_player').clientWidth;
+    return document.querySelector('#movie_player').clientWidth;
 }
 
 function getOffset(year) {
@@ -120,8 +128,13 @@ function fixBar() {
     // }
 
     // Set width that needs to be set
-    width = playerWidth;
-    height = document.getElementById('movie_player').clientHeight;
+    var width;
+    if (document.querySelectorAll('.ytp-exp-chapter-hover-container').length) {
+        width = playerWidth - 1;
+    } else {
+        width = playerWidth;
+    }
+    var height = document.getElementById('movie_player').clientHeight;
 
     // Use YouTube function to change width
     document.getElementById('movie_player').setInternalSize(width, height);