Better resizing

This took longer for me to get out, but I've been testing it for a while to make sure it works even know I'm not uploading this version yet to webstores.
ktg5 · Jan 9, 2024 · 9fe4d5e · 9fe4d5e
1 parent 26bfe70
commit 9fe4d5e
Show file tree

Hide file tree

Showing 11 changed files with 221 additions and 40 deletions.
diff --git a/css/2006.css b/css/2006.css
@@ -20,6 +20,8 @@
     left: 0 !important;
 }
 
+/* PROGRESS BAR */
+
 .ytp-chrome-bottom .ytp-progress-bar-container {
 	bottom: 31px !important;
 }
@@ -28,6 +30,7 @@
     bottom: 33px !important;
 }
 
+/* Make sure YouTube doesn't fuck with these */
 .ytp-chapter-hover-container.ytp-exp-chapter-hover-container {
     transform: scale(1) !important;
 }
@@ -36,6 +39,14 @@
 	transform: scaleY(1) !important;
 }
 
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect {
+	transform: scaleY(1) !important;
+}
+
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect:hover {
+    transform: scaleY(1) !important;
+}
+
 .ytp-progress-bar {
     transition: .5s;
     margin-bottom: 1px !important;

diff --git a/css/2010.css b/css/2010.css
@@ -57,7 +57,9 @@
 	margin-bottom: 1px !important;
 }
 
-.ytp-chrome-bottom .ytp-progress-bar:after {
+/* this is only used in embeds & fullscreen */
+.ytp-embed .ytp-chrome-bottom .ytp-progress-bar:after,
+.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
     content: '';
     display: block;
     position: absolute;
@@ -69,18 +71,18 @@
     transform: scaleY(.6);
 }
 
+.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
+	width: 48px;
+}
+
 .ytp-chrome-bottom .ytp-progress-bar.finished:after {
-    background: var(--pt-main-colour);
+    background: var(--pt-main-colour) !important;
 }
 
 .ytp-chrome-bottom .ytp-progress-bar:hover:after {
 	transform: scaleY(1);
 }
 
-.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
-	width: 48px
-}
-
 .ytp-chrome-bottom .ytp-progress-bar .ytp-load-progress {
     background: var(--pt-alt-colour)
 }
@@ -89,8 +91,17 @@
 	background: var(--pt-main-colour);
 }
 
+/* Make sure YouTube doesn't fuck with these */
 .ytp-chapter-hover-container.ytp-exp-chapter-hover-container {
-    transform: scaleY(1) !important;
+    transform: scale(1) !important;
+}
+
+.ytp-progress-bar-container:hover:not([aria-disabled=true]) .ytp-exp-chapter-hover-effect {
+	transform: scaleY(1) !important;
+}
+
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect {
+	transform: scaleY(1) !important;
 }
 
 .ytp-chapter-hover-container.ytp-exp-chapter-hover-effect:hover {

diff --git a/css/2012.css b/css/2012.css
@@ -38,6 +38,7 @@
     bottom: 33px !important;
 }
 
+/* Make sure YouTube doesn't fuck with these */
 .ytp-chapter-hover-container.ytp-exp-chapter-hover-container {
     transform: scale(1) !important;
 }
@@ -46,21 +47,35 @@
 	transform: scaleY(1) !important;
 }
 
-.ytp-chrome-bottom .ytp-progress-bar:after {
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect {
+	transform: scaleY(1) !important;
+}
+
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect:hover {
+    transform: scaleY(1) !important;
+}
+
+/* this is only used in embeds & fullscreen */
+.ytp-embed .ytp-chrome-bottom .ytp-progress-bar:after,
+.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
     content: '';
     display: block;
     position: absolute;
-    width: 7em;
-    height: 100%;
+    width: 24px;
+    height: 10px;
     background: var(--pt-progress-bar-bg);
     margin-top: -10px;
     right: 0;
 	bottom: 0px;
     transform: scaleY(.6);
 }
 
+.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
+	width: 48px;
+}
+
 .ytp-chrome-bottom .ytp-progress-bar.finished:after {
-    background: var(--pt-main-colour);
+    background: var(--pt-main-colour) !important;
 }
 
 .ytp-chrome-bottom .ytp-progress-bar .ytp-load-progress {

diff --git a/css/2015.css b/css/2015.css
@@ -33,6 +33,7 @@
 	bottom: 34px !important;
 }
 
+/* Make sure YouTube doesn't fuck with these */
 .ytp-chapter-hover-container.ytp-exp-chapter-hover-container {
     transform: scale(1) !important;
 }
@@ -41,21 +42,35 @@
 	transform: scaleY(1) !important;
 }
 
-.ytp-chrome-bottom .ytp-progress-bar:after {
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect {
+	transform: scaleY(1) !important;
+}
+
+.ytp-chapter-hover-container.ytp-exp-chapter-hover-effect:hover {
+    transform: scaleY(1) !important;
+}
+
+/* this is only used in embeds & fullscreen */
+.ytp-embed .ytp-chrome-bottom .ytp-progress-bar:after,
+.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
     content: '';
     display: block;
     position: absolute;
-    width: 7em;
-    height: 100%;
+    width: 24px;
+    height: 10px;
     background: var(--pt-progress-bar-bg);
     margin-top: -10px;
     right: 0;
 	bottom: 0px;
     transform: scaleY(.6);
 }
 
+.ytp-big-mode .ytp-chrome-bottom .ytp-progress-bar:after {
+	width: 48px;
+}
+
 .ytp-chrome-bottom .ytp-progress-bar.finished:after {
-    background: var(--pt-main-colour);
+    background: var(--pt-main-colour) !important;
 }
 
 .ytp-chrome-bottom .ytp-progress-bar .ytp-load-progress {

diff --git a/css/3rd-party-style.css b/css/3rd-party-style.css
@@ -68,6 +68,6 @@ html[pseudo-static] #movie_player[aria-label="YouTube Video Player"] .ytp-chrome
 }
 
 /* Truffle */
-body[data-mogul-theater-mode] .html5-video-player .ytp-chrome-bottom {
+body[data-mogul-theater-mode] ytd-watch-flexy[theater]:has(ytd-live-chat-frame:not([collapsed])) .ytd-player .ytp-chrome-bottom {
     width: 100% !important;
-}
+} 
diff --git a/html/base.css b/html/base.css
@@ -19,6 +19,10 @@ body {
     margin: 0;
 }
 
+.important {
+    color: #ffc76f;
+}
+
 /* Content */
 #content {
     background: #202020;

diff --git a/html/update.html b/html/update.html
@@ -17,10 +17,31 @@
             </div>
 
             <div class="text">
-                <div class="v1dot5dot2">
+                <div class="customtube-warning">
+                    <h2 class="important">&#9888 Yet again another notice for CustomTube users! &#9888</h2>
+                    <i>Long-time users may remember a message similar to this, but there's different settings to change now!</i>
+                    <br>
+                    With the introduction of PlayerTube v1.6, there are new settings users need to change if they use CustomTube.
+                    <br>
+                    <b>If you use CustomTube, please open up it's settings and make sure to set the current settings that are listed below!</b>
+                    <img src="../img/customtube-settings.png" style=" display: block;padding: 1rem;margin: auto;">
+                    <br>
+                    As seen in the screenshot, please go to the "Watch Page" tab in CustomTube's settings, uncheck "Use Custom Player Size"
+                    in the "Video Player Size" selection.
+                    <br>
+                    And just to be sure you're 100% good, use the "Use current player" option under the "Video Player Style".
+                    <br>
+                    <br>
+                    The reason these settings should be changed is due to PlayerTube's new scripts for the YouTube Progress Bar,
+                    which allow the Progress Bar to fully extend out with the current video size.
+                    <br>
+                    <br>
+                    That's all for now, release notes are below!
+                </div>
+                <div class="v1dot6">
                     <h2 class="showVersion">PlayerTube has been updated to </h2>
-                    <li>Added <a href="https://github.com/ktg5/PlayerTube/issues/11">#11 - "Old Loading Spinner"</a></li>
-                    <li>Added <a href="https://github.com/ktg5/PlayerTube/issues/10">#10 - "Add Embed Play Button"</a></li>
+                    <li><b>Addition to the long-time issue of the Progress Bar not fully extending.</b> While not fully fixed, it's better</li>
+                    <li>Also finally fixed the long-time issue of PlayerTube's scripts running multiple times.</li>
                 </div>
 
                 <br>
@@ -37,6 +58,12 @@ <h2 class="showVersion">PlayerTube has been updated to </h2>
                 <br>
 
                 <h3>Past versions...</h3>
+                <div class="v1dot5dot2">
+                    <div style="font-weight: 600;">v1.5.2</div>
+                    <li>Added <a href="https://github.com/ktg5/PlayerTube/issues/11">#11 - "Old Loading Spinner"</a></li>
+                    <li>Added <a href="https://github.com/ktg5/PlayerTube/issues/10">#10 - "Add Embed Play Button"</a></li>
+                </div>
+                <br>
                 <div class="v1dot5dot1">
                     <div style="font-weight: 600;">v1.5.1</div>
                     somewhat a big minor update lol

diff --git a/img/customtube-settings.png b/img/customtube-settings.png
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.5.2.2",
+    "version": "1.6",
     "homepage_url": "https://github.com/ktg5/PlayerTube",
 
     "background": {
@@ -23,21 +23,31 @@
 
     "content_scripts": [
         {
-            "matches": ["*://*.youtube.com/*", "*://*.youtube.com/embed/*"],
+            "matches": ["*://*.youtube.com/*"],
+            "js": ["src/setup.js"],
+            "run_at": "document_start"
+        },
+        {
+            "matches": ["*://*.youtube.com/*"],
+            "js": ["src/main.js"]
+        },
+
+        {
+            "matches": ["*://*.youtube.com/embed/*"],
             "js": ["src/setup.js"],
             "run_at": "document_start",
             "all_frames": true
         },
         {
-            "matches": ["*://*.youtube.com/*", "*://*.youtube.com/embed/*"],
+            "matches": ["*://*.youtube.com/embed/*"],
             "js": ["src/main.js"],
             "all_frames": true
         }
     ],
 
     "web_accessible_resources": [{
         "matches": ["*://*.youtube.com/*"],
-        "resources": ["css/*"]
+        "resources": ["css/*", "src/*"]
     }],
 
     "permissions": [

diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,9 @@ var currentPath = window.location.href;
 var progressbar = document.getElementsByClassName('ytp-progress-bar')[0];
 var customTheme = userConfig.customTheme;
 
+// Put config in a element for certain scripts
+document.body.insertAdjacentHTML('afterbegin', `<script id="playertube-config">${JSON.stringify(userConfig)}</script>`);
+
 // #################################
 
 // LOADING / SPINNER / BUFFER thingy whatever
@@ -22,7 +25,6 @@ var tempinterval = setInterval(() => {
 
 // MOVING ELEMENTS
 function moveElement(element, targetDiv, pasteDiv) {
-    console.log(`%cPlayerTube moveElement function: ${targetDiv.contains(element)}`, styles2)
     if (pasteDiv.contains(element)) {
         return;
     } else if (targetDiv.contains(element)) {
@@ -34,22 +36,19 @@ function moveElement(element, targetDiv, pasteDiv) {
 };
 
 // Heartbeats
-/// Make sure script reruns on page update.
-/// And make check progress bar value in case to change it.
 setInterval(() => {
-    // Check window href
-    if (window.location.href == currentPath) {
-        return;
-    } else {
+    /// Make sure script reruns on page update.
+    if (window.location.href !== currentPath) {
         startPlayer();
         progressBarChanger();
         currentPath = window.location.href;
     }
-}, 1000);
-/// Fake bar heartbeat
-if (userConfig.toggleFadeOut !== true || userConfig.fakeBarToggle !== false) {
-    setInterval(() => {
-        if (!document.getElementsByClassName('video-stream html5-main-video')[0] || document.getElementsByClassName('video-stream html5-main-video')[0].paused == true) {
+
+    /// Fake bar heartbeat
+    if (userConfig.toggleFadeOut !== true || userConfig.fakeBarToggle !== false) {
+        if (!document.getElementsByClassName('video-stream html5-main-video')[0] 
+        || document.getElementsByClassName('video-stream html5-main-video')[0].paused == true
+        || !document.getElementById('playertube-fake-bar')) {
             return;
         } else {
             // Video to pull info off of
@@ -67,11 +66,10 @@ if (userConfig.toggleFadeOut !== true || userConfig.fakeBarToggle !== false) {
             document.getElementById('playertube-fake-bar').style.setProperty('--pt-fakebar-current', `${(ytVideoCurrent / ytVideoFull * 100).toFixed(2)}%`)
             document.getElementById('playertube-fake-bar').style.setProperty('--pt-fakebar-loaded', `${(ytBuffered / ytVideoFull * 100).toFixed(2)}%`)
         }
-    }, 1000);
-}
+    }
+}, 1000);
 
-// This is used to make the progress look like
-// it goes all the way.
+// This is now used in embeds
 function progressBarChanger() {
     setInterval(() => {
         // Check progress bar
@@ -96,6 +94,15 @@ function progressBarChanger() {
 startPlayer();
 progressBarChanger();
 
+// Insert resizing progress bar script
+setTimeout(() => {
+    var srcDoc = document.createElement('script');
+    srcDoc.id = 'playertube-js';
+    srcDoc.className = 'playertube-resize-bar';
+    srcDoc.src = runtime.getURL(`src/resize.js`);
+    document.body.append(srcDoc);
+}, 3000);
+
 // You might be asking, "why is this a thing?"
 // You'd only understand if you were dealing
 // CSS.