devol/libredirect
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restructuring Settings Structure

Browse Source
This commit is contained in:
ManeraKai 2022-04-12 02:27:39 +03:00
parent 3c2a32015b
commit 5d4377c081
No known key found for this signature in database
GPG Key ID: 5ABC31FFD562E337
39 changed files with 1692 additions and 1923 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/assets/javascripts/helpers/common.js
View File

@ -88,9 +88,10 @@ function processDefaultCustomInstances(
getNameCustomRedirects, getNameCustomRedirects,
setNameCustomRedirects setNameCustomRedirects
) { ) {
let nameProtocolElement = document.getElementById(name).getElementsByClassName(protocol)[0];
let nameCustomInstances = []; let nameCustomInstances = [];
let nameCheckListElement = document.getElementById(`${name}-${protocol}-checklist`); let nameCheckListElement = nameProtocolElement.getElementsByClassName('checklist')[0];
let nameDefaultRedirects; let nameDefaultRedirects;
function calcNameCheckBoxes() { function calcNameCheckBoxes() {
@ -101,22 +102,22 @@ function processDefaultCustomInstances(
break; break;
} }
for (const element of nameCheckListElement.getElementsByTagName('input')) for (const element of nameCheckListElement.getElementsByTagName('input'))
element.checked = nameDefaultRedirects.includes(element.id) element.checked = nameDefaultRedirects.includes(element.className)
document.getElementById(`${name}-${protocol}-toogle-all`).checked = isTrue; nameProtocolElement.getElementsByClassName('toogle-all')[0].checked = isTrue;
} }
nameDefaultRedirects = getNameRedirectsChecks(); nameDefaultRedirects = getNameRedirectsChecks();
nameCheckListElement.innerHTML = nameCheckListElement.innerHTML =
[ [
`<div><x data-localise="__MSG_toggleAll__">Toggle All</x><input type="checkbox" id="${name}-${protocol}-toogle-all" /></div>`, `<div><x data-localise="__MSG_toggleAll__">Toggle All</x><input type="checkbox" class="toogle-all" /></div>`,
...nameHelper.getRedirects()[name][protocol].map((x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`), ...nameHelper.getRedirects()[name][protocol].map((x) => `<div>${x}<input type="checkbox" class="${x}" /></div>`),
].join('\n<hr>\n'); ].join('\n<hr>\n');
localise.localisePage(); localise.localisePage();
calcNameCheckBoxes(); calcNameCheckBoxes();
document.getElementById(`${name}-${protocol}-toogle-all`).addEventListener("change", event => { nameProtocolElement.getElementsByClassName('toogle-all')[0].addEventListener("change", event => {
if (event.target.checked) if (event.target.checked)
nameDefaultRedirects = [...nameHelper.getRedirects()[name][protocol]]; nameDefaultRedirects = [...nameHelper.getRedirects()[name][protocol]];
else else
@ -126,12 +127,12 @@ function processDefaultCustomInstances(
}); });
for (let element of nameCheckListElement.getElementsByTagName('input')) { for (let element of nameCheckListElement.getElementsByTagName('input')) {
if (element.id != `${name}-${protocol}-toogle-all`) if (element.className != 'toogle-all')
document.getElementById(element.id).addEventListener("change", (event) => { nameProtocolElement.getElementsByClassName(element.className)[0].addEventListener("change", event => {
if (event.target.checked) if (event.target.checked)
nameDefaultRedirects.push(element.id) nameDefaultRedirects.push(element.className)
else { else {
let index = nameDefaultRedirects.indexOf(element.id); let index = nameDefaultRedirects.indexOf(element.className);
if (index > -1) nameDefaultRedirects.splice(index, 1); if (index > -1) nameDefaultRedirects.splice(index, 1);
} }
setNameRedirectsChecks(nameDefaultRedirects); setNameRedirectsChecks(nameDefaultRedirects);
@ -141,9 +142,9 @@ function processDefaultCustomInstances(
nameCustomInstances = getNameCustomRedirects(); nameCustomInstances = getNameCustomRedirects();
function calcNameCustomInstances() { function calcNameCustomInstances() {
document.getElementById(`${name}-${protocol}-custom-checklist`).innerHTML = nameProtocolElement.getElementsByClassName('custom-checklist')[0].innerHTML =
nameCustomInstances.map( nameCustomInstances.map(
(x) => `<div>${x}<button class="add" id="clear-${x}"> x => `<div>${x}<button class="add clear-${x}">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -155,7 +156,7 @@ function processDefaultCustomInstances(
).join('\n'); ).join('\n');
for (const item of nameCustomInstances) { for (const item of nameCustomInstances) {
document.getElementById(`clear-${item}`).addEventListener("click", () => { nameProtocolElement.getElementsByClassName(`clear-${item}`)[0].addEventListener("click", () => {
let index = nameCustomInstances.indexOf(item); let index = nameCustomInstances.indexOf(item);
if (index > -1) nameCustomInstances.splice(index, 1); if (index > -1) nameCustomInstances.splice(index, 1);
setNameCustomRedirects(nameCustomInstances); setNameCustomRedirects(nameCustomInstances);
@ -164,9 +165,9 @@ function processDefaultCustomInstances(
} }
} }
calcNameCustomInstances(); calcNameCustomInstances();
document.getElementById(`custom-${name}-${protocol}-instance-form`).addEventListener("submit", (event) => { nameProtocolElement.getElementsByClassName('custom-instance-form')[0].addEventListener("submit", event => {
event.preventDefault(); event.preventDefault();
let nameCustomInstanceInput = document.getElementById(`${name}-${protocol}-custom-instance`); let nameCustomInstanceInput = nameProtocolElement.getElementsByClassName('custom-instance')[0];
let url = new URL(nameCustomInstanceInput.value); let url = new URL(nameCustomInstanceInput.value);
let protocolHostVar = protocolHost(url); let protocolHostVar = protocolHost(url);
if (nameCustomInstanceInput.validity.valid && !nameHelper.getRedirects()[name][protocol].includes(protocolHostVar)) { if (nameCustomInstanceInput.validity.valid && !nameHelper.getRedirects()[name][protocol].includes(protocolHostVar)) {

14
src/assets/javascripts/helpers/twitter.js
View File

@ -84,6 +84,14 @@ function setDisable(val) {
browser.storage.local.set({ disableTwitter: disable }) browser.storage.local.set({ disableTwitter: disable })
} }
let enableCustomSettings;
const getEnableCustomSettings = () => enableCustomSettings;
function setEnableCustomSettings(val) {
enableCustomSettings = val;
browser.storage.local.set({ enableTwitterCustomSettings: enableCustomSettings })
console.log("enableTwitterCustomSettings: ", enableCustomSettings)
}
let protocol; let protocol;
const getProtocol = () => protocol; const getProtocol = () => protocol;
function setProtocol(val) { function setProtocol(val) {
@ -248,6 +256,8 @@ async function init() {
[ [
"disableTwitter", "disableTwitter",
"enableTwitterCustomSettings",
"twitterRedirects", "twitterRedirects",
"theme", "theme",
@ -267,6 +277,7 @@ async function init() {
], ],
r => { r => {
disable = r.disableTwitter ?? false; disable = r.disableTwitter ?? false;
enableCustomSettings = r.enableTwitterCustomSettings ?? false;
protocol = r.twitterProtocol ?? "normal"; protocol = r.twitterProtocol ?? "normal";
@ -303,6 +314,9 @@ export default {
getDisable, getDisable,
setDisable, setDisable,
getEnableCustomSettings,
setEnableCustomSettings,
getNitterNormalRedirectsChecks, getNitterNormalRedirectsChecks,
setNitterNormalRedirectsChecks, setNitterNormalRedirectsChecks,

4
src/assets/javascripts/helpers/wikipedia.js
View File

@ -57,8 +57,8 @@ let protocol;
const getProtocol = () => protocol; const getProtocol = () => protocol;
function setProtocol(val) { function setProtocol(val) {
protocol = val; protocol = val;
browser.storage.local.set({ wikilessProtocol: val }) browser.storage.local.set({ wikipediaProtocol: val })
console.log("wikilessProtocol: ", val) console.log("wikipediaProtocol: ", val)
} }

149
src/assets/javascripts/helpers/youtube/options.js
View File

@ -4,11 +4,7 @@ window.browser = window.browser || window.chrome;
export let youtubeListen; export let youtubeListen;
export const getYoutubeListen = () => youtubeListen; export const getYoutubeListen = () => youtubeListen;
export function setYoutubeListen(val) {
youtubeListen = val;
browser.storage.local.set({ youtubeListen })
console.log("youtubeListen: ", youtubeListen)
}
export let volume; export let volume;
export const getVolume = () => volume; export const getVolume = () => volume;
@ -28,228 +24,88 @@ export function setAutoplay(val) {
export let invidiousQuality; export let invidiousQuality;
export const getInvidiousQuality = () => invidiousQuality; export const getInvidiousQuality = () => invidiousQuality;
export function setinvidiousQuality(val) {
invidiousQuality = val;
browser.storage.local.set({ invidiousQuality })
console.log("invidiousQuality: ", invidiousQuality)
}
export let invidiousAlwaysProxy; export let invidiousAlwaysProxy;
export const getInvidiousAlwaysProxy = () => invidiousAlwaysProxy; export const getInvidiousAlwaysProxy = () => invidiousAlwaysProxy;
export function setInvidiousAlwaysProxy(val) {
invidiousAlwaysProxy = val;
browser.storage.local.set({ invidiousAlwaysProxy })
console.log("invidiousAlwaysProxy: ", invidiousAlwaysProxy);
}
export let invidiousPlayerStyle; export let invidiousPlayerStyle;
export const getInvidiousPlayerStyle = () => invidiousPlayerStyle; export const getInvidiousPlayerStyle = () => invidiousPlayerStyle;
export function setInvidiousPlayerStyle(val) {
invidiousPlayerStyle = val;
browser.storage.local.set({ invidiousPlayerStyle })
console.log("invidiousPlayerStyle: ", invidiousPlayerStyle)
}
export let invidiousVideoLoop; export let invidiousVideoLoop;
export const getInvidiousVideoLoop = () => invidiousVideoLoop; export const getInvidiousVideoLoop = () => invidiousVideoLoop;
export function setInvidiousVideoLoop(val) {
invidiousVideoLoop = val;
browser.storage.local.set({ invidiousVideoLoop })
console.log("invidiousVideoLoop: ", invidiousVideoLoop)
}
export let invidiousContinueAutoplay; export let invidiousContinueAutoplay;
export const getInvidiousContinueAutoplay = () => invidiousContinueAutoplay; export const getInvidiousContinueAutoplay = () => invidiousContinueAutoplay;
export function setInvidiousContinueAutoplay(val) {
invidiousContinueAutoplay = val;
browser.storage.local.set({ invidiousContinueAutoplay })
console.log("invidiousContinueAutoplay: ", invidiousContinueAutoplay)
}
export let invidiousContinue; export let invidiousContinue;
export const getInvidiousContinue = () => invidiousContinue; export const getInvidiousContinue = () => invidiousContinue;
export function setInvidiousContinue(val) {
invidiousContinue = val;
browser.storage.local.set({ invidiousContinue })
console.log("invidiousContinue: ", invidiousContinue)
}
export let invidiousSpeed; export let invidiousSpeed;
export const getInvidiousSpeed = () => invidiousSpeed; export const getInvidiousSpeed = () => invidiousSpeed;
export function setInvidiousSpeed(val) {
invidiousSpeed = val;
browser.storage.local.set({ invidiousSpeed })
console.log("invidiousSpeed: ", invidiousSpeed)
}
export let invidiousQualityDash; export let invidiousQualityDash;
export const getInvidiousQualityDash = () => invidiousQualityDash; export const getInvidiousQualityDash = () => invidiousQualityDash;
export function setInvidiousQualityDash(val) {
invidiousQualityDash = val;
browser.storage.local.set({ invidiousQualityDash })
console.log("invidiousQualityDash: ", invidiousQualityDash)
}
export let invidiousComments; export let invidiousComments;
export const getInvidiousComments = () => invidiousComments; export const getInvidiousComments = () => invidiousComments;
export function setInvidiousComments(val) {
invidiousComments = val;
browser.storage.local.set({ invidiousComments })
console.log("invidiousComments: ", invidiousComments)
}
export let invidiousCaptions; export let invidiousCaptions;
export const getInvidiousCaptions = () => invidiousCaptions; export const getInvidiousCaptions = () => invidiousCaptions;
export function setInvidiousCaptions(val) {
invidiousCaptions = val;
browser.storage.local.set({ invidiousCaptions })
console.log("invidiousCaptions: ", invidiousCaptions)
}
export let invidiousRelatedVideos; export let invidiousRelatedVideos;
export const getInvidiousRelatedVideos = () => invidiousRelatedVideos; export const getInvidiousRelatedVideos = () => invidiousRelatedVideos;
export function setInvidiousRelatedVideos(val) {
invidiousRelatedVideos = val;
browser.storage.local.set({ invidiousRelatedVideos })
console.log("invidiousRelatedVideos: ", invidiousRelatedVideos)
}
export let invidiousAnnotations; export let invidiousAnnotations;
export const getInvidiousAnnotations = () => invidiousAnnotations; export const getInvidiousAnnotations = () => invidiousAnnotations;
export function setInvidiousAnnotations(val) {
invidiousAnnotations = val;
browser.storage.local.set({ invidiousAnnotations })
console.log("invidiousAnnotations: ", invidiousAnnotations)
}
export let invidiousExtendDesc; export let invidiousExtendDesc;
export const getInvidiousExtendDesc = () => invidiousExtendDesc; export const getInvidiousExtendDesc = () => invidiousExtendDesc;
export function setInvidiousExtendDesc(val) {
invidiousExtendDesc = val;
browser.storage.local.set({ invidiousExtendDesc })
console.log("invidiousExtendDesc: ", invidiousExtendDesc)
}
export let invidiousVrMode; export let invidiousVrMode;
export const getInvidiousVrMode = () => invidiousVrMode; export const getInvidiousVrMode = () => invidiousVrMode;
export function setInvidiousVrMode(val) {
invidiousVrMode = val;
browser.storage.local.set({ invidiousVrMode })
console.log("invidiousVrMode: ", invidiousVrMode)
}
export let invidiousSavePlayerPos; export let invidiousSavePlayerPos;
export const getInvidiousSavePlayerPos = () => invidiousSavePlayerPos; export const getInvidiousSavePlayerPos = () => invidiousSavePlayerPos;
export function setInvidiousSavePlayerPos(val) {
invidiousSavePlayerPos = val;
browser.storage.local.set({ invidiousSavePlayerPos })
console.log("invidiousSavePlayerPos: ", invidiousSavePlayerPos)
}
export let pipedBufferGoal; export let pipedBufferGoal;
export const getPipedBufferGoal = () => pipedBufferGoal; export const getPipedBufferGoal = () => pipedBufferGoal;
export function setPipedBufferGoal(val) {
pipedBufferGoal = val;
browser.storage.local.set({ pipedBufferGoal })
console.log("pipedBufferGoal: ", pipedBufferGoal)
}
export let pipedComments; export let pipedComments;
export const getPipedComments = () => pipedComments; export const getPipedComments = () => pipedComments;
export function setPipedComments(val) {
pipedComments = val;
browser.storage.local.set({ pipedComments })
console.log("pipedComments: ", pipedComments)
}
export let pipedDisableLBRY; export let pipedDisableLBRY;
export const getPipedDisableLBRY = () => pipedDisableLBRY; export const getPipedDisableLBRY = () => pipedDisableLBRY;
export function setPipedDisableLBRY(val) {
pipedDisableLBRY = val;
browser.storage.local.set({ pipedDisableLBRY })
console.log("pipedDisableLBRY: ", pipedDisableLBRY)
}
export let pipedEnabledCodecs; export let pipedEnabledCodecs;
export const getPipedEnabledCodecs = () => pipedEnabledCodecs; export const getPipedEnabledCodecs = () => pipedEnabledCodecs;
export function setPipedEnabledCodecs(val) {
pipedEnabledCodecs = val;
browser.storage.local.set({ pipedEnabledCodecs })
console.log("pipedEnabledCodecs: ", pipedEnabledCodecs)
}
export let pipedHomepage; export let pipedHomepage;
export const getPipedHomepage = () => pipedHomepage; export const getPipedHomepage = () => pipedHomepage;
export function setPipedHomepage(val) {
pipedHomepage = val;
browser.storage.local.set({ pipedHomepage })
console.log("pipedHomepage: ", pipedHomepage)
}
export let pipedMinimizeDescription; export let pipedMinimizeDescription;
export const getPipedMinimizeDescription = () => pipedMinimizeDescription; export const getPipedMinimizeDescription = () => pipedMinimizeDescription;
export function setPipedMinimizeDescription(val) {
pipedMinimizeDescription = val;
browser.storage.local.set({ pipedMinimizeDescription })
console.log("pipedMinimizeDescription: ", pipedMinimizeDescription)
}
export let pipedProxyLBRY; export let pipedProxyLBRY;
export const getPipedProxyLBRY = () => pipedProxyLBRY; export const getPipedProxyLBRY = () => pipedProxyLBRY;
export function setPipedProxyLBRY(val) {
pipedProxyLBRY = val;
browser.storage.local.set({ pipedProxyLBRY })
console.log("pipedProxyLBRY: ", pipedProxyLBRY)
}
export let pipedQuality; export let pipedQuality;
export const getPipedQuality = () => pipedQuality; export const getPipedQuality = () => pipedQuality;
export function setPipedQuality(val) {
pipedQuality = val;
browser.storage.local.set({ pipedQuality })
console.log("pipedQuality: ", pipedQuality)
}
export let pipedRegion; export let pipedRegion;
export const getPipedRegion = () => pipedRegion; export const getPipedRegion = () => pipedRegion;
export function setPipedRegion(val) {
pipedRegion = val;
browser.storage.local.set({ pipedRegion })
console.log("pipedRegion: ", pipedRegion)
}
export let pipedSelectedSkip; export let pipedSelectedSkip;
export const getPipedSelectedSkip = () => pipedSelectedSkip; export const getPipedSelectedSkip = () => pipedSelectedSkip;
export function setPipedSelectedSkip(val) {
pipedSelectedSkip = val;
browser.storage.local.set({ pipedSelectedSkip })
console.log("pipedSelectedSkip: ", pipedSelectedSkip)
}
export let pipedSponsorblock; export let pipedSponsorblock;
export const getPipedSponsorblock = () => pipedSponsorblock; export const getPipedSponsorblock = () => pipedSponsorblock;
export function setPipedSponsorblock(val) {
pipedSponsorblock = val;
browser.storage.local.set({ pipedSponsorblock })
console.log("pipedSponsorblock: ", pipedSponsorblock)
}
export let pipedWatchHistory; export let pipedWatchHistory;
export const getPipedWatchHistory = () => pipedWatchHistory; export const getPipedWatchHistory = () => pipedWatchHistory;
export function setPipedWatchHistory(val) {
pipedWatchHistory = val;
browser.storage.local.set({ pipedWatchHistory })
console.log("pipedWatchHistory: ", pipedWatchHistory)
}
export let pipedMaterialSkipToLastPoint; export let pipedMaterialSkipToLastPoint;
export const getPipedMaterialSkipToLastPoint = () => pipedMaterialSkipToLastPoint; export const getPipedMaterialSkipToLastPoint = () => pipedMaterialSkipToLastPoint;
export function setPipedMaterialSkipToLastPoint(val) {
pipedMaterialSkipToLastPoint = val;
browser.storage.local.set({ pipedMaterialSkipToLastPoint })
console.log("pipedMaterialSkipToLastPoint: ", pipedMaterialSkipToLastPoint)
}
export async function initOptions() { export async function initOptions() {
return new Promise( return new Promise(
@ -323,6 +179,7 @@ export async function initOptions() {
pipedProxyLBRY = r.pipedProxyLBRY ?? false; pipedProxyLBRY = r.pipedProxyLBRY ?? false;
pipedQuality = r.pipedQuality ?? 0; pipedQuality = r.pipedQuality ?? 0;
pipedRegion = r.pipedRegion ?? "US"; pipedRegion = r.pipedRegion ?? "US";
pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"]; pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"];
pipedSponsorblock = r.pipedSponsorblock ?? true; pipedSponsorblock = r.pipedSponsorblock ?? true;
pipedWatchHistory = r.pipedWatchHistory ?? false; pipedWatchHistory = r.pipedWatchHistory ?? false;

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

@ -4,68 +4,37 @@ window.browser = window.browser || window.chrome;
import commonHelper from '../common.js' import commonHelper from '../common.js'
import { import {
youtubeListen, getYoutubeListen, setYoutubeListen, youtubeListen, getYoutubeListen,
invidiousQuality, getInvidiousQuality,
invidiousQuality, getInvidiousQuality, setinvidiousQuality, invidiousAlwaysProxy, getInvidiousAlwaysProxy,
invidiousPlayerStyle, getInvidiousPlayerStyle,
invidiousAlwaysProxy, setInvidiousAlwaysProxy, getInvidiousAlwaysProxy, invidiousVideoLoop, getInvidiousVideoLoop,
invidiousContinueAutoplay, getInvidiousContinueAutoplay,
invidiousPlayerStyle, getInvidiousPlayerStyle, setInvidiousPlayerStyle, invidiousContinue, getInvidiousContinue,
invidiousSpeed, getInvidiousSpeed,
invidiousVideoLoop, getInvidiousVideoLoop, setInvidiousVideoLoop, invidiousQualityDash, getInvidiousQualityDash,
invidiousComments, getInvidiousComments,
invidiousContinueAutoplay, getInvidiousContinueAutoplay, setInvidiousContinueAutoplay, invidiousCaptions, getInvidiousCaptions,
invidiousRelatedVideos, getInvidiousRelatedVideos,
invidiousContinue, getInvidiousContinue, setInvidiousContinue, invidiousAnnotations, getInvidiousAnnotations,
invidiousExtendDesc, getInvidiousExtendDesc,
invidiousSpeed, getInvidiousSpeed, setInvidiousSpeed, invidiousVrMode, getInvidiousVrMode,
invidiousSavePlayerPos, getInvidiousSavePlayerPos,
invidiousQualityDash, getInvidiousQualityDash, setInvidiousQualityDash, getPipedBufferGoal,
getPipedComments,
invidiousComments, getInvidiousComments, setInvidiousComments, getPipedDisableLBRY,
getPipedEnabledCodecs,
invidiousCaptions, getInvidiousCaptions, setInvidiousCaptions, getPipedHomepage,
getPipedMinimizeDescription,
invidiousRelatedVideos, getInvidiousRelatedVideos, setInvidiousRelatedVideos, getPipedProxyLBRY,
getPipedQuality,
invidiousAnnotations, getInvidiousAnnotations, setInvidiousAnnotations, getPipedRegion,
getPipedSelectedSkip,
invidiousExtendDesc, getInvidiousExtendDesc, setInvidiousExtendDesc, getPipedSponsorblock,
getPipedWatchHistory,
invidiousVrMode, getInvidiousVrMode, setInvidiousVrMode,
invidiousSavePlayerPos, getInvidiousSavePlayerPos, setInvidiousSavePlayerPos,
getPipedBufferGoal, setPipedBufferGoal,
getPipedComments, setPipedComments,
getPipedDisableLBRY, setPipedDisableLBRY,
getPipedEnabledCodecs, setPipedEnabledCodecs,
getPipedHomepage, setPipedHomepage,
getPipedMinimizeDescription, setPipedMinimizeDescription,
getPipedProxyLBRY, setPipedProxyLBRY,
getPipedQuality, setPipedQuality,
getPipedRegion, setPipedRegion,
getPipedSelectedSkip, setPipedSelectedSkip,
getPipedSponsorblock, setPipedSponsorblock,
getPipedWatchHistory, setPipedWatchHistory,
volume, getVolume, setVolume, volume, getVolume, setVolume,
youtubeAutoplay, getAutoplay, setAutoplay, youtubeAutoplay, getAutoplay, setAutoplay,
getPipedMaterialSkipToLastPoint,
getPipedMaterialSkipToLastPoint, setPipedMaterialSkipToLastPoint,
initOptions initOptions
} from './options.js'; } from './options.js';
@ -127,6 +96,15 @@ function getCustomRedirects() {
}; };
}; };
async function setYoutubeSettings(val) {
return new Promise(
resolve => {
browser.storage.local.set(val).then(resolve);
}
)
}
function setInvidiousRedirects(val) { function setInvidiousRedirects(val) {
redirects.invidious = val; redirects.invidious = val;
browser.storage.local.set({ youtubeRedirects: redirects }) browser.storage.local.set({ youtubeRedirects: redirects })
@ -251,51 +229,16 @@ function setDisable(val) {
let enableCustomSettings; let enableCustomSettings;
const getEnableCustomSettings = () => enableCustomSettings; const getEnableCustomSettings = () => enableCustomSettings;
function setEnableCustomSettings(val) {
enableCustomSettings = val;
browser.storage.local.set({ enableYoutubeCustomSettings: enableCustomSettings })
console.log("enableYoutubeCustomSettings: ", enableCustomSettings)
}
let protocol; let protocol;
const getProtocol = () => protocol; const getProtocol = () => protocol;
function setProtocol(val) {
protocol = val;
browser.storage.local.set({ youtubeProtocol: val })
console.log("youtubeProtocol: ", val)
}
let OnlyEmbeddedVideo; let OnlyEmbeddedVideo;
function setOnlyEmbeddedVideo(val) {
OnlyEmbeddedVideo = val;
browser.storage.local.set({ OnlyEmbeddedVideo })
console.log("OnlyEmbeddedVideo: ", OnlyEmbeddedVideo)
}
const getOnlyEmbeddedVideo = () => OnlyEmbeddedVideo; const getOnlyEmbeddedVideo = () => OnlyEmbeddedVideo;
let frontend; let frontend;
const getFrontend = () => frontend; const getFrontend = () => frontend;
function setFrontend(val) {
frontend = val;
browser.storage.local.set({ youtubeFrontend: val })
console.log("youtubeFrontend: ", val)
}
let youtubeEmbedFrontend; let youtubeEmbedFrontend;
const getYoutubeEmbedFrontend = () => youtubeEmbedFrontend; const getYoutubeEmbedFrontend = () => youtubeEmbedFrontend;
function setYoutubeEmbedFrontend(val) {
youtubeEmbedFrontend = val;
browser.storage.local.set({ youtubeEmbedFrontend })
console.log("youtubeEmbedFrontend: ", youtubeEmbedFrontend)
}
let bypassWatchOnYoutube; let bypassWatchOnYoutube;
const getBypassWatchOnYoutube = () => bypassWatchOnYoutube; const getBypassWatchOnYoutube = () => bypassWatchOnYoutube;
function setBypassWatchOnYoutube(val) {
bypassWatchOnYoutube = val;
browser.storage.local.set({ bypassWatchOnYoutube })
console.log("bypassWatchOnYoutube: ", bypassWatchOnYoutube)
}
let alwaysUsePreferred; let alwaysUsePreferred;
function redirect(url, details, initiator) { function redirect(url, details, initiator) {
@ -684,17 +627,16 @@ async function init() {
} }
export default { export default {
setYoutubeSettings,
getBypassWatchOnYoutube, getBypassWatchOnYoutube,
setBypassWatchOnYoutube,
initPipedLocalStorage, initPipedLocalStorage,
initPipedMaterialLocalStorage, initPipedMaterialLocalStorage,
getFrontend, getFrontend,
setFrontend,
getYoutubeEmbedFrontend, getYoutubeEmbedFrontend,
setYoutubeEmbedFrontend,
getRedirects, getRedirects,
getCustomRedirects, getCustomRedirects,
@ -708,28 +650,21 @@ export default {
initInvidiousCookies, initInvidiousCookies,
setInvidiousAlwaysProxy,
getInvidiousAlwaysProxy, getInvidiousAlwaysProxy,
setinvidiousQuality,
getInvidiousQuality, getInvidiousQuality,
setInvidiousPlayerStyle,
getInvidiousPlayerStyle, getInvidiousPlayerStyle,
getInvidiousVideoLoop, getInvidiousVideoLoop,
setInvidiousVideoLoop,
getDisable, getDisable,
setDisable, setDisable,
getEnableCustomSettings, getEnableCustomSettings,
setEnableCustomSettings,
getProtocol, getProtocol,
setProtocol,
setOnlyEmbeddedVideo,
getOnlyEmbeddedVideo, getOnlyEmbeddedVideo,
setVolume, setVolume,
@ -739,79 +674,54 @@ export default {
getAutoplay, getAutoplay,
getInvidiousContinueAutoplay, getInvidiousContinueAutoplay,
setInvidiousContinueAutoplay,
getInvidiousContinue, getInvidiousContinue,
setInvidiousContinue,
getYoutubeListen, getYoutubeListen,
setYoutubeListen,
getInvidiousSpeed, getInvidiousSpeed,
setInvidiousSpeed,
getInvidiousQualityDash, getInvidiousQualityDash,
setInvidiousQualityDash,
getInvidiousComments, getInvidiousComments,
setInvidiousComments,
getInvidiousCaptions, getInvidiousCaptions,
setInvidiousCaptions,
getInvidiousRelatedVideos, getInvidiousRelatedVideos,
setInvidiousRelatedVideos,
getInvidiousAnnotations, getInvidiousAnnotations,
setInvidiousAnnotations,
getInvidiousExtendDesc, getInvidiousExtendDesc,
setInvidiousExtendDesc,
getInvidiousVrMode, getInvidiousVrMode,
setInvidiousVrMode,
getInvidiousSavePlayerPos, getInvidiousSavePlayerPos,
setInvidiousSavePlayerPos,
getPipedBufferGoal, getPipedBufferGoal,
setPipedBufferGoal,
getPipedComments, getPipedComments,
setPipedComments,
getPipedDisableLBRY, getPipedDisableLBRY,
setPipedDisableLBRY,
getPipedEnabledCodecs, getPipedEnabledCodecs,
setPipedEnabledCodecs,
getPipedHomepage, getPipedHomepage,
setPipedHomepage,
getPipedMinimizeDescription, getPipedMinimizeDescription,
setPipedMinimizeDescription,
getPipedProxyLBRY, getPipedProxyLBRY,
setPipedProxyLBRY,
getPipedQuality, getPipedQuality,
setPipedQuality,
getPipedRegion, getPipedRegion,
setPipedRegion,
getPipedSelectedSkip, getPipedSelectedSkip,
setPipedSelectedSkip,
getPipedSponsorblock, getPipedSponsorblock,
setPipedSponsorblock,
getPipedWatchHistory, getPipedWatchHistory,
setPipedWatchHistory,
getPipedMaterialSkipToLastPoint, getPipedMaterialSkipToLastPoint,
setPipedMaterialSkipToLastPoint,
getInvidiousNormalRedirectsChecks, getInvidiousNormalRedirectsChecks,
setInvidiousNormalRedirectsChecks, setInvidiousNormalRedirectsChecks,

85
src/pages/options/imgur/imgur.html
View File

@ -143,50 +143,53 @@
</div> </div>
<hr> <hr>
<div id="rimgo">
<div id="normal"> <div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="rimgo-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-rimgo-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="rimgo-normal-custom-instance" placeholder="https://rimgo.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="rimgo-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="rimgo-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="rimgo-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-rimgo-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="rimgo-tor-custom-instance" placeholder="https://rimgo.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="rimgo-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="rimgo-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://rimgo.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://rimgo.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
@ -196,4 +199,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/imgur/imgur.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

84
src/pages/options/instagram/instagram.html
View File

@ -135,50 +135,54 @@
</div> </div>
<hr> <hr>
<div id="normal"> <div id="bibliogram">
<div class="some-block option-block"> <div class="normal">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="bibliogram-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-bibliogram-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="bibliogram-normal-custom-instance" placeholder="https://bibliogram.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="bibliogram-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="bibliogram-normal-custom-checklist"></div> <hr>
</div> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://bibliogram.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div id="tor"> <div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="bibliogram-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-bibliogram-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="bibliogram-tor-custom-instance" placeholder="https://bibliogram.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="bibliogram-tor-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="bibliogram-tor-custom-checklist"></div> <hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://bibliogram.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
@ -187,4 +191,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/instagram/instagram.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

86
src/pages/options/lbry/lbry.html
View File

@ -144,56 +144,60 @@
<hr> <hr>
<div id="normal"> <div id="librarian">
<div class="some-block option-block"> <div class="normal">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="librarian-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-librarian-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="librarian-normal-custom-instance" placeholder="https://librarian.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="librarian-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="librarian-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="librarian-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-librarian-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="librarian-tor-custom-instance" placeholder="https://librarian.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="librarian-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="librarian-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://librarian.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://librarian.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
<script type="module" src="../init.js"></script> <script type="module" src="../init.js"></script>
<script type="module" src="./lbry.js"></script> <script type="module" src="./lbry.js"></script>
<script type="module" src="../../../assets/javascripts/localise.js"></script> --> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/lbry/lbry.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

87
src/pages/options/medium/medium.html
View File

@ -144,51 +144,54 @@
</div> </div>
<hr> <hr>
<div id="scribe">
<div id="normal"> <div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="scribe-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-scribe-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="scribe-normal-custom-instance" placeholder="https://scribe.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="scribe-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="scribe-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="scribe-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-scribe-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="scribe-tor-custom-instance" placeholder="https://scribe.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="scribe-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="scribe-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://scribe.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://scribe.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
@ -198,4 +201,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/medium/medium.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

86
src/pages/options/peertube/peertube.html
View File

@ -144,57 +144,59 @@
</div> </div>
<hr> <hr>
<div id="simpleertube">
<div id="normal"> <div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="simpleertube-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-simpleertube-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="simpleertube-normal-custom-instance" placeholder="https://simpleertube.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="simpleertube-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="simpleertube-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="simpleertube-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customPopup__">Custom Instances</h4>
</div>
<form id="custom-simpleertube-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="simpleertube-tor-custom-instance" placeholder="https://simpleertube.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="simpleertube-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="simpleertube-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://simpleertube.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customPopup__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://simpleertube.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
<script type="module" src="../init.js"></script> <script type="module" src="../init.js"></script>
<script type="module" src="./peertube.js"></script> <script type="module" src="./peertube.js"></script>
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/peertube/peertube.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

89
src/pages/options/pixiv/pixiv.html
View File

@ -135,7 +135,10 @@
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4><x data-localise="__MSG_frontend__">Frontend</x>: <span style="color:red;" data-localise="__MSG_notFullyPrivate__">This isn't a fully private frontend</span></h4> <h4>
<x data-localise="__MSG_frontend__">Frontend</x>: <span style="color:red;"
data-localise="__MSG_notFullyPrivate__">This isn't a fully private frontend</span>
</h4>
<select id="maps-frontend"> <select id="maps-frontend">
<option value="pixivMoe" data-localise="__MSG_pixivMoe__">pixiv萌え</option> <option value="pixivMoe" data-localise="__MSG_pixivMoe__">pixiv萌え</option>
</select> </select>
@ -153,49 +156,53 @@
<hr> <hr>
<div id="normal"> <div id="pixivMoe">
<div class="some-block option-block"> <div class="normal">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="pixivMoe-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-pixivMoe-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="pixivMoe-normal-custom-instance" placeholder="https://pixiv.moe" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="pixivMoe-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="pixivMoe-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="pixivMoe-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-pixivMoe-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="pixivMoe-tor-custom-instance" placeholder="https://pixivMoe.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="pixivMoe-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="pixivMoe-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://pixiv.moe" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://pixivMoe.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
@ -205,4 +212,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/pixiv/pixiv.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

48
src/pages/options/reddit/reddit.html
View File

@ -162,20 +162,20 @@
<div id="libreddit"> <div id="libreddit">
<div id="libreddit-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="libreddit-normal-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-libreddit-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="libreddit-normal-custom-instance" placeholder="https://libreddit.com" type="url" /> <input class="custom-instance" placeholder="https://libreddit.com" type="url" />
<button type="submit" class="add" id="libreddit-normal-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -184,23 +184,23 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="libreddit-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="libreddit-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="libreddit-tor-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-libreddit-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="libreddit-tor-custom-instance" placeholder="https://libreddit.com" type="url" /> <input class="custom-instance" placeholder="https://libreddit.com" type="url" />
<button type="submit" class="add" id="libreddit-tor-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -209,27 +209,27 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="libreddit-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
<div id="teddit"> <div id="teddit">
<div id="teddit-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="teddit-normal-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-teddit-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="teddit-normal-custom-instance" placeholder="https://teddit.com" type="url" /> <input class="custom-instance" placeholder="https://teddit.com" type="url" />
<button type="submit" class="add" id="teddit-normal-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -238,22 +238,22 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="teddit-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="teddit-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="teddit-tor-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-teddit-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="teddit-tor-custom-instance" placeholder="https://teddit.com" type="url" /> <input class="custom-instance" placeholder="https://teddit.com" type="url" />
<button type="submit" class="add" id="teddit-tor-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -262,7 +262,7 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="teddit-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
</section> </section>

8
src/pages/options/reddit/reddit.js
View File

@ -45,11 +45,11 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalLibredditDiv = document.getElementById("libreddit-normal"); let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
let torLibredditDiv = document.getElementById("libreddit-tor"); let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
let normalTedditDiv = document.getElementById("teddit-normal"); let normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
let torTedditDiv = document.getElementById("teddit-tor"); let torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalLibredditDiv.style.display = 'block'; normalLibredditDiv.style.display = 'block';
normalTedditDiv.style.display = 'block'; normalTedditDiv.style.display = 'block';

75
src/pages/options/search/search.html
View File

@ -162,20 +162,20 @@
<div id="searx"> <div id="searx">
<hr> <hr>
<div id="searx-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="searx-normal-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-searx-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="searx-normal-custom-instance" placeholder="https://searx.com" type="url" /> <input class="custom-instance" placeholder="https://searx.com" type="url" />
<button type="submit" class="add" id="searx-normal-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -184,22 +184,22 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="searx-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="searx-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="searx-tor-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-searx-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="searx-tor-custom-instance" placeholder="https://searx.com" type="url" /> <input class="custom-instance" placeholder="https://searx.com" type="url" />
<button type="submit" class="add" id="searx-tor-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -208,26 +208,26 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="searx-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
<div id="searxng"> <div id="searxng">
<hr> <hr>
<div id="searxng-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="searxng-normal-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-searxng-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="searxng-normal-custom-instance" placeholder="https://searxng.com" type="url" /> <input class="custom-instance" placeholder="https://searxng.com" type="url" />
<button type="submit" class="add" id="searxng-normal-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -236,22 +236,22 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="searxng-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="searxng-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="searxng-tor-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-searxng-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="searxng-tor-custom-instance" placeholder="https://searxng.com" type="url" /> <input class="custom-instance" placeholder="https://searxng.com" type="url" />
<button type="submit" class="add" id="searxng-tor-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -260,26 +260,26 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="searxng-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
<div id="whoogle"> <div id="whoogle">
<hr> <hr>
<div id="whoogle-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="whoogle-normal-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-whoogle-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="whoogle-normal-custom-instance" placeholder="https://whoogle.com" type="url" /> <input class="custom-instance" placeholder="https://whoogle.com" type="url" />
<button type="submit" class="add" id="whoogle-normal-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -288,22 +288,22 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="whoogle-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="whoogle-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="whoogle-tor-checklist"> <div class="checklist checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-whoogle-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="whoogle-tor-custom-instance" placeholder="https://whoogle.com" type="url" /> <input class="custom-instance" placeholder="https://whoogle.com" type="url" />
<button type="submit" class="add" id="whoogle-tor-add-instance"> <button type="submit" class="add add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -312,10 +312,9 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="whoogle-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
</div>
</section> </section>
@ -325,4 +324,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

13
src/pages/options/search/search.js
View File

@ -61,14 +61,15 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalsearxDiv = document.getElementById("searx-normal"); let normalsearxDiv = searxDivElement.getElementsByClassName("normal")[0];
let torsearxDiv = document.getElementById("searx-tor"); let torsearxDiv = searxDivElement.getElementsByClassName("tor")[0];
let normalsearxngDiv = document.getElementById("searxng-normal"); let normalsearxngDiv = searxngDivElement.getElementsByClassName("normal")[0];
let torsearxngDiv = document.getElementById("searxng-tor"); let torsearxngDiv = searxngDivElement.getElementsByClassName("tor")[0];
let normalwhoogleDiv = whoogleDivElement.getElementsByClassName("normal")[0];
let torwhoogleDiv = whoogleDivElement.getElementsByClassName("tor")[0];
let normalwhoogleDiv = document.getElementById("whoogle-normal");
let torwhoogleDiv = document.getElementById("whoogle-tor");
if (protocol == 'normal') { if (protocol == 'normal') {
normalsearxDiv.style.display = 'block'; normalsearxDiv.style.display = 'block';
normalsearxngDiv.style.display = 'block'; normalsearxngDiv.style.display = 'block';

85
src/pages/options/sendTargets/sendTargets.html
View File

@ -143,50 +143,53 @@
</div> </div>
<hr> <hr>
<div id="send">
<div id="normal"> <div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="send-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-send-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="send-normal-custom-instance" placeholder="https://send.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="send-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="send-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="send-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-send-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="send-tor-custom-instance" placeholder="https://send.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="send-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="send-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://send.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://send.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
@ -196,4 +199,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/sendTargets/sendTargets.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

86
src/pages/options/spotify/spotify.html
View File

@ -143,57 +143,59 @@
</div> </div>
<hr> <hr>
<div id="soju">
<div id="normal"> <div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="soju-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-soju-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="soju-normal-custom-instance" placeholder="https://soju.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="soju-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="soju-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="soju-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-soju-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="soju-tor-custom-instance" placeholder="https://soju.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="soju-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="soju-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://soju.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://soju.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
<script type="module" src="../init.js"></script> <script type="module" src="../init.js"></script>
<script type="module" src="./spotify.js"></script> <script type="module" src="./spotify.js"></script>
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

4
src/pages/options/spotify/spotify.js
View File

@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

84
src/pages/options/tiktok/tiktok.html
View File

@ -144,49 +144,53 @@
<hr> <hr>
<div id="normal"> <div id="proxiTok">
<div class="some-block option-block"> <div class="normal">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="proxiTok-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-proxiTok-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="proxiTok-normal-custom-instance" placeholder="https://proxiTok.com" type="url" /> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<button type="submit" class="add" id="proxiTok-normal-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> </div>
</form> <div class="checklist checklist"></div>
<div class="checklist" id="proxiTok-normal-custom-checklist"></div> <hr>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="proxiTok-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-proxiTok-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="proxiTok-tor-custom-instance" placeholder="https://proxiTok.com" type="url" /> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<button type="submit" class="add" id="proxiTok-tor-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> </div>
</form> <form class="custom-instance-form">
<div class="checklist" id="proxiTok-tor-custom-checklist"></div> <div class="some-block option-block">
<input class="custom-instance" placeholder="https://proxiTok.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://proxiTok.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>
@ -196,4 +200,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

8
src/pages/options/tiktok/tiktok.js
View File

@ -3,12 +3,12 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
let disableTiktokElement = document.getElementById("disable-tiktok"); let disableTiktokElement = document.getElementById("disable-tiktok");
disableTiktokElement.addEventListener("change", disableTiktokElement.addEventListener("change",
(event) => tiktokHelper.setDisable(!event.target.checked) event => tiktokHelper.setDisable(!event.target.checked)
); );
let protocolElement = document.getElementById("protocol") let protocolElement = document.getElementById("protocol")
protocolElement.addEventListener("change", protocolElement.addEventListener("change",
(event) => { event => {
let protocol = event.target.options[protocolElement.selectedIndex].value let protocol = event.target.options[protocolElement.selectedIndex].value
tiktokHelper.setProtocol(protocol); tiktokHelper.setProtocol(protocol);
changeProtocolSettings(protocol); changeProtocolSettings(protocol);
@ -16,8 +16,8 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';

744
src/pages/options/translate/translate.html
View File

@ -2,12 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" /> <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
<link href="../../stylesheets/styles.css" rel="stylesheet" /> <link href="../../stylesheets/styles.css" rel="stylesheet" />
<title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title> <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title>
</head> </head>
<body dir="auto" class="option"> <body dir="auto" class="option">
@ -128,380 +128,378 @@
</section> </section>
<section class="option-block"> <section class="option-block">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enable__">Enable</h4> <h4 data-localise="__MSG_enable__">Enable</h4>
<input id="disable-simplyTranslate" type="checkbox" checked /> <input id="disable-simplyTranslate" type="checkbox" checked />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_frontend__">Frontend</h4> <h4 data-localise="__MSG_frontend__">Frontend</h4>
<select id="translate-frontend"> <select id="translate-frontend">
<option value="simplyTranslate">SimplyTranslate</option> <option value="simplyTranslate">SimplyTranslate</option>
<option value="lingva">Lingva</option> <option value="lingva">Lingva</option>
</select> </select>
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_protocol__">Protocol</h4> <h4 data-localise="__MSG_protocol__">Protocol</h4>
<select id="protocol"> <select id="protocol">
<option value="normal" data-localise="__MSG_normal__">Normal</option> <option value="normal" data-localise="__MSG_normal__">Normal</option>
<option value="tor" data-localise="__MSG_tor__">Tor</option> <option value="tor" data-localise="__MSG_tor__">Tor</option>
</select> </select>
</div> </div>
<hr>
<div id="simplyTranslate">
<div class="some-block option-block">
<h4 data-localise="__MSG_from__">From</h4>
<select class="from">
<option value="DEFAULT">Default</option>
<option value="auto">Auto</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="ceb">Cebuano</option>
<option value="ny">Chichewa</option>
<option value="zh-CN">Chinese</option>
<option value="co">Corsican</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiian</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hmn">Hmong</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="ig">Igbo</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="jw">Javanese</option>
<option value="kn">Kannada</option>
<option value="kk">Kazakh</option>
<option value="km">Khmer</option>
<option value="rw">Kinyarwanda</option>
<option value="ko">Korean</option>
<option value="ku">Kurdish (Kurmanji)</option>
<option value="ky">Kyrgyz</option>
<option value="lo">Lao</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="mg">Malagasy</option>
<option value="ms">Malay</option>
<option value="ml">Malayalam</option>
<option value="mt">Maltese</option>
<option value="mi">Maori</option>
<option value="mr">Marathi</option>
<option value="mn">Mongolian</option>
<option value="my">Myanmar (Burmese)</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="or">Odia (Oriya)</option>
<option value="ps">Pashto</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pa">Punjabi</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sm">Samoan</option>
<option value="gd">Scots Gaelic</option>
<option value="sr">Serbian</option>
<option value="st">Sesotho</option>
<option value="sn">Shona</option>
<option value="sd">Sindhi</option>
<option value="si">Sinhala</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="so">Somali</option>
<option value="es">Spanish</option>
<option value="su">Sundanese</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="tg">Tajik</option>
<option value="ta">Tamil</option>
<option value="tt">Tatar</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="tk">Turkmen</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="ug">Uyghur</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="xh">Xhosa</option>
<option value="yi">Yiddish</option>
<option value="yo">Yoruba</option>
<option value="zu">Zulu</option>
</select>
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_to__">To</h4>
<select class="to">
<option value="DEFAULT">Default</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="ceb">Cebuano</option>
<option value="ny">Chichewa</option>
<option value="zh-CN">Chinese</option>
<option value="co">Corsican</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiian</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hmn">Hmong</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="ig">Igbo</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="jw">Javanese</option>
<option value="kn">Kannada</option>
<option value="kk">Kazakh</option>
<option value="km">Khmer</option>
<option value="rw">Kinyarwanda</option>
<option value="ko">Korean</option>
<option value="ku">Kurdish (Kurmanji)</option>
<option value="ky">Kyrgyz</option>
<option value="lo">Lao</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="mg">Malagasy</option>
<option value="ms">Malay</option>
<option value="ml">Malayalam</option>
<option value="mt">Maltese</option>
<option value="mi">Maori</option>
<option value="mr">Marathi</option>
<option value="mn">Mongolian</option>
<option value="my">Myanmar (Burmese)</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="or">Odia (Oriya)</option>
<option value="ps">Pashto</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pa">Punjabi</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sm">Samoan</option>
<option value="gd">Scots Gaelic</option>
<option value="sr">Serbian</option>
<option value="st">Sesotho</option>
<option value="sn">Shona</option>
<option value="sd">Sindhi</option>
<option value="si">Sinhala</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="so">Somali</option>
<option value="es">Spanish</option>
<option value="su">Sundanese</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="tg">Tajik</option>
<option value="ta">Tamil</option>
<option value="tt">Tatar</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="tk">Turkmen</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="ug">Uyghur</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="xh">Xhosa</option>
<option value="yi">Yiddish</option>
<option value="yo">Yoruba</option>
<option value="zu">Zulu</option>
</select>
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_engine__">Engine</h4>
<select class="engine">
<option value="DEFAULT" data-localise="__MSG_default__">Default</option>
<option value="google">Google</option>
<option value="libre">Libre</option>
<option value="deepl">Deepl</option>
<option value="iciba">ICIBA</option>
<option value="reverso">Reverso</option>
</select>
</div>
<div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist">
</div>
<hr> <hr>
<div class="some-block option-block">
<div id="simplyTranslate"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<div class="some-block option-block">
<h4 data-localise="__MSG_from__">From</h4>
<select id="from">
<option value="DEFAULT">Default</option>
<option value="auto">Auto</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="ceb">Cebuano</option>
<option value="ny">Chichewa</option>
<option value="zh-CN">Chinese</option>
<option value="co">Corsican</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiian</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hmn">Hmong</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="ig">Igbo</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="jw">Javanese</option>
<option value="kn">Kannada</option>
<option value="kk">Kazakh</option>
<option value="km">Khmer</option>
<option value="rw">Kinyarwanda</option>
<option value="ko">Korean</option>
<option value="ku">Kurdish (Kurmanji)</option>
<option value="ky">Kyrgyz</option>
<option value="lo">Lao</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="mg">Malagasy</option>
<option value="ms">Malay</option>
<option value="ml">Malayalam</option>
<option value="mt">Maltese</option>
<option value="mi">Maori</option>
<option value="mr">Marathi</option>
<option value="mn">Mongolian</option>
<option value="my">Myanmar (Burmese)</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="or">Odia (Oriya)</option>
<option value="ps">Pashto</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pa">Punjabi</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sm">Samoan</option>
<option value="gd">Scots Gaelic</option>
<option value="sr">Serbian</option>
<option value="st">Sesotho</option>
<option value="sn">Shona</option>
<option value="sd">Sindhi</option>
<option value="si">Sinhala</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="so">Somali</option>
<option value="es">Spanish</option>
<option value="su">Sundanese</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="tg">Tajik</option>
<option value="ta">Tamil</option>
<option value="tt">Tatar</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="tk">Turkmen</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="ug">Uyghur</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="xh">Xhosa</option>
<option value="yi">Yiddish</option>
<option value="yo">Yoruba</option>
<option value="zu">Zulu</option>
</select>
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_to__">To</h4>
<select id="to">
<option value="DEFAULT">Default</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="am">Amharic</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bs">Bosnian</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="ceb">Cebuano</option>
<option value="ny">Chichewa</option>
<option value="zh-CN">Chinese</option>
<option value="co">Corsican</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="fy">Frisian</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="ha">Hausa</option>
<option value="haw">Hawaiian</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hmn">Hmong</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="ig">Igbo</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="jw">Javanese</option>
<option value="kn">Kannada</option>
<option value="kk">Kazakh</option>
<option value="km">Khmer</option>
<option value="rw">Kinyarwanda</option>
<option value="ko">Korean</option>
<option value="ku">Kurdish (Kurmanji)</option>
<option value="ky">Kyrgyz</option>
<option value="lo">Lao</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="lb">Luxembourgish</option>
<option value="mk">Macedonian</option>
<option value="mg">Malagasy</option>
<option value="ms">Malay</option>
<option value="ml">Malayalam</option>
<option value="mt">Maltese</option>
<option value="mi">Maori</option>
<option value="mr">Marathi</option>
<option value="mn">Mongolian</option>
<option value="my">Myanmar (Burmese)</option>
<option value="ne">Nepali</option>
<option value="no">Norwegian</option>
<option value="or">Odia (Oriya)</option>
<option value="ps">Pashto</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="pa">Punjabi</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sm">Samoan</option>
<option value="gd">Scots Gaelic</option>
<option value="sr">Serbian</option>
<option value="st">Sesotho</option>
<option value="sn">Shona</option>
<option value="sd">Sindhi</option>
<option value="si">Sinhala</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="so">Somali</option>
<option value="es">Spanish</option>
<option value="su">Sundanese</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="tg">Tajik</option>
<option value="ta">Tamil</option>
<option value="tt">Tatar</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="tk">Turkmen</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="ug">Uyghur</option>
<option value="uz">Uzbek</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="xh">Xhosa</option>
<option value="yi">Yiddish</option>
<option value="yo">Yoruba</option>
<option value="zu">Zulu</option>
</select>
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_engine__">Engine</h4>
<select id="simplyTranslate-engine">
<option value="DEFAULT" data-localise="__MSG_default__">Default</option>
<option value="google">Google</option>
<option value="libre">Libre</option>
<option value="deepl">Deepl</option>
<option value="iciba">ICIBA</option>
<option value="reverso">Reverso</option>
</select>
</div>
<div id="simplyTranslate-normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="simplyTranslate-normal-checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-simplyTranslate-normal-instance-form">
<div class="some-block option-block">
<input id="simplyTranslate-normal-custom-instance" placeholder="https://simplyTranslate.com"
type="url" />
<button type="submit" class="add" id="simplyTranslate-normal-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="simplyTranslate-normal-custom-checklist"></div>
</div>
<div id="simplyTranslate-tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="simplyTranslate-tor-checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise"__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-simplyTranslate-tor-instance-form">
<div class="some-block option-block">
<input id="simplyTranslate-tor-custom-instance" placeholder="https://simplyTranslate.com"
type="url" />
<button type="submit" class="add" id="simplyTranslate-tor-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="simplyTranslate-tor-custom-checklist"></div>
</div>
</div> </div>
<form class="custom-instance-form">
<div id="lingva"> <div class="some-block option-block">
<div id="lingva-normal"> <input class="custom-instance" placeholder="https://simplyTranslate.com" type="url" />
<div class="some-block option-block"> <button type="submit" class="add add-instance">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
</div> fill="currentColor">
<div class="checklist" id="lingva-normal-checklist"> <path d="M0 0h24v24H0V0z" fill="none" />
</div> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
<hr> </svg>
<div class="some-block option-block"> </button>
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div>
</div> </form>
<form id="custom-lingva-normal-instance-form"> <div class="checklist custom-checklist"></div>
<div class="some-block option-block"> </div>
<input id="lingva-normal-custom-instance" placeholder="https://lingva.com" type="url" /> <div class="tor">
<button type="submit" class="add" id="lingva-normal-add-instance"> <div class="some-block option-block">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
</button>
</div>
</form>
<div class="checklist" id="lingva-normal-custom-checklist"></div>
</div>
<div id="lingva-tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="lingva-tor-checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-lingva-tor-instance-form">
<div class="some-block option-block">
<input id="lingva-tor-custom-instance" placeholder="https://lingva.com" type="url" />
<button type="submit" class="add" id="lingva-tor-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="lingva-tor-custom-checklist"></div>
</div>
</div> </div>
<div class="checklist checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise"__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://simplyTranslate.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div>
</section> <div id="lingva">
<div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://lingva.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://lingva.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div>
<script type="module" src="../init.js"></script> </section>
<script type="module" src="./translate.js"></script>
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../init.js"></script>
<script type="module" src="./translate.js"></script>
<script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

25
src/pages/options/translate/translate.js
View File

@ -6,8 +6,8 @@ disableElement.addEventListener("change",
(event) => translateHelper.setDisable(!event.target.checked) (event) => translateHelper.setDisable(!event.target.checked)
); );
let simplyTranslateDivElement = document.getElementById("simplyTranslate") let simplyTranslateDivElement = document.getElementById("simplyTranslate");
let lingvaDivElement = document.getElementById("lingva") let lingvaDivElement = document.getElementById("lingva");
function changeFrontendsSettings(frontend) { function changeFrontendsSettings(frontend) {
@ -22,14 +22,14 @@ function changeFrontendsSettings(frontend) {
} }
let translateFrontendElement = document.getElementById("translate-frontend"); let translateFrontendElement = document.getElementById("translate-frontend");
translateFrontendElement.addEventListener("change", translateFrontendElement.addEventListener("change",
(event) => { event => {
let frontend = event.target.options[translateFrontendElement.selectedIndex].value let frontend = event.target.options[translateFrontendElement.selectedIndex].value
translateHelper.setFrontend(frontend) translateHelper.setFrontend(frontend)
changeFrontendsSettings(frontend); changeFrontendsSettings(frontend);
} }
); );
let protocolElement = document.getElementById("protocol") let protocolElement = document.getElementById("protocol");
protocolElement.addEventListener("change", protocolElement.addEventListener("change",
(event) => { (event) => {
let protocol = event.target.options[protocolElement.selectedIndex].value let protocol = event.target.options[protocolElement.selectedIndex].value
@ -39,11 +39,12 @@ protocolElement.addEventListener("change",
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalSimplyTranslateDiv = document.getElementById("simplyTranslate-normal"); let normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
let torSimplyTranslateDiv = document.getElementById("simplyTranslate-tor"); let torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
let normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
let torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
let normalLingvaDiv = document.getElementById("lingva-normal");
let torLingvaDiv = document.getElementById("lingva-tor");
if (protocol == 'normal') { if (protocol == 'normal') {
normalSimplyTranslateDiv.style.display = 'block'; normalSimplyTranslateDiv.style.display = 'block';
normalLingvaDiv.style.display = 'block'; normalLingvaDiv.style.display = 'block';
@ -58,17 +59,18 @@ function changeProtocolSettings(protocol) {
} }
} }
let fromElement = document.getElementById("from"); let fromElement = document.getElementsByClassName("from")[0];
fromElement.addEventListener("change", fromElement.addEventListener("change",
event => translateHelper.setFrom(event.target.options[fromElement.selectedIndex].value) event => translateHelper.setFrom(event.target.options[fromElement.selectedIndex].value)
); );
let toElement = document.getElementById("to"); let toElement = document.getElementsByClassName("to")[0];
toElement.addEventListener("change", toElement.addEventListener("change",
event => translateHelper.setTo(event.target.options[toElement.selectedIndex].value) event => translateHelper.setTo(event.target.options[toElement.selectedIndex].value)
); );
let simplyTranslateEngineElement = document.getElementById("simplyTranslate-engine"); let simplyTranslateElement = document.getElementById("simplyTranslate")
let simplyTranslateEngineElement = simplyTranslateElement.getElementsByClassName("engine")[0];
simplyTranslateEngineElement.addEventListener("change", simplyTranslateEngineElement.addEventListener("change",
event => translateHelper.setSimplyTranslateEngine(event.target.options[simplyTranslateEngineElement.selectedIndex].value) event => translateHelper.setSimplyTranslateEngine(event.target.options[simplyTranslateEngineElement.selectedIndex].value)
); );
@ -110,7 +112,6 @@ translateHelper.init().then(() => {
translateHelper.setSimplyTranslateTorCustomRedirects translateHelper.setSimplyTranslateTorCustomRedirects
); );
commonHelper.processDefaultCustomInstances( commonHelper.processDefaultCustomInstances(
'lingva', 'lingva',
'normal', 'normal',

206
src/pages/options/twitter/twitter.html
View File

@ -149,84 +149,154 @@
<input id="bypass-watch-on-twitter" type="checkbox" checked /> <input id="bypass-watch-on-twitter" type="checkbox" checked />
</div> </div>
<hr>
<div class="custom-settings">
<div class="some-block option-block">
<h4 data-localise="__MSG_theme__">Theme</h4>
<select name="theme">
<option value="Auto">Auto</option>
<option value="Auto (Twitter)">Auto (Twitter)</option>
<option value="Auto (Twitter)">Auto (Twitter)</option>
<option value="Black">Black</option>
<option value="Mastodon">Mastodon</option>
<option value="Nitter">Nitter</option>
<option value="Pleroma">Pleroma</option>
<option value="Twitter">Twitter</option>
<option value="Twitter Dark" selected="">Twitter Dark</option>
</select>
</div>
</div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4> <h4 data-localise="__MSG_enableCustomNitter__">Enable Custom Settings (will use cookies)</h4>
<input id="infiniteScroll" type="checkbox" /> <input id="enable-twitter-custom-settings" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div id="nitter">
<h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4>
<input id="stickyProfile" type="checkbox" />
</div>
<hr> <div class="custom-settings">
<div id="normal"> <hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="nitter-normal-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-nitter-normal-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="nitter-normal-custom-instance" placeholder="https://nitter.com" type="url" /> <h2>Display</h2>
<button type="submit" class="add" id="nitter-normal-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> </div>
</form>
<div class="checklist" id="nitter-normal-custom-checklist"></div>
</div>
<div id="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4>
</div>
<div class="checklist" id="nitter-tor-checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-nitter-tor-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="nitter-tor-custom-instance" placeholder="https://nitter.com" type="url" /> <h4 data-localise="__MSG_theme__">Theme</h4>
<button type="submit" class="add" id="nitter-tor-add-instance"> <select name="theme">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor"> <option value="Auto">Auto</option>
<path d="M0 0h24v24H0V0z" fill="none" /> <option value="Auto (Twitter)">Auto (Twitter)</option>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> <option value="Auto (Twitter)">Auto (Twitter)</option>
</svg> <option value="Black">Black</option>
</button> <option value="Mastodon">Mastodon</option>
<option value="Nitter">Nitter</option>
<option value="Pleroma">Pleroma</option>
<option value="Twitter">Twitter</option>
<option value="Twitter Dark" selected="">Twitter Dark</option>
</select>
</div> </div>
</form>
<div class="checklist" id="nitter-tor-custom-checklist"></div> <div class="some-block option-block">
<h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4>
<input class="infiniteScroll" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4>
<input class="stickyProfile" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_bidiSupport__">Support bidirectional text (makes clicking on tweets harder)</h4>
<input class="bidiSupport" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_hideTweetStats__">Hide tweet stats (replies, retweets, likes)</h4>
<input class="hideTweetStats" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_hideBanner__">Hide profile banner</h4>
<input class="hideBanner" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_hidePins__">Hide pinned tweets</h4>
<input class="hidePins" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_hideReplies__">Hide tweet replies</h4>
<input class="hideReplies" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_squareAvatars__">Square profile pictures</h4>
<input class="squareAvatars" type="checkbox" />
</div>
<hr>
<div class="some-block option-block">
<h2>Media</h2>
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_mp4Playback__">Enable mp4 video playback (only for gifs)</h4>
<input class="mp4Playback" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_hlsPlayback__">Enable hls video streaming (requires JavaScript)</h4>
<input class="hlsPlayback" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_proxyVideos__">Proxy video streaming through the server (might be slow)</h4>
<input class="proxyVideos" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_autoplayGifs__">Autoplay gifs</h4>
<input class="autoplayGifs" type="checkbox" />
</div>
</div>
<hr>
<div class="normal">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://nitter.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div class="tor">
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4>
</div>
<div class="checklist checklist"></div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://nitter.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
</div> </div>
</section> </section>

38
src/pages/options/twitter/twitter.js
View File

@ -2,23 +2,23 @@ import twitterHelper from "../../../assets/javascripts/helpers/twitter.js";
import commonHelper from "../../../assets/javascripts/helpers/common.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js";
let disableTwitterElement = document.getElementById("disable-nitter"); let disableTwitterElement = document.getElementById("disable-nitter");
disableTwitterElement.addEventListener("change", let customSettingsDivElement = document.getElementsByClassName("custom-settings");
(event) => twitterHelper.setDisable(!event.target.checked) let protocolElement = document.getElementById("protocol");
); let enableYoutubeCustomSettingsElement = document.getElementById("enable-twitter-custom-settings");
let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter");
let protocolElement = document.getElementById("protocol")
protocolElement.addEventListener("change",
(event) => {
let protocol = event.target.options[protocolElement.selectedIndex].value
twitterHelper.setProtocol(protocol);
changeProtocolSettings(protocol);
}
);
let nitterElement = document.getElementById("nitter");
document.addEventListener("change", _ => {
twitterHelper.setDisable(!disableTwitterElement.checked)
twitterHelper.setProtocol(protocolElement.value);
twitterHelper.setEnableCustomSettings(enableYoutubeCustomSettingsElement.checked);
twitterHelper.setBypassWatchOnTwitter(bypassWatchOnTwitterElement.checked);
changeProtocolSettings(protocolElement.value);
})
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = nitterElement.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = nitterElement.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';
@ -27,15 +27,15 @@ function changeProtocolSettings(protocol) {
normalDiv.style.display = 'none'; normalDiv.style.display = 'none';
torDiv.style.display = 'block'; torDiv.style.display = 'block';
} }
if (enableYoutubeCustomSettingsElement.checked)
for (const item of customSettingsDivElement) item.style.display = 'block';
else
for (const item of customSettingsDivElement) item.style.display = 'none';
} }
let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter")
bypassWatchOnTwitterElement.addEventListener("change",
event => twitterHelper.setBypassWatchOnTwitter(event.target.checked)
);
twitterHelper.init().then(() => { twitterHelper.init().then(() => {
disableTwitterElement.checked = !twitterHelper.getDisable(); disableTwitterElement.checked = !twitterHelper.getDisable();
enableYoutubeCustomSettingsElement.checked = twitterHelper.getEnableCustomSettings();
bypassWatchOnTwitterElement.checked = twitterHelper.getBypassWatchOnTwitter(); bypassWatchOnTwitterElement.checked = twitterHelper.getBypassWatchOnTwitter();
let protocol = twitterHelper.getProtocol(); let protocol = twitterHelper.getProtocol();

144
src/pages/options/wikipedia/wikipedia.html
View File

@ -2,12 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" /> <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
<link href="../../stylesheets/styles.css" rel="stylesheet" /> <link href="../../stylesheets/styles.css" rel="stylesheet" />
<title>LibRedirect: Wikipedia</title> <title>LibRedirect: Wikipedia</title>
</head> </head>
<body dir="auto" class="option"> <body dir="auto" class="option">
@ -54,7 +54,7 @@
<div class="title"> <div class="title">
<img src="../../../assets/images/imgur-icon.png" /> <img src="../../../assets/images/imgur-icon.png" />
<a href="../imgur/imgur.html" data-localise="__MSG_imgur__">Imgur</a> <a href="../imgur/imgur.html" data-localise="__MSG_imgur__">Imgur</a>
</div> </div>
<div class="title"> <div class="title">
@ -127,78 +127,78 @@
</div> </div>
</section> </section>
<section class="option-block"> <section class="option-block">
<div class="some-block option-block">
<h4 data-localise="__MSG_enable__">Enable</h4>
<input id="disable-wikipedia" type="checkbox" checked />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_protocol__">Protocol</h4>
<select id="protocol">
<option value="normal" data-localise="__MSG_normal__">Normal</option>
<option value="tor" data-localise="__MSG_tor__">Tor</option>
</select>
</div>
<hr>
<div id="wikiless">
<div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enable__">Enable</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
<input id="disable-wikipedia" type="checkbox" checked />
</div> </div>
<div class="checklist checklist">
<div class="some-block option-block">
<h4 data-localise="__MSG_protocol__">Protocol</h4>
<select id="protocol">
<option value="normal" data-localise="__MSG_normal__">Normal</option>
<option value="tor" data-localise="__MSG_tor__">Tor</option>
</select>
</div> </div>
<hr> <hr>
<div class="some-block option-block">
<div id="normal"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
<div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="wikiless-normal-checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-wikiless-normal-instance-form">
<div class="some-block option-block">
<input id="wikiless-normal-custom-instance" placeholder="https://wikiless.com" type="url" />
<button type="submit" class="add" id="wikiless-normal-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="wikiless-normal-custom-checklist"></div>
</div> </div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://wikiless.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
</div>
<div id="tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div>
<div class="checklist" id="wikiless-tor-checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form id="custom-wikiless-tor-instance-form">
<div class="some-block option-block">
<input id="wikiless-tor-custom-instance" placeholder="https://wikiless.com" type="url" />
<button type="submit" class="add" id="wikiless-tor-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="wikiless-tor-custom-checklist"></div>
</div> </div>
</section> <div class="checklist checklist">
</div>
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div>
<form class="custom-instance-form">
<div class="some-block option-block">
<input class="custom-instance" placeholder="https://wikiless.com" type="url" />
<button type="submit" class="add 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 custom-checklist"></div>
<script type="module" src="../init.js"></script> </div>
<script type="module" src="./wikipedia.js"></script> </div>
<script type="module" src="../../../assets/javascripts/localise.js"></script> </section>
<script type="module" src="../init.js"></script>
<script type="module" src="./wikipedia.js"></script>
<script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

12
src/pages/options/wikipedia/wikipedia.js
View File

@ -3,22 +3,21 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
let disableWikipediaElement = document.getElementById("disable-wikipedia"); let disableWikipediaElement = document.getElementById("disable-wikipedia");
disableWikipediaElement.addEventListener("change", disableWikipediaElement.addEventListener("change",
(event) => wikipediaHelper.setDisable(!event.target.checked) event => wikipediaHelper.setDisable(!event.target.checked)
); );
let protocolElement = document.getElementById("protocol") let protocolElement = document.getElementById("protocol");
protocolElement.addEventListener("change", protocolElement.addEventListener("change",
(event) => { event => {
let protocol = event.target.options[protocolElement.selectedIndex].value let protocol = event.target.options[protocolElement.selectedIndex].value
wikipediaHelper.setProtocol(protocol); wikipediaHelper.setProtocol(protocol);
changeProtocolSettings(protocol); changeProtocolSettings(protocol);
} }
); );
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalDiv = document.getElementById("normal"); let normalDiv = document.getElementsByClassName("normal")[0];
let torDiv = document.getElementById("tor"); let torDiv = document.getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalDiv.style.display = 'block'; normalDiv.style.display = 'block';
torDiv.style.display = 'none'; torDiv.style.display = 'none';
@ -33,6 +32,7 @@ wikipediaHelper.init().then(() => {
disableWikipediaElement.checked = !wikipediaHelper.getDisable(); disableWikipediaElement.checked = !wikipediaHelper.getDisable();
let protocol = wikipediaHelper.getProtocol(); let protocol = wikipediaHelper.getProtocol();
console.log('protocol', protocol);
protocolElement.value = protocol; protocolElement.value = protocol;
changeProtocolSettings(protocol); changeProtocolSettings(protocol);

248
src/pages/options/youtube/invidious.js
View File

@ -1,165 +1,121 @@
import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
import commonHelper from "../../../assets/javascripts/helpers/common.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js";
let invidiousAlwaysProxyElement = document.getElementById("invidious-local"); let invidiousElement = document.getElementById('invidious');
invidiousAlwaysProxyElement.addEventListener("change", let invidiousAlwaysProxyElement = invidiousElement.getElementsByClassName("local")[0];
event => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked) let invidiousPlayerStyleElement = invidiousElement.getElementsByClassName("player_style")[0];
); let invidiousQualityElement = invidiousElement.getElementsByClassName("quality")[0];
let invidiousVideoLoopElement = invidiousElement.getElementsByClassName("video_loop")[0];
let invidiousContinueAutoplayElement = invidiousElement.getElementsByClassName("continue_autoplay")[0];
let invidiousContinueElement = invidiousElement.getElementsByClassName("continue")[0];
let youtubeListenElement = invidiousElement.getElementsByClassName("listen")[0];
let invidiousSpeedElement = invidiousElement.getElementsByClassName("speed")[0];
let invidiousQualityDashElement = invidiousElement.getElementsByClassName("quality_dash")[0];
let invidiousRelatedVideoElement = invidiousElement.getElementsByClassName("related_videos")[0];
let invidiousAnnotationsElement = invidiousElement.getElementsByClassName("annotations")[0];
let invidiousExtendDescElement = invidiousElement.getElementsByClassName("extend_desc")[0];
let invidiousVrModeElement = invidiousElement.getElementsByClassName("vr_mode")[0];
let invidiousSavePlayerPosElement = invidiousElement.getElementsByClassName("save_player_pos")[0];
let invidiousComments0Element = invidiousElement.getElementsByClassName("comments[0]")[0];
let invidiousComments1Element = invidiousElement.getElementsByClassName("comments[1]")[0];
let invidiousCaptions0Element = invidiousElement.getElementsByClassName("captions[0]")[0];
let invidiousCaptions1Element = invidiousElement.getElementsByClassName("captions[1]")[0];
let invidiousCaptions2Element = invidiousElement.getElementsByClassName("captions[2]")[0];
let autoplayElement = invidiousElement.getElementsByClassName("youtubeAutoplay")[0];
let volumeElement = invidiousElement.getElementsByClassName("volume")[0];
let volumeValueElement = invidiousElement.getElementsByClassName("volume-value")[0];
let invidiousPlayerStyleElement = document.getElementById("invidious-player_style"); volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
invidiousPlayerStyleElement.addEventListener("change",
event => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value)
);
let invidiousQualityElement = document.getElementById("invidious-quality"); invidiousElement.addEventListener("change", async _ => {
invidiousQualityElement.addEventListener("change", console.log('changed invidious settings');
event => youtubeHelper.setinvidiousQuality(event.target.options[invidiousQualityElement.selectedIndex].value) let commentsList = youtubeHelper.getInvidiousComments();
); commentsList[0] = invidiousComments0Element.value;
commentsList[1] = invidiousComments1Element.value;
let invidiousVideoLoopElement = document.getElementById("invidious-video_loop"); let captionsList = youtubeHelper.getInvidiousCaptions();
invidiousVideoLoopElement.addEventListener("change", captionsList[0] = invidiousCaptions0Element.value;
event => youtubeHelper.setInvidiousVideoLoop(event.target.checked) captionsList[1] = invidiousCaptions1Element.value;
); captionsList[2] = invidiousCaptions2Element.value;
let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay"); await youtubeHelper.setYoutubeSettings({
invidiousContinueAutoplayElement.addEventListener("change", invidiousAlwaysProxy: invidiousAlwaysProxyElement.checked,
event => youtubeHelper.setInvidiousContinueAutoplay(event.target.checked) youtubeAutoplay: autoplayElement.checked,
); invidiousPlayerStyle: invidiousPlayerStyleElement.value,
invidiousQuality: invidiousQualityElement.value,
invidiousVideoLoop: invidiousVideoLoopElement.checked,
invidiousContinueAutoplay: invidiousContinueAutoplayElement.checked,
invidiousContinue: invidiousContinueElement.checked,
youtubeListen: youtubeListenElement.checked,
invidiousSpeed: invidiousSpeedElement.value,
invidiousQualityDash: invidiousQualityDashElement.value,
youtubeVolume: volumeElement.value,
invidiousComments: commentsList,
invidiousCaptions: captionsList,
invidiousRelatedVideos: invidiousRelatedVideoElement.checked,
invidiousAnnotations: invidiousAnnotationsElement.checked,
invidiousExtendDesc: invidiousExtendDescElement.checked,
invidiousVrMode: invidiousVrModeElement.checked,
invidiousSavePlayerPos: invidiousSavePlayerPosElement.checked
});
init();
});
let invidiousContinueElement = document.getElementById("invidious-continue"); function init() {
invidiousContinueElement.addEventListener("change", youtubeHelper.init().then(() => {
event => youtubeHelper.setInvidiousContinue(event.target.checked) invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
);
let youtubeListenElement = document.getElementById("invidious-listen"); autoplayElement.checked = youtubeHelper.getAutoplay();
youtubeListenElement.addEventListener("change",
event => youtubeHelper.setYoutubeListen(event.target.checked)
);
let invidiousSpeedElement = document.getElementById("invidious-speed"); invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
invidiousSpeedElement.addEventListener("change",
event => youtubeHelper.setInvidiousSpeed(event.target.options[invidiousSpeedElement.selectedIndex].value)
);
let invidiousQualityDashElement = document.getElementById("invidious-quality_dash"); invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
invidiousQualityDashElement.addEventListener("change", invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
event => youtubeHelper.setInvidiousQualityDash(event.target.options[invidiousQualityDashElement.selectedIndex].value) invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
); youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
let invidiousComments0Element = document.getElementById("invidious-comments[0]"); invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
invidiousComments0Element.addEventListener("change", invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
event => { invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
let commentsList = youtubeHelper.getInvidiousComments();
commentsList[0] = event.target.options[invidiousComments0Element.selectedIndex].value
youtubeHelper.setInvidiousComments(commentsList)
}
);
let invidiousComments1Element = document.getElementById("invidious-comments[1]");
invidiousComments1Element.addEventListener("change",
event => {
let commentsList = youtubeHelper.getInvidiousComments();
commentsList[1] = event.target.options[invidiousComments1Element.selectedIndex].value
youtubeHelper.setInvidiousComments(commentsList)
}
);
let invidiousCaptions0Element = document.getElementById("invidious-captions[0]"); volumeElement.value = youtubeHelper.getVolume();
invidiousCaptions0Element.addEventListener("change", volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
event => {
let captionsList = youtubeHelper.getInvidiousCaptions();
captionsList[0] = event.target.options[invidiousCaptions0Element.selectedIndex].value
youtubeHelper.setInvidiousCaptions(captionsList)
}
);
let invidiousCaptions1Element = document.getElementById("invidious-captions[1]");
invidiousCaptions1Element.addEventListener("change",
event => {
let captionsList = youtubeHelper.getInvidiousCaptions();
captionsList[1] = event.target.options[invidiousCaptions1Element.selectedIndex].value
youtubeHelper.setInvidiousCaptions(captionsList)
}
);
let invidiousCaptions2Element = document.getElementById("invidious-captions[2]");
invidiousCaptions2Element.addEventListener("change",
event => {
let captionsList = youtubeHelper.getInvidiousCaptions();
captionsList[2] = event.target.options[invidiousCaptions2Element.selectedIndex].value
youtubeHelper.setInvidiousCaptions(captionsList)
}
);
let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos"); invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
invidiousRelatedVideoElement.addEventListener("change", invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
event => youtubeHelper.setInvidiousRelatedVideos(event.target.checked)
);
let invidiousAnnotationsElement = document.getElementById("invidious-annotations"); invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
invidiousAnnotationsElement.addEventListener("change", invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
event => youtubeHelper.setInvidiousAnnotations(event.target.checked) invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
);
invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
let invidiousExtendDescElement = document.getElementById("invidious-extend_desc"); commonHelper.processDefaultCustomInstances(
invidiousExtendDescElement.addEventListener("change", 'invidious',
event => youtubeHelper.setInvidiousExtendDesc(event.target.checked) 'normal',
); youtubeHelper,
document,
youtubeHelper.getInvidiousNormalRedirectsChecks,
youtubeHelper.setInvidiousNormalRedirectsChecks,
youtubeHelper.getInvidiousNormalCustomRedirects,
youtubeHelper.setInvidiousNormalCustomRedirects
);
let invidiousVrModeElement = document.getElementById("invidious-vr_mode"); commonHelper.processDefaultCustomInstances(
invidiousVrModeElement.addEventListener("change", 'invidious',
event => youtubeHelper.setInvidiousVrMode(event.target.checked) 'tor',
); youtubeHelper,
document,
youtubeHelper.getInvidiousTorRedirectsChecks,
youtubeHelper.setInvidiousTorRedirectsChecks,
youtubeHelper.getInvidiousTorCustomRedirects,
youtubeHelper.setInvidiousTorCustomRedirects
);
});
}
let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos"); init()
invidiousSavePlayerPosElement.addEventListener("change",
event => youtubeHelper.setInvidiousSavePlayerPos(event.target.checked)
);
youtubeHelper.init().then(() => {
invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop();
invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle();
invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay();
invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue();
invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
youtubeListenElement.checked = youtubeHelper.getYoutubeListen();
invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed();
invidiousQualityElement.value = youtubeHelper.getInvidiousQuality();
invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash();
invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0];
invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1];
invidiousCaptions0Element.value = youtubeHelper.getInvidiousCaptions()[0];
invidiousCaptions1Element.value = youtubeHelper.getInvidiousCaptions()[1];
invidiousCaptions2Element.value = youtubeHelper.getInvidiousCaptions()[2];
invidiousRelatedVideoElement.checked = youtubeHelper.getInvidiousRelatedVideos();
invidiousAnnotationsElement.checked = youtubeHelper.getInvidiousAnnotations();
invidiousExtendDescElement.checked = youtubeHelper.getInvidiousExtendDesc();
invidiousVrModeElement.checked = youtubeHelper.getInvidiousVrMode();
invidiousSavePlayerPosElement.checked = youtubeHelper.getInvidiousSavePlayerPos();
commonHelper.processDefaultCustomInstances(
'invidious',
'normal',
youtubeHelper,
document,
youtubeHelper.getInvidiousNormalRedirectsChecks,
youtubeHelper.setInvidiousNormalRedirectsChecks,
youtubeHelper.getInvidiousNormalCustomRedirects,
youtubeHelper.setInvidiousNormalCustomRedirects
);
commonHelper.processDefaultCustomInstances(
'invidious',
'tor',
youtubeHelper,
document,
youtubeHelper.getInvidiousTorRedirectsChecks,
youtubeHelper.setInvidiousTorRedirectsChecks,
youtubeHelper.getInvidiousTorCustomRedirects,
youtubeHelper.setInvidiousTorCustomRedirects
);
});

361
src/pages/options/youtube/piped.js
View File

@ -1,257 +1,132 @@
import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
import commonHelper from "../../../assets/javascripts/helpers/common.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js";
let pipedSponsorblockElement = document.getElementById("piped-sponsorblock"); let pipedElement = document.getElementById('piped');
pipedSponsorblockElement.addEventListener("change",
event => youtubeHelper.setPipedSponsorblock(event.target.checked)
);
let pipedListenElement = pipedElement.getElementsByClassName("listen")[0];
let pipedQualityElement = pipedElement.getElementsByClassName("quality")[0];
let pipedBufferGoalElement = pipedElement.getElementsByClassName("bufferGoal")[0];
let pipedRegionElement = pipedElement.getElementsByClassName("region")[0];
let pipedHomepageElement = pipedElement.getElementsByClassName("homepage")[0];
let pipedCommentsElement = pipedElement.getElementsByClassName("comments")[0];
let pipedMinimizeDescriptionElement = pipedElement.getElementsByClassName("minimizeDescription")[0];
let pipedWatchHistoryElement = pipedElement.getElementsByClassName("watchHistory")[0];
let pipedDisableLBRYElement = pipedElement.getElementsByClassName("disableLBRY")[0];
let pipedProxyLBRYElement = pipedElement.getElementsByClassName("proxyLBRY")[0];
let pipedSelectedSkipSponsorElement = pipedElement.getElementsByClassName("selectedSkip-sponsor")[0];
let pipedSelectedSkipIntroElement = pipedElement.getElementsByClassName("selectedSkip-intro")[0];
let pipedSelectedSkipOutroElement = pipedElement.getElementsByClassName("selectedSkip-outro")[0];
let pipedSelectedSkipPreviewElement = pipedElement.getElementsByClassName("selectedSkip-preview")[0];
let pipedSelectedSkipInteractionElement = pipedElement.getElementsByClassName("selectedSkip-interaction")[0];
let pipedSelectedSkipSelfpromoElement = pipedElement.getElementsByClassName("selectedSkip-selfpromo")[0];
let pipedSelectedSkipMusicOfftopicElement = pipedElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
let pipedSelectedSkipPoiHighlightElement = pipedElement.getElementsByClassName("selectedSkip-poi_highlight")[0];
let pipedSelectedSkipFillerElement = pipedElement.getElementsByClassName("selectedSkip-filler")[0];
let pipedSponsorblockElement = pipedElement.getElementsByClassName("sponsorblock")[0];
let pipedEnabledCodecsElement = pipedElement.getElementsByClassName("enabledCodecs")[0];
let autoplayElement = pipedElement.getElementsByClassName("youtubeAutoplay")[0];
let volumeElement = pipedElement.getElementsByClassName("volume")[0];
let volumeValueElement = pipedElement.getElementsByClassName("volume-value")[0];
volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
function selectSkipModify(value, boolean) { function selectSkipModify(value, boolean) {
if (boolean) { if (boolean && !selectSkip.includes(value)) {
if (!selectSkip.includes(value)) selectSkip.push(value); selectSkip.push(value);
} }
else { else if (!boolean) {
let i = selectSkip.indexOf(value); let i = selectSkip.indexOf(value);
if (i > -1) selectSkip.splice(i, 1); if (i > -1) selectSkip.splice(i, 1);
} }
youtubeHelper.setPipedSelectedSkip(selectSkip)
} }
let pipedSelectedSkipSponsorElement = document.getElementById("piped-selectedSkip-sponsor");
pipedSelectedSkipSponsorElement.addEventListener("change",
event => selectSkipModify('sponsor', event.target.checked)
);
let pipedSelectedSkipIntroElement = document.getElementById("piped-selectedSkip-intro");
pipedSelectedSkipIntroElement.addEventListener("change",
event => selectSkipModify('intro', event.target.checked)
);
let pipedSelectedSkipOutroElement = document.getElementById("piped-selectedSkip-outro");
pipedSelectedSkipOutroElement.addEventListener("change",
event => selectSkipModify('outro', event.target.checked)
);
let pipedSelectedSkipPreviewElement = document.getElementById("piped-selectedSkip-preview");
pipedSelectedSkipPreviewElement.addEventListener("change",
event => selectSkipModify('preview', event.target.checked)
);
let pipedSelectedSkipInteractionElement = document.getElementById("piped-selectedSkip-interaction");
pipedSelectedSkipInteractionElement.addEventListener("change",
event => selectSkipModify('interaction', event.target.checked)
);
let pipedSelectedSkipSelfpromoElement = document.getElementById("piped-selectedSkip-selfpromo");
pipedSelectedSkipSelfpromoElement.addEventListener("change",
event => selectSkipModify('selfpromo', event.target.checked)
);
let pipedSelectedSkipMusicOfftopicElement = document.getElementById("piped-selectedSkip-music_offtopic");
pipedSelectedSkipMusicOfftopicElement.addEventListener("change",
event => selectSkipModify('music_offtopic', event.target.checked)
);
let pipedSelectedSkipPoiHighlightElement = document.getElementById("piped-selectedSkip-poi_highlight");
pipedSelectedSkipPoiHighlightElement.addEventListener("change",
event => selectSkipModify('poi_highlight', event.target.checked)
);
let pipedSelectedSkipFillerElement = document.getElementById("piped-selectedSkip-filler");
pipedSelectedSkipFillerElement.addEventListener("change",
event => selectSkipModify('filler', event.target.checked)
);
let pipedListenElement = document.getElementById("piped-listen");
pipedListenElement.addEventListener("change",
event => youtubeHelper.setYoutubeListen(event.target.checked)
);
let pipedQualityElement = document.getElementById("piped-quality");
pipedQualityElement.addEventListener("change",
event => youtubeHelper.setPipedQuality(event.target.options[pipedQualityElement.selectedIndex].value)
);
let pipedBufferGoalElement = document.getElementById("piped-bufferGoal");
pipedBufferGoalElement.addEventListener("change",
event => youtubeHelper.setPipedBufferGoal(pipedBufferGoalElement.value)
);
let pipedRegionElement = document.getElementById("piped-region");
pipedRegionElement.addEventListener("change",
event => youtubeHelper.setPipedRegion(event.target.options[pipedRegionElement.selectedIndex].value)
);
let pipedHomepageElement = document.getElementById("piped-homepage");
pipedHomepageElement.addEventListener("change",
event => youtubeHelper.setPipedHomepage(event.target.options[pipedHomepageElement.selectedIndex].value)
);
let pipedCommentsElement = document.getElementById("piped-comments");
pipedCommentsElement.addEventListener("change",
event => youtubeHelper.setPipedComments(event.target.checked)
);
let pipedMinimizeDescriptionElement = document.getElementById("piped-minimizeDescription");
pipedMinimizeDescriptionElement.addEventListener("change",
event => youtubeHelper.setPipedMinimizeDescription(event.target.checked)
);
let pipedWatchHistoryElement = document.getElementById("piped-watchHistory");
pipedWatchHistoryElement.addEventListener("change",
event => youtubeHelper.setPipedWatchHistory(event.target.checked)
);
let pipedEnabledCodecsElement = document.getElementById("piped-enabledCodecs");
pipedEnabledCodecsElement.addEventListener("change",
() => {
let result = [];
for (const opt of pipedEnabledCodecsElement.options)
if (opt.selected) result.push(opt.value);
youtubeHelper.setPipedEnabledCodecs(result);
}
);
let pipedDisableLBRYElement = document.getElementById("piped-disableLBRY");
pipedDisableLBRYElement.addEventListener("change",
event => youtubeHelper.setPipedDisableLBRY(event.target.checked)
);
let pipedProxyLBRYElement = document.getElementById("piped-proxyLBRY");
pipedProxyLBRYElement.addEventListener("change",
event => youtubeHelper.setPipedProxyLBRY(event.target.checked)
);
let pipedMaterialListenElement = document.getElementById("pipedMaterial-listen");
pipedMaterialListenElement.addEventListener("change",
event => youtubeHelper.setYoutubeListen(event.target.checked)
);
let pipedMaterialDisableLBRYElement = document.getElementById("pipedMaterial-disableLBRY");
pipedMaterialDisableLBRYElement.addEventListener("change",
event => youtubeHelper.setPipedDisableLBRY(event.target.checked)
);
let pipedMaterialProxyLBRYElement = document.getElementById("pipedMaterial-proxyLBRY");
pipedMaterialProxyLBRYElement.addEventListener("change",
event => youtubeHelper.setPipedProxyLBRY(event.target.checked)
);
let pipedMaterialSponsorblockElement = document.getElementById("pipedMaterial-sponsorblock");
pipedMaterialSponsorblockElement.addEventListener("change",
event => youtubeHelper.setPipedSponsorblock(event.target.checked)
);
let pipedMaterialSkipToLastPointElement = document.getElementById("pipedMaterial-skipToLastPoint");
pipedMaterialSkipToLastPointElement.addEventListener("change",
event => youtubeHelper.setPipedMaterialSkipToLastPoint(event.target.checked)
);
let pipedMaterialSelectedSkipSponsorElement = document.getElementById("pipedMaterial-selectedSkip-sponsor");
pipedMaterialSelectedSkipSponsorElement.addEventListener("change",
event => selectSkipModify('sponsor', event.target.checked)
);
let pipedMaterialSelectedSkipIntroElement = document.getElementById("pipedMaterial-selectedSkip-intro");
pipedMaterialSelectedSkipIntroElement.addEventListener("change",
event => selectSkipModify('intro', event.target.checked)
);
let pipedMaterialSelectedSkipOutroElement = document.getElementById("pipedMaterial-selectedSkip-outro");
pipedMaterialSelectedSkipOutroElement.addEventListener("change",
event => selectSkipModify('outro', event.target.checked)
);
let pipedMaterialSelectedSkipPreviewElement = document.getElementById("pipedMaterial-selectedSkip-preview");
pipedMaterialSelectedSkipPreviewElement.addEventListener("change",
event => selectSkipModify('preview', event.target.checked)
);
let pipedMaterialSelectedSkipInteractionElement = document.getElementById("pipedMaterial-selectedSkip-interaction");
pipedMaterialSelectedSkipInteractionElement.addEventListener("change",
event => selectSkipModify('interaction', event.target.checked)
);
let pipedMaterialSelectedSkipSelfpromoElement = document.getElementById("pipedMaterial-selectedSkip-selfpromo");
pipedMaterialSelectedSkipSelfpromoElement.addEventListener("change",
event => selectSkipModify('selfpromo', event.target.checked)
);
let pipedMaterialSelectedSkipMusicOfftopicElement = document.getElementById("pipedMaterial-selectedSkip-music_offtopic");
pipedMaterialSelectedSkipMusicOfftopicElement.addEventListener("change",
event => selectSkipModify('music_offtopic', event.target.checked)
);
let pipedMaterialSelectedSkipPoiHighlightElement = document.getElementById("pipedMaterial-selectedSkip-poi_highlight");
pipedMaterialSelectedSkipPoiHighlightElement.addEventListener("change",
event => selectSkipModify('poi_highlight', event.target.checked)
);
let pipedMaterialSelectedSkipFillerElement = document.getElementById("pipedMaterial-selectedSkip-filler");
pipedMaterialSelectedSkipFillerElement.addEventListener("change",
event => selectSkipModify('filler', event.target.checked)
);
let selectSkip = []; let selectSkip = [];
youtubeHelper.init().then(() => { pipedElement.addEventListener("change", async () => {
console.log("changed piped settings");
let pipedEnabledCodecsResult = [];
for (const opt of pipedEnabledCodecsElement.options)
if (opt.selected) pipedEnabledCodecsResult.push(opt.value);
pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock(); selectSkipModify('sponsor', pipedSelectedSkipSponsorElement.checked);
selectSkip = youtubeHelper.getPipedSelectedSkip(); selectSkipModify('intro', pipedSelectedSkipIntroElement.checked);
pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor'); selectSkipModify('outro', pipedSelectedSkipOutroElement.checked);
pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro'); selectSkipModify('preview', pipedSelectedSkipPreviewElement.checked);
pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro'); selectSkipModify('interaction', pipedSelectedSkipInteractionElement.checked);
pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview'); selectSkipModify('selfpromo', pipedSelectedSkipSelfpromoElement.checked);
pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction'); selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopicElement.checked);
pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo'); selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlightElement.checked);
pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic'); selectSkipModify('filler', pipedSelectedSkipFillerElement.checked);
pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler');
pipedListenElement.checked = youtubeHelper.getYoutubeListen();
pipedQualityElement.value = youtubeHelper.getPipedQuality();
pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal();
pipedRegionElement.value = youtubeHelper.getPipedRegion();
pipedHomepageElement.value = youtubeHelper.getPipedHomepage();
pipedCommentsElement.checked = youtubeHelper.getPipedComments();
pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription();
pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory();
pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs();
pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
pipedMaterialListenElement.checked = youtubeHelper.getYoutubeListen(); await youtubeHelper.setYoutubeSettings({
pipedMaterialDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY(); pipedQuality: pipedQualityElement.value,
pipedMaterialProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY(); pipedBufferGoal: pipedBufferGoalElement.value,
pipedMaterialSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock() pipedRegion: pipedRegionElement.value,
pipedMaterialSkipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint(); pipedHomepage: pipedHomepageElement.value,
pipedMaterialSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor'); pipedComments: pipedCommentsElement.checked,
pipedMaterialSelectedSkipIntroElement.checked = selectSkip.includes('intro'); pipedMinimizeDescription: pipedMinimizeDescriptionElement.checked,
pipedMaterialSelectedSkipOutroElement.checked = selectSkip.includes('outro'); youtubeAutoplay: autoplayElement.checked,
pipedMaterialSelectedSkipPreviewElement.checked = selectSkip.includes('preview'); pipedWatchHistory: pipedWatchHistoryElement.checked,
pipedMaterialSelectedSkipInteractionElement.checked = selectSkip.includes('interaction'); pipedDisableLBRY: pipedDisableLBRYElement.checked,
pipedMaterialSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo'); pipedProxyLBRY: pipedProxyLBRYElement.checked,
pipedMaterialSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic'); youtubeVolume: volumeElement.value,
pipedMaterialSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight'); pipedSponsorblock: pipedSponsorblockElement.checked,
pipedMaterialSelectedSkipFillerElement.checked = selectSkip.includes('filler'); pipedEnabledCodecs: pipedEnabledCodecsResult,
youtubeListen: pipedListenElement.checked,
commonHelper.processDefaultCustomInstances( pipedSelectedSkip: selectSkip,
'piped', });
'normal', init();
youtubeHelper,
document,
youtubeHelper.getPipedNormalRedirectsChecks,
youtubeHelper.setPipedNormalRedirectsChecks,
youtubeHelper.getPipedNormalCustomRedirects,
youtubeHelper.setPipedNormalCustomRedirects
);
commonHelper.processDefaultCustomInstances(
'piped',
'tor',
youtubeHelper,
document,
youtubeHelper.getPipedTorRedirectsChecks,
youtubeHelper.setPipedTorRedirectsChecks,
youtubeHelper.getPipedTorCustomRedirects,
youtubeHelper.setPipedTorCustomRedirects
);
}); });
function init() {
youtubeHelper.init().then(() => {
pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
selectSkip = youtubeHelper.getPipedSelectedSkip();
pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor');
pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro');
pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro');
pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview');
autoplayElement.checked = youtubeHelper.getAutoplay();
pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction');
pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight');
pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler');
pipedListenElement.checked = youtubeHelper.getYoutubeListen();
pipedQualityElement.value = youtubeHelper.getPipedQuality();
pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal();
pipedRegionElement.value = youtubeHelper.getPipedRegion();
pipedHomepageElement.value = youtubeHelper.getPipedHomepage();
pipedCommentsElement.checked = youtubeHelper.getPipedComments();
pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription();
pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory();
pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs();
pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
volumeElement.value = youtubeHelper.getVolume();
volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
commonHelper.processDefaultCustomInstances(
'piped',
'normal',
youtubeHelper,
document,
youtubeHelper.getPipedNormalRedirectsChecks,
youtubeHelper.setPipedNormalRedirectsChecks,
youtubeHelper.getPipedNormalCustomRedirects,
youtubeHelper.setPipedNormalCustomRedirects
);
commonHelper.processDefaultCustomInstances(
'piped',
'tor',
youtubeHelper,
document,
youtubeHelper.getPipedTorRedirectsChecks,
youtubeHelper.setPipedTorRedirectsChecks,
youtubeHelper.getPipedTorCustomRedirects,
youtubeHelper.setPipedTorCustomRedirects
);
});
}
init();

129
src/pages/options/youtube/pipedMaterial.js
View File

@ -1,25 +1,112 @@
import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
import commonHelper from "../../../assets/javascripts/helpers/common.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js";
youtubeHelper.init().then(() => { let pipedMaterialElement = document.getElementById('pipedMaterial');
commonHelper.processDefaultCustomInstances( let listenElement = pipedMaterialElement.getElementsByClassName("listen")[0];
'pipedMaterial', let disableLBRYElement = pipedMaterialElement.getElementsByClassName("disableLBRY")[0];
'normal', let proxyLBRYElement = pipedMaterialElement.getElementsByClassName("proxyLBRY")[0];
youtubeHelper, let sponsorblockElement = pipedMaterialElement.getElementsByClassName("sponsorblock")[0];
document, let skipToLastPointElement = pipedMaterialElement.getElementsByClassName("skipToLastPoint")[0];
youtubeHelper.getPipedMaterialNormalRedirectsChecks,
youtubeHelper.setPipedMaterialNormalRedirectsChecks, let selectedSkipSponsorElement = pipedMaterialElement.getElementsByClassName("selectedSkip-sponsor")[0];
youtubeHelper.getPipedMaterialNormalCustomRedirects, let selectedSkipIntroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-intro")[0];
youtubeHelper.setPipedMaterialNormalCustomRedirects let selectedSkipOutroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-outro")[0];
); let selectedSkipPreviewElement = pipedMaterialElement.getElementsByClassName("selectedSkip-preview")[0];
commonHelper.processDefaultCustomInstances( let selectedSkipInteractionElement = pipedMaterialElement.getElementsByClassName("selectedSkip-interaction")[0];
'pipedMaterial', let selectedSkipSelfpromoElement = pipedMaterialElement.getElementsByClassName("selectedSkip-selfpromo")[0];
'tor', let selectedSkipMusicOfftopicElement = pipedMaterialElement.getElementsByClassName("selectedSkip-music_offtopic")[0];
youtubeHelper,
document, let autoplayElement = pipedMaterialElement.getElementsByClassName("youtubeAutoplay")[0];
youtubeHelper.getPipedMaterialTorRedirectsChecks,
youtubeHelper.setPipedMaterialTorRedirectsChecks, let volumeElement = pipedMaterialElement.getElementsByClassName("volume")[0];
youtubeHelper.getPipedMaterialTorCustomRedirects, let volumeValueElement = pipedMaterialElement.getElementsByClassName("volume-value")[0];
youtubeHelper.setPipedMaterialTorCustomRedirects
); volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
let selectSkip = [];
function selectSkipModify(value, boolean) {
if (boolean && !selectSkip.includes(value)) {
selectSkip.push(value);
}
else if (!boolean) {
let i = selectSkip.indexOf(value);
if (i > -1) selectSkip.splice(i, 1);
}
}
pipedMaterialElement.addEventListener("change", async () => {
console.log("changed piped settings");
selectSkipModify('sponsors', selectedSkipSponsorElement.checked);
selectSkipModify('intro', selectedSkipIntroElement.checked);
selectSkipModify('outro', selectedSkipOutroElement.checked);
selectSkipModify('preview', selectedSkipPreviewElement.checked);
selectSkipModify('interaction', selectedSkipInteractionElement.checked);
selectSkipModify('selfpromo', selectedSkipSelfpromoElement.checked);
selectSkipModify('music_offtopic', selectedSkipMusicOfftopicElement.checked);
await youtubeHelper.setYoutubeSettings({
youtubeListen: listenElement.checked,
pipedDisableLBRY: disableLBRYElement.checked,
pipedProxyLBRY: proxyLBRYElement.checked,
pipedSponsorblock: sponsorblockElement.checked,
pipedSkipToLastPoint: skipToLastPointElement.checked,
pipedSelectedSkipSponsor: selectedSkipSponsorElement.checked,
pipedSelectedSkipIntro: selectedSkipIntroElement.checked,
pipedSelectedSkipOutro: selectedSkipOutroElement.checked,
youtubeAutoplay: autoplayElement.checked,
youtubeVolume: volumeElement.value,
pipedSelectedSkipPreview: selectedSkipPreviewElement.checked,
pipedSelectedSkipInteraction: selectedSkipInteractionElement.checked,
pipedSelectedSkipSelfpromo: selectedSkipSelfpromoElement.checked,
pipedSelectedSkipMusicOfftopic: selectedSkipMusicOfftopicElement.checked,
pipedSponsorblock: sponsorblockElement.checked,
pipedMaterialSkipToLastPoint: skipToLastPointElement.checked,
pipedSelectedSkip: selectSkip,
});
init();
}); });
function init() {
youtubeHelper.init().then(() => {
autoplayElement.checked = youtubeHelper.getAutoplay();
listenElement.checked = youtubeHelper.getYoutubeListen();
disableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY();
proxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY();
sponsorblockElement.checked = youtubeHelper.getPipedSponsorblock();
skipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint();
selectedSkipSponsorElement.checked = selectSkip.includes('sponsors');
selectedSkipIntroElement.checked = selectSkip.includes('intro');
selectedSkipOutroElement.checked = selectSkip.includes('outro');
selectedSkipPreviewElement.checked = selectSkip.includes('preview');
selectedSkipInteractionElement.checked = selectSkip.includes('interaction');
selectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo');
selectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic');
volumeElement.value = youtubeHelper.getVolume();
volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
commonHelper.processDefaultCustomInstances(
'pipedMaterial',
'normal',
youtubeHelper,
document,
youtubeHelper.getPipedMaterialNormalRedirectsChecks,
youtubeHelper.setPipedMaterialNormalRedirectsChecks,
youtubeHelper.getPipedMaterialNormalCustomRedirects,
youtubeHelper.setPipedMaterialNormalCustomRedirects
);
commonHelper.processDefaultCustomInstances(
'pipedMaterial',
'tor',
youtubeHelper,
document,
youtubeHelper.getPipedMaterialTorRedirectsChecks,
youtubeHelper.setPipedMaterialTorRedirectsChecks,
youtubeHelper.getPipedMaterialTorCustomRedirects,
youtubeHelper.setPipedMaterialTorCustomRedirects
);
});
}
init();

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

@ -154,7 +154,7 @@
<select id="youtube-embed-frontend"> <select id="youtube-embed-frontend">
<option value="invidious">Invidious</option> <option value="invidious">Invidious</option>
<option value="piped">Piped</option> <option value="piped">Piped</option>
<option value="pipedMaterial">Piped-Material</option> <option value="pipedMaterial">Material</option>
<option value="youtube">Youtube</option> <option value="youtube">Youtube</option>
</select> </select>
</div> </div>
@ -190,64 +190,47 @@
<input id="enable-youtube-custom-settings" type="checkbox" /> <input id="enable-youtube-custom-settings" type="checkbox" />
</div> </div>
</div>
<div id="invidious">
<div class="custom-settings"> <div class="custom-settings">
<hr> <hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
<input id="invidious-youtubeAutoplay" type="checkbox" />
</div>
<div class="some-block option-block">
<h4><x data-localise="__MSG_volume__">Volume: </x><span id="volume-value">--%</span></h4>
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
</div>
</div>
</div>
<div id="invidious">
<div class="custom-settings">
<div class="some-block option-block">
<h4 data-localise="__MSG_playerStyle__">Player Style</h4>
<select id="invidious-player_style">
<option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
<option value="youtube" data-localise="__MSG_youtube__">YouTube</option>
</select>
</div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_alwaysLoop__">Always loop</h4> <h4 data-localise="__MSG_alwaysLoop__">Always loop</h4>
<input id="invidious-video_loop" type="checkbox" /> <input class="video_loop" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
<input class="youtubeAutoplay" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_playNext__">Play next by default</h4> <h4 data-localise="__MSG_playNext__">Play next by default</h4>
<input id="invidious-continue" type="checkbox" /> <input class="continue" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_autoplayNext__">Autoplay next video</h4> <h4 data-localise="__MSG_autoplayNext__">Autoplay next video</h4>
<input id="invidious-continue_autoplay" type="checkbox" /> <input class="continue_autoplay" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_alwaysProxy__">Always proxy videos</h4> <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos</h4>
<input id="invidious-local" type="checkbox" /> <input class="local" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_listenByDefault__">Listen by default</h4> <h4 data-localise="__MSG_listenByDefault__">Listen by default</h4>
<input id="invidious-listen" type="checkbox" /> <input class="listen" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultSpeed__">Default speed</h4> <h4 data-localise="__MSG_defaultSpeed__">Default speed</h4>
<select id="invidious-speed"> <select class="speed">
<option>2.0</option> <option>2.0</option>
<option>1.75</option> <option>1.75</option>
<option>1.5</option> <option>1.5</option>
@ -261,7 +244,7 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_prefQuality__">Preferred video quality</h4> <h4 data-localise="__MSG_prefQuality__">Preferred video quality</h4>
<select id="invidious-quality"> <select class="quality">
<option value="hd720">720p</option> <option value="hd720">720p</option>
<option value="medium">480p</option> <option value="medium">480p</option>
<option value="dash" data-localise="__MSG_dash__">DASH (adaptive quality)</option> <option value="dash" data-localise="__MSG_dash__">DASH (adaptive quality)</option>
@ -271,7 +254,7 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_prefDashQuality__">Preferred DASH video quality</h4> <h4 data-localise="__MSG_prefDashQuality__">Preferred DASH video quality</h4>
<select id="invidious-quality_dash"> <select class="quality_dash">
<option value="auto" data-localise="__MSG_auto__">Auto</option> <option value="auto" data-localise="__MSG_auto__">Auto</option>
<option value="best" data-localise="__MSG_best__">Best</option> <option value="best" data-localise="__MSG_best__">Best</option>
<option value="4320p">4320p</option> <option value="4320p">4320p</option>
@ -288,16 +271,23 @@
</select> </select>
</div> </div>
<div class="some-block option-block">
<h4>
<x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
</h4>
<input class="volume" name="volume" type="range" min="0" max="100" step="1" />
</div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultComments__">Default comments</h4> <h4 data-localise="__MSG_defaultComments__">Default comments</h4>
<select id="invidious-comments[0]"> <select class="comments[0]">
<option value="" data-localise="__MSG_none__">none</option> <option value="" data-localise="__MSG_none__">none</option>
<option value="youtube">YouTube</option> <option value="youtube">YouTube</option>
<option value="reddit">Reddit</option> <option value="reddit">Reddit</option>
</option> </option>
</select> </select>
&nbsp; &nbsp;
<select id="invidious-comments[1]"> <select class="comments[1]">
<option value="" data-localise="__MSG_none__">none</option> <option value="" data-localise="__MSG_none__">none</option>
<option value="youtube">YouTube</option> <option value="youtube">YouTube</option>
<option value="reddit">Reddit</option> <option value="reddit">Reddit</option>
@ -306,7 +296,7 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultCaptions__">Default captions</h4> <h4 data-localise="__MSG_defaultCaptions__">Default captions</h4>
<select id="invidious-captions[0]"> <select class="captions[0]">
<option value="" data-localise="__MSG_none__">none</option> <option value="" data-localise="__MSG_none__">none</option>
<option value="English">English</option> <option value="English">English</option>
<option value="English (auto-generated)">English (auto-generated)</option> <option value="English (auto-generated)">English (auto-generated)</option>
@ -439,7 +429,7 @@
<option value="Zulu">Zulu</option> <option value="Zulu">Zulu</option>
</select> </select>
&nbsp; &nbsp;
<select id="invidious-captions[1]"> <select class="captions[1]">
<option value="" data-localise="__MSG_none__">none</option> <option value="" data-localise="__MSG_none__">none</option>
<option value="English">English</option> <option value="English">English</option>
<option value="English (auto-generated)">English (auto-generated)</option> <option value="English (auto-generated)">English (auto-generated)</option>
@ -572,7 +562,7 @@
<option value="Zulu">Zulu</option> <option value="Zulu">Zulu</option>
</select> </select>
&nbsp; &nbsp;
<select id="invidious-captions[2]"> <select class="captions[2]">
<option value="" data-localise="__MSG_none__">none</option> <option value="" data-localise="__MSG_none__">none</option>
<option value="English">English</option> <option value="English">English</option>
<option value="English (auto-generated)">English (auto-generated)</option> <option value="English (auto-generated)">English (auto-generated)</option>
@ -708,47 +698,54 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_showRelated__">Show related videos</h4> <h4 data-localise="__MSG_showRelated__">Show related videos</h4>
<input id="invidious-related_videos" type="checkbox" /> <input class="related_videos" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_showAnnotations__">Show annotations by default</h4> <h4 data-localise="__MSG_showAnnotations__">Show annotations by default</h4>
<input id="invidious-annotations" type="checkbox" /> <input class="annotations" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_autoExtendDesc__">Automatically extend video description</h4> <h4 data-localise="__MSG_autoExtendDesc__">Automatically extend video description</h4>
<input id="invidious-extend_desc" type="checkbox" /> <input class="extend_desc" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_interactive360__">Interactive 360 degree videos (requires WebGL)</h4> <h4 data-localise="__MSG_interactive360__">Interactive 360 degree videos (requires WebGL)</h4>
<input id="invidious-vr_mode" type="checkbox" /> <input class="vr_mode" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_savePlaybackPos__">Save playback position</h4> <h4 data-localise="__MSG_savePlaybackPos__">Save playback position</h4>
<input id="invidious-save_player_pos" type="checkbox" /> <input class="save_player_pos" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_playerStyle__">Player Style</h4>
<select class="player_style">
<option value="invidious" data-localise="__MSG_invidious__">Invidious</option>
<option value="youtube" data-localise="__MSG_youtube__">YouTube</option>
</select>
</div> </div>
</div> </div>
<hr> <hr>
<div id="invidious-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="invidious-normal-checklist"> <div class="checklist" class="checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-invidious-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="invidious-normal-custom-instance" placeholder="https://invidious.com" type="url" /> <input class="custom-instance" placeholder="https://invidious.com" type="url" />
<button type="submit" class="add" id="invidious-normal-add-instance"> <button type="submit" class="add" class="add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -757,23 +754,23 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="invidious-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="invidious-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="invidious-tor-checklist"> <div class="checklist" class="checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-invidious-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="invidious-tor-custom-instance" placeholder="https://invidious.com" type="url" /> <input class="custom-instance" placeholder="https://invidious.com" type="url" />
<button type="submit" class="add" id="invidious-tor-add-instance"> <button type="submit" class="add" class="add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -782,73 +779,85 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="invidious-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
<div id="piped"> <div id="piped">
<div class="custom-settings"> <div class="custom-settings">
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
<input class="youtubeAutoplay" type="checkbox" />
</div>
<div class="some-block option-block">
<h4>
<x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
</h4>
<input class="volume" name="volume" type="range" min="0" max="100" step="1" />
</div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4> <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4>
<input id="piped-sponsorblock" type="checkbox" /> <input class="sponsorblock" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4> <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4>
<input id="piped-selectedSkip-sponsor" type="checkbox" /> <input class="selectedSkip-sponsor" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4> <h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4>
<input id="piped-selectedSkip-intro" type="checkbox" /> <input class="selectedSkip-intro" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4> <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4>
<input id="piped-selectedSkip-outro" type="checkbox" /> <input class="selectedSkip-outro" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4> <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4>
<input id="piped-selectedSkip-preview" type="checkbox" /> <input class="selectedSkip-preview" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4> <h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4>
<input id="piped-selectedSkip-interaction" type="checkbox" /> <input class="selectedSkip-interaction" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4> <h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4>
<input id="piped-selectedSkip-selfpromo" type="checkbox" /> <input class="selectedSkip-selfpromo" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4> <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4>
<input id="piped-selectedSkip-music_offtopic" type="checkbox" /> <input class="selectedSkip-music_offtopic" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipHighlight__">Skip Highlight</h4> <h4 data-localise="__MSG_skipHighlight__">Skip Highlight</h4>
<input id="piped-selectedSkip-poi_highlight" type="checkbox" /> <input class="selectedSkip-poi_highlight" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4> <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
<input id="piped-selectedSkip-filler" type="checkbox" /> <input class="selectedSkip-filler" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_audioOnly__">Audio Only</h4> <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
<input id="piped-listen" type="checkbox" /> <input class="listen" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultQuality__">Default Quality</h4> <h4 data-localise="__MSG_defaultQuality__">Default Quality</h4>
<select id="piped-quality"> <select class="quality">
<option value="0">Auto</option> <option value="0">Auto</option>
<option value="144">144p</option> <option value="144">144p</option>
<option value="240">240p</option> <option value="240">240p</option>
@ -864,12 +873,12 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_bufferingGoal__">Buffering Goal (in seconds)</h4> <h4 data-localise="__MSG_bufferingGoal__">Buffering Goal (in seconds)</h4>
<input id="piped-bufferGoal" type="number" min="10" /> <input class="bufferGoal" type="number" min="10" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_countrySelection__">Country Selection</h4> <h4 data-localise="__MSG_countrySelection__">Country Selection</h4>
<select id="piped-region"> <select class="region">
<option value="AF">Afghanistan</option> <option value="AF">Afghanistan</option>
<option value="AL">Albania</option> <option value="AL">Albania</option>
<option value="DZ">Algeria</option> <option value="DZ">Algeria</option>
@ -1068,7 +1077,7 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultHomepage__">Default Homepage</h4> <h4 data-localise="__MSG_defaultHomepage__">Default Homepage</h4>
<select id="piped-homepage"> <select class="homepage">
<option value="trending" data-localise="__MSG_trending__">Trending</option> <option value="trending" data-localise="__MSG_trending__">Trending</option>
<option value="feed" data-localise="__MSG_feed__">Feed</option> <option value="feed" data-localise="__MSG_feed__">Feed</option>
</select> </select>
@ -1076,22 +1085,22 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_showComments__">Show Comments</h4> <h4 data-localise="__MSG_showComments__">Show Comments</h4>
<input id="piped-comments" type="checkbox" /> <input class="comments" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_minimizeDesc__">Minimize Description by default</h4> <h4 data-localise="__MSG_minimizeDesc__">Minimize Description by default</h4>
<input id="piped-minimizeDescription" type="checkbox" /> <input class="minimizeDescription" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_storeHistory__">Store Watch History</h4> <h4 data-localise="__MSG_storeHistory__">Store Watch History</h4>
<input id="piped-watchHistory" type="checkbox" /> <input class="watchHistory" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enabledCodecs__">Enabled Codecs (Multiple)</h4> <h4 data-localise="__MSG_enabledCodecs__">Enabled Codecs (Multiple)</h4>
<select id="piped-enabledCodecs" multiple> <select class="enabledCodecs" multiple>
<option value="av1">AV1</option> <option value="av1">AV1</option>
<option value="vp9">VP9</option> <option value="vp9">VP9</option>
<option value="avc">AVC (h.264)</option> <option value="avc">AVC (h.264)</option>
@ -1100,30 +1109,31 @@
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_disableLBRY__">Disable LBRY for Streaming</h4> <h4 data-localise="__MSG_disableLBRY__">Disable LBRY for Streaming</h4>
<input id="piped-disableLBRY" type="checkbox" /> <input class="disableLBRY" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enableProxyLBRY__">Enable Proxy for LBRY</h4> <h4 data-localise="__MSG_enableProxyLBRY__">Enable Proxy for LBRY</h4>
<input id="piped-proxyLBRY" type="checkbox" /> <input class="proxyLBRY" type="checkbox" />
</div> </div>
</div> </div>
<hr> <hr>
<div id="piped-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="piped-normal-checklist"> <div class="checklist" class="checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-piped-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="piped-normal-custom-instance" placeholder="https://piped.com" type="url" /> <input class="custom-instance" placeholder="https://piped.com" type="url" />
<button type="submit" class="add" id="piped-normal-add-instance"> <button type="submit" class="add" class="add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -1132,23 +1142,23 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="piped-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="piped-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="piped-tor-checklist"> <div class="checklist" class="checklist">
</div> </div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-piped-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="piped-tor-custom-instance" placeholder="https://piped.com" type="url" /> <input class="custom-instance" placeholder="https://piped.com" type="url" />
<button type="submit" class="add" id="piped-tor-add-instance"> <button type="submit" class="add" class="add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -1157,101 +1167,103 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="piped-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<hr> <hr>
</div> </div>
<div id="pipedMaterial"> <div id="pipedMaterial">
<hr>
<div class="custom-settings"> <div class="custom-settings">
<hr>
<div class="some-block option-block">
<h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4>
<input class="youtubeAutoplay" type="checkbox" />
</div>
<div class="some-block option-block">
<h4>
<x data-localise="__MSG_volume__">Volume: </x><span class="volume-value">--%</span>
</h4>
<input class="volume" name="volume" type="range" min="0" max="100" step="1" />
</div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_audioOnly__">Audio Only</h4> <h4 data-localise="__MSG_audioOnly__">Audio Only</h4>
<input id="pipedMaterial-listen" type="checkbox" /> <input class="listen" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_disableLBRY__">Disable LBRY</h4> <h4 data-localise="__MSG_disableLBRY__">Disable LBRY</h4>
<input id="pipedMaterial-disableLBRY" type="checkbox" /> <input class="disableLBRY" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_proxyLBRY__">Proxy LBRY videos</h4> <h4 data-localise="__MSG_proxyLBRY__">Proxy LBRY videos</h4>
<input id="pipedMaterial-proxyLBRY" type="checkbox" /> <input class="proxyLBRY" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4> <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4>
<input id="pipedMaterial-sponsorblock" type="checkbox" /> <input class="sponsorblock" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen</h4> <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen
<input id="pipedMaterial-skipToLastPoint" type="checkbox" /> </h4>
<input class="skipToLastPoint" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4> <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4>
<input id="pipedMaterial-selectedSkip-sponsor" type="checkbox" /> <input class="selectedSkip-sponsor" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4> <h4 data-localise="__MSG_skipIntermission__">Skip Intermission/Intro Animation</h4>
<input id="pipedMaterial-selectedSkip-intro" type="checkbox" /> <input class="selectedSkip-intro" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4> <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4>
<input id="pipedMaterial-selectedSkip-outro" type="checkbox" /> <input class="selectedSkip-outro" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4> <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4>
<input id="pipedMaterial-selectedSkip-preview" type="checkbox" /> <input class="selectedSkip-preview" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4> <h4 data-localise="__MSG_skipReminder__">Skip Interaction Reminder (Subscribe)</h4>
<input id="pipedMaterial-selectedSkip-interaction" type="checkbox" /> <input class="selectedSkip-interaction" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4> <h4 data-localise="__MSG_skipUnpaidPromo__">Skip Unpaid/Self Promotion</h4>
<input id="pipedMaterial-selectedSkip-selfpromo" type="checkbox" /> <input class="selectedSkip-selfpromo" type="checkbox" />
</div> </div>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4> <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4>
<input id="pipedMaterial-selectedSkip-music_offtopic" type="checkbox" /> <input class="selectedSkip-music_offtopic" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_skipHighlights__">Skip Highlight</h4>
<input id="pipedMaterial-selectedSkip-poi_highlight" type="checkbox" />
</div>
<div class="some-block option-block">
<h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4>
<input id="pipedMaterial-selectedSkip-filler" type="checkbox" />
</div> </div>
<hr> <hr>
</div> </div>
<div id="pipedMaterial-normal"> <div class="normal">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="pipedMaterial-normal-checklist"></div> <div class="checklist" class="checklist"></div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-pipedMaterial-normal-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="pipedMaterial-normal-custom-instance" placeholder="https://piped-material.com" type="url" /> <input class="custom-instance" placeholder="https://material.com" type="url" />
<button type="submit" class="add" id="pipedMaterial-normal-add-instance"> <button type="submit" class="add" class="add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -1260,22 +1272,22 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="pipedMaterial-normal-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
<div id="pipedMaterial-tor"> <div class="tor">
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
</div> </div>
<div class="checklist" id="pipedMaterial-tor-checklist"></div> <div class="checklist" class="checklist"></div>
<hr> <hr>
<div class="some-block option-block"> <div class="some-block option-block">
<h4 data-localise="__MSG_customInstances__">Custom Instances</h4> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
</div> </div>
<form id="custom-pipedMaterial-tor-instance-form"> <form class="custom-instance-form">
<div class="some-block option-block"> <div class="some-block option-block">
<input id="pipedMaterial-tor-custom-instance" placeholder="https://pipedMaterial.com" type="url" /> <input class="custom-instance" placeholder="https://pipedMaterial.com" type="url" />
<button type="submit" class="add" id="pipedMaterial-tor-add-instance"> <button type="submit" class="add" class="add-instance">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
fill="currentColor"> fill="currentColor">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -1284,7 +1296,7 @@
</button> </button>
</div> </div>
</form> </form>
<div class="checklist" id="pipedMaterial-tor-custom-checklist"></div> <div class="checklist custom-checklist"></div>
</div> </div>
</div> </div>
</section> </section>
@ -1299,4 +1311,4 @@
<script type="module" src="../../../assets/javascripts/localise.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script>
</body> </body>
</html> </html>

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

@ -1,12 +1,17 @@
import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
let disableYoutubeElement = document.getElementById("disable-invidious");
let youtubeFrontendElement = document.getElementById("youtube-frontend"); let youtubeFrontendElement = document.getElementById("youtube-frontend");
let invidiousDivElement = document.getElementById("invidious"); let invidiousDivElement = document.getElementById("invidious");
let pipedDivElement = document.getElementById("piped"); let pipedDivElement = document.getElementById("piped");
let pipedMaterialDivElement = document.getElementById("pipedMaterial"); let pipedMaterialDivElement = document.getElementById("pipedMaterial");
let invidiousPipedPipedMaterialDivElement = document.getElementById("invidious-piped-pipedMaterial");
let freetubeYatteeDivElement = document.getElementById("freetube-yatte"); let freetubeYatteeDivElement = document.getElementById("freetube-yatte");
let customSettingsDivElement = document.getElementsByClassName("custom-settings"); let customSettingsDivElement = document.getElementsByClassName("custom-settings");
let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube");
let protocolElement = document.getElementById("protocol");
function changeFrontendsSettings() { function changeFrontendsSettings() {
let frontend = youtubeFrontendElement.value; let frontend = youtubeFrontendElement.value;
@ -17,28 +22,24 @@ function changeFrontendsSettings() {
for (const item of customSettingsDivElement) item.style.display = 'none'; for (const item of customSettingsDivElement) item.style.display = 'none';
if (frontend == 'invidious') { if (frontend == 'invidious') {
invidiousPipedPipedMaterialDivElement.style.display = 'block'
invidiousDivElement.style.display = 'block'; invidiousDivElement.style.display = 'block';
pipedDivElement.style.display = 'none'; pipedDivElement.style.display = 'none';
pipedMaterialDivElement.style.display = 'none'; pipedMaterialDivElement.style.display = 'none';
freetubeYatteeDivElement.style.display = 'none'; freetubeYatteeDivElement.style.display = 'none';
} }
else if (frontend == 'piped') { else if (frontend == 'piped') {
invidiousPipedPipedMaterialDivElement.style.display = 'block'
invidiousDivElement.style.display = 'none'; invidiousDivElement.style.display = 'none';
pipedDivElement.style.display = 'block'; pipedDivElement.style.display = 'block';
pipedMaterialDivElement.style.display = 'none'; pipedMaterialDivElement.style.display = 'none';
freetubeYatteeDivElement.style.display = 'none'; freetubeYatteeDivElement.style.display = 'none';
} }
else if (frontend == 'pipedMaterial') { else if (frontend == 'pipedMaterial') {
invidiousPipedPipedMaterialDivElement.style.display = 'block'
invidiousDivElement.style.display = 'none'; invidiousDivElement.style.display = 'none';
pipedDivElement.style.display = 'none'; pipedDivElement.style.display = 'none';
pipedMaterialDivElement.style.display = 'block'; pipedMaterialDivElement.style.display = 'block';
freetubeYatteeDivElement.style.display = 'none'; freetubeYatteeDivElement.style.display = 'none';
} }
else if (frontend == 'freetube' || frontend == 'yatte') { else if (frontend == 'freetube' || frontend == 'yatte') {
invidiousPipedPipedMaterialDivElement.style.display = 'none'
invidiousDivElement.style.display = 'none'; invidiousDivElement.style.display = 'none';
pipedDivElement.style.display = 'none'; pipedDivElement.style.display = 'none';
pipedMaterialDivElement.style.display = 'none'; pipedMaterialDivElement.style.display = 'none';
@ -49,91 +50,28 @@ function changeFrontendsSettings() {
function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) { function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) {
if (youtubeEmbedFrontend == 'invidious') { if (youtubeEmbedFrontend == 'invidious') {
invidiousPipedPipedMaterialDivElement.style.display = 'block'
pipedDivElement.style.display = 'none'; pipedDivElement.style.display = 'none';
invidiousDivElement.style.display = 'block'; invidiousDivElement.style.display = 'block';
} }
if (youtubeEmbedFrontend == 'piped') { if (youtubeEmbedFrontend == 'piped') {
invidiousPipedPipedMaterialDivElement.style.display = 'block'
pipedDivElement.style.display = 'block'; pipedDivElement.style.display = 'block';
invidiousDivElement.style.display = 'none'; invidiousDivElement.style.display = 'none';
} }
else if (youtubeEmbedFrontend == 'youtube') { else if (youtubeEmbedFrontend == 'youtube') {
invidiousPipedPipedMaterialDivElement.style.display = 'none'
pipedDivElement.style.display = 'none'; pipedDivElement.style.display = 'none';
invidiousDivElement.style.display = 'none'; invidiousDivElement.style.display = 'none';
} }
} }
youtubeFrontendElement.addEventListener("change",
event => {
let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
youtubeHelper.setFrontend(frontend);
changeFrontendsSettings();
}
);
let youtubeEmbedFrontendElement = document.getElementById("youtube-embed-frontend");
youtubeEmbedFrontendElement.addEventListener("change",
event => {
let youtubeEmbedFrontend = event.target.options[youtubeEmbedFrontendElement.selectedIndex].value
youtubeHelper.setYoutubeEmbedFrontend(youtubeEmbedFrontend);
changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend);
}
);
let disableYoutubeElement = document.getElementById("disable-invidious");
disableYoutubeElement.addEventListener("change",
event => youtubeHelper.setDisable(!event.target.checked)
);
let enableYoutubeCustomSettingsElement = document.getElementById("enable-youtube-custom-settings");
enableYoutubeCustomSettingsElement.addEventListener("change",
event => {
youtubeHelper.setEnableCustomSettings(event.target.checked)
changeFrontendsSettings();
}
);
let volumeElement = document.getElementById("invidious-volume");
let volumeValueElement = document.getElementById("volume-value");
volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`);
volumeElement.addEventListener("change", () => youtubeHelper.setVolume(volumeElement.value));
let autoplayElement = document.getElementById("invidious-youtubeAutoplay");
autoplayElement.addEventListener("change",
event => youtubeHelper.setAutoplay(event.target.checked)
);
let OnlyEmbeddedVideoElement = document.getElementById("only-embed");
OnlyEmbeddedVideoElement.addEventListener("change",
event => youtubeHelper.setOnlyEmbeddedVideo(event.target.options[OnlyEmbeddedVideoElement.selectedIndex].value)
);
let bypassWatchOnYoutubeElement = document.getElementById("bypass-watch-on-youtube")
bypassWatchOnYoutubeElement.addEventListener("change",
event => youtubeHelper.setBypassWatchOnYoutube(event.target.checked)
);
let protocolElement = document.getElementById("protocol")
protocolElement.addEventListener("change",
event => {
let protocol = event.target.options[protocolElement.selectedIndex].value
youtubeHelper.setProtocol(protocol);
changeProtocolSettings(protocol);
}
);
function changeProtocolSettings(protocol) { function changeProtocolSettings(protocol) {
let normalPipedDiv = document.getElementById("piped-normal"); let normalPipedDiv = document.getElementById('piped').getElementsByClassName("normal")[0];
let torPipedDiv = document.getElementById("piped-tor"); let torPipedDiv = document.getElementById('piped').getElementsByClassName("tor")[0];
let normalPipedMaterialDiv = document.getElementById("pipedMaterial-normal"); let normalPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("normal")[0];
let torPipedMaterialDiv = document.getElementById("pipedMaterial-tor"); let torPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("tor")[0];
let normalInvidiousDiv = document.getElementById("invidious-normal"); let normalInvidiousDiv = document.getElementById('invidious').getElementsByClassName("normal")[0];
let torInvidiousDiv = document.getElementById("invidious-tor"); let torInvidiousDiv = document.getElementById('invidious').getElementsByClassName("tor")[0];
if (protocol == 'normal') { if (protocol == 'normal') {
normalInvidiousDiv.style.display = 'block'; normalInvidiousDiv.style.display = 'block';
@ -157,14 +95,29 @@ function changeProtocolSettings(protocol) {
} }
} }
document.addEventListener("change", () => {
youtubeHelper.setYoutubeSettings({
disableYoutube: !disableYoutubeElement.checked,
youtubeFrontend: youtubeFrontendElement.value,
youtubeEmbedFrontend: youtubeEmbedFrontendElement.value,
enableYoutubeCustomSettings: enableYoutubeCustomSettingsElement.checked,
OnlyEmbeddedVideo: OnlyEmbeddedVideoElement.value,
bypassWatchOnYoutube: bypassWatchOnYoutubeElement.checked,
youtubeProtocol: protocolElement.value,
})
changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontendElement.value);
changeProtocolSettings(protocolElement.value);
changeFrontendsSettings();
})
youtubeHelper.init().then(() => { youtubeHelper.init().then(() => {
disableYoutubeElement.checked = !youtubeHelper.getDisable(); disableYoutubeElement.checked = !youtubeHelper.getDisable();
enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings(); enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings();
volumeElement.value = youtubeHelper.getVolume();
volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo(); OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();
bypassWatchOnYoutubeElement.checked = youtubeHelper.getBypassWatchOnYoutube(); bypassWatchOnYoutubeElement.checked = youtubeHelper.getBypassWatchOnYoutube();
autoplayElement.checked = youtubeHelper.getAutoplay();
let frontend = youtubeHelper.getFrontend(); let frontend = youtubeHelper.getFrontend();
youtubeFrontendElement.value = frontend; youtubeFrontendElement.value = frontend;
changeFrontendsSettings(); changeFrontendsSettings();

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

@ -90,7 +90,7 @@ select {
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
border: none; border: none;
margin: 0; margin: 0;
width: 200px; width: 180px;
border-radius: 3px; border-radius: 3px;
} }
@ -108,6 +108,9 @@ section.option-block {
width: 700px; width: 700px;
margin: 0 50px; margin: 0 50px;
} }
section.option-block h2{
margin: 0;
}
body.option { body.option {
display: flex; display: flex;