Closes #1000

Author: ParticleCore

src/chrome/css/content-script.css

@@ -109,6 +109,12 @@ html[super-theater] #page-manager.ytd-app:has( > [theater]:not([hidden])) ytd-li
 }
 /* end | super theater */
 
+/* ini | super theater scrollbar */
+html[super-theater][super-theater-scrollbar]:has( ytd-watch-flexy[theater]:not([hidden])) {
+    scrollbar-width: none;
+}
+/* end | super theater scrollbar */
+
 /* ini | hide end screen cards */
 .iridium-hide-end-screen-cards #movie_player:hover .ytp-ce-element:not(:hover) {
     opacity: 0;

src/chrome/html/options.html

@@ -489,6 +489,16 @@
                             <div class="settingDescription">Switching to theater mode will make the player cover the full browser while allowing the page to be scrolled</div>
                         </div>
                     </div>
+                    <div class="setting" data-id="superTheaterScrollbar">
+                        <label class="switch">
+                            <input data-setting="superTheaterScrollbar" type="checkbox">
+                            <span class="slider"></span>
+                        </label>
+                        <div class="settingDescription">
+                            <div class="settingDescription highlight">Show super theater scrollbar</div>
+                            <div class="settingDescription">Controls the vertical scrollbar visibility while in super theater mode</div>
+                        </div>
+                    </div>
                     <div class="setting" data-id="alwaysVisible">
                         <label class="switch">
                             <input data-setting="alwaysVisible" type="checkbox">

src/chrome/js/background-inject.js

@@ -1121,6 +1121,22 @@ function mainScript(extensionId, SettingData, defaultSettings) {
 
     })();
 
+    const FeatureSuperTheaterScrollbar = (() => {
+
+        const update = () => {
+            if (iridiumSettings.superTheaterScrollbar) {
+                document.documentElement.removeAttribute("super-theater-scrollbar");
+            } else {
+                document.documentElement.setAttribute("super-theater-scrollbar", "");
+            }
+        }
+
+        FeatureUpdater.register(SettingData.superTheaterScrollbar.id, update);
+
+        return {};
+
+    })();
+
     const FeatureAlwaysVisible = (() => {
 
         let moviePlayer = null;

src/chrome/js/chrome-wrapper.js

@@ -110,6 +110,10 @@
             id: "superTheater",
             default: true,
         },
+        superTheaterScrollbar: {
+            id: "superTheaterScrollbar",
+            default: true,
+        },
         defaultQuality: {
             id: "defaultQuality",
             default: "auto",

src/chrome/js/content-script.js

@@ -107,6 +107,10 @@ const SettingData = {
         id: "superTheater",
         default: true,
     },
+    superTheaterScrollbar: {
+        id: "superTheaterScrollbar",
+        default: true,
+    },
     defaultQuality: {
         id: "defaultQuality",
         default: "auto",

src/chrome/js/options.js

@@ -337,6 +337,20 @@ const Manager = {
 
         Util.updateSingleSetting(settingId, newState);
 
+    },
+    updateSuperTheaterScrollbar: (newState, userInteraction) => {
+
+        const settingId = SettingData.superTheaterScrollbar.id;
+        const ui = document.querySelector(`[data-setting=${settingId}]`);
+
+        if (ui != null && ui.checked !== newState) {
+            ui.checked = newState;
+        }
+
+        if (!userInteraction) return;
+
+        Util.updateSingleSetting(settingId, newState);
+
     },
     updateAutoplay: (newState, userInteraction) => {
 
@@ -811,6 +825,9 @@ const Util = {
             case SettingData.superTheater.id:
                 Manager.updateSuperTheater(value, userInteraction);
                 break;
+            case SettingData.superTheaterScrollbar.id:
+                Manager.updateSuperTheaterScrollbar(value, userInteraction);
+                break;
             case SettingData.defaultQuality.id:
                 Manager.updateDefaultQuality(value, userInteraction);
                 break;

src/chrome/js/setting-data.js

@@ -103,6 +103,10 @@ const SettingData = {
         id: "superTheater",
         default: true,
     },
+    superTheaterScrollbar: {
+        id: "superTheaterScrollbar",
+        default: true,
+    },
     defaultQuality: {
         id: "defaultQuality",
         default: "auto",

src/firefox/css/content-script.css

@@ -109,6 +109,12 @@ html[super-theater] #page-manager.ytd-app:has( > [theater]:not([hidden])) ytd-li
 }
 /* end | super theater */
 
+/* ini | super theater scrollbar */
+html[super-theater][super-theater-scrollbar]:has( ytd-watch-flexy[theater]:not([hidden])) {
+    scrollbar-width: none;
+}
+/* end | super theater scrollbar */
+
 /* ini | hide end screen cards */
 .iridium-hide-end-screen-cards #movie_player:hover .ytp-ce-element:not(:hover) {
     opacity: 0;

src/firefox/html/options.html

@@ -489,6 +489,16 @@
                             <div class="settingDescription">Switching to theater mode will make the player cover the full browser while allowing the page to be scrolled</div>
                         </div>
                     </div>
+                    <div class="setting" data-id="superTheaterScrollbar">
+                        <label class="switch">
+                            <input data-setting="superTheaterScrollbar" type="checkbox">
+                            <span class="slider"></span>
+                        </label>
+                        <div class="settingDescription">
+                            <div class="settingDescription highlight">Show super theater scrollbar</div>
+                            <div class="settingDescription">Controls the vertical scrollbar visibility while in super theater mode</div>
+                        </div>
+                    </div>
                     <div class="setting" data-id="alwaysVisible">
                         <label class="switch">
                             <input data-setting="alwaysVisible" type="checkbox">

src/firefox/js/background-inject.js

@@ -1121,6 +1121,22 @@ function mainScript(extensionId, SettingData, defaultSettings) {
 
     })();
 
+    const FeatureSuperTheaterScrollbar = (() => {
+
+        const update = () => {
+            if (iridiumSettings.superTheaterScrollbar) {
+                document.documentElement.removeAttribute("super-theater-scrollbar");
+            } else {
+                document.documentElement.setAttribute("super-theater-scrollbar", "");
+            }
+        }
+
+        FeatureUpdater.register(SettingData.superTheaterScrollbar.id, update);
+
+        return {};
+
+    })();
+
     const FeatureAlwaysVisible = (() => {
 
         let moviePlayer = null;