Added seperated theme setting for Piped #147

5 files changed, 101 insertions, 80 deletions

diff --git a/src/assets/javascripts/helpers/youtube/options.js b/src/assets/javascripts/helpers/youtube/options.js
index 2b0fa6c0..a5aa413d 100644
--- a/src/assets/javascripts/helpers/youtube/options.js
+++ b/src/assets/javascripts/helpers/youtube/options.js
@@ -114,6 +114,9 @@ export const getPipedSelectedSkip = () => pipedSelectedSkip;
 export let pipedSponsorblock;
 export const getPipedSponsorblock = () => pipedSponsorblock;
 
+export let pipedDdlTheme;
+export const getPipedDdlTheme = () => pipedDdlTheme;
+
 export let pipedWatchHistory;
 export const getPipedWatchHistory = () => pipedWatchHistory;
 
@@ -162,6 +165,7 @@ export async function initOptions() {
                     "pipedRegion",
                     "pipedSelectedSkip",
                     "pipedSponsorblock",
+                    "pipedDdlTheme",
                     "pipedWatchHistory",
 
                     "pipedMaterialSkipToLastPoint",
@@ -206,6 +210,7 @@ export async function initOptions() {
 
                     pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
                     pipedSponsorblock = r.pipedSponsorblock ?? true;
+                    pipedDdlTheme = r.pipedDdlTheme ?? 'auto';
                     pipedWatchHistory = r.pipedWatchHistory ?? false;
 
                     pipedMaterialSkipToLastPoint = r.pipedMaterialSkipToLastPoint ?? true;
diff --git a/src/assets/javascripts/helpers/youtube/piped-preferences.js b/src/assets/javascripts/helpers/youtube/piped-preferences.js
index 6548a2bb..3f9572dc 100644
--- a/src/assets/javascripts/helpers/youtube/piped-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/piped-preferences.js
@@ -18,6 +18,7 @@ browser.storage.local.get(
         "pipedRegion",
         "pipedSelectedSkip",
         "pipedSponsorblock",
+        "pipedDdlTheme",
         "pipedWatchHistory",
     ],
     r => {
@@ -37,6 +38,7 @@ browser.storage.local.get(
         let pipedRegion = r.pipedRegion ?? "US";
         let pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
         let pipedSponsorblock = r.pipedSponsorblock ?? true;
+        let pipedDdlTheme = r.pipedDdlTheme ?? 'auto';
         let pipedWatchHistory = r.pipedWatchHistory ?? false;
 
         localStorage.setItem("bufferGoal", pipedBufferGoal.toString());
@@ -52,7 +54,7 @@ browser.storage.local.get(
         localStorage.setItem("region", pipedRegion);
         localStorage.setItem("selectedSkip", pipedSelectedSkip);
         localStorage.setItem("sponsorblock", pipedSponsorblock);
-        localStorage.setItem("theme", theme);
+        localStorage.setItem("theme", pipedDdlTheme);
         localStorage.setItem("volume", youtubeVolume / 100);
         localStorage.setItem("watchHistory", pipedWatchHistory);
     }
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 4dd71480..4574d6e5 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -36,6 +36,7 @@ import {
   getPipedRegion,
   getPipedSelectedSkip,
   getPipedSponsorblock,
+  getPipedDdlTheme,
   getPipedWatchHistory,
   volume, getVolume, setVolume,
   youtubeAutoplay, getAutoplay, setAutoplay,
@@ -687,6 +688,7 @@ export default {
   getPipedRegion,
   getPipedSelectedSkip,
   getPipedSponsorblock,
+  getPipedDdlTheme,
   getPipedWatchHistory,
   getPipedMaterialSkipToLastPoint,
 
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index e0495e7b..bb851ba0 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -1,37 +1,38 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let pipedElement = document.getElementById('piped');
+let piped = document.getElementById('piped');
 
-let pipedListenElement = pipedElement.getElementsByClassName("listen")[0];
-let pipedQualityElement = pipedElement.getElementsByClassName("quality")[0];
-let pipedBufferGoalElement = pipedElement.getElementsByClassName("bufferGoal")[0];
-let pipedRegionElement = pipedElement.getElementsByClassName("region")[0];
-let pipedHomepageElement = pipedElement.getElementsByClassName("homepage")[0];
-let pipedCommentsElement = pipedElement.getElementsByClassName("comments")[0];
-let pipedMinimizeDescriptionElement = pipedElement.getElementsByClassName("minimizeDescription")[0];
-let pipedWatchHistoryElement = pipedElement.getElementsByClassName("watchHistory")[0];
-let pipedDisableLBRYElement = pipedElement.getElementsByClassName("disableLBRY")[0];
-let pipedProxyLBRYElement = pipedElement.getElementsByClassName("proxyLBRY")[0];
+let pipedListen = piped.getElementsByClassName("listen")[0];
+let pipedQuality = piped.getElementsByClassName("quality")[0];
+let pipedBufferGoal = piped.getElementsByClassName("bufferGoal")[0];
+let pipedRegion = piped.getElementsByClassName("region")[0];
+let pipedHomepage = piped.getElementsByClassName("homepage")[0];
+let pipedComments = piped.getElementsByClassName("comments")[0];
+let pipedMinimizeDescription = piped.getElementsByClassName("minimizeDescription")[0];
+let pipedWatchHistory = piped.getElementsByClassName("watchHistory")[0];
+let pipedDisableLBRY = piped.getElementsByClassName("disableLBRY")[0];
+let pipedProxyLBRY = piped.getElementsByClassName("proxyLBRY")[0];
 
-let pipedSelectedSkipSponsorElement = pipedElement.getElementsByClassName("selectedSkip-sponsor")[0];
-let pipedSelectedSkipIntroElement = pipedElement.getElementsByClassName("selectedSkip-intro")[0];
-let pipedSelectedSkipOutroElement = pipedElement.getElementsByClassName("selectedSkip-outro")[0];
-let pipedSelectedSkipPreviewElement = pipedElement.getElementsByClassName("selectedSkip-preview")[0];
-let pipedSelectedSkipInteractionElement = pipedElement.getElementsByClassName("selectedSkip-interaction")[0];
-let pipedSelectedSkipSelfpromoElement = pipedElement.getElementsByClassName("selectedSkip-selfpromo")[0];
-let pipedSelectedSkipMusicOfftopicElement = pipedElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
-let pipedSelectedSkipPoiHighlightElement = pipedElement.getElementsByClassName("selectedSkip-poi_highlight")[0];
-let pipedSelectedSkipFillerElement = pipedElement.getElementsByClassName("selectedSkip-filler")[0];
+let pipedSelectedSkipSponsor = piped.getElementsByClassName("selectedSkip-sponsor")[0];
+let pipedSelectedSkipIntro = piped.getElementsByClassName("selectedSkip-intro")[0];
+let pipedSelectedSkipOutro = piped.getElementsByClassName("selectedSkip-outro")[0];
+let pipedSelectedSkipPreview = piped.getElementsByClassName("selectedSkip-preview")[0];
+let pipedSelectedSkipInteraction = piped.getElementsByClassName("selectedSkip-interaction")[0];
+let pipedSelectedSkipSelfpromo = piped.getElementsByClassName("selectedSkip-selfpromo")[0];
+let pipedSelectedSkipMusicOfftopic = piped.getElementsByClassName("selectedSkip-music_offtopic")[0];
+let pipedSelectedSkipPoiHighlight = piped.getElementsByClassName("selectedSkip-poi_highlight")[0];
+let pipedSelectedSkipFiller = piped.getElementsByClassName("selectedSkip-filler")[0];
 
-let pipedSponsorblockElement = pipedElement.getElementsByClassName("sponsorblock")[0];
-let pipedEnabledCodecsElement = pipedElement.getElementsByClassName("enabledCodecs")[0];
-let autoplayElement = pipedElement.getElementsByClassName("youtubeAutoplay")[0];
+let pipedDdlTheme = piped.getElementsByClassName("ddlTheme")[0];
+let pipedSponsorblock = piped.getElementsByClassName("sponsorblock")[0];
+let pipedEnabledCodecs = piped.getElementsByClassName("enabledCodecs")[0];
+let autoplay = piped.getElementsByClassName("youtubeAutoplay")[0];
 
-let volumeElement = pipedElement.getElementsByClassName("volume")[0];
-let volumeValueElement = pipedElement.getElementsByClassName("volume-value")[0];
+let volume = piped.getElementsByClassName("volume")[0];
+let volumeValue = piped.getElementsByClassName("volume-value")[0];
 
-volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
+volume.addEventListener("input", () => volumeValue.textContent = `${volume.value}%`);
 function selectSkipModify(value, boolean) {
     if (boolean && !selectSkip.includes(value)) {
         selectSkip.push(value);
@@ -42,37 +43,38 @@ function selectSkipModify(value, boolean) {
     }
 }
 let selectSkip = [];
-pipedElement.addEventListener("change", async () => {
+piped.addEventListener("change", async () => {
     console.log("changed piped settings");
     let pipedEnabledCodecsResult = [];
-    for (const opt of pipedEnabledCodecsElement.options)
+    for (const opt of pipedEnabledCodecs.options)
         if (opt.selected) pipedEnabledCodecsResult.push(opt.value);
 
-    selectSkipModify('sponsor', pipedSelectedSkipSponsorElement.checked);
-    selectSkipModify('intro', pipedSelectedSkipIntroElement.checked);
-    selectSkipModify('outro', pipedSelectedSkipOutroElement.checked);
-    selectSkipModify('preview', pipedSelectedSkipPreviewElement.checked);
-    selectSkipModify('interaction', pipedSelectedSkipInteractionElement.checked);
-    selectSkipModify('selfpromo', pipedSelectedSkipSelfpromoElement.checked);
-    selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopicElement.checked);
-    selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlightElement.checked);
-    selectSkipModify('filler', pipedSelectedSkipFillerElement.checked);
+    selectSkipModify('sponsor', pipedSelectedSkipSponsor.checked);
+    selectSkipModify('intro', pipedSelectedSkipIntro.checked);
+    selectSkipModify('outro', pipedSelectedSkipOutro.checked);
+    selectSkipModify('preview', pipedSelectedSkipPreview.checked);
+    selectSkipModify('interaction', pipedSelectedSkipInteraction.checked);
+    selectSkipModify('selfpromo', pipedSelectedSkipSelfpromo.checked);
+    selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopic.checked);
+    selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlight.checked);
+    selectSkipModify('filler', pipedSelectedSkipFiller.checked);
 
     await youtubeHelper.setYoutubeSettings({
-        pipedQuality: pipedQualityElement.value,
-        pipedBufferGoal: pipedBufferGoalElement.value,
-        pipedRegion: pipedRegionElement.value,
-        pipedHomepage: pipedHomepageElement.value,
-        pipedComments: pipedCommentsElement.checked,
-        pipedMinimizeDescription: pipedMinimizeDescriptionElement.checked,
-        youtubeAutoplay: autoplayElement.checked,
-        pipedWatchHistory: pipedWatchHistoryElement.checked,
-        pipedDisableLBRY: pipedDisableLBRYElement.checked,
-        pipedProxyLBRY: pipedProxyLBRYElement.checked,
-        youtubeVolume: volumeElement.value,
-        pipedSponsorblock: pipedSponsorblockElement.checked,
+        pipedQuality: pipedQuality.value,
+        pipedBufferGoal: pipedBufferGoal.value,
+        pipedRegion: pipedRegion.value,
+        pipedHomepage: pipedHomepage.value,
+        pipedComments: pipedComments.checked,
+        pipedMinimizeDescription: pipedMinimizeDescription.checked,
+        youtubeAutoplay: autoplay.checked,
+        pipedWatchHistory: pipedWatchHistory.checked,
+        pipedDisableLBRY: pipedDisableLBRY.checked,
+        pipedProxyLBRY: pipedProxyLBRY.checked,
+        youtubeVolume: volume.value,
+        pipedSponsorblock: pipedSponsorblock.checked,
+        pipedDdlTheme: pipedDdlTheme.value,
         pipedEnabledCodecs: pipedEnabledCodecsResult,
-        youtubeListen: pipedListenElement.checked,
+        youtubeListen: pipedListen.checked,
         pipedSelectedSkip: selectSkip,
     });
     init();
@@ -80,32 +82,33 @@ pipedElement.addEventListener("change", async () => {
 
 function init() {
     youtubeHelper.init().then(() => {
-        pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
+        pipedSponsorblock.checked = youtubeHelper.getPipedSponsorblock();
+        pipedDdlTheme.value = youtubeHelper.getPipedDdlTheme();
         selectSkip = youtubeHelper.getPipedSelectedSkip();
-        pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
-        pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro');
-        pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro');
-        pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
-        autoplayElement.checked = youtubeHelper.getAutoplay();
-        pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
-        pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
-        pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
-        pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
-        pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler');
-        pipedListenElement.checked = youtubeHelper.getYoutubeListen();
-        pipedQualityElement.value = youtubeHelper.getPipedQuality();
-        pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal();
-        pipedRegionElement.value = youtubeHelper.getPipedRegion();
-        pipedHomepageElement.value = youtubeHelper.getPipedHomepage();
-        pipedCommentsElement.checked = youtubeHelper.getPipedComments();
-        pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription();
-        pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory();
-        pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs();
-        pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
-        pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
+        pipedSelectedSkipSponsor.checked = selectSkip.includes('sponsor');
+        pipedSelectedSkipIntro.checked = selectSkip.includes('intro');
+        pipedSelectedSkipOutro.checked = selectSkip.includes('outro');
+        pipedSelectedSkipPreview.checked = selectSkip.includes('preview');
+        autoplay.checked = youtubeHelper.getAutoplay();
+        pipedSelectedSkipInteraction.checked = selectSkip.includes('interaction');
+        pipedSelectedSkipSelfpromo.checked = selectSkip.includes('selfpromo');
+        pipedSelectedSkipMusicOfftopic.checked = selectSkip.includes('music_offtopic');
+        pipedSelectedSkipPoiHighlight.checked = selectSkip.includes('poi_highlight');
+        pipedSelectedSkipFiller.checked = selectSkip.includes('filler');
+        pipedListen.checked = youtubeHelper.getYoutubeListen();
+        pipedQuality.value = youtubeHelper.getPipedQuality();
+        pipedBufferGoal.value = youtubeHelper.getPipedBufferGoal();
+        pipedRegion.value = youtubeHelper.getPipedRegion();
+        pipedHomepage.value = youtubeHelper.getPipedHomepage();
+        pipedComments.checked = youtubeHelper.getPipedComments();
+        pipedMinimizeDescription.checked = youtubeHelper.getPipedMinimizeDescription();
+        pipedWatchHistory.checked = youtubeHelper.getPipedWatchHistory();
+        pipedEnabledCodecs.value = youtubeHelper.getPipedEnabledCodecs();
+        pipedDisableLBRY.checked = youtubeHelper.getPipedDisableLBRY();
+        pipedProxyLBRY.checked = youtubeHelper.getPipedProxyLBRY();
 
-        volumeElement.value = youtubeHelper.getVolume();
-        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+        volume.value = youtubeHelper.getVolume();
+        volumeValue.textContent = `${youtubeHelper.getVolume()}%`;
 
         commonHelper.processDefaultCustomInstances(
             'piped',
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 17018bfe..2bdf5993 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -940,11 +940,6 @@
         <hr>
 
         <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
-          <input class="youtubeAutoplay" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
           <h4>
             <x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
           </h4>
@@ -1002,6 +997,20 @@
         </div>
 
         <div class="some-block option-block">
+          <h4 data-localise="__MSG_theme__">Theme</h4>
+          <select class="ddlTheme">
+            <option value="auto">Auto</option>
+            <option value="dark">Dark</option>
+            <option value="light">Light</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
+          <input class="youtubeAutoplay" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
           <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
           <input class="listen" type="checkbox" />
         </div>