Added almost all Piped settings

9 files changed, 794 insertions, 41 deletions

diff --git a/src/assets/javascripts/helpers/youtube/invidious-options.js b/src/assets/javascripts/helpers/youtube/invidious-options.js
index ea45ae01..aab5508b 100644
--- a/src/assets/javascripts/helpers/youtube/invidious-options.js
+++ b/src/assets/javascripts/helpers/youtube/invidious-options.js
@@ -1,7 +1,9 @@
 "use strict";
 
+window.browser = window.browser || window.chrome;
+
 export let invidiousQuality;
-export const getinvidiousQuality = () => invidiousQuality;
+export const getInvidiousQuality = () => invidiousQuality;
 export function setinvidiousQuality(val) {
     invidiousQuality = val;
     browser.storage.local.set({ invidiousQuality })
@@ -48,14 +50,6 @@ export function setInvidiousContinue(val) {
     console.log("invidiousContinue: ", invidiousContinue)
 }
 
-export let invidiousListen;
-export const getInvidiousListen = () => invidiousListen;
-export function setInvidiousListen(val) {
-    invidiousListen = val;
-    browser.storage.local.set({ invidiousListen })
-    console.log("invidiousListen: ", invidiousListen)
-}
-
 export let invidiousSpeed;
 export const getInvidiousSpeed = () => invidiousSpeed;
 export function setInvidiousSpeed(val) {
@@ -141,7 +135,6 @@ export async function invidiousInit() {
                     "invidiousVideoLoop",
                     "invidiousContinueAutoplay",
                     "invidiousContinue",
-                    "invidiousListen",
                     "invidiousSpeed",
                     "invidiousQualityDash",
                     "invidiousComments",
@@ -159,7 +152,6 @@ export async function invidiousInit() {
                     invidiousQuality = r.invidiousQuality ?? 'hd720';
                     invidiousContinueAutoplay = r.invidiousContinueAutoplay ?? true;
                     invidiousContinue = r.invidiousContinue ?? false;
-                    invidiousListen = r.invidiousListen ?? false;
                     invidiousSpeed = r.invidiousSpeed ?? '1.0';
                     invidiousQualityDash = r.invidiousQualityDash ?? 'auto';
                     invidiousComments = r.invidiousComments ?? ['youtube', ''];
diff --git a/src/assets/javascripts/helpers/youtube/piped-options.js b/src/assets/javascripts/helpers/youtube/piped-options.js
new file mode 100644
index 00000000..f0aea4ea
--- /dev/null
+++ b/src/assets/javascripts/helpers/youtube/piped-options.js
@@ -0,0 +1,138 @@
+"use strict";
+
+window.browser = window.browser || window.chrome;
+
+export let pipedBufferGoal;
+export const getPipedBufferGoal = () => pipedBufferGoal;
+export function setPipedBufferGoal(val) {
+    pipedBufferGoal = val;
+    browser.storage.local.set({ pipedBufferGoal })
+    console.log("pipedBufferGoal: ", pipedBufferGoal)
+}
+
+export let pipedComments;
+export const getPipedComments = () => pipedComments;
+export function setPipedComments(val) {
+    pipedComments = val;
+    browser.storage.local.set({ pipedComments })
+    console.log("pipedComments: ", pipedComments)
+}
+
+export let pipedDisableLBRY;
+export const getPipedDisableLBRY = () => pipedDisableLBRY;
+export function setPipedDisableLBRY(val) {
+    pipedDisableLBRY = val;
+    browser.storage.local.set({ pipedDisableLBRY })
+    console.log("pipedDisableLBRY: ", pipedDisableLBRY)
+}
+
+export let pipedEnabledCodecs;
+export const getPipedEnabledCodecs = () => pipedEnabledCodecs;
+export function setPipedEnabledCodecs(val) {
+    pipedEnabledCodecs = val;
+    browser.storage.local.set({ pipedEnabledCodecs })
+    console.log("pipedEnabledCodecs: ", pipedEnabledCodecs)
+}
+
+export let pipedHomepage;
+export const getPipedHomepage = () => pipedHomepage;
+export function setPipedHomepage(val) {
+    pipedHomepage = val;
+    browser.storage.local.set({ pipedHomepage })
+    console.log("pipedHomepage: ", pipedHomepage)
+}
+
+export let pipedMinimizeDescription;
+export const getPipedMinimizeDescription = () => pipedMinimizeDescription;
+export function setPipedMinimizeDescription(val) {
+    pipedMinimizeDescription = val;
+    browser.storage.local.set({ pipedMinimizeDescription })
+    console.log("pipedMinimizeDescription: ", pipedMinimizeDescription)
+}
+
+export let pipedProxyLBRY;
+export const getPipedProxyLBRY = () => pipedProxyLBRY;
+export function setPipedProxyLBRY(val) {
+    pipedProxyLBRY = val;
+    browser.storage.local.set({ pipedProxyLBRY })
+    console.log("pipedProxyLBRY: ", pipedProxyLBRY)
+}
+
+export let pipedQuality;
+export const getPipedQuality = () => pipedQuality;
+export function setPipedQuality(val) {
+    pipedQuality = val;
+    browser.storage.local.set({ pipedQuality })
+    console.log("pipedQuality: ", pipedQuality)
+}
+
+export let pipedRegion;
+export const getPipedRegion = () => pipedRegion;
+export function setPipedRegion(val) {
+    pipedRegion = val;
+    browser.storage.local.set({ pipedRegion })
+    console.log("pipedRegion: ", pipedRegion)
+}
+
+export let pipedSelectedSkip;
+export const getPipedSelectedSkip = () => pipedSelectedSkip;
+export function setPipedSelectedSkip(val) {
+    pipedSelectedSkip = val;
+    browser.storage.local.set({ pipedSelectedSkip })
+    console.log("pipedSelectedSkip: ", pipedSelectedSkip)
+}
+
+export let pipedSponsorblock;
+export const getPipedSponsorblock = () => pipedSponsorblock;
+export function setPipedSponsorblock(val) {
+    pipedSponsorblock = val;
+    browser.storage.local.set({ pipedSponsorblock })
+    console.log("pipedSponsorblock: ", pipedSponsorblock)
+}
+
+export let pipedWatchHistory;
+export const getPipedWatchHistory = () => pipedWatchHistory;
+export function setPipedWatchHistory(val) {
+    pipedWatchHistory = val;
+    browser.storage.local.set({ pipedWatchHistory })
+    console.log("pipedWatchHistory: ", pipedWatchHistory)
+}
+
+export async function pipedInit() {
+    return new Promise(
+        resolve => {
+            browser.storage.local.get(
+                [
+                    "pipedBufferGoal",
+                    "pipedComments",
+                    "pipedDisableLBRY",
+                    "pipedEnabledCodecs",
+                    "pipedHomepage",
+                    "pipedMinimizeDescription",
+                    "pipedProxyLBRY",
+                    "pipedQuality",
+                    "pipedRegion",
+                    "pipedSelectedSkip",
+                    "pipedSponsorblock",
+                    "pipedWatchHistory",
+                ],
+                r => {
+                    pipedBufferGoal = r.pipedBufferGoal ?? 10;
+                    pipedComments = r.pipedComments ?? true;
+                    pipedDisableLBRY = r.pipedDisableLBRY ?? false;
+                    pipedEnabledCodecs = r.pipedEnabledCodecs ?? ["av1", "vp9", "avc"];
+                    pipedHomepage = r.pipedHomepage ?? "trending";
+                    pipedMinimizeDescription = r.pipedMinimizeDescription ?? false;
+                    pipedProxyLBRY = r.pipedProxyLBRY ?? false;
+                    pipedQuality = r.pipedQuality ?? 0;
+                    pipedRegion = r.pipedRegion ?? "US";
+                    pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
+                    pipedSponsorblock = r.pipedSponsorblock ?? true;
+                    pipedWatchHistory = r.pipedWatchHistory ?? false;
+
+                    resolve();
+                }
+            )
+        }
+    )
+}
diff --git a/src/assets/javascripts/helpers/youtube/piped-preferences.js b/src/assets/javascripts/helpers/youtube/piped-preferences.js
index f4b41e5c..9182b1e5 100644
--- a/src/assets/javascripts/helpers/youtube/piped-preferences.js
+++ b/src/assets/javascripts/helpers/youtube/piped-preferences.js
@@ -4,15 +4,56 @@ browser.storage.local.get(
     [
         "theme",
         "youtubeVolume",
-        "youtubeAutoplay"
+        "youtubeAutoplay",
+        "youtubeListen",
+
+        "pipedBufferGoal",
+        "pipedComments",
+        "pipedDisableLBRY",
+        "pipedEnabledCodecs",
+        "pipedHomepage",
+        "pipedMinimizeDescription",
+        "pipedProxyLBRY",
+        "pipedQuality",
+        "pipedRegion",
+        "pipedSelectedSkip",
+        "pipedSponsorblock",
+        "pipedWatchHistory",
     ],
     r => {
         let theme = r.theme ?? "dark";
         let youtubeAutoplay = r.youtubeAutoplay ?? false;
         let youtubeVolume = r.youtubeVolume ?? 100;
+        let youtubeListen = r.youtubeListen ?? false;
+
+        let pipedBufferGoal = r.pipedBufferGoal ?? 10;
+        let pipedComments = r.pipedComments ?? true;
+        let pipedDisableLBRY = r.pipedDisableLBRY ?? false;
+        let pipedEnabledCodecs = r.pipedEnabledCodecs ?? "av1,vp9,avc";
+        let pipedHomepage = r.pipedHomepage ?? "trending";
+        let pipedMinimizeDescription = r.pipedMinimizeDescription ?? false;
+        let pipedProxyLBRY = r.pipedProxyLBRY ?? false;
+        let pipedQuality = r.pipedQuality ?? 0;
+        let pipedRegion = r.pipedRegion ?? "US";
+        let pipedSelectedSkip = r.pipedSelectedSkip ?? [];
+        let pipedSponsorblock = r.pipedSponsorblock ?? true;
+        let pipedWatchHistory = r.pipedWatchHistory ?? false;
 
+        localStorage.setItem("bufferGoal", pipedBufferGoal);
+        localStorage.setItem("comments", pipedComments);
+        localStorage.setItem("disableLBRY", pipedDisableLBRY);
+        localStorage.setItem("enabledCodecs", pipedEnabledCodecs);
+        localStorage.setItem("homepage", pipedHomepage);
+        localStorage.setItem("listen", youtubeListen);
+        localStorage.setItem("minimizeDescription", pipedMinimizeDescription);
+        localStorage.setItem("playerAutoPlay", youtubeAutoplay);
+        localStorage.setItem("proxyLBRY", pipedProxyLBRY);
+        localStorage.setItem("quality", pipedQuality);
+        localStorage.setItem("region", pipedRegion);
+        localStorage.setItem("selectedSkip", pipedSelectedSkip);
+        localStorage.setItem("sponsorblock", pipedSponsorblock);
         localStorage.setItem("theme", theme);
         localStorage.setItem("volume", youtubeVolume / 100);
-        localStorage.setItem("playerAutoPlay", youtubeAutoplay);
+        localStorage.setItem("watchHistory", pipedWatchHistory);
     }
 )
\ No newline at end of file
diff --git a/src/assets/javascripts/helpers/youtube/youtube-options.js b/src/assets/javascripts/helpers/youtube/youtube-options.js
new file mode 100644
index 00000000..cacc80c7
--- /dev/null
+++ b/src/assets/javascripts/helpers/youtube/youtube-options.js
@@ -0,0 +1,28 @@
+"use strict";
+
+window.browser = window.browser || window.chrome;
+
+export let youtubeListen;
+export const getYoutubeListen = () => youtubeListen;
+export function setYoutubeListen(val) {
+    youtubeListen = val;
+    browser.storage.local.set({ youtubeListen })
+    console.log("youtubeListen: ", youtubeListen)
+}
+
+export async function youtubeInit() {
+    return new Promise(
+        resolve => {
+            browser.storage.local.get(
+                [
+                    "youtubeListen"
+                ],
+                r => {
+                    youtubeListen = r.youtubeListen ?? false;
+
+                    resolve();
+                }
+            )
+        }
+    )
+}
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 1f4bf298..21a5c634 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -3,7 +3,7 @@
 import commonHelper from '../common.js'
 import {
   invidiousQuality,
-  getinvidiousQuality,
+  getInvidiousQuality,
   setinvidiousQuality,
 
   invidiousAlwaysProxy,
@@ -27,10 +27,6 @@ import {
   getInvidiousContinue,
   setInvidiousContinue,
 
-  invidiousListen,
-  getInvidiousListen,
-  setInvidiousListen,
-
   invidiousSpeed,
   getInvidiousSpeed,
   setInvidiousSpeed,
@@ -67,7 +63,64 @@ import {
   getInvidiousSavePlayerPos,
   setInvidiousSavePlayerPos,
 
-} from './invidious-options.js'
+} from './invidious-options.js';
+import {
+  pipedBufferGoal,
+  getPipedBufferGoal,
+  setPipedBufferGoal,
+
+  pipedComments,
+  getPipedComments,
+  setPipedComments,
+
+  pipedDisableLBRY,
+  getPipedDisableLBRY,
+  setPipedDisableLBRY,
+
+  pipedEnabledCodecs,
+  getPipedEnabledCodecs,
+  setPipedEnabledCodecs,
+
+  pipedHomepage,
+  getPipedHomepage,
+  setPipedHomepage,
+
+  pipedMinimizeDescription,
+  getPipedMinimizeDescription,
+  setPipedMinimizeDescription,
+
+  pipedProxyLBRY,
+  getPipedProxyLBRY,
+  setPipedProxyLBRY,
+
+  pipedQuality,
+  getPipedQuality,
+  setPipedQuality,
+
+  pipedRegion,
+  getPipedRegion,
+  setPipedRegion,
+
+  pipedSelectedSkip,
+  getPipedSelectedSkip,
+  setPipedSelectedSkip,
+
+  pipedSponsorblock,
+  getPipedSponsorblock,
+  setPipedSponsorblock,
+
+  pipedWatchHistory,
+  getPipedWatchHistory,
+  setPipedWatchHistory,
+
+  pipedInit
+} from './piped-options.js';
+import {
+  youtubeListen,
+  getYoutubeListen,
+  setYoutubeListen,
+  youtubeInit
+} from './youtube-options.js';
 
 window.browser = window.browser || window.chrome;
 
@@ -611,7 +664,7 @@ function initInvidiousCookies() {
           prefs.video_loop = invidiousVideoLoop == 'true';
           prefs.continue_autoplay = invidiousContinueAutoplay == 'true';
           prefs.continue = invidiousContinue == 'true';
-          prefs.listen = invidiousListen == 'true';
+          prefs.listen = youtubeListen == 'true';
           prefs.speed = parseFloat(invidiousSpeed);
           prefs.quality = invidiousQuality;
           prefs.quality_dash = invidiousQualityDash;
@@ -646,7 +699,9 @@ function initInvidiousCookies() {
 }
 
 async function init() {
+  await youtubeInit();
   await invidiousInit();
+  await pipedInit();
   return new Promise(
     resolve => {
       fetch('/instances/data.json').then(response => response.text()).then(data => {
@@ -729,6 +784,7 @@ async function init() {
             if (r.youtubeEmbedExceptions) exceptions = r.youtubeEmbedExceptions;
 
             initInvidiousCookies();
+
             resolve();
 
           });
@@ -765,7 +821,7 @@ export default {
   getInvidiousAlwaysProxy,
 
   setinvidiousQuality,
-  getinvidiousQuality,
+  getInvidiousQuality,
 
   setInvidiousPlayerStyle,
   getInvidiousPlayerStyle,
@@ -797,8 +853,8 @@ export default {
   getInvidiousContinue,
   setInvidiousContinue,
 
-  getInvidiousListen,
-  setInvidiousListen,
+  getYoutubeListen,
+  setYoutubeListen,
 
   getInvidiousSpeed,
   setInvidiousSpeed,
@@ -827,6 +883,42 @@ export default {
   getInvidiousSavePlayerPos,
   setInvidiousSavePlayerPos,
 
+  getPipedBufferGoal,
+  setPipedBufferGoal,
+
+  getPipedComments,
+  setPipedComments,
+
+  getPipedDisableLBRY,
+  setPipedDisableLBRY,
+
+  getPipedEnabledCodecs,
+  setPipedEnabledCodecs,
+
+  getPipedHomepage,
+  setPipedHomepage,
+
+  getPipedMinimizeDescription,
+  setPipedMinimizeDescription,
+
+  getPipedProxyLBRY,
+  setPipedProxyLBRY,
+
+  getPipedQuality,
+  setPipedQuality,
+
+  getPipedRegion,
+  setPipedRegion,
+
+  getPipedSelectedSkip,
+  setPipedSelectedSkip,
+
+  getPipedSponsorblock,
+  setPipedSponsorblock,
+
+  getPipedWatchHistory,
+  setPipedWatchHistory,
+
   getInvidiousNormalRedirectsChecks,
   setInvidiousNormalRedirectsChecks,
 
diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index d8486e7a..b99a3ab3 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/src/pages/options/youtube/invidious.js
@@ -31,9 +31,9 @@ invidiousContinueElement.addEventListener("change",
     event => youtubeHelper.setInvidiousContinue(event.target.checked)
 );
 
-let invidiousListenElement = document.getElementById("invidious-listen");
-invidiousListenElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousListen(event.target.checked)
+let youtubeListenElement = document.getElementById("invidious-listen");
+youtubeListenElement.addEventListener("change",
+    event => youtubeHelper.setYoutubeListen(event.target.checked)
 );
 
 let invidiousSpeedElement = document.getElementById("invidious-speed");
@@ -120,9 +120,9 @@ youtubeHelper.init().then(() => {
     invidiousVideoLoopElement.value = youtubeHelper.getInvidiousVideoLoop();
     invidiousContinueAutoplayElement.value = youtubeHelper.getInvidiousContinueAutoplay();
     invidiousContinueElement.value = youtubeHelper.getInvidiousContinue();
-    invidiousListenElement.value = youtubeHelper.getInvidiousListen();
+    youtubeListenElement.value = youtubeHelper.getYoutubeListen();
     invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
-    invidiousQualityElement.value = youtubeHelper.getinvidiousQuality();
+    invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
     invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
     invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
     invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index c6517966..0425ae79 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -1,7 +1,154 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
+let pipedSponsorblockElement = document.getElementById("piped-sponsorblock");
+pipedSponsorblockElement.addEventListener("change",
+    event => youtubeHelper.setPipedSponsorblock(event.target.checked)
+);
+
+function selectSkipModify(value, boolean) {
+    if (boolean) {
+        if (!selectSkip.includes(value)) selectSkip.push(value);
+    }
+    else {
+        let i = selectSkip.indexOf(value);
+        if (i > -1) selectSkip.splice(i, 1);
+    }
+    youtubeHelper.setPipedSelectedSkip(selectSkip)
+}
+
+let pipedSelectedSkipSponsorElement = document.getElementById("piped-selectedSkip-sponsor");
+pipedSelectedSkipSponsorElement.addEventListener("change",
+    event => selectSkipModify('sponsor', event.target.checked)
+);
+
+let pipedSelectedSkipIntroElement = document.getElementById("piped-selectedSkip-intro");
+pipedSelectedSkipIntroElement.addEventListener("change",
+    event => selectSkipModify('intro', event.target.checked)
+);
+
+let pipedSelectedSkipOutroElement = document.getElementById("piped-selectedSkip-outro");
+pipedSelectedSkipOutroElement.addEventListener("change",
+    event => selectSkipModify('outro', event.target.checked)
+);
+
+let pipedSelectedSkipPreviewElement = document.getElementById("piped-selectedSkip-preview");
+pipedSelectedSkipPreviewElement.addEventListener("change",
+    event => selectSkipModify('preview', event.target.checked)
+);
+
+let pipedSelectedSkipInteractionElement = document.getElementById("piped-selectedSkip-interaction");
+pipedSelectedSkipInteractionElement.addEventListener("change",
+    event => selectSkipModify('interaction', event.target.checked)
+);
+
+let pipedSelectedSkipSelfpromoElement = document.getElementById("piped-selectedSkip-selfpromo");
+pipedSelectedSkipSelfpromoElement.addEventListener("change",
+    event => selectSkipModify('selfpromo', event.target.checked)
+);
+
+let pipedSelectedSkipMusicOfftopicElement = document.getElementById("piped-selectedSkip-music_offtopic");
+pipedSelectedSkipMusicOfftopicElement.addEventListener("change",
+    event => selectSkipModify('music_offtopic', event.target.checked)
+);
+
+let pipedSelectedSkipPoiHighlightElement = document.getElementById("piped-selectedSkip-poi_highlight");
+pipedSelectedSkipPoiHighlightElement.addEventListener("change",
+    event => selectSkipModify('poi_highlight', event.target.checked)
+);
+
+let pipedSelectedSkipFillerElement = document.getElementById("piped-selectedSkip-filler");
+pipedSelectedSkipFillerElement.addEventListener("change",
+    event => selectSkipModify('filler', event.target.checked)
+);
+
+let pipedListenElement = document.getElementById("piped-listen");
+pipedListenElement.addEventListener("change",
+    event => youtubeHelper.setYoutubeListen(event.target.checked)
+);
+
+let pipedQualityElement = document.getElementById("piped-quality");
+pipedQualityElement.addEventListener("change",
+    event => youtubeHelper.setPipedQuality(event.target.options[pipedQualityElement.selectedIndex].value)
+);
+
+let pipedBufferGoalElement = document.getElementById("piped-bufferGoal");
+pipedBufferGoalElement.addEventListener("change",
+    event => youtubeHelper.setPipedBufferGoal(pipedBufferGoalElement.value)
+);
+
+let pipedRegionElement = document.getElementById("piped-region");
+pipedRegionElement.addEventListener("change",
+    event => youtubeHelper.setPipedRegion(event.target.options[pipedRegionElement.selectedIndex].value)
+);
+
+let pipedHomepageElement = document.getElementById("piped-homepage");
+pipedHomepageElement.addEventListener("change",
+    event => youtubeHelper.setPipedHomepage(event.target.options[pipedHomepageElement.selectedIndex].value)
+);
+
+let pipedCommentsElement = document.getElementById("piped-comments");
+pipedCommentsElement.addEventListener("change",
+    event => youtubeHelper.setPipedComments(event.target.checked)
+);
+
+let pipedMinimizeDescriptionElement = document.getElementById("piped-minimizeDescription");
+pipedMinimizeDescriptionElement.addEventListener("change",
+    event => youtubeHelper.setPipedMinimizeDescription(event.target.checked)
+);
+
+let pipedWatchHistoryElement = document.getElementById("piped-watchHistory");
+pipedWatchHistoryElement.addEventListener("change",
+    event => youtubeHelper.setPipedWatchHistory(event.target.checked)
+);
+
+let pipedEnabledCodecsElement = document.getElementById("piped-enabledCodecs");
+pipedEnabledCodecsElement.addEventListener("change",
+    () => {
+        let result = [];
+        for (const opt of pipedEnabledCodecsElement.options)
+            if (opt.selected) result.push(opt.value);
+        youtubeHelper.setPipedEnabledCodecs(result);
+    }
+);
+
+let pipedDisableLBRYElement = document.getElementById("piped-disableLBRY");
+pipedDisableLBRYElement.addEventListener("change",
+    event => youtubeHelper.setPipedDisableLBRY(event.target.checked)
+);
+
+let pipedProxyLBRYElement = document.getElementById("piped-proxyLBRY");
+pipedProxyLBRYElement.addEventListener("change",
+    event => youtubeHelper.setPipedProxyLBRY(event.target.checked)
+);
+
+let selectSkip = [];
 youtubeHelper.init().then(() => {
+
+    pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
+    selectSkip = youtubeHelper.getPipedSelectedSkip();
+    pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
+    pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro');
+    pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro');
+    pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
+    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();
+
+
     commonHelper.processDefaultCustomInstances(
         'piped',
         'normal',
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index ce4ebf50..61350fc0 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -154,8 +154,6 @@
         <input id="bypass-watch-on-youtube" type="checkbox" />
       </div>
 
-      <hr>
-
       <div class="some-block option-block">
         <h4>Enable Custom Settings (will use cookies and localStorage)</h4>
         <input id="enable-youtube-custom-settings" type="checkbox" />
@@ -163,6 +161,8 @@
 
       <div class="custom-settings">
 
+        <hr>
+
         <div class="some-block option-block">
           <h4>Autoplay Video</h4>
           <input id="invidious-autoplay" type="checkbox" />
@@ -177,9 +177,9 @@
 
     </div>
 
+    <div id="invidious">
 
 
-    <div id="invidious">
       <div class="custom-settings">
         <div class="some-block option-block">
           <h4>Player Style</h4>
@@ -704,7 +704,7 @@
       <hr>
 
       <div id="invidious-normal">
-        
+
         <div class="some-block option-block">
           <h4>Default Instances</h4>
         </div>
@@ -757,8 +757,328 @@
     </div>
 
     <div id="piped">
-      <hr>
 
+      <div class="custom-settings">
+
+        <div class="some-block option-block">
+          <h4>Enable Sponsorblock</h4>
+          <input id="piped-sponsorblock" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Sponsors</h4>
+          <input id="piped-selectedSkip-sponsor" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Intermission/Intro Animation</h4>
+          <input id="piped-selectedSkip-intro" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Endcards/Credits</h4>
+          <input id="piped-selectedSkip-outro" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Preview/Recap</h4>
+          <input id="piped-selectedSkip-preview" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Interaction Reminder (Subscribe)</h4>
+          <input id="piped-selectedSkip-interaction" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Unpaid/Self Promotion</h4>
+          <input id="piped-selectedSkip-selfpromo" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Music: Non-Music Section</h4>
+          <input id="piped-selectedSkip-music_offtopic" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Highlight</h4>
+          <input id="piped-selectedSkip-poi_highlight" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Skip Filler Tangent</h4>
+          <input id="piped-selectedSkip-filler" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Audio Only</h4>
+          <input id="piped-listen" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Default Quality</h4>
+          <select id="piped-quality">
+            <option value="0">Auto</option>
+            <option value="144">144p</option>
+            <option value="240">240p</option>
+            <option value="360">360p</option>
+            <option value="480">480p</option>
+            <option value="720">720p</option>
+            <option value="1080">1080p</option>
+            <option value="1440">1440p</option>
+            <option value="2160">2160p</option>
+            <option value="4320">4320p</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Buffering Goal (in seconds)</h4>
+          <input id="piped-bufferGoal" type="number" min="0" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Country Selection</h4>
+          <select id="piped-region">
+            <option value="AF">Afghanistan</option>
+            <option value="AL">Albania</option>
+            <option value="DZ">Algeria</option>
+            <option value="AD">Andorra</option>
+            <option value="AO">Angola</option>
+            <option value="AG">Antigua and Barbuda</option>
+            <option value="AR">Argentina</option>
+            <option value="AM">Armenia</option>
+            <option value="AU">Australia</option>
+            <option value="AT">Austria</option>
+            <option value="AZ">Azerbaijan</option>
+            <option value="BS">Bahamas</option>
+            <option value="BH">Bahrain</option>
+            <option value="BD">Bangladesh</option>
+            <option value="BB">Barbados</option>
+            <option value="BY">Belarus</option>
+            <option value="BE">Belgium</option>
+            <option value="BZ">Belize</option>
+            <option value="BJ">Benin</option>
+            <option value="BT">Bhutan</option>
+            <option value="BO">Bolivia (Plurinational State of)</option>
+            <option value="BA">Bosnia and Herzegovina</option>
+            <option value="BW">Botswana</option>
+            <option value="BR">Brazil</option>
+            <option value="BN">Brunei Darussalam</option>
+            <option value="BG">Bulgaria</option>
+            <option value="BF">Burkina Faso</option>
+            <option value="BI">Burundi</option>
+            <option value="CV">Cabo Verde</option>
+            <option value="KH">Cambodia</option>
+            <option value="CM">Cameroon</option>
+            <option value="CA">Canada</option>
+            <option value="CF">Central African Republic</option>
+            <option value="TD">Chad</option>
+            <option value="CL">Chile</option>
+            <option value="CN">China</option>
+            <option value="CO">Colombia</option>
+            <option value="KM">Comoros</option>
+            <option value="CG">Congo</option>
+            <option value="CD">Congo, Democratic Republic of the</option>
+            <option value="CR">Costa Rica</option>
+            <option value="CI">Côte d'Ivoire</option>
+            <option value="HR">Croatia</option>
+            <option value="CU">Cuba</option>
+            <option value="CY">Cyprus</option>
+            <option value="CZ">Czechia</option>
+            <option value="DK">Denmark</option>
+            <option value="DJ">Djibouti</option>
+            <option value="DM">Dominica</option>
+            <option value="DO">Dominican Republic</option>
+            <option value="EC">Ecuador</option>
+            <option value="EG">Egypt</option>
+            <option value="SV">El Salvador</option>
+            <option value="GQ">Equatorial Guinea</option>
+            <option value="ER">Eritrea</option>
+            <option value="EE">Estonia</option>
+            <option value="SZ">Eswatini</option>
+            <option value="ET">Ethiopia</option>
+            <option value="FJ">Fiji</option>
+            <option value="FI">Finland</option>
+            <option value="FR">France</option>
+            <option value="GA">Gabon</option>
+            <option value="GM">Gambia</option>
+            <option value="GE">Georgia</option>
+            <option value="DE">Germany</option>
+            <option value="GH">Ghana</option>
+            <option value="GR">Greece</option>
+            <option value="GD">Grenada</option>
+            <option value="GT">Guatemala</option>
+            <option value="GN">Guinea</option>
+            <option value="GW">Guinea-Bissau</option>
+            <option value="GY">Guyana</option>
+            <option value="HT">Haiti</option>
+            <option value="HN">Honduras</option>
+            <option value="HU">Hungary</option>
+            <option value="IS">Iceland</option>
+            <option value="IN">India</option>
+            <option value="ID">Indonesia</option>
+            <option value="IR">Iran (Islamic Republic of)</option>
+            <option value="IQ">Iraq</option>
+            <option value="IE">Ireland</option>
+            <option value="IL">Israel</option>
+            <option value="IT">Italy</option>
+            <option value="JM">Jamaica</option>
+            <option value="JP">Japan</option>
+            <option value="JO">Jordan</option>
+            <option value="KZ">Kazakhstan</option>
+            <option value="KE">Kenya</option>
+            <option value="KI">Kiribati</option>
+            <option value="KP">Korea (Democratic People's Republic of)</option>
+            <option value="KR">Korea, Republic of</option>
+            <option value="KW">Kuwait</option>
+            <option value="KG">Kyrgyzstan</option>
+            <option value="LA">Lao People's Democratic Republic</option>
+            <option value="LV">Latvia</option>
+            <option value="LB">Lebanon</option>
+            <option value="LS">Lesotho</option>
+            <option value="LR">Liberia</option>
+            <option value="LY">Libya</option>
+            <option value="LI">Liechtenstein</option>
+            <option value="LT">Lithuania</option>
+            <option value="LU">Luxembourg</option>
+            <option value="MG">Madagascar</option>
+            <option value="MW">Malawi</option>
+            <option value="MY">Malaysia</option>
+            <option value="MV">Maldives</option>
+            <option value="ML">Mali</option>
+            <option value="MT">Malta</option>
+            <option value="MH">Marshall Islands</option>
+            <option value="MR">Mauritania</option>
+            <option value="MU">Mauritius</option>
+            <option value="MX">Mexico</option>
+            <option value="FM">Micronesia (Federated States of)</option>
+            <option value="MD">Moldova, Republic of</option>
+            <option value="MC">Monaco</option>
+            <option value="MN">Mongolia</option>
+            <option value="ME">Montenegro</option>
+            <option value="MA">Morocco</option>
+            <option value="MZ">Mozambique</option>
+            <option value="MM">Myanmar</option>
+            <option value="NA">Namibia</option>
+            <option value="NR">Nauru</option>
+            <option value="NP">Nepal</option>
+            <option value="NL">Netherlands</option>
+            <option value="NZ">New Zealand</option>
+            <option value="NI">Nicaragua</option>
+            <option value="NE">Niger</option>
+            <option value="NG">Nigeria</option>
+            <option value="MK">North Macedonia</option>
+            <option value="NO">Norway</option>
+            <option value="OM">Oman</option>
+            <option value="PK">Pakistan</option>
+            <option value="PW">Palau</option>
+            <option value="PA">Panama</option>
+            <option value="PG">Papua New Guinea</option>
+            <option value="PY">Paraguay</option>
+            <option value="PE">Peru</option>
+            <option value="PH">Philippines</option>
+            <option value="PL">Poland</option>
+            <option value="PT">Portugal</option>
+            <option value="QA">Qatar</option>
+            <option value="RO">Romania</option>
+            <option value="RU">Russian Federation</option>
+            <option value="RW">Rwanda</option>
+            <option value="KN">Saint Kitts and Nevis</option>
+            <option value="LC">Saint Lucia</option>
+            <option value="VC">Saint Vincent and the Grenadines</option>
+            <option value="WS">Samoa</option>
+            <option value="SM">San Marino</option>
+            <option value="ST">Sao Tome and Principe</option>
+            <option value="SA">Saudi Arabia</option>
+            <option value="SN">Senegal</option>
+            <option value="RS">Serbia</option>
+            <option value="SC">Seychelles</option>
+            <option value="SL">Sierra Leone</option>
+            <option value="SG">Singapore</option>
+            <option value="SK">Slovakia</option>
+            <option value="SI">Slovenia</option>
+            <option value="SB">Solomon Islands</option>
+            <option value="SO">Somalia</option>
+            <option value="ZA">South Africa</option>
+            <option value="SS">South Sudan</option>
+            <option value="ES">Spain</option>
+            <option value="LK">Sri Lanka</option>
+            <option value="SD">Sudan</option>
+            <option value="SR">Suriname</option>
+            <option value="SE">Sweden</option>
+            <option value="CH">Switzerland</option>
+            <option value="SY">Syrian Arab Republic</option>
+            <option value="TJ">Tajikistan</option>
+            <option value="TZ">Tanzania, United Republic of</option>
+            <option value="TH">Thailand</option>
+            <option value="TL">Timor-Leste</option>
+            <option value="TG">Togo</option>
+            <option value="TO">Tonga</option>
+            <option value="TT">Trinidad and Tobago</option>
+            <option value="TN">Tunisia</option>
+            <option value="TR">Turkey</option>
+            <option value="TM">Turkmenistan</option>
+            <option value="TV">Tuvalu</option>
+            <option value="UG">Uganda</option>
+            <option value="UA">Ukraine</option>
+            <option value="AE">United Arab Emirates</option>
+            <option value="GB">United Kingdom of Great Britain and Northern Ireland</option>
+            <option value="US">United States of America</option>
+            <option value="UY">Uruguay</option>
+            <option value="UZ">Uzbekistan</option>
+            <option value="VU">Vanuatu</option>
+            <option value="VE">Venezuela (Bolivarian Republic of)</option>
+            <option value="VN">Viet Nam</option>
+            <option value="YE">Yemen</option>
+            <option value="ZM">Zambia</option>
+            <option value="ZW">Zimbabwe</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Default Homepage</h4>
+          <select id="piped-homepage">
+            <option value="trending">Trending</option>
+            <option value="feed">Feed</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Show Comments</h4>
+          <input id="piped-comments" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Minimize Description by default</h4>
+          <input id="piped-minimizeDescription" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Store Watch History</h4>
+          <input id="piped-watchHistory" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Enabled Codecs (Multiple)</h4>
+          <select id="piped-enabledCodecs" multiple>
+            <option value="av1">AV1</option>
+            <option value="vp9">VP9</option>
+            <option value="avc">AVC (h.264)</option>
+          </select>
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Disable LBRY for Streaming</h4>
+          <input id="piped-disableLBRY" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4>Enable Proxy for LBRY</h4>
+          <input id="piped-proxyLBRY" type="checkbox" />
+        </div>
+
+      </div>
+      <hr>
       <div id="piped-normal">
         <div class="some-block option-block">
           <h4>Default Instances</h4>
@@ -808,6 +1128,7 @@
         </form>
         <div class="checklist" id="piped-tor-custom-checklist"></div>
       </div>
+      <hr>
     </div>
 
     <div id="pipedMaterial">
@@ -862,8 +1183,6 @@
       </div>
     </div>
 
-    <hr>
-
     <div class="some-block option-block">
       <h4>Embed Exceptions</h4>
     </div>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 97bfd44a..e3b8c5e7 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -1,7 +1,5 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 
-
-
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious");
 let pipedDivElement = document.getElementById("piped");
@@ -17,10 +15,8 @@ function changeFrontendsSettings() {
     console.log("customSettingsDivElement", customSettingsDivElement[0].style.display);
     if (enableYoutubeCustomSettingsElement.checked)
         for (const item of customSettingsDivElement) item.style.display = 'block';
-    else {
-        console.log("setting it to none");
+    else
         for (const item of customSettingsDivElement) item.style.display = 'none';
-    }
 
     if (frontend == 'invidious') {
         invidiousPipedPipedMaterialDivElement.style.display = 'block'
@@ -70,6 +66,7 @@ function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) {
         invidiousDivElement.style.display = 'none';
     }
 }
+
 youtubeFrontendElement.addEventListener("change",
     event => {
         let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
@@ -100,7 +97,6 @@ enableYoutubeCustomSettingsElement.addEventListener("change",
     }
 );
 
-
 let volumeElement = document.getElementById("invidious-volume");
 let volumeValueElement = document.getElementById("volume-value");
 volumeElement.addEventListener("input",