Skip to content

Commit d207ff2

Browse files
ManeraKaiManeraKai
committed
Added seperated theme setting for Piped #147 
1 parent 1b6d6fa commit d207ff2

File tree

5 files changed

+101
-80
lines changed

5 files changed

+101
-80
lines changed

‎src/assets/javascripts/helpers/youtube/options.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,9 @@ export const getPipedSelectedSkip = () => pipedSelectedSkip;
114114
export let pipedSponsorblock;
115115
export const getPipedSponsorblock = () => pipedSponsorblock;
116116

117+
export let pipedDdlTheme;
118+
export const getPipedDdlTheme = () => pipedDdlTheme;
119+
117120
export let pipedWatchHistory;
118121
export const getPipedWatchHistory = () => pipedWatchHistory;
119122

@@ -162,6 +165,7 @@ export async function initOptions() {
162165
"pipedRegion",
163166
"pipedSelectedSkip",
164167
"pipedSponsorblock",
168+
"pipedDdlTheme",
165169
"pipedWatchHistory",
166170

167171
"pipedMaterialSkipToLastPoint",
@@ -206,6 +210,7 @@ export async function initOptions() {
206210

207211
pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
208212
pipedSponsorblock = r.pipedSponsorblock ?? true;
213+
pipedDdlTheme = r.pipedDdlTheme ?? 'auto';
209214
pipedWatchHistory = r.pipedWatchHistory ?? false;
210215

211216
pipedMaterialSkipToLastPoint = r.pipedMaterialSkipToLastPoint ?? true;

‎src/assets/javascripts/helpers/youtube/piped-preferences.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ browser.storage.local.get(
1818
"pipedRegion",
1919
"pipedSelectedSkip",
2020
"pipedSponsorblock",
21+
"pipedDdlTheme",
2122
"pipedWatchHistory",
2223
],
2324
r => {
@@ -37,6 +38,7 @@ browser.storage.local.get(
3738
let pipedRegion = r.pipedRegion ?? "US";
3839
let pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
3940
let pipedSponsorblock = r.pipedSponsorblock ?? true;
41+
let pipedDdlTheme = r.pipedDdlTheme ?? 'auto';
4042
let pipedWatchHistory = r.pipedWatchHistory ?? false;
4143

4244
localStorage.setItem("bufferGoal", pipedBufferGoal.toString());
@@ -52,7 +54,7 @@ browser.storage.local.get(
5254
localStorage.setItem("region", pipedRegion);
5355
localStorage.setItem("selectedSkip", pipedSelectedSkip);
5456
localStorage.setItem("sponsorblock", pipedSponsorblock);
55-
localStorage.setItem("theme", theme);
57+
localStorage.setItem("theme", pipedDdlTheme);
5658
localStorage.setItem("volume", youtubeVolume / 100);
5759
localStorage.setItem("watchHistory", pipedWatchHistory);
5860
}

‎src/assets/javascripts/helpers/youtube/youtube.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
getPipedRegion,
3737
getPipedSelectedSkip,
3838
getPipedSponsorblock,
39+
getPipedDdlTheme,
3940
getPipedWatchHistory,
4041
volume, getVolume, setVolume,
4142
youtubeAutoplay, getAutoplay, setAutoplay,
@@ -687,6 +688,7 @@ export default {
687688
getPipedRegion,
688689
getPipedSelectedSkip,
689690
getPipedSponsorblock,
691+
getPipedDdlTheme,
690692
getPipedWatchHistory,
691693
getPipedMaterialSkipToLastPoint,
692694

‎src/pages/options/youtube/piped.js‎

Lines changed: 77 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
11
import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
22
import commonHelper from "../../../assets/javascripts/helpers/common.js";
33

4-
let pipedElement = document.getElementById('piped');
4+
let piped = document.getElementById('piped');
55

6-
let pipedListenElement = pipedElement.getElementsByClassName("listen")[0];
7-
let pipedQualityElement = pipedElement.getElementsByClassName("quality")[0];
8-
let pipedBufferGoalElement = pipedElement.getElementsByClassName("bufferGoal")[0];
9-
let pipedRegionElement = pipedElement.getElementsByClassName("region")[0];
10-
let pipedHomepageElement = pipedElement.getElementsByClassName("homepage")[0];
11-
let pipedCommentsElement = pipedElement.getElementsByClassName("comments")[0];
12-
let pipedMinimizeDescriptionElement = pipedElement.getElementsByClassName("minimizeDescription")[0];
13-
let pipedWatchHistoryElement = pipedElement.getElementsByClassName("watchHistory")[0];
14-
let pipedDisableLBRYElement = pipedElement.getElementsByClassName("disableLBRY")[0];
15-
let pipedProxyLBRYElement = pipedElement.getElementsByClassName("proxyLBRY")[0];
6+
let pipedListen = piped.getElementsByClassName("listen")[0];
7+
let pipedQuality = piped.getElementsByClassName("quality")[0];
8+
let pipedBufferGoal = piped.getElementsByClassName("bufferGoal")[0];
9+
let pipedRegion = piped.getElementsByClassName("region")[0];
10+
let pipedHomepage = piped.getElementsByClassName("homepage")[0];
11+
let pipedComments = piped.getElementsByClassName("comments")[0];
12+
let pipedMinimizeDescription = piped.getElementsByClassName("minimizeDescription")[0];
13+
let pipedWatchHistory = piped.getElementsByClassName("watchHistory")[0];
14+
let pipedDisableLBRY = piped.getElementsByClassName("disableLBRY")[0];
15+
let pipedProxyLBRY = piped.getElementsByClassName("proxyLBRY")[0];
1616

17-
let pipedSelectedSkipSponsorElement = pipedElement.getElementsByClassName("selectedSkip-sponsor")[0];
18-
let pipedSelectedSkipIntroElement = pipedElement.getElementsByClassName("selectedSkip-intro")[0];
19-
let pipedSelectedSkipOutroElement = pipedElement.getElementsByClassName("selectedSkip-outro")[0];
20-
let pipedSelectedSkipPreviewElement = pipedElement.getElementsByClassName("selectedSkip-preview")[0];
21-
let pipedSelectedSkipInteractionElement = pipedElement.getElementsByClassName("selectedSkip-interaction")[0];
22-
let pipedSelectedSkipSelfpromoElement = pipedElement.getElementsByClassName("selectedSkip-selfpromo")[0];
23-
let pipedSelectedSkipMusicOfftopicElement = pipedElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
24-
let pipedSelectedSkipPoiHighlightElement = pipedElement.getElementsByClassName("selectedSkip-poi_highlight")[0];
25-
let pipedSelectedSkipFillerElement = pipedElement.getElementsByClassName("selectedSkip-filler")[0];
17+
let pipedSelectedSkipSponsor = piped.getElementsByClassName("selectedSkip-sponsor")[0];
18+
let pipedSelectedSkipIntro = piped.getElementsByClassName("selectedSkip-intro")[0];
19+
let pipedSelectedSkipOutro = piped.getElementsByClassName("selectedSkip-outro")[0];
20+
let pipedSelectedSkipPreview = piped.getElementsByClassName("selectedSkip-preview")[0];
21+
let pipedSelectedSkipInteraction = piped.getElementsByClassName("selectedSkip-interaction")[0];
22+
let pipedSelectedSkipSelfpromo = piped.getElementsByClassName("selectedSkip-selfpromo")[0];
23+
let pipedSelectedSkipMusicOfftopic = piped.getElementsByClassName("selectedSkip-music_offtopic")[0];
24+
let pipedSelectedSkipPoiHighlight = piped.getElementsByClassName("selectedSkip-poi_highlight")[0];
25+
let pipedSelectedSkipFiller = piped.getElementsByClassName("selectedSkip-filler")[0];
2626

27-
let pipedSponsorblockElement = pipedElement.getElementsByClassName("sponsorblock")[0];
28-
let pipedEnabledCodecsElement = pipedElement.getElementsByClassName("enabledCodecs")[0];
29-
let autoplayElement = pipedElement.getElementsByClassName("youtubeAutoplay")[0];
27+
let pipedDdlTheme = piped.getElementsByClassName("ddlTheme")[0];
28+
let pipedSponsorblock = piped.getElementsByClassName("sponsorblock")[0];
29+
let pipedEnabledCodecs = piped.getElementsByClassName("enabledCodecs")[0];
30+
let autoplay = piped.getElementsByClassName("youtubeAutoplay")[0];
3031

31-
let volumeElement = pipedElement.getElementsByClassName("volume")[0];
32-
let volumeValueElement = pipedElement.getElementsByClassName("volume-value")[0];
32+
let volume = piped.getElementsByClassName("volume")[0];
33+
let volumeValue = piped.getElementsByClassName("volume-value")[0];
3334

34-
volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
35+
volume.addEventListener("input", () => volumeValue.textContent = `${volume.value}%`);
3536
function selectSkipModify(value, boolean) {
3637
if (boolean && !selectSkip.includes(value)) {
3738
selectSkip.push(value);
@@ -42,70 +43,72 @@ function selectSkipModify(value, boolean) {
4243
}
4344
}
4445
let selectSkip = [];
45-
pipedElement.addEventListener("change", async () => {
46+
piped.addEventListener("change", async () => {
4647
console.log("changed piped settings");
4748
let pipedEnabledCodecsResult = [];
48-
for (const opt of pipedEnabledCodecsElement.options)
49+
for (const opt of pipedEnabledCodecs.options)
4950
if (opt.selected) pipedEnabledCodecsResult.push(opt.value);
5051

51-
selectSkipModify('sponsor', pipedSelectedSkipSponsorElement.checked);
52-
selectSkipModify('intro', pipedSelectedSkipIntroElement.checked);
53-
selectSkipModify('outro', pipedSelectedSkipOutroElement.checked);
54-
selectSkipModify('preview', pipedSelectedSkipPreviewElement.checked);
55-
selectSkipModify('interaction', pipedSelectedSkipInteractionElement.checked);
56-
selectSkipModify('selfpromo', pipedSelectedSkipSelfpromoElement.checked);
57-
selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopicElement.checked);
58-
selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlightElement.checked);
59-
selectSkipModify('filler', pipedSelectedSkipFillerElement.checked);
52+
selectSkipModify('sponsor', pipedSelectedSkipSponsor.checked);
53+
selectSkipModify('intro', pipedSelectedSkipIntro.checked);
54+
selectSkipModify('outro', pipedSelectedSkipOutro.checked);
55+
selectSkipModify('preview', pipedSelectedSkipPreview.checked);
56+
selectSkipModify('interaction', pipedSelectedSkipInteraction.checked);
57+
selectSkipModify('selfpromo', pipedSelectedSkipSelfpromo.checked);
58+
selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopic.checked);
59+
selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlight.checked);
60+
selectSkipModify('filler', pipedSelectedSkipFiller.checked);
6061

6162
await youtubeHelper.setYoutubeSettings({
62-
pipedQuality: pipedQualityElement.value,
63-
pipedBufferGoal: pipedBufferGoalElement.value,
64-
pipedRegion: pipedRegionElement.value,
65-
pipedHomepage: pipedHomepageElement.value,
66-
pipedComments: pipedCommentsElement.checked,
67-
pipedMinimizeDescription: pipedMinimizeDescriptionElement.checked,
68-
youtubeAutoplay: autoplayElement.checked,
69-
pipedWatchHistory: pipedWatchHistoryElement.checked,
70-
pipedDisableLBRY: pipedDisableLBRYElement.checked,
71-
pipedProxyLBRY: pipedProxyLBRYElement.checked,
72-
youtubeVolume: volumeElement.value,
73-
pipedSponsorblock: pipedSponsorblockElement.checked,
63+
pipedQuality: pipedQuality.value,
64+
pipedBufferGoal: pipedBufferGoal.value,
65+
pipedRegion: pipedRegion.value,
66+
pipedHomepage: pipedHomepage.value,
67+
pipedComments: pipedComments.checked,
68+
pipedMinimizeDescription: pipedMinimizeDescription.checked,
69+
youtubeAutoplay: autoplay.checked,
70+
pipedWatchHistory: pipedWatchHistory.checked,
71+
pipedDisableLBRY: pipedDisableLBRY.checked,
72+
pipedProxyLBRY: pipedProxyLBRY.checked,
73+
youtubeVolume: volume.value,
74+
pipedSponsorblock: pipedSponsorblock.checked,
75+
pipedDdlTheme: pipedDdlTheme.value,
7476
pipedEnabledCodecs: pipedEnabledCodecsResult,
75-
youtubeListen: pipedListenElement.checked,
77+
youtubeListen: pipedListen.checked,
7678
pipedSelectedSkip: selectSkip,
7779
});
7880
init();
7981
});
8082

8183
function init() {
8284
youtubeHelper.init().then(() => {
83-
pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
85+
pipedSponsorblock.checked = youtubeHelper.getPipedSponsorblock();
86+
pipedDdlTheme.value = youtubeHelper.getPipedDdlTheme();
8487
selectSkip = youtubeHelper.getPipedSelectedSkip();
85-
pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
86-
pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro');
87-
pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro');
88-
pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
89-
autoplayElement.checked = youtubeHelper.getAutoplay();
90-
pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
91-
pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
92-
pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
93-
pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
94-
pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler');
95-
pipedListenElement.checked = youtubeHelper.getYoutubeListen();
96-
pipedQualityElement.value = youtubeHelper.getPipedQuality();
97-
pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal();
98-
pipedRegionElement.value = youtubeHelper.getPipedRegion();
99-
pipedHomepageElement.value = youtubeHelper.getPipedHomepage();
100-
pipedCommentsElement.checked = youtubeHelper.getPipedComments();
101-
pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription();
102-
pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory();
103-
pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs();
104-
pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
105-
pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
88+
pipedSelectedSkipSponsor.checked = selectSkip.includes('sponsor');
89+
pipedSelectedSkipIntro.checked = selectSkip.includes('intro');
90+
pipedSelectedSkipOutro.checked = selectSkip.includes('outro');
91+
pipedSelectedSkipPreview.checked = selectSkip.includes('preview');
92+
autoplay.checked = youtubeHelper.getAutoplay();
93+
pipedSelectedSkipInteraction.checked = selectSkip.includes('interaction');
94+
pipedSelectedSkipSelfpromo.checked = selectSkip.includes('selfpromo');
95+
pipedSelectedSkipMusicOfftopic.checked = selectSkip.includes('music_offtopic');
96+
pipedSelectedSkipPoiHighlight.checked = selectSkip.includes('poi_highlight');
97+
pipedSelectedSkipFiller.checked = selectSkip.includes('filler');
98+
pipedListen.checked = youtubeHelper.getYoutubeListen();
99+
pipedQuality.value = youtubeHelper.getPipedQuality();
100+
pipedBufferGoal.value = youtubeHelper.getPipedBufferGoal();
101+
pipedRegion.value = youtubeHelper.getPipedRegion();
102+
pipedHomepage.value = youtubeHelper.getPipedHomepage();
103+
pipedComments.checked = youtubeHelper.getPipedComments();
104+
pipedMinimizeDescription.checked = youtubeHelper.getPipedMinimizeDescription();
105+
pipedWatchHistory.checked = youtubeHelper.getPipedWatchHistory();
106+
pipedEnabledCodecs.value = youtubeHelper.getPipedEnabledCodecs();
107+
pipedDisableLBRY.checked = youtubeHelper.getPipedDisableLBRY();
108+
pipedProxyLBRY.checked = youtubeHelper.getPipedProxyLBRY();
106109

107-
volumeElement.value = youtubeHelper.getVolume();
108-
volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
110+
volume.value = youtubeHelper.getVolume();
111+
volumeValue.textContent = `${youtubeHelper.getVolume()}%`;
109112

110113
commonHelper.processDefaultCustomInstances(
111114
'piped',

‎src/pages/options/youtube/youtube.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -939,11 +939,6 @@ <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
939939
<div class="custom-settings">
940940
<hr>
941941

942-
<div class="some-block option-block">
943-
<h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
944-
<input class="youtubeAutoplay" type="checkbox" />
945-
</div>
946-
947942
<div class="some-block option-block">
948943
<h4>
949944
<x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
@@ -1001,6 +996,20 @@ <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
1001996
<input class="selectedSkip-filler" type="checkbox" />
1002997
</div>
1003998

999+
<div class="some-block option-block">
1000+
<h4 data-localise="__MSG_theme__">Theme</h4>
1001+
<select class="ddlTheme">
1002+
<option value="auto">Auto</option>
1003+
<option value="dark">Dark</option>
1004+
<option value="light">Light</option>
1005+
</select>
1006+
</div>
1007+
1008+
<div class="some-block option-block">
1009+
<h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
1010+
<input class="youtubeAutoplay" type="checkbox" />
1011+
</div>
1012+
10041013
<div class="some-block option-block">
10051014
<h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
10061015
<input class="listen" type="checkbox" />

0 commit comments

Comments
 (0)