diff options
Diffstat (limited to '')
| -rw-r--r-- | src/assets/javascripts/helpers/youtube.js | 201 | ||||
| -rw-r--r-- | src/pages/background/background.js | 12 | ||||
| -rw-r--r-- | src/pages/options/youtube.html | 103 | ||||
| -rw-r--r-- | src/pages/options/youtube.js | 27 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 160 |
5 files changed, 219 insertions, 284 deletions
diff --git a/src/assets/javascripts/helpers/youtube.js b/src/assets/javascripts/helpers/youtube.js index 1699d6e8..30f7a4b5 100644 --- a/src/assets/javascripts/helpers/youtube.js +++ b/src/assets/javascripts/helpers/youtube.js @@ -21,39 +21,57 @@ const targets = [ when updating this list: */ let redirects = { - "normal": [ - "https://invidious.snopyta.org", - "https://invidious.xyz", - "https://invidious.kavin.rocks", - "https://tube.connect.cafe", - "https://invidious.zapashcanon.fr", - "https://invidiou.site", - "https://vid.mint.lgbt", - "https://invidious.site", - "https://yewtu.be", - "https://invidious.tube", - "https://invidious.silkky.cloud", - "https://invidious.himiko.cloud", - "https://inv.skyn3t.in", - "https://tube.incognet.io", - "https://invidious.tinfoil-hat.net", - "https://invidious.namazso.eu", - "https://vid.puffyan.us", - "https://dev.viewtube.io", - "https://invidious.048596.xyz", - ], - "onion": [ - "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion", - "http://qklhadlycap4cnod.onion", - "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion", - "http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion", - ] + "invidious": { + "normal": [ + "https://invidious.snopyta.org", + "https://invidious.xyz", + "https://invidious.kavin.rocks", + "https://tube.connect.cafe", + "https://invidious.zapashcanon.fr", + "https://invidiou.site", + "https://vid.mint.lgbt", + "https://invidious.site", + "https://yewtu.be", + "https://invidious.tube", + "https://invidious.silkky.cloud", + "https://invidious.himiko.cloud", + "https://inv.skyn3t.in", + "https://tube.incognet.io", + "https://invidious.tinfoil-hat.net", + "https://invidious.namazso.eu", + "https://vid.puffyan.us", + "https://dev.viewtube.io", + "https://invidious.048596.xyz", + ], + "onion": [ + "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion", + "http://qklhadlycap4cnod.onion", + "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion", + "http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion", + ] + }, + "piped": { + "normal": [ + "https://piped.kavin.rocks", + "https://piped.silkky.cloud", + "https://piped.tokhmi.xyz", + "https://piped.mint.lgbt", + ] + } }; + const getRedirects = () => redirects; -function setRedirects(val) { - redirects = val; - browser.storage.sync.set({ youtubeRedirects: val }) - console.log("youtubeRedirects: ", val) + +function setInvidiousRedirects(val) { + redirects.invidious = val; + browser.storage.sync.set({ youtubeRedirects: redirects }) + console.log("invidiousRedirects: ", val) +} + +function setPipedRedirects(val) { + redirects.piped = val; + browser.storage.sync.set({ youtubeRedirects: redirects }) + console.log("pipedRedirects: ", val) } let disableYoutube; @@ -136,6 +154,15 @@ function setInvidiousAutoplay(val) { console.log("invidiousAutoplay: ", invidiousAutoplay) } + +let frontend; +const getFrontend = () => frontend; +function setFrontend(val) { + frontend = val; + browser.storage.sync.set({ youtubeFrontend: val }) + console.log("youtubeFrontend: ", val) +} + let useFreeTube; function setUseFreeTube(val) { useFreeTube = val; @@ -153,49 +180,6 @@ function setPersistInvidiousPrefs(val) { } const getPersistInvidiousPrefs = () => persistInvidiousPrefs; -function redirect(url, initiator, type) { - if (disableYoutube) - return null; - - if ( - initiator && - ( - initiator.origin === invidiousInstance || - redirects.normal.includes(initiator.origin) || - targets.includes(initiator.host) - ) - ) - return null; - - if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API. - - if (url.host.split(".")[0] === "studio") return null; // Avoid redirecting `studio.youtube.com` - - if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null; - - if (useFreeTube && type === "main_frame") - return `freetube://${url}`; - - // Apply settings - if (invidiousAlwaysProxy) url.searchParams.append("local", true); - - if (invidiousVideoQuality) url.searchParams.append("quality", invidiousVideoQuality); - - if (invidiousDarkMode) url.searchParams.append("dark_mode", invidiousDarkMode); - - if (invidiousVolume) url.searchParams.append("volume", invidiousVolume); - - if (invidiousPlayerStyle) url.searchParams.append("player_style", invidiousPlayerStyle); - - if (invidiousSubtitles) url.searchParams.append("subtitles", invidiousSubtitles); - - if (invidiousAutoplay) url.searchParams.append("autoplay", 1); - - let randomInstance = commonHelper.getRandomInstance(redirects.normal) - - return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`; -} - function isYoutube(url) { return targets.includes(url.host); } @@ -239,7 +223,8 @@ async function init() { "invidiousSubtitles", "invidiousAutoplay", "useFreeTube", - "youtubeRedirects" + "youtubeRedirects", + "youtubeFrontend", ]); disableYoutube = result.disableYoutube ?? false; invidiousInstance = result.invidiousInstance; @@ -257,11 +242,75 @@ async function init() { redirects = result.youtubeRedirects if (result.persistInvidiousPrefs) initInvidiousCookie(); + + frontend = result.youtubeFrontend ?? 'piped'; } +function redirect(url, initiator, type) { + if (disableYoutube) + return null; + + if ( + initiator && + ( + initiator.origin === invidiousInstance || + redirects.invidious.normal.includes(initiator.origin) || + redirects.piped.normal.includes(initiator.origin) || + targets.includes(initiator.host) + ) + ) + return null; + + if (frontend == 'invidious') { + + if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API. + + if (url.host.split(".")[0] === "studio") return null; // Avoid redirecting `studio.youtube.com` + + if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null; + + if (useFreeTube && type === "main_frame") + return `freetube://${url}`; + + // Apply settings + if (invidiousAlwaysProxy) url.searchParams.append("local", true); + + if (invidiousVideoQuality) url.searchParams.append("quality", invidiousVideoQuality); + + if (invidiousDarkMode) url.searchParams.append("dark_mode", invidiousDarkMode); + + if (invidiousVolume) url.searchParams.append("volume", invidiousVolume); + + if (invidiousPlayerStyle) url.searchParams.append("player_style", invidiousPlayerStyle); + + if (invidiousSubtitles) url.searchParams.append("subtitles", invidiousSubtitles); + + if (invidiousAutoplay) url.searchParams.append("autoplay", 1); + + let randomInstance = commonHelper.getRandomInstance(redirects.invidious.normal) + + return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`; + + } else if (frontend == 'piped') { + 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}`; + + if (url.hostname.endsWith("youtu.be") && url.pathname.length > 1) + return `${randomInstance}/watch?v=${url.pathname.substring(1)}`; + + } +} + + export default { + getFrontend, + setFrontend, + getRedirects, - setRedirects, + setInvidiousRedirects, + setPipedRedirects, + redirect, isYoutube, diff --git a/src/pages/background/background.js b/src/pages/background/background.js index a39af464..caa7444d 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -77,7 +77,8 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => { var protocolHost = `${url.protocol}//${url.host}`; var mightyList = []; mightyList.push( - ...youtubeHelper.getRedirects().normal, + ...youtubeHelper.getRedirects().invidious.normal, + ...youtubeHelper.getRedirects().piped.normal, ...twitterHelper.getRedirects().normal, ...instagramHelper.getRedirects().normal, ...redditHelper.getRedirects().libreddit.normal, @@ -101,7 +102,11 @@ browser.pageAction.onClicked.addListener((tab) => { var protocolHost = `${tabUrl.protocol}//${tabUrl.host}`; var newUrl; - if (youtubeHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://youtube.com'; + if ( + youtubeHelper.getRedirects().invidious.normal.includes(protocolHost) || + youtubeHelper.getRedirects().piped.normal.includes(protocolHost) + ) + newUrl = 'https://youtube.com'; if (twitterHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://twitter.com'; @@ -131,4 +136,5 @@ browser.pageAction.onClicked.addListener((tab) => { if (wikipediaHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://wikipedia.com'; if (newUrl) browser.tabs.update({ url: tabUrl.href.replace(protocolHost, newUrl) }); -});
\ No newline at end of file +}); + diff --git a/src/pages/options/youtube.html b/src/pages/options/youtube.html index 442c15c0..c1bd830e 100644 --- a/src/pages/options/youtube.html +++ b/src/pages/options/youtube.html @@ -26,7 +26,7 @@ <section class="option-block"> <div class="some-block option-block"> - <h1>Enable</h1> + <h4>Enable</h4> <input id="disable-invidious" type="checkbox" checked /> </div> @@ -48,64 +48,77 @@ </section> --> <div class="some-block option-block"> - <h4>Player Style</h4> - <select id="invidious-player-style"> + <h4>Frontend</h4> + <select id="youtube-frontend"> + <option value="piped">Piped</option> <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> + <hr> - <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 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 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> - <input id="use-freetube" type="checkbox" checked /> - </div> + <div class="some-block option-block"> + <h4>Dark mode</h4> + <input id="invidious-dark-mode" type="checkbox" checked /> + </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"> + <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_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> - <input id="only-embed" type="checkbox" checked /> - </div> + <div class="some-block option-block"> + <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> + <input id="use-freetube" 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 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>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 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>Automatically play video on load</h4> - <input id="invidious-autoplay" 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>Persist preferences (as cookie)</h4> - <input id="persist-invidious-prefs" type="checkbox" checked /> + <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> diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js index 9fac54f3..c592b4cc 100644 --- a/src/pages/options/youtube.js +++ b/src/pages/options/youtube.js @@ -2,6 +2,7 @@ import youtubeHelper from "../../assets/javascripts/helpers/youtube.js"; import commonHelper from "../../assets/javascripts/helpers/common.js"; let disableYoutubeElement = document.getElementById("disable-invidious"); +let youtubeFrontendElement = document.getElementById("youtube-frontend"); let invidiousDarkModeElement = document.getElementById("invidious-dark-mode"); let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs"); let invidiousVolumeElement = document.getElementById("invidious-volume"); @@ -14,6 +15,20 @@ let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed"); let invidiousVideoQualityElement = document.getElementById("video-quality"); let invidiousVolumeValueElement = document.querySelector("#volume-value"); +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'; + } +} + youtubeHelper.init().then(() => { disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube(); invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode(); @@ -27,6 +42,9 @@ youtubeHelper.init().then(() => { invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy(); invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality(); invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay(); + let frontend = youtubeHelper.getFrontend() + youtubeFrontendElement.value = frontend; + changeFrontendsSettings(frontend); }); @@ -63,7 +81,6 @@ invidiousAutoplayElement.addEventListener("change", (event) => youtubeHelper.setInvidiousAutoplay(event.target.checked) ); - useFreeTubeElement.addEventListener("change", (event) => youtubeHelper.setUseFreeTube(event.target.checked) ); @@ -79,3 +96,11 @@ invidiousOnlyEmbeddedVideoElement.addEventListener("change", invidiousVideoQualityElement.addEventListener("change", (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value) ); + +youtubeFrontendElement.addEventListener("change", + (event) => { + let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value + youtubeHelper.setFrontend(frontend); + changeFrontendsSettings(frontend); + } +);
\ No newline at end of file diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 0468935d..e7a7c5f2 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -31,11 +31,6 @@ div.some-block input[type="checkbox"] { -webkit-appearance: none; } -h1 { - font-size: 14px; - margin: 7px auto; -} - h2 { clear: both; font-size: 12px; @@ -60,7 +55,6 @@ select { background-color: var(--bg-main); border-style: solid; border-color: #767676; - color: var(--text); } @@ -76,7 +70,6 @@ select { border-radius: 3px; } - input[type="radio"] { appearance: radio; -moz-appearance: radio; @@ -237,7 +230,6 @@ body.option { padding: 40px; } - section.links { margin: 00px 0; } @@ -265,7 +257,6 @@ section.links a.selected { vertical-align: middle; } - input[type="range"] { width: 50%; } @@ -284,23 +275,8 @@ input[type="url"]:focus { color: var(--active); } -.collapsible { - background-color: var(--bg-main); - cursor: pointer; - color: var(--active); - padding: 18px; - width: 100%; - border: none; - text-align: left; - outline: none; - font-size: 15px; - border-bottom: solid var(--active); - font-weight: bold; -} - /* \25BE */ - hr { height: 2px; margin: 0 15px; @@ -308,28 +284,6 @@ hr { border: none; } -.new-badge { - position: relative; -} - -.new-badge[data-new-badge]:after { - content: "New!"; - position: absolute; - top: -10px; - right: -42px; - font-size: 0.9em; - background: var(--active); - color: white; - width: 35px; - height: 18px; - text-align: center; - line-height: 18px; - border-radius: 25px; - padding: 2px; - box-shadow: 0 0 1px var(--bg-secondary); - font-weight: bold; -} - .light-theme.popup, .light-theme .popup { background-color: var(--bg-secondary); @@ -354,51 +308,6 @@ body.light-theme a{ color: black; } -section { - background-color: var(--bg-main); -} - -section.youtube { - grid-area: youtube; -} - -section.twitter { - grid-area: twitter; -} - -section.instagram { - grid-area: instagram; -} - -section.reddit { - grid-area: reddit; -} - -section.search { - grid-area: search; -} - -section.translate { - grid-area: translate; -} - -section.maps { - grid-area: maps; -} - -section.wikipedia { - grid-area: wikipedia; -} - -section.medium { - grid-area: medium; -} - -section.exception { - grid-area: general; -} - - div.some-block { padding: 0 15px; justify-content: space-between; @@ -431,9 +340,7 @@ div.option-block h4 { div.option-block h1 { margin: 0; - margin-right: 5px; - width: 80%; - font-size: 20px; + font-size: 28px; color: var(--active); } @@ -516,39 +423,6 @@ a.button:active { transform: translateY(1px); } -div.option { - box-sizing: border-box; - margin: auto; - max-width: 1800px; - display: grid; - grid-template-columns: 33.3% 33.3% 33.3%; - gap: 2px; - /* border: 3px solid var(--active); */ - background-color: rgb(58, 58, 58); - grid-template-areas: - "general twitter instagram" - "youtube reddit search" - "youtube maps wikipedia" - "translate medium wikipedia" -} - -div.random-pool { - display: flex; - align-items: stretch; -} - -div.random-pool ul { - list-style: disc; - margin: 0 20px; -} - -div.random-pool li { - border: none; - padding: 10px 0; - font-size: 15px; - line-height: 1px; -} - textarea { line-height: 21px; background-color: var(--bg-secondary); @@ -558,38 +432,6 @@ textarea { width: 100%; } -@media (max-width: 1590px) { - div.option { - max-width: 1200px; - grid-template-columns: 50% 50%; - grid-template-areas: - "general twitter" - "youtube instagram" - "youtube reddit" - "search maps" - "translate wikipedia" - "medium wikipedia" - } -} - -@media (max-width: 1090px) { - div.option { - max-width: 600px; - grid-template-columns: 100%; - grid-template-areas: - "general" - "youtube" - "twitter" - "instagram" - "search" - "reddit" - "maps" - "translate" - "wikipedia" - "medium" - } -} - @media (prefers-color-scheme: light) { body { --text: #000; |