diff options
| -rw-r--r-- | src/assets/javascripts/helpers/youtube/youtube.js | 35 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.html | 33 | ||||
| -rw-r--r-- | src/pages/options/youtube/youtube.js | 108 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 22 |
4 files changed, 192 insertions, 6 deletions
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index 71eb0c38..0ce6b097 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 d13da9cc..a9bb6c63 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -129,13 +129,44 @@ <div class="some-block option-block"> <h4>Subtitles</h4> - <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> + <input id="invidious-subtitles" placeholder="en, ar, es" type="text" /> </div> <div class="some-block option-block"> <h4>Persist preferences (as cookie)</h4> <input id="persist-invidious-prefs" type="checkbox" checked /> </div> + + <hr> + + <div class="some-block option-block"> + <h4>Default Instances</h4> + </div> + <div class="checklist" id="checklist"> + </div> + + <hr> + + <div class="some-block option-block"> + <h4>Custom Instances</h4> + </div> + + + <form id="custom-instance-form"> + <div class="some-block option-block"> + <input id="invidious-custom-instance" placeholder="https://invidious.com" type="url" /> + <button type="submit" class="add" id="invidious-add-instance"> + <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" + fill="currentColor"> + <path d="M0 0h24v24H0V0z" fill="none" /> + <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> + </svg> + </button> + </div> + </form> + + <div class="checklist" id="custom-checklist"></div> + </div> <div id="piped"></div> diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index f4caf923..595006fd 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 = + [ + '<div>Toggle All<input type="checkbox" id="invidious-toogle-all" /></div>', + ...youtubeHelper.getRedirects().invidious.normal.map( + (x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`), + ].join('\n<hr>\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) => `<div>${x}<button class="add" id="clear-${x}"> + <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" + fill="currentColor"> + <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> + </button> + </div> + <hr>`), + ].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 7cf0fe1e..9046ce26 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; |