From 5d4377c081d18d89e64184c60d3fa97504768c81 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Tue, 12 Apr 2022 02:27:39 +0300
Subject: Restructuring Settings Structure

---
 src/pages/options/youtube/invidious.js     | 280 ++++++++++------------
 src/pages/options/youtube/piped.js         | 367 ++++++++++-------------------
 src/pages/options/youtube/pipedMaterial.js | 129 ++++++++--
 src/pages/options/youtube/youtube.html     | 266 +++++++++++----------
 src/pages/options/youtube/youtube.js       | 107 +++------
 5 files changed, 516 insertions(+), 633 deletions(-)

(limited to 'src/pages/options/youtube')

diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index 9df34067..d735c18b 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/src/pages/options/youtube/invidious.js
@@ -1,165 +1,121 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let invidiousAlwaysProxyElement = document.getElementById("invidious-local");
-invidiousAlwaysProxyElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked)
-);
-
-let invidiousPlayerStyleElement = document.getElementById("invidious-player_style");
-invidiousPlayerStyleElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
-);
-
-let invidiousQualityElement = document.getElementById("invidious-quality");
-invidiousQualityElement.addEventListener("change",
-    event => youtubeHelper.setinvidiousQuality(event.target.options[invidiousQualityElement.selectedIndex].value)
-);
-
-let invidiousVideoLoopElement = document.getElementById("invidious-video_loop");
-invidiousVideoLoopElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousVideoLoop(event.target.checked)
-);
-
-let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay");
-invidiousContinueAutoplayElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousContinueAutoplay(event.target.checked)
-);
-
-let invidiousContinueElement = document.getElementById("invidious-continue");
-invidiousContinueElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousContinue(event.target.checked)
-);
-
-let youtubeListenElement = document.getElementById("invidious-listen");
-youtubeListenElement.addEventListener("change",
-    event => youtubeHelper.setYoutubeListen(event.target.checked)
-);
-
-let invidiousSpeedElement = document.getElementById("invidious-speed");
-invidiousSpeedElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousSpeed(event.target.options[invidiousSpeedElement.selectedIndex].value)
-);
-
-let invidiousQualityDashElement = document.getElementById("invidious-quality_dash");
-invidiousQualityDashElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousQualityDash(event.target.options[invidiousQualityDashElement.selectedIndex].value)
-);
-
-let invidiousComments0Element = document.getElementById("invidious-comments[0]");
-invidiousComments0Element.addEventListener("change",
-    event => {
-        let commentsList = youtubeHelper.getInvidiousComments();
-        commentsList[0] = event.target.options[invidiousComments0Element.selectedIndex].value
-        youtubeHelper.setInvidiousComments(commentsList)
-    }
-);
-let invidiousComments1Element = document.getElementById("invidious-comments[1]");
-invidiousComments1Element.addEventListener("change",
-    event => {
-        let commentsList = youtubeHelper.getInvidiousComments();
-        commentsList[1] = event.target.options[invidiousComments1Element.selectedIndex].value
-        youtubeHelper.setInvidiousComments(commentsList)
-    }
-);
-
-let invidiousCaptions0Element = document.getElementById("invidious-captions[0]");
-invidiousCaptions0Element.addEventListener("change",
-    event => {
-        let captionsList = youtubeHelper.getInvidiousCaptions();
-        captionsList[0] = event.target.options[invidiousCaptions0Element.selectedIndex].value
-        youtubeHelper.setInvidiousCaptions(captionsList)
-    }
-);
-let invidiousCaptions1Element = document.getElementById("invidious-captions[1]");
-invidiousCaptions1Element.addEventListener("change",
-    event => {
-        let captionsList = youtubeHelper.getInvidiousCaptions();
-        captionsList[1] = event.target.options[invidiousCaptions1Element.selectedIndex].value
-        youtubeHelper.setInvidiousCaptions(captionsList)
-    }
-);
-let invidiousCaptions2Element = document.getElementById("invidious-captions[2]");
-invidiousCaptions2Element.addEventListener("change",
-    event => {
-        let captionsList = youtubeHelper.getInvidiousCaptions();
-        captionsList[2] = event.target.options[invidiousCaptions2Element.selectedIndex].value
-        youtubeHelper.setInvidiousCaptions(captionsList)
-    }
-);
-
-let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos");
-invidiousRelatedVideoElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousRelatedVideos(event.target.checked)
-);
-
-let invidiousAnnotationsElement = document.getElementById("invidious-annotations");
-invidiousAnnotationsElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousAnnotations(event.target.checked)
-);
-
-
-let invidiousExtendDescElement = document.getElementById("invidious-extend_desc");
-invidiousExtendDescElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousExtendDesc(event.target.checked)
-);
-
-let invidiousVrModeElement = document.getElementById("invidious-vr_mode");
-invidiousVrModeElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousVrMode(event.target.checked)
-);
-
-let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos");
-invidiousSavePlayerPosElement.addEventListener("change",
-    event => youtubeHelper.setInvidiousSavePlayerPos(event.target.checked)
-);
-
-youtubeHelper.init().then(() => {
-    invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
-
-    invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
-
-    invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
-    invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
-    invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
-    youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
-
-    invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
-    invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
-    invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
-
-    invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
-    invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
-
-    invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
-    invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
-    invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
-
-    invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
-    invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
-    invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
-    invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
-    invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
-
-    commonHelper.processDefaultCustomInstances(
-        'invidious',
-        'normal',
-        youtubeHelper,
-        document,
-        youtubeHelper.getInvidiousNormalRedirectsChecks,
-        youtubeHelper.setInvidiousNormalRedirectsChecks,
-        youtubeHelper.getInvidiousNormalCustomRedirects,
-        youtubeHelper.setInvidiousNormalCustomRedirects
-    );
-
-    commonHelper.processDefaultCustomInstances(
-        'invidious',
-        'tor',
-        youtubeHelper,
-        document,
-        youtubeHelper.getInvidiousTorRedirectsChecks,
-        youtubeHelper.setInvidiousTorRedirectsChecks,
-        youtubeHelper.getInvidiousTorCustomRedirects,
-        youtubeHelper.setInvidiousTorCustomRedirects
-    );
-});
\ No newline at end of file
+let invidiousElement = document.getElementById('invidious');
+let invidiousAlwaysProxyElement = invidiousElement.getElementsByClassName("local")[0];
+let invidiousPlayerStyleElement = invidiousElement.getElementsByClassName("player_style")[0];
+let invidiousQualityElement = invidiousElement.getElementsByClassName("quality")[0];
+let invidiousVideoLoopElement = invidiousElement.getElementsByClassName("video_loop")[0];
+let invidiousContinueAutoplayElement = invidiousElement.getElementsByClassName("continue_autoplay")[0];
+let invidiousContinueElement = invidiousElement.getElementsByClassName("continue")[0];
+let youtubeListenElement = invidiousElement.getElementsByClassName("listen")[0];
+let invidiousSpeedElement = invidiousElement.getElementsByClassName("speed")[0];
+let invidiousQualityDashElement = invidiousElement.getElementsByClassName("quality_dash")[0];
+let invidiousRelatedVideoElement = invidiousElement.getElementsByClassName("related_videos")[0];
+let invidiousAnnotationsElement = invidiousElement.getElementsByClassName("annotations")[0];
+let invidiousExtendDescElement = invidiousElement.getElementsByClassName("extend_desc")[0];
+let invidiousVrModeElement = invidiousElement.getElementsByClassName("vr_mode")[0];
+let invidiousSavePlayerPosElement = invidiousElement.getElementsByClassName("save_player_pos")[0];
+let invidiousComments0Element = invidiousElement.getElementsByClassName("comments[0]")[0];
+let invidiousComments1Element = invidiousElement.getElementsByClassName("comments[1]")[0];
+let invidiousCaptions0Element = invidiousElement.getElementsByClassName("captions[0]")[0];
+let invidiousCaptions1Element = invidiousElement.getElementsByClassName("captions[1]")[0];
+let invidiousCaptions2Element = invidiousElement.getElementsByClassName("captions[2]")[0];
+let autoplayElement = invidiousElement.getElementsByClassName("youtubeAutoplay")[0];
+let volumeElement = invidiousElement.getElementsByClassName("volume")[0];
+let volumeValueElement = invidiousElement.getElementsByClassName("volume-value")[0];
+
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
+
+invidiousElement.addEventListener("change", async _ => {
+    console.log('changed invidious settings');
+    let commentsList = youtubeHelper.getInvidiousComments();
+    commentsList[0] = invidiousComments0Element.value;
+    commentsList[1] = invidiousComments1Element.value;
+
+    let captionsList = youtubeHelper.getInvidiousCaptions();
+    captionsList[0] = invidiousCaptions0Element.value;
+    captionsList[1] = invidiousCaptions1Element.value;
+    captionsList[2] = invidiousCaptions2Element.value;
+
+    await youtubeHelper.setYoutubeSettings({
+        invidiousAlwaysProxy: invidiousAlwaysProxyElement.checked,
+        youtubeAutoplay: autoplayElement.checked,
+        invidiousPlayerStyle: invidiousPlayerStyleElement.value,
+        invidiousQuality: invidiousQualityElement.value,
+        invidiousVideoLoop: invidiousVideoLoopElement.checked,
+        invidiousContinueAutoplay: invidiousContinueAutoplayElement.checked,
+        invidiousContinue: invidiousContinueElement.checked,
+        youtubeListen: youtubeListenElement.checked,
+        invidiousSpeed: invidiousSpeedElement.value,
+        invidiousQualityDash: invidiousQualityDashElement.value,
+        youtubeVolume: volumeElement.value,
+        invidiousComments: commentsList,
+        invidiousCaptions: captionsList,
+        invidiousRelatedVideos: invidiousRelatedVideoElement.checked,
+        invidiousAnnotations: invidiousAnnotationsElement.checked,
+        invidiousExtendDesc: invidiousExtendDescElement.checked,
+        invidiousVrMode: invidiousVrModeElement.checked,
+        invidiousSavePlayerPos: invidiousSavePlayerPosElement.checked
+    });
+    init();
+});
+
+function init() {
+    youtubeHelper.init().then(() => {
+        invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
+
+        autoplayElement.checked = youtubeHelper.getAutoplay();
+
+        invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
+
+        invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
+        invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
+        invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
+        youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
+
+        invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
+        invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
+        invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
+
+        volumeElement.value = youtubeHelper.getVolume();
+        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+
+        invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
+        invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
+
+        invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
+        invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
+        invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
+
+        invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
+        invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
+        invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
+        invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
+        invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
+
+        commonHelper.processDefaultCustomInstances(
+            'invidious',
+            'normal',
+            youtubeHelper,
+            document,
+            youtubeHelper.getInvidiousNormalRedirectsChecks,
+            youtubeHelper.setInvidiousNormalRedirectsChecks,
+            youtubeHelper.getInvidiousNormalCustomRedirects,
+            youtubeHelper.setInvidiousNormalCustomRedirects
+        );
+
+        commonHelper.processDefaultCustomInstances(
+            'invidious',
+            'tor',
+            youtubeHelper,
+            document,
+            youtubeHelper.getInvidiousTorRedirectsChecks,
+            youtubeHelper.setInvidiousTorRedirectsChecks,
+            youtubeHelper.getInvidiousTorCustomRedirects,
+            youtubeHelper.setInvidiousTorCustomRedirects
+        );
+    });
+}
+
+init()
\ No newline at end of file
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index 5f388d6f..e0495e7b 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -1,257 +1,132 @@
 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)
-);
-
+let pipedElement = 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 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 pipedSponsorblockElement = pipedElement.getElementsByClassName("sponsorblock")[0];
+let pipedEnabledCodecsElement = pipedElement.getElementsByClassName("enabledCodecs")[0];
+let autoplayElement = pipedElement.getElementsByClassName("youtubeAutoplay")[0];
+
+let volumeElement = pipedElement.getElementsByClassName("volume")[0];
+let volumeValueElement = pipedElement.getElementsByClassName("volume-value")[0];
+
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
 function selectSkipModify(value, boolean) {
-    if (boolean) {
-        if (!selectSkip.includes(value)) selectSkip.push(value);
+    if (boolean && !selectSkip.includes(value)) {
+        selectSkip.push(value);
     }
-    else {
+    else if (!boolean) {
         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 pipedMaterialListenElement = document.getElementById("pipedMaterial-listen");
-pipedMaterialListenElement.addEventListener("change",
-    event => youtubeHelper.setYoutubeListen(event.target.checked)
-);
-
-let pipedMaterialDisableLBRYElement = document.getElementById("pipedMaterial-disableLBRY");
-pipedMaterialDisableLBRYElement.addEventListener("change",
-    event => youtubeHelper.setPipedDisableLBRY(event.target.checked)
-);
-
-let pipedMaterialProxyLBRYElement = document.getElementById("pipedMaterial-proxyLBRY");
-pipedMaterialProxyLBRYElement.addEventListener("change",
-    event => youtubeHelper.setPipedProxyLBRY(event.target.checked)
-);
-
-let pipedMaterialSponsorblockElement = document.getElementById("pipedMaterial-sponsorblock");
-pipedMaterialSponsorblockElement.addEventListener("change",
-    event => youtubeHelper.setPipedSponsorblock(event.target.checked)
-);
-
-let pipedMaterialSkipToLastPointElement = document.getElementById("pipedMaterial-skipToLastPoint");
-pipedMaterialSkipToLastPointElement.addEventListener("change",
-    event => youtubeHelper.setPipedMaterialSkipToLastPoint(event.target.checked)
-);
-
-
-let pipedMaterialSelectedSkipSponsorElement = document.getElementById("pipedMaterial-selectedSkip-sponsor");
-pipedMaterialSelectedSkipSponsorElement.addEventListener("change",
-    event => selectSkipModify('sponsor', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipIntroElement = document.getElementById("pipedMaterial-selectedSkip-intro");
-pipedMaterialSelectedSkipIntroElement.addEventListener("change",
-    event => selectSkipModify('intro', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipOutroElement = document.getElementById("pipedMaterial-selectedSkip-outro");
-pipedMaterialSelectedSkipOutroElement.addEventListener("change",
-    event => selectSkipModify('outro', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipPreviewElement = document.getElementById("pipedMaterial-selectedSkip-preview");
-pipedMaterialSelectedSkipPreviewElement.addEventListener("change",
-    event => selectSkipModify('preview', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipInteractionElement = document.getElementById("pipedMaterial-selectedSkip-interaction");
-pipedMaterialSelectedSkipInteractionElement.addEventListener("change",
-    event => selectSkipModify('interaction', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipSelfpromoElement = document.getElementById("pipedMaterial-selectedSkip-selfpromo");
-pipedMaterialSelectedSkipSelfpromoElement.addEventListener("change",
-    event => selectSkipModify('selfpromo', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipMusicOfftopicElement = document.getElementById("pipedMaterial-selectedSkip-music_offtopic");
-pipedMaterialSelectedSkipMusicOfftopicElement.addEventListener("change",
-    event => selectSkipModify('music_offtopic', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipPoiHighlightElement = document.getElementById("pipedMaterial-selectedSkip-poi_highlight");
-pipedMaterialSelectedSkipPoiHighlightElement.addEventListener("change",
-    event => selectSkipModify('poi_highlight', event.target.checked)
-);
-
-let pipedMaterialSelectedSkipFillerElement = document.getElementById("pipedMaterial-selectedSkip-filler");
-pipedMaterialSelectedSkipFillerElement.addEventListener("change",
-    event => selectSkipModify('filler', 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();
-
-    pipedMaterialListenElement.checked = youtubeHelper.getYoutubeListen();
-    pipedMaterialDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
-    pipedMaterialProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
-    pipedMaterialSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock()
-    pipedMaterialSkipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint();
-    pipedMaterialSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
-    pipedMaterialSelectedSkipIntroElement.checked = selectSkip.includes('intro');
-    pipedMaterialSelectedSkipOutroElement.checked = selectSkip.includes('outro');
-    pipedMaterialSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
-    pipedMaterialSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
-    pipedMaterialSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
-    pipedMaterialSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
-    pipedMaterialSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
-    pipedMaterialSelectedSkipFillerElement.checked = selectSkip.includes('filler');
-
-    commonHelper.processDefaultCustomInstances(
-        'piped',
-        'normal',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedNormalRedirectsChecks,
-        youtubeHelper.setPipedNormalRedirectsChecks,
-        youtubeHelper.getPipedNormalCustomRedirects,
-        youtubeHelper.setPipedNormalCustomRedirects
-    );
-    commonHelper.processDefaultCustomInstances(
-        'piped',
-        'tor',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedTorRedirectsChecks,
-        youtubeHelper.setPipedTorRedirectsChecks,
-        youtubeHelper.getPipedTorCustomRedirects,
-        youtubeHelper.setPipedTorCustomRedirects
-    );
+pipedElement.addEventListener("change", async () => {
+    console.log("changed piped settings");
+    let pipedEnabledCodecsResult = [];
+    for (const opt of pipedEnabledCodecsElement.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);
+
+    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,
+        pipedEnabledCodecs: pipedEnabledCodecsResult,
+        youtubeListen: pipedListenElement.checked,
+        pipedSelectedSkip: selectSkip,
+    });
+    init();
 });
+
+function init() {
+    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');
+        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();
+
+        volumeElement.value = youtubeHelper.getVolume();
+        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+
+        commonHelper.processDefaultCustomInstances(
+            'piped',
+            'normal',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedNormalRedirectsChecks,
+            youtubeHelper.setPipedNormalRedirectsChecks,
+            youtubeHelper.getPipedNormalCustomRedirects,
+            youtubeHelper.setPipedNormalCustomRedirects
+        );
+        commonHelper.processDefaultCustomInstances(
+            'piped',
+            'tor',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedTorRedirectsChecks,
+            youtubeHelper.setPipedTorRedirectsChecks,
+            youtubeHelper.getPipedTorCustomRedirects,
+            youtubeHelper.setPipedTorCustomRedirects
+        );
+    });
+}
+init();
\ No newline at end of file
diff --git a/src/pages/options/youtube/pipedMaterial.js b/src/pages/options/youtube/pipedMaterial.js
index 9a8a9610..60b2c424 100644
--- a/src/pages/options/youtube/pipedMaterial.js
+++ b/src/pages/options/youtube/pipedMaterial.js
@@ -1,25 +1,112 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-youtubeHelper.init().then(() => {
-    commonHelper.processDefaultCustomInstances(
-        'pipedMaterial',
-        'normal',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedMaterialNormalRedirectsChecks,
-        youtubeHelper.setPipedMaterialNormalRedirectsChecks,
-        youtubeHelper.getPipedMaterialNormalCustomRedirects,
-        youtubeHelper.setPipedMaterialNormalCustomRedirects
-    );
-    commonHelper.processDefaultCustomInstances(
-        'pipedMaterial',
-        'tor',
-        youtubeHelper,
-        document,
-        youtubeHelper.getPipedMaterialTorRedirectsChecks,
-        youtubeHelper.setPipedMaterialTorRedirectsChecks,
-        youtubeHelper.getPipedMaterialTorCustomRedirects,
-        youtubeHelper.setPipedMaterialTorCustomRedirects
-    );
+let pipedMaterialElement = document.getElementById('pipedMaterial');
+let listenElement = pipedMaterialElement.getElementsByClassName("listen")[0];
+let disableLBRYElement = pipedMaterialElement.getElementsByClassName("disableLBRY")[0];
+let proxyLBRYElement = pipedMaterialElement.getElementsByClassName("proxyLBRY")[0];
+let sponsorblockElement = pipedMaterialElement.getElementsByClassName("sponsorblock")[0];
+let skipToLastPointElement = pipedMaterialElement.getElementsByClassName("skipToLastPoint")[0];
+
+let selectedSkipSponsorElement = pipedMaterialElement.getElementsByClassName("selectedSkip-sponsor")[0];
+let selectedSkipIntroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-intro")[0];
+let selectedSkipOutroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-outro")[0];
+let selectedSkipPreviewElement = pipedMaterialElement.getElementsByClassName("selectedSkip-preview")[0];
+let selectedSkipInteractionElement = pipedMaterialElement.getElementsByClassName("selectedSkip-interaction")[0];
+let selectedSkipSelfpromoElement = pipedMaterialElement.getElementsByClassName("selectedSkip-selfpromo")[0];
+let selectedSkipMusicOfftopicElement = pipedMaterialElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
+
+let autoplayElement = pipedMaterialElement.getElementsByClassName("youtubeAutoplay")[0];
+
+let volumeElement = pipedMaterialElement.getElementsByClassName("volume")[0];
+let volumeValueElement = pipedMaterialElement.getElementsByClassName("volume-value")[0];
+
+volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
+
+let selectSkip = [];
+function selectSkipModify(value, boolean) {
+    if (boolean && !selectSkip.includes(value)) {
+        selectSkip.push(value);
+    }
+    else if (!boolean) {
+        let i = selectSkip.indexOf(value);
+        if (i > -1) selectSkip.splice(i, 1);
+    }
+}
+pipedMaterialElement.addEventListener("change", async () => {
+    console.log("changed piped settings");
+
+    selectSkipModify('sponsors', selectedSkipSponsorElement.checked);
+    selectSkipModify('intro', selectedSkipIntroElement.checked);
+    selectSkipModify('outro', selectedSkipOutroElement.checked);
+    selectSkipModify('preview', selectedSkipPreviewElement.checked);
+    selectSkipModify('interaction', selectedSkipInteractionElement.checked);
+    selectSkipModify('selfpromo', selectedSkipSelfpromoElement.checked);
+    selectSkipModify('music_offtopic', selectedSkipMusicOfftopicElement.checked);
+
+    await youtubeHelper.setYoutubeSettings({
+        youtubeListen: listenElement.checked,
+        pipedDisableLBRY: disableLBRYElement.checked,
+        pipedProxyLBRY: proxyLBRYElement.checked,
+        pipedSponsorblock: sponsorblockElement.checked,
+        pipedSkipToLastPoint: skipToLastPointElement.checked,
+        pipedSelectedSkipSponsor: selectedSkipSponsorElement.checked,
+        pipedSelectedSkipIntro: selectedSkipIntroElement.checked,
+        pipedSelectedSkipOutro: selectedSkipOutroElement.checked,
+        youtubeAutoplay: autoplayElement.checked,
+        youtubeVolume: volumeElement.value,
+        pipedSelectedSkipPreview: selectedSkipPreviewElement.checked,
+        pipedSelectedSkipInteraction: selectedSkipInteractionElement.checked,
+        pipedSelectedSkipSelfpromo: selectedSkipSelfpromoElement.checked,
+        pipedSelectedSkipMusicOfftopic: selectedSkipMusicOfftopicElement.checked,
+
+        pipedSponsorblock: sponsorblockElement.checked,
+        pipedMaterialSkipToLastPoint: skipToLastPointElement.checked,
+        pipedSelectedSkip: selectSkip,
+    });
+    init();
 });
+
+function init() {
+    youtubeHelper.init().then(() => {
+        autoplayElement.checked = youtubeHelper.getAutoplay();
+
+        listenElement.checked = youtubeHelper.getYoutubeListen();
+        disableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
+        proxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
+        sponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
+        skipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint();
+        selectedSkipSponsorElement.checked = selectSkip.includes('sponsors');
+        selectedSkipIntroElement.checked = selectSkip.includes('intro');
+        selectedSkipOutroElement.checked = selectSkip.includes('outro');
+        selectedSkipPreviewElement.checked = selectSkip.includes('preview');
+        selectedSkipInteractionElement.checked = selectSkip.includes('interaction');
+        selectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
+        selectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
+
+        volumeElement.value = youtubeHelper.getVolume();
+        volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+
+        commonHelper.processDefaultCustomInstances(
+            'pipedMaterial',
+            'normal',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedMaterialNormalRedirectsChecks,
+            youtubeHelper.setPipedMaterialNormalRedirectsChecks,
+            youtubeHelper.getPipedMaterialNormalCustomRedirects,
+            youtubeHelper.setPipedMaterialNormalCustomRedirects
+        );
+        commonHelper.processDefaultCustomInstances(
+            'pipedMaterial',
+            'tor',
+            youtubeHelper,
+            document,
+            youtubeHelper.getPipedMaterialTorRedirectsChecks,
+            youtubeHelper.setPipedMaterialTorRedirectsChecks,
+            youtubeHelper.getPipedMaterialTorCustomRedirects,
+            youtubeHelper.setPipedMaterialTorCustomRedirects
+        );
+    });
+}
+init();
\ No newline at end of file
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index c118694d..95ebb7d4 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -154,7 +154,7 @@
         <select id="youtube-embed-frontend">
           <option value="invidious">Invidious</option>
           <option value="piped">Piped</option>
-          <option value="pipedMaterial">Piped-Material</option>
+          <option value="pipedMaterial">Material</option>
           <option value="youtube">Youtube</option>
         </select>
       </div>
@@ -190,64 +190,47 @@
         <input id="enable-youtube-custom-settings" type="checkbox" />
       </div>
 
-      <div class="custom-settings">
-
-        <hr>
-
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
-          <input id="invidious-youtubeAutoplay" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
-          <h4><x data-localise="__MSG_volume__">Volume: </x><span id="volume-value">--%</span></h4>
-          <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
-        </div>
-
-      </div>
-
     </div>
 
     <div id="invidious">
 
-
       <div class="custom-settings">
+
+        <hr>
+
         <div class="some-block option-block">
-          <h4 data-localise="__MSG_playerStyle__">Player Style</h4>
-          <select id="invidious-player_style">
-            <option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
-            <option value="youtube" data-localise="__MSG_youtube__">YouTube</option>
-          </select>
+          <h4 data-localise="__MSG_alwaysLoop__">Always loop</h4>
+          <input class="video_loop" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
-          <h4 data-localise="__MSG_alwaysLoop__">Always loop</h4>
-          <input id="invidious-video_loop" type="checkbox" />
+          <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
+          <input class="youtubeAutoplay" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_playNext__">Play next by default</h4>
-          <input id="invidious-continue" type="checkbox" />
+          <input class="continue" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_autoplayNext__">Autoplay next video</h4>
-          <input id="invidious-continue_autoplay" type="checkbox" />
+          <input class="continue_autoplay" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos</h4>
-          <input id="invidious-local" type="checkbox" />
+          <input class="local" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_listenByDefault__">Listen by default</h4>
-          <input id="invidious-listen" type="checkbox" />
+          <input class="listen" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultSpeed__">Default speed</h4>
-          <select id="invidious-speed">
+          <select class="speed">
             <option>2.0</option>
             <option>1.75</option>
             <option>1.5</option>
@@ -261,7 +244,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_prefQuality__">Preferred video quality</h4>
-          <select id="invidious-quality">
+          <select class="quality">
             <option value="hd720">720p</option>
             <option value="medium">480p</option>
             <option value="dash" data-localise="__MSG_dash__">DASH (adaptive quality)</option>
@@ -271,7 +254,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_prefDashQuality__">Preferred DASH video quality</h4>
-          <select id="invidious-quality_dash">
+          <select class="quality_dash">
             <option value="auto" data-localise="__MSG_auto__">Auto</option>
             <option value="best" data-localise="__MSG_best__">Best</option>
             <option value="4320p">4320p</option>
@@ -288,16 +271,23 @@
           </select>
         </div>
 
+        <div class="some-block option-block">
+          <h4>
+            <x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
+          </h4>
+          <input class="volume" name="volume" type="range" min="0" max="100" step="1" />
+        </div>
+
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultComments__">Default comments</h4>
-          <select id="invidious-comments[0]">
+          <select class="comments[0]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="youtube">YouTube</option>
             <option value="reddit">Reddit</option>
             </option>
           </select>
           &nbsp;
-          <select id="invidious-comments[1]">
+          <select class="comments[1]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="youtube">YouTube</option>
             <option value="reddit">Reddit</option>
@@ -306,7 +296,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultCaptions__">Default captions</h4>
-          <select id="invidious-captions[0]">
+          <select class="captions[0]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="English">English</option>
             <option value="English (auto-generated)">English (auto-generated)</option>
@@ -439,7 +429,7 @@
             <option value="Zulu">Zulu</option>
           </select>
           &nbsp;
-          <select id="invidious-captions[1]">
+          <select class="captions[1]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="English">English</option>
             <option value="English (auto-generated)">English (auto-generated)</option>
@@ -572,7 +562,7 @@
             <option value="Zulu">Zulu</option>
           </select>
           &nbsp;
-          <select id="invidious-captions[2]">
+          <select class="captions[2]">
             <option value="" data-localise="__MSG_none__">none</option>
             <option value="English">English</option>
             <option value="English (auto-generated)">English (auto-generated)</option>
@@ -708,47 +698,54 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_showRelated__">Show related videos</h4>
-          <input id="invidious-related_videos" type="checkbox" />
+          <input class="related_videos" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_showAnnotations__">Show annotations by default</h4>
-          <input id="invidious-annotations" type="checkbox" />
+          <input class="annotations" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_autoExtendDesc__">Automatically extend video description</h4>
-          <input id="invidious-extend_desc" type="checkbox" />
+          <input class="extend_desc" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_interactive360__">Interactive 360 degree videos (requires WebGL)</h4>
-          <input id="invidious-vr_mode" type="checkbox" />
+          <input class="vr_mode" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_savePlaybackPos__">Save playback position</h4>
-          <input id="invidious-save_player_pos" type="checkbox" />
+          <input class="save_player_pos" type="checkbox" />
+        </div>
+
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_playerStyle__">Player Style</h4>
+          <select class="player_style">
+            <option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
+            <option value="youtube" data-localise="__MSG_youtube__">YouTube</option>
+          </select>
         </div>
 
       </div>
       <hr>
 
-      <div id="invidious-normal">
-
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="invidious-normal-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-invidious-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="invidious-normal-custom-instance" placeholder="https://invidious.com" type="url" />
-            <button type="submit" class="add" id="invidious-normal-add-instance">
+            <input class="custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -757,23 +754,23 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="invidious-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="invidious-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="invidious-tor-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-invidious-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="invidious-tor-custom-instance" placeholder="https://invidious.com" type="url" />
-            <button type="submit" class="add" id="invidious-tor-add-instance">
+            <input class="custom-instance" placeholder="https://invidious.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -782,73 +779,85 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="invidious-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
     </div>
 
     <div id="piped">
-
       <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>
+          </h4>
+          <input class="volume" name="volume" type="range" min="0" max="100" step="1" />
+        </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4>
-          <input id="piped-sponsorblock" type="checkbox" />
+          <input class="sponsorblock" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4>
-          <input id="piped-selectedSkip-sponsor" type="checkbox" />
+          <input class="selectedSkip-sponsor" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4>
-          <input id="piped-selectedSkip-intro" type="checkbox" />
+          <input class="selectedSkip-intro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4>
-          <input id="piped-selectedSkip-outro" type="checkbox" />
+          <input class="selectedSkip-outro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4>
-          <input id="piped-selectedSkip-preview" type="checkbox" />
+          <input class="selectedSkip-preview" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4>
-          <input id="piped-selectedSkip-interaction" type="checkbox" />
+          <input class="selectedSkip-interaction" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4>
-          <input id="piped-selectedSkip-selfpromo" type="checkbox" />
+          <input class="selectedSkip-selfpromo" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4>
-          <input id="piped-selectedSkip-music_offtopic" type="checkbox" />
+          <input class="selectedSkip-music_offtopic" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipHighlight__">Skip Highlight</h4>
-          <input id="piped-selectedSkip-poi_highlight" type="checkbox" />
+          <input class="selectedSkip-poi_highlight" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
-          <input id="piped-selectedSkip-filler" type="checkbox" />
+          <input class="selectedSkip-filler" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
-          <input id="piped-listen" type="checkbox" />
+          <input class="listen" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultQuality__">Default Quality</h4>
-          <select id="piped-quality">
+          <select class="quality">
             <option value="0">Auto</option>
             <option value="144">144p</option>
             <option value="240">240p</option>
@@ -864,12 +873,12 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_bufferingGoal__">Buffering Goal (in seconds)</h4>
-          <input id="piped-bufferGoal" type="number" min="10" />
+          <input class="bufferGoal" type="number" min="10" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_countrySelection__">Country Selection</h4>
-          <select id="piped-region">
+          <select class="region">
             <option value="AF">Afghanistan</option>
             <option value="AL">Albania</option>
             <option value="DZ">Algeria</option>
@@ -1068,7 +1077,7 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultHomepage__">Default Homepage</h4>
-          <select id="piped-homepage">
+          <select class="homepage">
             <option value="trending" data-localise="__MSG_trending__">Trending</option>
             <option value="feed" data-localise="__MSG_feed__">Feed</option>
           </select>
@@ -1076,22 +1085,22 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_showComments__">Show Comments</h4>
-          <input id="piped-comments" type="checkbox" />
+          <input class="comments" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_minimizeDesc__">Minimize Description by default</h4>
-          <input id="piped-minimizeDescription" type="checkbox" />
+          <input class="minimizeDescription" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_storeHistory__">Store Watch History</h4>
-          <input id="piped-watchHistory" type="checkbox" />
+          <input class="watchHistory" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enabledCodecs__">Enabled Codecs (Multiple)</h4>
-          <select id="piped-enabledCodecs" multiple>
+          <select class="enabledCodecs" multiple>
             <option value="av1">AV1</option>
             <option value="vp9">VP9</option>
             <option value="avc">AVC (h.264)</option>
@@ -1100,30 +1109,31 @@
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_disableLBRY__">Disable LBRY for Streaming</h4>
-          <input id="piped-disableLBRY" type="checkbox" />
+          <input class="disableLBRY" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enableProxyLBRY__">Enable Proxy for LBRY</h4>
-          <input id="piped-proxyLBRY" type="checkbox" />
+          <input class="proxyLBRY" type="checkbox" />
         </div>
 
       </div>
+
       <hr>
-      <div id="piped-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="piped-normal-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-piped-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="piped-normal-custom-instance" placeholder="https://piped.com" type="url" />
-            <button type="submit" class="add" id="piped-normal-add-instance">
+            <input class="custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1132,23 +1142,23 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="piped-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="piped-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="piped-tor-checklist">
+        <div class="checklist" class="checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-piped-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="piped-tor-custom-instance" placeholder="https://piped.com" type="url" />
-            <button type="submit" class="add" id="piped-tor-add-instance">
+            <input class="custom-instance" placeholder="https://piped.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1157,101 +1167,103 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="piped-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
       <hr>
     </div>
 
     <div id="pipedMaterial">
-      <hr>
-
       <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>
+          </h4>
+          <input class="volume" name="volume" type="range" min="0" max="100" step="1" />
+        </div>
+
         <div class="some-block option-block">
           <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
-          <input id="pipedMaterial-listen" type="checkbox" />
+          <input class="listen" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_disableLBRY__">Disable LBRY</h4>
-          <input id="pipedMaterial-disableLBRY" type="checkbox" />
+          <input class="disableLBRY" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_proxyLBRY__">Proxy LBRY videos</h4>
-          <input id="pipedMaterial-proxyLBRY" type="checkbox" />
+          <input class="proxyLBRY" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4>
-          <input id="pipedMaterial-sponsorblock" type="checkbox" />
+          <input class="sponsorblock" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
-          <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen</h4>
-          <input id="pipedMaterial-skipToLastPoint" type="checkbox" />
+          <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen
+          </h4>
+          <input class="skipToLastPoint" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4>
-          <input id="pipedMaterial-selectedSkip-sponsor" type="checkbox" />
+          <input class="selectedSkip-sponsor" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4>
-          <input id="pipedMaterial-selectedSkip-intro" type="checkbox" />
+          <input class="selectedSkip-intro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4>
-          <input id="pipedMaterial-selectedSkip-outro" type="checkbox" />
+          <input class="selectedSkip-outro" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4>
-          <input id="pipedMaterial-selectedSkip-preview" type="checkbox" />
+          <input class="selectedSkip-preview" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4>
-          <input id="pipedMaterial-selectedSkip-interaction" type="checkbox" />
+          <input class="selectedSkip-interaction" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4>
-          <input id="pipedMaterial-selectedSkip-selfpromo" type="checkbox" />
+          <input class="selectedSkip-selfpromo" type="checkbox" />
         </div>
 
         <div class="some-block option-block">
           <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4>
-          <input id="pipedMaterial-selectedSkip-music_offtopic" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_skipHighlights__">Skip Highlight</h4>
-          <input id="pipedMaterial-selectedSkip-poi_highlight" type="checkbox" />
-        </div>
-
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
-          <input id="pipedMaterial-selectedSkip-filler" type="checkbox" />
+          <input class="selectedSkip-music_offtopic" type="checkbox" />
         </div>
         <hr>
 
       </div>
 
-      <div id="pipedMaterial-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="pipedMaterial-normal-checklist"></div>
+        <div class="checklist" class="checklist"></div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-pipedMaterial-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="pipedMaterial-normal-custom-instance" placeholder="https://piped-material.com" type="url" />
-            <button type="submit" class="add" id="pipedMaterial-normal-add-instance">
+            <input class="custom-instance" placeholder="https://material.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1260,22 +1272,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="pipedMaterial-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="pipedMaterial-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="pipedMaterial-tor-checklist"></div>
+        <div class="checklist" class="checklist"></div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-pipedMaterial-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="pipedMaterial-tor-custom-instance" placeholder="https://pipedMaterial.com" type="url" />
-            <button type="submit" class="add" id="pipedMaterial-tor-add-instance">
+            <input class="custom-instance" placeholder="https://pipedMaterial.com" type="url" />
+            <button type="submit" class="add" class="add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -1284,7 +1296,7 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="pipedMaterial-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
   </section>
@@ -1299,4 +1311,4 @@
   <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 3fec42cc..5f915251 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -1,12 +1,17 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
 
+let disableYoutubeElement = document.getElementById("disable-invidious");
 let youtubeFrontendElement = document.getElementById("youtube-frontend");
 let invidiousDivElement = document.getElementById("invidious");
 let pipedDivElement = document.getElementById("piped");
 let pipedMaterialDivElement = document.getElementById("pipedMaterial");
-let invidiousPipedPipedMaterialDivElement = document.getElementById("invidious-piped-pipedMaterial");
 let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
 let customSettingsDivElement = document.getElementsByClassName("custom-settings");
+let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
+let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
+let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
+let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube");
+let protocolElement = document.getElementById("protocol");
 
 function changeFrontendsSettings() {
     let frontend = youtubeFrontendElement.value;
@@ -17,28 +22,24 @@ function changeFrontendsSettings() {
         for (const item of customSettingsDivElement) item.style.display = 'none';
 
     if (frontend == 'invidious') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'block';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'piped') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'block';
         pipedMaterialDivElement.style.display = 'none';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'pipedMaterial') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'block';
         freetubeYatteeDivElement.style.display = 'none';
     }
     else if (frontend == 'freetube' || frontend == 'yatte') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'none'
         invidiousDivElement.style.display = 'none';
         pipedDivElement.style.display = 'none';
         pipedMaterialDivElement.style.display = 'none';
@@ -49,91 +50,28 @@ function changeFrontendsSettings() {
 
 function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) {
     if (youtubeEmbedFrontend == 'invidious') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'block';
     }
     if (youtubeEmbedFrontend == 'piped') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'block'
         pipedDivElement.style.display = 'block';
         invidiousDivElement.style.display = 'none';
     }
     else if (youtubeEmbedFrontend == 'youtube') {
-        invidiousPipedPipedMaterialDivElement.style.display = 'none'
         pipedDivElement.style.display = 'none';
         invidiousDivElement.style.display = 'none';
     }
 }
 
-youtubeFrontendElement.addEventListener("change",
-    event => {
-        let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
-        youtubeHelper.setFrontend(frontend);
-        changeFrontendsSettings();
-    }
-);
-
-let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
-youtubeEmbedFrontendElement.addEventListener("change",
-    event => {
-        let youtubeEmbedFrontend = event.target.options[youtubeEmbedFrontendElement.selectedIndex].value
-        youtubeHelper.setYoutubeEmbedFrontend(youtubeEmbedFrontend);
-        changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend);
-    }
-);
-
-let disableYoutubeElement = document.getElementById("disable-invidious");
-disableYoutubeElement.addEventListener("change",
-    event => youtubeHelper.setDisable(!event.target.checked)
-);
-
-let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
-enableYoutubeCustomSettingsElement.addEventListener("change",
-    event => {
-        youtubeHelper.setEnableCustomSettings(event.target.checked)
-        changeFrontendsSettings();
-    }
-);
-
-let volumeElement = document.getElementById("invidious-volume");
-let volumeValueElement = document.getElementById("volume-value");
-
-volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
-volumeElement.addEventListener("change", () => youtubeHelper.setVolume(volumeElement.value));
-
-let autoplayElement = document.getElementById("invidious-youtubeAutoplay");
-autoplayElement.addEventListener("change",
-    event => youtubeHelper.setAutoplay(event.target.checked)
-);
-
-let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
-OnlyEmbeddedVideoElement.addEventListener("change",
-    event => youtubeHelper.setOnlyEmbeddedVideo(event.target.options[OnlyEmbeddedVideoElement.selectedIndex].value)
-);
-
-let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube")
-bypassWatchOnYoutubeElement.addEventListener("change",
-    event => youtubeHelper.setBypassWatchOnYoutube(event.target.checked)
-);
-
-let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    event => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        youtubeHelper.setProtocol(protocol);
-        changeProtocolSettings(protocol);
-    }
-);
-
 function changeProtocolSettings(protocol) {
-    let normalPipedDiv = document.getElementById("piped-normal");
-    let torPipedDiv = document.getElementById("piped-tor");
+    let normalPipedDiv = document.getElementById('piped').getElementsByClassName("normal")[0];
+    let torPipedDiv = document.getElementById('piped').getElementsByClassName("tor")[0];
 
-    let normalPipedMaterialDiv = document.getElementById("pipedMaterial-normal");
-    let torPipedMaterialDiv = document.getElementById("pipedMaterial-tor");
+    let normalPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("normal")[0];
+    let torPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("tor")[0];
 
-    let normalInvidiousDiv = document.getElementById("invidious-normal");
-    let torInvidiousDiv = document.getElementById("invidious-tor");
+    let normalInvidiousDiv = document.getElementById('invidious').getElementsByClassName("normal")[0];
+    let torInvidiousDiv = document.getElementById('invidious').getElementsByClassName("tor")[0];
 
     if (protocol == 'normal') {
         normalInvidiousDiv.style.display = 'block';
@@ -157,14 +95,29 @@ function changeProtocolSettings(protocol) {
     }
 }
 
+
+document.addEventListener("change", () => {
+    youtubeHelper.setYoutubeSettings({
+        disableYoutube: !disableYoutubeElement.checked,
+        youtubeFrontend: youtubeFrontendElement.value,
+        youtubeEmbedFrontend: youtubeEmbedFrontendElement.value,
+        enableYoutubeCustomSettings: enableYoutubeCustomSettingsElement.checked,
+        OnlyEmbeddedVideo: OnlyEmbeddedVideoElement.value,
+        bypassWatchOnYoutube: bypassWatchOnYoutubeElement.checked,
+        youtubeProtocol: protocolElement.value,
+    })
+    changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontendElement.value);
+    changeProtocolSettings(protocolElement.value);
+    changeFrontendsSettings();
+})
+
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
     enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings();
-    volumeElement.value = youtubeHelper.getVolume();
-    volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
+    
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();
     bypassWatchOnYoutubeElement.checked = youtubeHelper.getBypassWatchOnYoutube();
-    autoplayElement.checked = youtubeHelper.getAutoplay();
+    
     let frontend = youtubeHelper.getFrontend();
     youtubeFrontendElement.value = frontend;
     changeFrontendsSettings();
-- 
cgit 1.4.1