devol
/
libredirect
mirror of https://codeberg.org/LibRedirect/libredirect.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

readded default and custom instances. Needs some work

This commit is contained in:
ManeraKai 2022-02-06 03:55:53 +03:00
parent 0f2dff5330
commit d4f82a7fc5
4 changed files with 193 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/assets/javascripts/helpers/youtube/youtube.js
View File

@ -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,
};

33
src/pages/options/youtube/youtube.html
View File

@ -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>

110
src/pages/options/youtube/youtube.js
View File

@ -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();
}
})

22
src/pages/stylesheets/styles.css
View File

@ -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;