From d4f82a7fc5ce731e921c5f115463bab7a1a15c69 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sun, 6 Feb 2022 03:55:53 +0300 Subject: [PATCH] readded default and custom instances. Needs some work --- .../javascripts/helpers/youtube/youtube.js | 35 +++++- src/pages/options/youtube/youtube.html | 33 +++++- src/pages/options/youtube/youtube.js | 110 +++++++++++++++++- src/pages/stylesheets/styles.css | 22 +++- 4 files changed, 193 insertions(+), 7 deletions(-) diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index 71eb0c3..0ce6b09 100644 --- a/src/assets/javascripts/helpers/youtube/youtube.js +++ b/src/assets/javascripts/helpers/youtube/youtube.js @@ -61,6 +61,22 @@ function setInvidiousRedirects(val) { console.log("invidiousRedirects: ", val) } +let invidiousRedirectsChecks = redirects.invidious.normal; +const getInvidiousRedirectsChecks = () => invidiousRedirectsChecks; +function setInvidiousRedirectsChecks(val) { + invidiousRedirectsChecks = val; + browser.storage.sync.set({ invidiousRedirectsChecks }) + console.log("invidiousRedirectsChecks: ", val) +} + +let invidiousCustomRedirects = []; +const getInvidiousCustomRedirects = () => invidiousCustomRedirects; +function setInvidiousCustomRedirects(val) { + invidiousCustomRedirects = val; + browser.storage.sync.set({ invidiousCustomRedirects }) + console.log("invidiousCustomRedirects: ", val) +} + function setPipedRedirects(val) { redirects.piped = val; browser.storage.sync.set({ youtubeRedirects: redirects }) @@ -147,7 +163,6 @@ function setInvidiousAutoplay(val) { console.log("invidiousAutoplay: ", invidiousAutoplay) } - let frontend; const getFrontend = () => frontend; function setFrontend(val) { @@ -201,8 +216,15 @@ async function init() { "invidiousAutoplay", "youtubeRedirects", "youtubeFrontend", + "invidiousRedirectsChecks", + "invidiousCustomRedirects", ]); 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; @@ -218,6 +240,8 @@ async function init() { invidiousAutoplay = result.invidiousAutoplay ?? 'DEFAULT'; persistInvidiousPrefs = result.persistInvidiousPrefs ?? false; + + } function invidiousInitCookies(tabId) { @@ -262,7 +286,7 @@ 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(redirects.invidious.normal) + let randomInstance = commonHelper.getRandomInstance([...invidiousRedirectsChecks, ...invidiousCustomRedirects]) return `${randomInstance}${url.pathname.replace("/shorts/", "/watch?v=")}${url.search}`; @@ -270,7 +294,6 @@ function redirect(url, initiator, type) { if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null; - if (invidiousTheme != "DEFAULT") url.searchParams.append("theme", invidiousTheme); if (invidiousVolume != "--") url.searchParams.append("volume", invidiousVolume / 100); if (invidiousAutoplay != "DEFAULT") url.searchParams.append("playerAutoPlay", invidiousAutoplay); @@ -333,5 +356,11 @@ export default { getPersistInvidiousPrefs, setPersistInvidiousPrefs, + getInvidiousRedirectsChecks, + setInvidiousRedirectsChecks, + + getInvidiousCustomRedirects, + setInvidiousCustomRedirects, + init, }; diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index d13da9c..a9bb6c6 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -129,13 +129,44 @@

Subtitles

- +

Persist preferences (as cookie)

+ +
+ +
+

Default Instances

+
+
+
+ +
+ +
+

Custom Instances

+
+ + +
+
+ + +
+
+ +
+
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index f4caf92..595006f 100644 --- a/src/pages/options/youtube/youtube.js +++ b/src/pages/options/youtube/youtube.js @@ -96,6 +96,10 @@ invidiousVideoQualityElement.addEventListener("change", ); +let invidiousCheckListElement = document.getElementById("checklist"); + + + youtubeHelper.init().then(() => { disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube(); invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme(); @@ -110,10 +114,114 @@ youtubeHelper.init().then(() => { invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay(); 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(); + + function checkToggleAll() { + console.log("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 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(); + }); - +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(); + } +}) diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 7cf0fe1..9046ce2 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -48,7 +48,6 @@ input[type="text"], select { padding: 5px 10px; width: 400px; - margin: auto; border-radius: 3px; box-sizing: border-box; margin-bottom: var(--space); @@ -448,10 +447,29 @@ button.default { cursor: pointer; } -button.default svg { +button svg { color: var(--text); } +div.checklist div { + justify-content: space-between; + margin: 5px 15px; + padding: 10px 0; + /* border-bottom: 2px solid rgb(77, 77, 77); */ + display: flex; +} + + +button.add { + background-color: transparent; + border: none; + padding: 0; + margin: 0; + text-decoration: none; + display: inline-block; + cursor: pointer; +} + @media (prefers-color-scheme: light) { body { --text: #000;