From 85aadc0eb6988e3c2e3e8d504ebf84bbf9180759 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sun, 6 Feb 2022 07:51:18 +0300 Subject: [PATCH] Added default and custom instances to piped --- src/assets/javascripts/data.js | 1 - .../javascripts/helpers/youtube/youtube.js | 53 +++++-- src/pages/options/youtube/invidious.js | 126 ++++++++++++++++ src/pages/options/youtube/piped.js | 94 ++++++++++++ src/pages/options/youtube/youtube.html | 37 +++-- src/pages/options/youtube/youtube.js | 135 +----------------- 6 files changed, 295 insertions(+), 151 deletions(-) create mode 100644 src/pages/options/youtube/invidious.js create mode 100644 src/pages/options/youtube/piped.js diff --git a/src/assets/javascripts/data.js b/src/assets/javascripts/data.js index a4e37ca7..bf0666ba 100644 --- a/src/assets/javascripts/data.js +++ b/src/assets/javascripts/data.js @@ -7,7 +7,6 @@ function setTheme(val) { }; export default { - exceptions, theme, setTheme, } \ No newline at end of file diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index b6588808..192a8ff7 100644 --- a/src/assets/javascripts/helpers/youtube/youtube.js +++ b/src/assets/javascripts/helpers/youtube/youtube.js @@ -61,7 +61,7 @@ function setInvidiousRedirects(val) { console.log("invidiousRedirects: ", val) } -let invidiousRedirectsChecks = redirects.invidious.normal; +let invidiousRedirectsChecks; const getInvidiousRedirectsChecks = () => invidiousRedirectsChecks; function setInvidiousRedirectsChecks(val) { invidiousRedirectsChecks = val; @@ -77,6 +77,22 @@ function setInvidiousCustomRedirects(val) { console.log("invidiousCustomRedirects: ", val) } +let pipedRedirectsChecks; +const getPipedRedirectsChecks = () => pipedRedirectsChecks; +function setPipedRedirectsChecks(val) { + pipedRedirectsChecks = val; + browser.storage.sync.set({ pipedRedirectsChecks }) + console.log("pipedRedirectsChecks: ", val) +} + +let pipedCustomRedirects = []; +const getPipedCustomRedirects = () => pipedCustomRedirects; +function setPipedCustomRedirects(val) { + pipedCustomRedirects = val; + browser.storage.sync.set({ pipedCustomRedirects }) + console.log("pipedCustomRedirects: ", val) +} + function setPipedRedirects(val) { redirects.piped = val; browser.storage.sync.set({ youtubeRedirects: redirects }) @@ -209,13 +225,11 @@ async function init() { "youtubeFrontend", "invidiousRedirectsChecks", "invidiousCustomRedirects", + "pipedRedirectsChecks", + "pipedCustomRedirects", ]); if (result.youtubeRedirects) redirects = result.youtubeRedirects; - if (result.invidiousRedirectsChecks) invidiousRedirectsChecks = result.invidiousRedirectsChecks; - - if (result.invidiousCustomRedirects) invidiousCustomRedirects = result.invidiousCustomRedirects; - frontend = result.youtubeFrontend ?? 'piped'; disableYoutube = result.disableYoutube ?? false; @@ -228,6 +242,12 @@ async function init() { invidiousSubtitles = result.invidiousSubtitles || ''; invidiousAutoplay = result.invidiousAutoplay ?? 'DEFAULT'; + invidiousRedirectsChecks = result.invidiousRedirectsChecks ?? [...redirects.invidious.normal]; + invidiousCustomRedirects = result.invidiousCustomRedirects ?? []; + + pipedRedirectsChecks = result.pipedRedirectsChecks ?? [...redirects.invidious.normal]; + pipedCustomRedirects = result.pipedCustomRedirects ?? []; + persistInvidiousPrefs = result.persistInvidiousPrefs ?? false; } @@ -253,6 +273,7 @@ function redirect(url, initiator, type) { ) return null; + if (url.hostname == "studio.youtube.com") return null; if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API. @@ -272,7 +293,12 @@ function redirect(url, initiator, type) { if (invidiousSubtitles.trim() != '') url.searchParams.append("subtitles", invidiousSubtitles); if (invidiousAutoplay != "DEFAULT") url.searchParams.append("autoplay", invidiousAutoplay); - let randomInstance = commonHelper.getRandomInstance([...invidiousRedirectsChecks, ...invidiousCustomRedirects]) + let instancesList = [...invidiousRedirectsChecks, ...invidiousCustomRedirects]; + + if (instancesList.length === 0) + return null; + + let randomInstance = commonHelper.getRandomInstance(instancesList) return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`; @@ -280,12 +306,17 @@ function redirect(url, initiator, type) { if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null; + let instancesList = [...pipedRedirectsChecks, ...pipedCustomRedirects]; + + if (instancesList.length === 0) + return null; + + let randomInstance = commonHelper.getRandomInstance(instancesList) + if (invidiousTheme != "DEFAULT") url.searchParams.append("theme", invidiousTheme); if (invidiousVolume != "--") url.searchParams.append("volume", invidiousVolume / 100); if (invidiousAutoplay != "DEFAULT") url.searchParams.append("playerAutoPlay", invidiousAutoplay); - let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal); - if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com") || invidiousHostNames().includes(url.hostname)) return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`; @@ -345,5 +376,11 @@ export default { getInvidiousCustomRedirects, setInvidiousCustomRedirects, + getPipedRedirectsChecks, + setPipedRedirectsChecks, + + getPipedCustomRedirects, + setPipedCustomRedirects, + init, }; diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js new file mode 100644 index 00000000..e1b26efc --- /dev/null +++ b/src/pages/options/youtube/invidious.js @@ -0,0 +1,126 @@ +import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; + +let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy"); +invidiousAlwaysProxyElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value) +); + +let invidiousPlayerStyleElement = document.getElementById("invidious-player-style"); +invidiousPlayerStyleElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value) +); + +let invidiousVideoQualityElement = document.getElementById("video-quality"); +invidiousVideoQualityElement.addEventListener("change", + (event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value) +); + +let invidiousSubtitlesElement = document.getElementById("invidious-subtitles"); +invidiousSubtitlesElement.addEventListener("change", + () => youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value) +); + +let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs"); +persistInvidiousPrefsElement.addEventListener("change", + (event) => youtubeHelper.setPersistInvidiousPrefs(event.target.checked) +); + +youtubeHelper.init().then(() => { + invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle(); + invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy(); + invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality(); + invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles(); + persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs(); + + + invidiousDefaultRedirects = youtubeHelper.getInvidiousRedirectsChecks(); + invidiousCheckListElement.innerHTML = + [ + '
Toggle All
', + ...youtubeHelper.getRedirects().invidious.normal.map((x) => `
${x}
`), + ].join('\n
\n'); + + calcInvidiousCheckBoxes(); + document.getElementById('invidious-toogle-all').addEventListener("change", (event) => { + if (event.target.checked) + invidiousDefaultRedirects = [...youtubeHelper.getRedirects().invidious.normal]; + else + invidiousDefaultRedirects = []; + youtubeHelper.setInvidiousRedirectsChecks(invidiousDefaultRedirects); + calcInvidiousCheckBoxes(); + }); + + for (let element of invidiousCheckListElement.getElementsByTagName('input')) { + if (element.id != 'invidious-toogle-all') + document.getElementById(element.id).addEventListener("change", (event) => { + if (event.target.checked) + invidiousDefaultRedirects.push(element.id) + else { + let index = invidiousDefaultRedirects.indexOf(element.id); + if (index > -1) invidiousDefaultRedirects.splice(index, 1); + } + youtubeHelper.setInvidiousRedirectsChecks(invidiousDefaultRedirects); + calcInvidiousCheckBoxes(); + }); + } + + invidiousCustomInstances = youtubeHelper.getInvidiousCustomRedirects(); + calcInvidiousCustomInstances(); +}); + + +let invidiousCustomInstanceInput = document.getElementById("invidious-custom-instance"); +let invidiousCustomInstances = []; + +let invidiousCheckListElement = document.getElementById("invidious-checklist"); + + +let invidiousDefaultRedirects; + +function calcInvidiousCheckBoxes() { + let isTrue = true; + for (const item of youtubeHelper.getRedirects().invidious.normal) + if (!invidiousDefaultRedirects.includes(item)) { + isTrue = false; + break; + } + for (const element of invidiousCheckListElement.getElementsByTagName('input')) + element.checked = invidiousDefaultRedirects.includes(element.id) + document.getElementById('invidious-toogle-all').checked = isTrue; +} + +function calcInvidiousCustomInstances() { + document.getElementById("invidious-custom-checklist").innerHTML = + invidiousCustomInstances.map( + (x) => `
${x} +
+
` + ).join('\n'); + + for (const item of invidiousCustomInstances) { + document.getElementById(`clear-${item}`).addEventListener("click", () => { + let index = invidiousCustomInstances.indexOf(item); + if (index > -1) invidiousCustomInstances.splice(index, 1); + youtubeHelper.setInvidiousCustomRedirects(invidiousCustomInstances); + calcInvidiousCustomInstances(); + }); + } +} + +document.getElementById("custom-invidious-instance-form").addEventListener("submit", (event) => { + event.preventDefault(); + let val = invidiousCustomInstanceInput.value + if (invidiousCustomInstanceInput.validity.valid && !youtubeHelper.getRedirects().invidious.normal.includes(val)) { + if (!invidiousCustomInstances.includes(val)) { + invidiousCustomInstances.push(val) + youtubeHelper.setInvidiousCustomRedirects(invidiousCustomInstances); + } + calcInvidiousCustomInstances(); + } +}) \ No newline at end of file diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js new file mode 100644 index 00000000..8f12f8ae --- /dev/null +++ b/src/pages/options/youtube/piped.js @@ -0,0 +1,94 @@ +import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; + +youtubeHelper.init().then(() => { + + pipedDefaultRedirects = youtubeHelper.getPipedRedirectsChecks(); + pipedCheckListElement.innerHTML = + [ + '
Toggle All
', + ...youtubeHelper.getRedirects().piped.normal.map((x) => `
${x}
`), + ].join('\n
\n'); + + calcPipedCheckBoxes(); + document.getElementById('piped-toogle-all').addEventListener("change", (event) => { + if (event.target.checked) + pipedDefaultRedirects = [...youtubeHelper.getRedirects().piped.normal]; + else + pipedDefaultRedirects = []; + youtubeHelper.setPipedRedirectsChecks(pipedDefaultRedirects); + calcPipedCheckBoxes(); + }); + + for (let element of pipedCheckListElement.getElementsByTagName('input')) { + if (element.id != 'piped-toogle-all') + document.getElementById(element.id).addEventListener("change", (event) => { + if (event.target.checked) + pipedDefaultRedirects.push(element.id) + else { + let index = pipedDefaultRedirects.indexOf(element.id); + if (index > -1) pipedDefaultRedirects.splice(index, 1); + } + youtubeHelper.setPipedRedirectsChecks(pipedDefaultRedirects); + calcPipedCheckBoxes(); + }); + } + + pipedCustomInstances = youtubeHelper.getPipedCustomRedirects(); + calcPipedCustomInstances(); +}); + + +let pipedCustomInstanceInput = document.getElementById("piped-custom-instance"); +let pipedCustomInstances = []; + +let pipedCheckListElement = document.getElementById("piped-checklist"); + +let pipedDefaultRedirects; + +function calcPipedCheckBoxes() { + let isTrue = true; + for (const item of youtubeHelper.getRedirects().piped.normal) + if (!pipedDefaultRedirects.includes(item)) { + isTrue = false; + break; + } + for (const element of pipedCheckListElement.getElementsByTagName('input')) + element.checked = pipedDefaultRedirects.includes(element.id) + document.getElementById('piped-toogle-all').checked = isTrue; +} + +function calcPipedCustomInstances() { + document.getElementById("piped-custom-checklist").innerHTML = + pipedCustomInstances.map( + (x) => `
${x} +
+
` + ).join('\n'); + + for (const item of pipedCustomInstances) { + document.getElementById(`clear-${item}`).addEventListener("click", () => { + let index = pipedCustomInstances.indexOf(item); + if (index > -1) pipedCustomInstances.splice(index, 1); + youtubeHelper.setPipedCustomRedirects(pipedCustomInstances); + calcPipedCustomInstances(); + }); + } +} + +document.getElementById("custom-piped-instance-form").addEventListener("submit", (event) => { + event.preventDefault(); + let val = pipedCustomInstanceInput.value + if (pipedCustomInstanceInput.validity.valid && !youtubeHelper.getRedirects().piped.normal.includes(val)) { + if (!pipedCustomInstances.includes(val)) { + pipedCustomInstances.push(val) + youtubeHelper.setPipedCustomRedirects(pipedCustomInstances); + } + calcPipedCustomInstances(); + } +}) \ No newline at end of file diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index 0778b794..8ecca39b 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -124,16 +124,13 @@

Default Instances

-
+
-
-

Custom Instances

- -
+
- -
+
-
+
+
+

Default Instances

+
+
+
+
+
+

Custom Instances

+
+
+
+ + +
+
+
+
+ + diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index dcd8c22d..a0072036 100644 --- a/src/pages/options/youtube/youtube.js +++ b/src/pages/options/youtube/youtube.js @@ -1,5 +1,4 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; -import commonHelper from "../../../assets/javascripts/helpers/common.js"; let disableYoutubeElement = document.getElementById("disable-invidious"); @@ -41,11 +40,6 @@ invidiousThemeElement.addEventListener("change", (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value) ); -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", @@ -63,152 +57,25 @@ invidiousClearVolumeElement.addEventListener("click", } ); -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("change", - () => youtubeHelper.setInvidiousSubtitles(invidiousSubtitlesElement.value) -); let invidiousAutoplayElement = document.getElementById("invidious-autoplay"); invidiousAutoplayElement.addEventListener("change", (event) => youtubeHelper.setInvidiousAutoplay(event.target.options[invidiousAutoplayElement.selectedIndex].value) ); -let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy"); -invidiousAlwaysProxyElement.addEventListener("change", - (event) => youtubeHelper.setInvidiousAlwaysProxy(event.target.options[invidiousAlwaysProxyElement.selectedIndex].value) -); - 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) -); - - -let invidiousCheckListElement = document.getElementById("checklist"); - - - youtubeHelper.init().then(() => { disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube(); invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme(); - 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() + let frontend = youtubeHelper.getFrontend(); youtubeFrontendElement.value = frontend; - invidiousCheckListElement.innerHTML = - [ - '
Toggle All
', - ...youtubeHelper.getRedirects().invidious.normal.map( - (x) => `
${x}
`), - ].join('\n
\n') changeFrontendsSettings(frontend); - - let myMightyList = youtubeHelper.getInvidiousRedirectsChecks(); - - let checklistList = invidiousCheckListElement.getElementsByTagName('input') - for (let element of checklistList) { - element.checked = myMightyList.includes(element.id); - if (element.id == 'invidious-toogle-all') - document.getElementById('invidious-toogle-all').addEventListener("change", (event) => { - if (event.target.checked) - for (let item of checklistList) { - myMightyList.push(item.id); - item.checked = true; - } - else { - myMightyList = []; - for (let item of checklistList) item.checked = false; - } - youtubeHelper.setInvidiousRedirectsChecks(myMightyList); - }); - else - document.getElementById(element.id).addEventListener("change", (event) => { - if (event.target.checked) - myMightyList.push(element.id) - else { - let index = myMightyList.indexOf(element.id); - if (index > -1) myMightyList.splice(index, 1); - } - youtubeHelper.setInvidiousRedirectsChecks(myMightyList); - checkToggleAll(); - }); - } - checkToggleAll(); - - mightyInvidiousCustomInstances = youtubeHelper.getInvidiousCustomRedirects(); - calcCustom(); - }); - -function checkToggleAll() { - let isTrue = true; - for (const item of youtubeHelper.getRedirects().invidious.normal) - if (!myMightyList.includes(item)) { - isTrue = false; - break; - } - document.getElementById('invidious-toogle-all').checked = isTrue; -} - - -let invidiousCustomInstanceElement = document.getElementById("invidious-custom-instance") -let mightyInvidiousCustomInstances = [] -let invidiousCustomCheckListElement = document.getElementById("custom-checklist"); -let customFormElement = document.getElementById("custom-instance-form"); - -function calcCustom() { - invidiousCustomCheckListElement.innerHTML = [ - ...mightyInvidiousCustomInstances.map( - (x) => `
${x} -
-
`), - ].join('\n'); - - for (const item of mightyInvidiousCustomInstances) { - let myButton = document.getElementById(`clear-${item}`); - myButton.addEventListener("click", () => { - let index = mightyInvidiousCustomInstances.indexOf(item); - if (index > -1) mightyInvidiousCustomInstances.splice(index, 1); - youtubeHelper.setInvidiousCustomRedirects(mightyInvidiousCustomInstances); - calcCustom(); - }); - } -} - -customFormElement.addEventListener("submit", (event) => { - event.preventDefault(); - if (invidiousCustomInstanceElement.validity.valid) { - let val = invidiousCustomInstanceElement.value - if (!mightyInvidiousCustomInstances.includes(val)) { - mightyInvidiousCustomInstances.push(val) - youtubeHelper.setInvidiousCustomRedirects(mightyInvidiousCustomInstances); - } - calcCustom(); - } -}) - -