From e08baa14314b3031304f990d8dbc4c6e57bb6930 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sat, 5 Feb 2022 13:24:29 +0300 Subject: [PATCH] Fixed issue #25 --- .../javascripts/helpers/youtube/youtube.js | 57 ++++++++++--------- src/pages/options/icons/clear_black_24dp.svg | 1 + src/pages/options/icons/clear_white_24dp.svg | 1 + src/pages/options/youtube/youtube.html | 36 ++++++++---- src/pages/options/youtube/youtube.js | 14 ++++- src/pages/stylesheets/styles.css | 18 +++++- 6 files changed, 84 insertions(+), 43 deletions(-) create mode 100644 src/pages/options/icons/clear_black_24dp.svg create mode 100644 src/pages/options/icons/clear_white_24dp.svg diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index daea8b7..2c03a97 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 0000000..5f1267d --- /dev/null +++ b/src/pages/options/icons/clear_black_24dp.svg @@ -0,0 +1 @@ + \ 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 0000000..ec0bd50 --- /dev/null +++ b/src/pages/options/icons/clear_white_24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index 6facdb4..99bec8d 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -56,12 +56,18 @@ +
+

Only Redirect Embedded-Video

+ +
+

Theme

@@ -70,29 +76,42 @@

Player Style

-
+

Volume: 50%

+
-

Always proxy videos through Invidious

- +

Always proxy videos

+
-

Only redirect embedded video to Invidious

- +

Autoplay Video

+

Video Quality

-
-

Automatically play video on load

- -
-

Persist preferences (as cookie)

diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index 5c90957..a1d540f 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 e7a7c5f..1f39d10 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;