diff options
Diffstat (limited to 'src/pages/options/youtube')
| -rw-r--r-- | src/pages/options/youtube/youtube.html | 126 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.js | 107 |
2 files changed, 233 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="../../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options: Twitter</title> +</head> + +<body class="option"> + + <section class="links"> + <a href="../general/general.html">General</a> + <a href="youtube.html" class="selected">Youtube</a> + <a href="../twitter/twitter.html">Twitter</a> + <a href="../instagram/instagram.html">Instagram</a> + <a href="../reddit/reddit.html">Reddit</a> + <a href="../search/search.html">Search</a> + <a href="../translate/translate.html">Translate</a> + <a href="../maps/maps.html">Maps</a> + <a href="../wikipedia/wikipedia.html">Wikipedia</a> + <a href="../medium/medium.html">Medium</a> + </section> + + <section class="option-block"> + <div class="some-block option-block"> + <h4>Enable</h4> + <input id="disable-invidious" type="checkbox" checked /> + </div> + + <!-- <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </div> --> + + <!-- <section class="settings-block"> + <h4>Instance List</h4> + <div class="random-pool"> + <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" + type="text"></textarea> + <ul id="invidious-random-pool-list"></ul> + </div> + </section> --> + + <div class="some-block option-block"> + <h4>Frontend</h4> + <select id="youtube-frontend"> + <option value="piped">Piped</option> + <option value="invidious">Invidious</option> + <option value="freeTube">FreeTube</option> + </select> + </div> + + <hr> + + <div id="invidious"> + <div class="some-block option-block"> + <h4>Player Style</h4> + <select id="invidious-player-style"> + <option value="invidious">Invidious</option> + <option value="youtube">YouTube</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Dark mode</h4> + <input id="invidious-dark-mode" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4>Volume: <span id="volume-value">50%</span></h4> + <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4> + <input id="always-proxy" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> + <input id="only-embed" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Video Quality</h4> + <select id="video-quality"> + <option value="">Default</option> + <option value="hd720">720p</option> + <option value="medium">480p</option> + <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> + </option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Subtitles - language codes</h4> + <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> + </div> + + <div class="some-block option-block"> + <h4>Automatically play video on load</h4> + <input id="invidious-autoplay" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Persist preferences (as cookie)</h4> + <input id="persist-invidious-prefs" type="checkbox" checked /> + </div> + </div> + + <div id="piped"></div> + + </section> + + <script type="module" src="../init.js"></script> + <script type="module" src="./youtube.js"></script> + <!-- <script src="../../assets/javascripts/localise.js"></script> --> +</body> + +</html>
\ 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); +}); + + + + + |