From fbbc82d0f28e42ac34e96cc0dffd6d0470df78b2 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sun, 13 Mar 2022 18:06:53 +0300 Subject: Added a button for enabling cookies #104 --- src/pages/options/youtube/invidious.js | 20 +- src/pages/options/youtube/youtube.html | 1102 +++++++++++++++----------------- src/pages/options/youtube/youtube.js | 41 +- src/pages/stylesheets/styles.css | 9 + 4 files changed, 574 insertions(+), 598 deletions(-) (limited to 'src/pages') diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js index 90361342..d8486e7a 100644 --- a/src/pages/options/youtube/invidious.js +++ b/src/pages/options/youtube/invidious.js @@ -3,7 +3,7 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js"; let invidiousAlwaysProxyElement = document.getElementById("invidious-local"); invidiousAlwaysProxyElement.addEventListener("change", - event => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value) + event => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked) ); let invidiousPlayerStyleElement = document.getElementById("invidious-player_style"); @@ -18,22 +18,22 @@ invidiousQualityElement.addEventListener("change", let invidiousVideoLoopElement = document.getElementById("invidious-video_loop"); invidiousVideoLoopElement.addEventListener("change", - event => youtubeHelper.setInvidiousVideoLoop(event.target.options[invidiousVideoLoopElement.selectedIndex].value) + event => youtubeHelper.setInvidiousVideoLoop(event.target.checked) ); let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay"); invidiousContinueAutoplayElement.addEventListener("change", - event => youtubeHelper.setInvidiousContinueAutoplay(event.target.options[invidiousContinueAutoplayElement.selectedIndex].value) + event => youtubeHelper.setInvidiousContinueAutoplay(event.target.checked) ); let invidiousContinueElement = document.getElementById("invidious-continue"); invidiousContinueElement.addEventListener("change", - event => youtubeHelper.setInvidiousContinue(event.target.options[invidiousContinueElement.selectedIndex].value) + event => youtubeHelper.setInvidiousContinue(event.target.checked) ); let invidiousListenElement = document.getElementById("invidious-listen"); invidiousListenElement.addEventListener("change", - event => youtubeHelper.setInvidiousListen(event.target.options[invidiousListenElement.selectedIndex].value) + event => youtubeHelper.setInvidiousListen(event.target.checked) ); let invidiousSpeedElement = document.getElementById("invidious-speed"); @@ -90,28 +90,28 @@ invidiousCaptions2Element.addEventListener("change", let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos"); invidiousRelatedVideoElement.addEventListener("change", - event => youtubeHelper.setInvidiousRelatedVideos(event.target.options[invidiousRelatedVideoElement.selectedIndex].value) + event => youtubeHelper.setInvidiousRelatedVideos(event.target.checked) ); let invidiousAnnotationsElement = document.getElementById("invidious-annotations"); invidiousAnnotationsElement.addEventListener("change", - event => youtubeHelper.setInvidiousAnnotations(event.target.options[invidiousAnnotationsElement.selectedIndex].value) + event => youtubeHelper.setInvidiousAnnotations(event.target.checked) ); let invidiousExtendDescElement = document.getElementById("invidious-extend_desc"); invidiousExtendDescElement.addEventListener("change", - event => youtubeHelper.setInvidiousExtendDesc(event.target.options[invidiousExtendDescElement.selectedIndex].value) + event => youtubeHelper.setInvidiousExtendDesc(event.target.checked) ); let invidiousVrModeElement = document.getElementById("invidious-vr_mode"); invidiousVrModeElement.addEventListener("change", - event => youtubeHelper.setInvidiousVrMode(event.target.options[invidiousVrModeElement.selectedIndex].value) + event => youtubeHelper.setInvidiousVrMode(event.target.checked) ); let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos"); invidiousSavePlayerPosElement.addEventListener("change", - event => youtubeHelper.setInvidiousSavePlayerPos(event.target.options[invidiousSavePlayerPosElement.selectedIndex].value) + event => youtubeHelper.setInvidiousSavePlayerPos(event.target.checked) ); youtubeHelper.init().then(() => { diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index 492843d7..ce4ebf50 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -101,7 +101,7 @@

Enable

- +
@@ -151,608 +151,560 @@

Bypass Watch On YouTube

- +
+
+
-

Autoplay Video

- +

Enable Custom Settings (will use cookies and localStorage)

+
-
-

Volume: --%

- - +
+ +
+

Autoplay Video

+ +
+ +
+

Volume: --%

+ +
+
+
+ +
-
-

Player Style

- -
+
+
+

Player Style

+ +
-
-

Always loop

- -
+
+

Always loop

+ +
-
-

Autoplay next video

- -
+
+

Autoplay next video

+ +
-
-

Play next by default

- -
+
+

Play next by default

+ +
-
-

Always proxy videos

- -
+
+

Always proxy videos

+ +
-
-

Listen by default

- -
+
+

Listen by default

+ +
-
-

Default speed

- -
+
+

Default speed

+ +
-
-

Preferred video quality

- -
+
+

Preferred video quality

+ +
-
-

Preferred DASH video quality

- -
+
+

Preferred DASH video quality

+ +
-
-

Default comments

- -   - -
+
+

Default comments

+ +   + +
-
-

Default captions

- -   - -   - -
+
+

Default captions

+ +   + +   + +
-
-

Show related videos

- -
+
+

Show related videos

+ +
-
-

Show annotations by default

- -
+
+

Show annotations by default

+ +
-
-

Automatically extend video description

- -
+
+

Automatically extend video description

+ +
-
-

Interactive 360 degree videos (requires WebGL)

- -
+
+

Interactive 360 degree videos (requires WebGL)

+ +
-
-

Save playback position

- -
+
+

Save playback position

+ +
+
+

Default Instances

diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index cd8e22c0..97bfd44a 100644 --- a/src/pages/options/youtube/youtube.js +++ b/src/pages/options/youtube/youtube.js @@ -1,6 +1,6 @@ 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"); @@ -8,8 +8,20 @@ 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"); + +function changeFrontendsSettings() { + console.log('changeFrontendsSettings()'); + let frontend = youtubeFrontendElement.value; + + 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"); + for (const item of customSettingsDivElement) item.style.display = 'none'; + } -function changeFrontendsSettings(frontend) { if (frontend == 'invidious') { invidiousPipedPipedMaterialDivElement.style.display = 'block' invidiousDivElement.style.display = 'block'; @@ -62,7 +74,7 @@ youtubeFrontendElement.addEventListener("change", event => { let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value youtubeHelper.setFrontend(frontend); - changeFrontendsSettings(frontend); + changeFrontendsSettings(); } ); @@ -75,10 +87,20 @@ youtubeEmbedFrontendElement.addEventListener("change", } ); +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", @@ -87,18 +109,10 @@ volumeElement.addEventListener("input", volumeValueElement.textContent = `${volumeElement.value}%`; } ); -let invidiousClearVolumeElement = document.getElementById("clear-invidious-volume"); -invidiousClearVolumeElement.addEventListener("click", - (_) => { - youtubeHelper.setVolume('--'); - volumeValueElement.textContent = `--%`; - volumeElement.value = null; - } -); let autoplayElement = document.getElementById("invidious-autoplay"); autoplayElement.addEventListener("change", - event => youtubeHelper.setAutoplay(event.target.options[autoplayElement.selectedIndex].value) + event => youtubeHelper.setAutoplay(event.target.checked) ); let OnlyEmbeddedVideoElement = document.getElementById("only-embed"); @@ -154,6 +168,7 @@ function changeProtocolSettings(protocol) { youtubeHelper.init().then(() => { disableYoutubeElement.checked = !youtubeHelper.getDisable(); + enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings(); volumeElement.value = youtubeHelper.getVolume(); volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`; OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo(); @@ -161,7 +176,7 @@ youtubeHelper.init().then(() => { autoplayElement.value = youtubeHelper.getAutoplay(); let frontend = youtubeHelper.getFrontend(); youtubeFrontendElement.value = frontend; - changeFrontendsSettings(frontend); + changeFrontendsSettings(); let protocol = youtubeHelper.getProtocol(); protocolElement.value = protocol; diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index d5452c3d..999b5afd 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -328,6 +328,15 @@ button.add { cursor: pointer; } +div.disabled { + background-color: rgb(39, 39, 39); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + .light-theme.popup, .light-theme .popup { background-color: var(--bg-secondary); -- cgit 1.4.1