about summary refs log tree commit diff stats
path: root/src/pages/options/youtube
diff options
context:
space:
mode:
authorManeraKai <manerakai@protonmail.com>2022-02-04 18:48:24 +0300
committerManeraKai <manerakai@protonmail.com>2022-02-04 18:48:24 +0300
commita9f95b3d1de44edf205508233a3526246842bbf3 (patch)
treea273532e131ae36cee2a200c953d015c3fa36bff /src/pages/options/youtube
parentAdded Piped, cleaned code (diff)
downloadlibredirect-a9f95b3d1de44edf205508233a3526246842bbf3.zip
Cleaning and refining settings
Diffstat (limited to 'src/pages/options/youtube')
-rw-r--r--src/pages/options/youtube/youtube.html126


-rw-r--r--src/pages/options/youtube/youtube.js107


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);
+});
+
+
+
+
+

 

generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-04-25 23:23:00 +0000