From a9f95b3d1de44edf205508233a3526246842bbf3 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Fri, 4 Feb 2022 18:48:24 +0300 Subject: Cleaning and refining settings --- src/pages/options/youtube/youtube.html | 126 +++++++++++++++++++++++++++++++++ src/pages/options/youtube/youtube.js | 107 ++++++++++++++++++++++++++++ 2 files changed, 233 insertions(+) create mode 100644 src/pages/options/youtube/youtube.html create mode 100644 src/pages/options/youtube/youtube.js (limited to 'src/pages/options/youtube') diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html new file mode 100644 index 00000000..15688873 --- /dev/null +++ b/src/pages/options/youtube/youtube.html @@ -0,0 +1,126 @@ + + + + + + + + + LibRedirect Options: Twitter + + + + +
+ General + Youtube + Twitter + Instagram + Reddit + Search + Translate + Maps + Wikipedia + Medium +
+ +
+
+

Enable

+ +
+ + + + + +
+

Frontend

+ +
+ +
+ +
+
+

Player Style

+ +
+ +
+

Dark mode

+ +
+ +
+

Volume: 50%

+ +
+ +
+

Always proxy videos through Invidious

+ +
+ +
+

Only redirect embedded video to Invidious

+ +
+ +
+

Video Quality

+ +
+ +
+

Subtitles - language codes

+ +
+ +
+

Automatically play video on load

+ +
+ +
+

Persist preferences (as cookie)

+ +
+
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js new file mode 100644 index 00000000..c1d526da --- /dev/null +++ b/src/pages/options/youtube/youtube.js @@ -0,0 +1,107 @@ +import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; +import commonHelper from "../../../assets/javascripts/helpers/common.js"; + +let disableYoutubeElement = document.getElementById("disable-invidious"); + +let youtubeFrontendElement = document.getElementById("youtube-frontend"); +let invidiousDivElement = document.getElementById("invidious") +let pipedDivElement = document.getElementById("piped") +function changeFrontendsSettings(frontend) { + if (frontend == 'piped') { + pipedDivElement.style.display = 'block'; + invidiousDivElement.style.display = 'none'; + } + else if (frontend == 'invidious') { + pipedDivElement.style.display = 'none'; + invidiousDivElement.style.display = 'block'; + } + else if (frontend == 'freeTube') { + pipedDivElement.style.display = 'none'; + invidiousDivElement.style.display = 'none'; + } +} +youtubeFrontendElement.addEventListener("change", + (event) => { + let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value + youtubeHelper.setFrontend(frontend); + changeFrontendsSettings(frontend); + } +); + +disableYoutubeElement.addEventListener("change", + (event) => youtubeHelper.setDisableYoutube(!event.target.checked) +); + +let invidiousDarkModeElement = document.getElementById("invidious-dark-mode"); +invidiousDarkModeElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousDarkMode(event.target.checked) +); + +let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs"); +persistInvidiousPrefsElement.addEventListener("change", + (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked) +); + +let invidiousVolumeElement = document.getElementById("invidious-volume"); +let invidiousVolumeValueElement = document.querySelector("#volume-value"); +invidiousVolumeElement.addEventListener("input", + () => { + youtubeHelper.setInvidiousVolume(invidiousVolumeElement.value); + invidiousVolumeValueElement.textContent = `${invidiousVolumeElement.value}%`; + } +); + +let invidiousPlayerStyleElement = document.getElementById("invidious-player-style"); +invidiousPlayerStyleElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value) +); + +let invidiousSubtitlesElement = document.getElementById("invidious-subtitles"); +invidiousSubtitlesElement.addEventListener("input", + commonHelper.debounce(() => { + youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value) + }, 500) +); + +let invidiousAutoplayElement = document.getElementById("invidious-autoplay"); +invidiousAutoplayElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousAutoplay(event.target.checked) +); + +let invidiousAlwaysProxyElement = document.getElementById("always-proxy"); +invidiousAlwaysProxyElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked) +); + +let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed"); +invidiousOnlyEmbeddedVideoElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousOnlyEmbeddedVideo(event.target.checked) +); + +let invidiousVideoQualityElement = document.getElementById("video-quality"); +invidiousVideoQualityElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value) +); + + +youtubeHelper.init().then(() => { + disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube(); + invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode(); + persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs(); + invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume(); + invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`; + invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle(); + invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles(); + invidiousOnlyEmbeddedVideoElement.checked = youtubeHelper.getInvidiousOnlyEmbeddedVideo(); + invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy(); + invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality(); + invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay(); + let frontend = youtubeHelper.getFrontend() + youtubeFrontendElement.value = frontend; + changeFrontendsSettings(frontend); +}); + + + + + -- cgit 1.4.1