diff options
| -rw-r--r-- | src/assets/javascripts/helpers/youtube/youtube.js | 57 | ||||
| -rw-r--r-- | src/pages/options/icons/clear_black_24dp.svg | 1 | ||||
| -rw-r--r-- | src/pages/options/icons/clear_white_24dp.svg | 1 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.html | 36 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.js | 14 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 18 |
6 files changed, 84 insertions, 43 deletions
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index daea8b7e..2c03a971 100644 --- a/src/assets/javascripts/helpers/youtube/youtube.js +++ b/src/assets/javascripts/helpers/youtube/youtube.js @@ -154,21 +154,13 @@ function setFrontend(val) { console.log("youtubeFrontend: ", val) } -let useFreeTube; -function setUseFreeTube(val) { - useFreeTube = val; - browser.storage.sync.set({ useFreeTube }) - console.log("useFreeTube: ", useFreeTube) -} -const getUseFreeTube = () => useFreeTube; - let persistInvidiousPrefs; +const getPersistInvidiousPrefs = () => persistInvidiousPrefs; function setPersistInvidiousPrefs(val) { persistInvidiousPrefs = val; browser.storage.sync.set({ persistInvidiousPrefs }) console.log("persistInvidiousPrefs: ", persistInvidiousPrefs) } -const getPersistInvidiousPrefs = () => persistInvidiousPrefs; function isYoutube(url) { return targets.includes(url.host); @@ -188,7 +180,6 @@ async function init() { "invidiousPlayerStyle", "invidiousSubtitles", "invidiousAutoplay", - "useFreeTube", "youtubeRedirects", "youtubeFrontend", ]); @@ -198,18 +189,16 @@ async function init() { invidiousInstance = result.invidiousInstance; - invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? true; + invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? 'DEFAULT'; invidiousOnlyEmbeddedVideo = result.invidiousOnlyEmbeddedVideo ?? false; - invidiousVideoQuality = result.invidiousVideoQuality ?? 'medium'; - invidiousTheme = result.invidiousTheme ?? 'dark'; - invidiousVolume = result.invidiousVolume ?? 50; - invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'invidious'; + invidiousVideoQuality = result.invidiousVideoQuality ?? 'DEFAULT'; + invidiousTheme = result.invidiousTheme ?? 'DEFAULT'; + invidiousVolume = result.invidiousVolume ?? '--'; + invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'DEFAULT'; invidiousSubtitles = result.invidiousSubtitles || ''; - invidiousAutoplay = result.invidiousAutoplay ?? true; + invidiousAutoplay = result.invidiousAutoplay ?? 'DEFAULT'; persistInvidiousPrefs = result.persistInvidiousPrefs ?? false; - - useFreeTube = result.useFreeTube ?? false; } function invidiousInitCookies(tabId) { @@ -237,6 +226,7 @@ function redirect(url, initiator, type) { if (frontend == 'freeTube' && type === "main_frame") return `freetube://${url}`; + else if (frontend == 'invidious') { if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API. @@ -248,19 +238,33 @@ function redirect(url, initiator, type) { if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null; - url.searchParams.append("local", invidiousAlwaysProxy); - url.searchParams.append("quality", invidiousVideoQuality); - url.searchParams.append("dark_mode", invidiousTheme); - url.searchParams.append("volume", invidiousVolume); - url.searchParams.append("player_style", invidiousPlayerStyle); - url.searchParams.append("subtitles", invidiousSubtitles); - url.searchParams.append("autoplay", invidiousAutoplay); + if (invidiousAlwaysProxy != "DEFAULT") + url.searchParams.append("local", invidiousAlwaysProxy); + + if (invidiousVideoQuality != "DEFAULT") + url.searchParams.append("quality", invidiousVideoQuality); + + if (invidiousTheme != "DEFAULT") + url.searchParams.append("dark_mode", invidiousTheme); + + if (invidiousVolume != "--") + url.searchParams.append("volume", invidiousVolume); + + if (invidiousPlayerStyle != "DEFAULT") + url.searchParams.append("player_style", invidiousPlayerStyle); + + if (invidiousSubtitles.trim() != '') + url.searchParams.append("subtitles", invidiousSubtitles); + + if (invidiousAutoplay != "DEFAULT") + url.searchParams.append("autoplay", invidiousAutoplay); let randomInstance = commonHelper.getRandomInstance(redirects.invidious.normal) return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`; } else if (frontend == 'piped') { + if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null; let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal); if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com")) return `${randomInstance}${url.pathname}${url.search}`; @@ -314,9 +318,6 @@ export default { setInvidiousAutoplay, getInvidiousAutoplay, - getUseFreeTube, - setUseFreeTube, - getPersistInvidiousPrefs, setPersistInvidiousPrefs, diff --git a/src/pages/options/icons/clear_black_24dp.svg b/src/pages/options/icons/clear_black_24dp.svg new file mode 100644 index 00000000..5f1267d7 --- /dev/null +++ b/src/pages/options/icons/clear_black_24dp.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg> \ No newline at end of file diff --git a/src/pages/options/icons/clear_white_24dp.svg b/src/pages/options/icons/clear_white_24dp.svg new file mode 100644 index 00000000..ec0bd50f --- /dev/null +++ b/src/pages/options/icons/clear_white_24dp.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg> \ No newline at end of file diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index 6facdb4c..99bec8d6 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -56,12 +56,18 @@ </select> </div> + <div class="some-block option-block"> + <h4>Only Redirect Embedded-Video</h4> + <input id="only-embed" type="checkbox" checked /> + </div> + <hr> <div id="invidious"> <div class="some-block option-block"> <h4>Theme</h4> <select id="invidious-theme"> + <option value="DEFAULT">Default</option> <option value="dark">Dark</option> <option value="light">Light</option> </select> @@ -70,29 +76,42 @@ <div class="some-block option-block"> <h4>Player Style</h4> <select id="invidious-player-style"> + <option value="DEFAULT">Default</option> <option value="invidious">Invidious</option> <option value="youtube">YouTube</option> </select> </div> - <div class="some-block"> + <div class="some-block option-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" /> + <button type="button" class="default" id="clear-invidious-volume"> + <img src="../icons/clear_white_24dp.svg"> + </button> </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 /> + <h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos</h4> + <select id="invidious-always-proxy"> + <option value="DEFAULT">Default</option> + <option value="true">True</option> + <option value="true">False</option> + </select> </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 /> + <h4>Autoplay Video</h4> + <select id="invidious-autoplay"> + <option value="DEFAULT">Default</option> + <option value="true">True</option> + <option value="true">False</option> + </select> </div> <div class="some-block option-block"> <h4>Video Quality</h4> <select id="video-quality"> + <option value="DEFAULT">Default</option> <option value="hd720">720p</option> <option value="medium">480p</option> <option value="dash">DASH (adaptive quality)</option> @@ -101,16 +120,11 @@ </div> <div class="some-block option-block"> - <h4>Subtitles - language codes</h4> + <h4>Subtitles</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> diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index 5c909578..a1d540f2 100644 --- a/src/pages/options/youtube/youtube.js +++ b/src/pages/options/youtube/youtube.js @@ -50,6 +50,14 @@ invidiousVolumeElement.addEventListener("input", invidiousVolumeValueElement.textContent = `${invidiousVolumeElement.value}%`; } ); +let invidiousClearVolumeElement = document.getElementById("clear-invidious-volume"); +invidiousClearVolumeElement.addEventListener("click", + (_) => { + youtubeHelper.setInvidiousVolume('--'); + invidiousVolumeValueElement.textContent = `--%`; + invidiousVolumeElement.value = 50; + } +); let invidiousPlayerStyleElement = document.getElementById("invidious-player-style"); invidiousPlayerStyleElement.addEventListener("change", @@ -65,12 +73,12 @@ invidiousSubtitlesElement.addEventListener("input", let invidiousAutoplayElement = document.getElementById("invidious-autoplay"); invidiousAutoplayElement.addEventListener("change", - (event) => youtubeHelper.setInvidiousAutoplay(event.target.checked) + (event) => youtubeHelper.setInvidiousAutoplay(event.target.options[invidiousAutoplayElement.selectedIndex].value) ); -let invidiousAlwaysProxyElement = document.getElementById("always-proxy"); +let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy"); invidiousAlwaysProxyElement.addEventListener("change", - (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked) + (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value) ); let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed"); diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index e7a7c5f2..1f39d109 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -329,7 +329,7 @@ h4 { div.some-block h4 { margin: 0; - width: 70%; + /* width: 70%; */ } div.option-block h4 { @@ -432,6 +432,22 @@ textarea { width: 100%; } +button.default { + margin-left: 30px; + background-color: transparent; + border: none; + color: white; + padding: 5px; + width: 34px; + height: 34px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} + @media (prefers-color-scheme: light) { body { --text: #000; |
