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 @@
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 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 =
+ [
+ '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) => `
+
`),
+ ].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;