Added seperated theme setting for Piped #147

This commit is contained in:
ManeraKai 2022-04-13 23:20:55 +03:00
parent 1b6d6fa802
commit d207ff2a34
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
5 changed files with 101 additions and 80 deletions

View File

@ -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;

View File

@ -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);
}

View File

@ -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,

View File

@ -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',

View File

@ -939,11 +939,6 @@
<div class="custom-settings">
<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>
@ -1001,6 +996,20 @@
<input class="selectedSkip-filler" type="checkbox" />
</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" />