diff options
Diffstat (limited to '')
39 files changed, 1669 insertions, 1900 deletions
diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js index cf95d913..65810db4 100644 --- a/src/assets/javascripts/helpers/common.js +++ b/src/assets/javascripts/helpers/common.js @@ -88,9 +88,10 @@ function processDefaultCustomInstances( getNameCustomRedirects, setNameCustomRedirects ) { + let nameProtocolElement = document.getElementById(name).getElementsByClassName(protocol)[0]; let nameCustomInstances = []; - let nameCheckListElement = document.getElementById(`${name}-${protocol}-checklist`); + let nameCheckListElement = nameProtocolElement.getElementsByClassName('checklist')[0]; let nameDefaultRedirects; function calcNameCheckBoxes() { @@ -101,22 +102,22 @@ function processDefaultCustomInstances( break; } for (const element of nameCheckListElement.getElementsByTagName('input')) - element.checked = nameDefaultRedirects.includes(element.id) - document.getElementById(`${name}-${protocol}-toogle-all`).checked = isTrue; + element.checked = nameDefaultRedirects.includes(element.className) + nameProtocolElement.getElementsByClassName('toogle-all')[0].checked = isTrue; } nameDefaultRedirects = getNameRedirectsChecks(); nameCheckListElement.innerHTML = [ - `<div><x data-localise="__MSG_toggleAll__">Toggle All</x><input type="checkbox" id="${name}-${protocol}-toogle-all" /></div>`, - ...nameHelper.getRedirects()[name][protocol].map((x) => `<div>${x}<input type="checkbox" id="${x}" /></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" class="${x}" /></div>`), ].join('\n<hr>\n'); localise.localisePage(); calcNameCheckBoxes(); - document.getElementById(`${name}-${protocol}-toogle-all`).addEventListener("change", event => { + nameProtocolElement.getElementsByClassName('toogle-all')[0].addEventListener("change", event => { if (event.target.checked) nameDefaultRedirects = [...nameHelper.getRedirects()[name][protocol]]; else @@ -126,12 +127,12 @@ function processDefaultCustomInstances( }); for (let element of nameCheckListElement.getElementsByTagName('input')) { - if (element.id != `${name}-${protocol}-toogle-all`) - document.getElementById(element.id).addEventListener("change", (event) => { + if (element.className != 'toogle-all') + nameProtocolElement.getElementsByClassName(element.className)[0].addEventListener("change", event => { if (event.target.checked) - nameDefaultRedirects.push(element.id) + nameDefaultRedirects.push(element.className) else { - let index = nameDefaultRedirects.indexOf(element.id); + let index = nameDefaultRedirects.indexOf(element.className); if (index > -1) nameDefaultRedirects.splice(index, 1); } setNameRedirectsChecks(nameDefaultRedirects); @@ -141,9 +142,9 @@ function processDefaultCustomInstances( nameCustomInstances = getNameCustomRedirects(); function calcNameCustomInstances() { - document.getElementById(`${name}-${protocol}-custom-checklist`).innerHTML = + nameProtocolElement.getElementsByClassName('custom-checklist')[0].innerHTML = 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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -155,7 +156,7 @@ function processDefaultCustomInstances( ).join('\n'); for (const item of nameCustomInstances) { - document.getElementById(`clear-${item}`).addEventListener("click", () => { + nameProtocolElement.getElementsByClassName(`clear-${item}`)[0].addEventListener("click", () => { let index = nameCustomInstances.indexOf(item); if (index > -1) nameCustomInstances.splice(index, 1); setNameCustomRedirects(nameCustomInstances); @@ -164,9 +165,9 @@ function processDefaultCustomInstances( } } calcNameCustomInstances(); - document.getElementById(`custom-${name}-${protocol}-instance-form`).addEventListener("submit", (event) => { + nameProtocolElement.getElementsByClassName('custom-instance-form')[0].addEventListener("submit", event => { event.preventDefault(); - let nameCustomInstanceInput = document.getElementById(`${name}-${protocol}-custom-instance`); + let nameCustomInstanceInput = nameProtocolElement.getElementsByClassName('custom-instance')[0]; let url = new URL(nameCustomInstanceInput.value); let protocolHostVar = protocolHost(url); if (nameCustomInstanceInput.validity.valid && !nameHelper.getRedirects()[name][protocol].includes(protocolHostVar)) { diff --git a/src/assets/javascripts/helpers/twitter.js b/src/assets/javascripts/helpers/twitter.js index e8f950bf..64507a9f 100644 --- a/src/assets/javascripts/helpers/twitter.js +++ b/src/assets/javascripts/helpers/twitter.js @@ -84,6 +84,14 @@ function setDisable(val) { 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; const getProtocol = () => protocol; function setProtocol(val) { @@ -248,6 +256,8 @@ async function init() { [ "disableTwitter", + "enableTwitterCustomSettings", + "twitterRedirects", "theme", @@ -267,6 +277,7 @@ async function init() { ], r => { disable = r.disableTwitter ?? false; + enableCustomSettings = r.enableTwitterCustomSettings ?? false; protocol = r.twitterProtocol ?? "normal"; @@ -303,6 +314,9 @@ export default { getDisable, setDisable, + getEnableCustomSettings, + setEnableCustomSettings, + getNitterNormalRedirectsChecks, setNitterNormalRedirectsChecks, diff --git a/src/assets/javascripts/helpers/wikipedia.js b/src/assets/javascripts/helpers/wikipedia.js index af7b0e5b..7a4173fb 100644 --- a/src/assets/javascripts/helpers/wikipedia.js +++ b/src/assets/javascripts/helpers/wikipedia.js @@ -57,8 +57,8 @@ let protocol; const getProtocol = () => protocol; function setProtocol(val) { protocol = val; - browser.storage.local.set({ wikilessProtocol: val }) - console.log("wikilessProtocol: ", val) + browser.storage.local.set({ wikipediaProtocol: val }) + console.log("wikipediaProtocol: ", val) } diff --git a/src/assets/javascripts/helpers/youtube/options.js b/src/assets/javascripts/helpers/youtube/options.js index d73f95f0..e044a82b 100644 --- a/src/assets/javascripts/helpers/youtube/options.js +++ b/src/assets/javascripts/helpers/youtube/options.js @@ -4,11 +4,7 @@ window.browser = window.browser || window.chrome; export let youtubeListen; export const getYoutubeListen = () => youtubeListen; -export function setYoutubeListen(val) { - youtubeListen = val; - browser.storage.local.set({ youtubeListen }) - console.log("youtubeListen: ", youtubeListen) -} + export let volume; export const getVolume = () => volume; @@ -28,228 +24,88 @@ export function setAutoplay(val) { export let invidiousQuality; export const getInvidiousQuality = () => invidiousQuality; -export function setinvidiousQuality(val) { - invidiousQuality = val; - browser.storage.local.set({ invidiousQuality }) - console.log("invidiousQuality: ", invidiousQuality) -} export let invidiousAlwaysProxy; export const getInvidiousAlwaysProxy = () => invidiousAlwaysProxy; -export function setInvidiousAlwaysProxy(val) { - invidiousAlwaysProxy = val; - browser.storage.local.set({ invidiousAlwaysProxy }) - console.log("invidiousAlwaysProxy: ", invidiousAlwaysProxy); -} export let invidiousPlayerStyle; export const getInvidiousPlayerStyle = () => invidiousPlayerStyle; -export function setInvidiousPlayerStyle(val) { - invidiousPlayerStyle = val; - browser.storage.local.set({ invidiousPlayerStyle }) - console.log("invidiousPlayerStyle: ", invidiousPlayerStyle) -} export let invidiousVideoLoop; export const getInvidiousVideoLoop = () => invidiousVideoLoop; -export function setInvidiousVideoLoop(val) { - invidiousVideoLoop = val; - browser.storage.local.set({ invidiousVideoLoop }) - console.log("invidiousVideoLoop: ", invidiousVideoLoop) -} export let invidiousContinueAutoplay; export const getInvidiousContinueAutoplay = () => invidiousContinueAutoplay; -export function setInvidiousContinueAutoplay(val) { - invidiousContinueAutoplay = val; - browser.storage.local.set({ invidiousContinueAutoplay }) - console.log("invidiousContinueAutoplay: ", invidiousContinueAutoplay) -} export let invidiousContinue; export const getInvidiousContinue = () => invidiousContinue; -export function setInvidiousContinue(val) { - invidiousContinue = val; - browser.storage.local.set({ invidiousContinue }) - console.log("invidiousContinue: ", invidiousContinue) -} export let invidiousSpeed; export const getInvidiousSpeed = () => invidiousSpeed; -export function setInvidiousSpeed(val) { - invidiousSpeed = val; - browser.storage.local.set({ invidiousSpeed }) - console.log("invidiousSpeed: ", invidiousSpeed) -} export let invidiousQualityDash; export const getInvidiousQualityDash = () => invidiousQualityDash; -export function setInvidiousQualityDash(val) { - invidiousQualityDash = val; - browser.storage.local.set({ invidiousQualityDash }) - console.log("invidiousQualityDash: ", invidiousQualityDash) -} export let invidiousComments; export const getInvidiousComments = () => invidiousComments; -export function setInvidiousComments(val) { - invidiousComments = val; - browser.storage.local.set({ invidiousComments }) - console.log("invidiousComments: ", invidiousComments) -} - export let invidiousCaptions; export const getInvidiousCaptions = () => invidiousCaptions; -export function setInvidiousCaptions(val) { - invidiousCaptions = val; - browser.storage.local.set({ invidiousCaptions }) - console.log("invidiousCaptions: ", invidiousCaptions) -} export let invidiousRelatedVideos; export const getInvidiousRelatedVideos = () => invidiousRelatedVideos; -export function setInvidiousRelatedVideos(val) { - invidiousRelatedVideos = val; - browser.storage.local.set({ invidiousRelatedVideos }) - console.log("invidiousRelatedVideos: ", invidiousRelatedVideos) -} export let invidiousAnnotations; export const getInvidiousAnnotations = () => invidiousAnnotations; -export function setInvidiousAnnotations(val) { - invidiousAnnotations = val; - browser.storage.local.set({ invidiousAnnotations }) - console.log("invidiousAnnotations: ", invidiousAnnotations) -} export let invidiousExtendDesc; export const getInvidiousExtendDesc = () => invidiousExtendDesc; -export function setInvidiousExtendDesc(val) { - invidiousExtendDesc = val; - browser.storage.local.set({ invidiousExtendDesc }) - console.log("invidiousExtendDesc: ", invidiousExtendDesc) -} export let invidiousVrMode; export const getInvidiousVrMode = () => invidiousVrMode; -export function setInvidiousVrMode(val) { - invidiousVrMode = val; - browser.storage.local.set({ invidiousVrMode }) - console.log("invidiousVrMode: ", invidiousVrMode) -} export let invidiousSavePlayerPos; export const getInvidiousSavePlayerPos = () => invidiousSavePlayerPos; -export function setInvidiousSavePlayerPos(val) { - invidiousSavePlayerPos = val; - browser.storage.local.set({ invidiousSavePlayerPos }) - console.log("invidiousSavePlayerPos: ", invidiousSavePlayerPos) -} export let pipedBufferGoal; export const getPipedBufferGoal = () => pipedBufferGoal; -export function setPipedBufferGoal(val) { - pipedBufferGoal = val; - browser.storage.local.set({ pipedBufferGoal }) - console.log("pipedBufferGoal: ", pipedBufferGoal) -} export let pipedComments; export const getPipedComments = () => pipedComments; -export function setPipedComments(val) { - pipedComments = val; - browser.storage.local.set({ pipedComments }) - console.log("pipedComments: ", pipedComments) -} export let pipedDisableLBRY; export const getPipedDisableLBRY = () => pipedDisableLBRY; -export function setPipedDisableLBRY(val) { - pipedDisableLBRY = val; - browser.storage.local.set({ pipedDisableLBRY }) - console.log("pipedDisableLBRY: ", pipedDisableLBRY) -} export let pipedEnabledCodecs; export const getPipedEnabledCodecs = () => pipedEnabledCodecs; -export function setPipedEnabledCodecs(val) { - pipedEnabledCodecs = val; - browser.storage.local.set({ pipedEnabledCodecs }) - console.log("pipedEnabledCodecs: ", pipedEnabledCodecs) -} export let pipedHomepage; export const getPipedHomepage = () => pipedHomepage; -export function setPipedHomepage(val) { - pipedHomepage = val; - browser.storage.local.set({ pipedHomepage }) - console.log("pipedHomepage: ", pipedHomepage) -} export let pipedMinimizeDescription; export const getPipedMinimizeDescription = () => pipedMinimizeDescription; -export function setPipedMinimizeDescription(val) { - pipedMinimizeDescription = val; - browser.storage.local.set({ pipedMinimizeDescription }) - console.log("pipedMinimizeDescription: ", pipedMinimizeDescription) -} export let pipedProxyLBRY; export const getPipedProxyLBRY = () => pipedProxyLBRY; -export function setPipedProxyLBRY(val) { - pipedProxyLBRY = val; - browser.storage.local.set({ pipedProxyLBRY }) - console.log("pipedProxyLBRY: ", pipedProxyLBRY) -} export let pipedQuality; export const getPipedQuality = () => pipedQuality; -export function setPipedQuality(val) { - pipedQuality = val; - browser.storage.local.set({ pipedQuality }) - console.log("pipedQuality: ", pipedQuality) -} export let pipedRegion; export const getPipedRegion = () => pipedRegion; -export function setPipedRegion(val) { - pipedRegion = val; - browser.storage.local.set({ pipedRegion }) - console.log("pipedRegion: ", pipedRegion) -} export let pipedSelectedSkip; export const getPipedSelectedSkip = () => pipedSelectedSkip; -export function setPipedSelectedSkip(val) { - pipedSelectedSkip = val; - browser.storage.local.set({ pipedSelectedSkip }) - console.log("pipedSelectedSkip: ", pipedSelectedSkip) -} export let pipedSponsorblock; export const getPipedSponsorblock = () => pipedSponsorblock; -export function setPipedSponsorblock(val) { - pipedSponsorblock = val; - browser.storage.local.set({ pipedSponsorblock }) - console.log("pipedSponsorblock: ", pipedSponsorblock) -} export let pipedWatchHistory; export const getPipedWatchHistory = () => pipedWatchHistory; -export function setPipedWatchHistory(val) { - pipedWatchHistory = val; - browser.storage.local.set({ pipedWatchHistory }) - console.log("pipedWatchHistory: ", pipedWatchHistory) -} export let pipedMaterialSkipToLastPoint; export const getPipedMaterialSkipToLastPoint = () => pipedMaterialSkipToLastPoint; -export function setPipedMaterialSkipToLastPoint(val) { - pipedMaterialSkipToLastPoint = val; - browser.storage.local.set({ pipedMaterialSkipToLastPoint }) - console.log("pipedMaterialSkipToLastPoint: ", pipedMaterialSkipToLastPoint) -} + export async function initOptions() { return new Promise( @@ -323,6 +179,7 @@ export async function initOptions() { pipedProxyLBRY = r.pipedProxyLBRY ?? false; pipedQuality = r.pipedQuality ?? 0; pipedRegion = r.pipedRegion ?? "US"; + pipedSelectedSkip = r.pipedSelectedSkip ?? ["sponsor", "interaction", "selfpromo", "music_offtopic"]; pipedSponsorblock = r.pipedSponsorblock ?? true; pipedWatchHistory = r.pipedWatchHistory ?? false; diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js index c2d541e5..d51bf085 100644 --- a/src/assets/javascripts/helpers/youtube/youtube.js +++ b/src/assets/javascripts/helpers/youtube/youtube.js @@ -4,68 +4,37 @@ window.browser = window.browser || window.chrome; import commonHelper from '../common.js' import { - youtubeListen, getYoutubeListen, setYoutubeListen, - - invidiousQuality, getInvidiousQuality, setinvidiousQuality, - - invidiousAlwaysProxy, setInvidiousAlwaysProxy, getInvidiousAlwaysProxy, - - invidiousPlayerStyle, getInvidiousPlayerStyle, setInvidiousPlayerStyle, - - invidiousVideoLoop, getInvidiousVideoLoop, setInvidiousVideoLoop, - - invidiousContinueAutoplay, getInvidiousContinueAutoplay, setInvidiousContinueAutoplay, - - invidiousContinue, getInvidiousContinue, setInvidiousContinue, - - invidiousSpeed, getInvidiousSpeed, setInvidiousSpeed, - - invidiousQualityDash, getInvidiousQualityDash, setInvidiousQualityDash, - - invidiousComments, getInvidiousComments, setInvidiousComments, - - invidiousCaptions, getInvidiousCaptions, setInvidiousCaptions, - - invidiousRelatedVideos, getInvidiousRelatedVideos, setInvidiousRelatedVideos, - - invidiousAnnotations, getInvidiousAnnotations, setInvidiousAnnotations, - - invidiousExtendDesc, getInvidiousExtendDesc, setInvidiousExtendDesc, - - 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, - + youtubeListen, getYoutubeListen, + invidiousQuality, getInvidiousQuality, + invidiousAlwaysProxy, getInvidiousAlwaysProxy, + invidiousPlayerStyle, getInvidiousPlayerStyle, + invidiousVideoLoop, getInvidiousVideoLoop, + invidiousContinueAutoplay, getInvidiousContinueAutoplay, + invidiousContinue, getInvidiousContinue, + invidiousSpeed, getInvidiousSpeed, + invidiousQualityDash, getInvidiousQualityDash, + invidiousComments, getInvidiousComments, + invidiousCaptions, getInvidiousCaptions, + invidiousRelatedVideos, getInvidiousRelatedVideos, + invidiousAnnotations, getInvidiousAnnotations, + invidiousExtendDesc, getInvidiousExtendDesc, + invidiousVrMode, getInvidiousVrMode, + invidiousSavePlayerPos, getInvidiousSavePlayerPos, + getPipedBufferGoal, + getPipedComments, + getPipedDisableLBRY, + getPipedEnabledCodecs, + getPipedHomepage, + getPipedMinimizeDescription, + getPipedProxyLBRY, + getPipedQuality, + getPipedRegion, + getPipedSelectedSkip, + getPipedSponsorblock, + getPipedWatchHistory, volume, getVolume, setVolume, - youtubeAutoplay, getAutoplay, setAutoplay, - - getPipedMaterialSkipToLastPoint, setPipedMaterialSkipToLastPoint, - + getPipedMaterialSkipToLastPoint, initOptions } 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) { redirects.invidious = val; browser.storage.local.set({ youtubeRedirects: redirects }) @@ -251,51 +229,16 @@ function setDisable(val) { let enableCustomSettings; const getEnableCustomSettings = () => enableCustomSettings; -function setEnableCustomSettings(val) { - enableCustomSettings = val; - browser.storage.local.set({ enableYoutubeCustomSettings: enableCustomSettings }) - console.log("enableYoutubeCustomSettings: ", enableCustomSettings) -} - let protocol; const getProtocol = () => protocol; -function setProtocol(val) { - protocol = val; - browser.storage.local.set({ youtubeProtocol: val }) - console.log("youtubeProtocol: ", val) -} - let OnlyEmbeddedVideo; -function setOnlyEmbeddedVideo(val) { - OnlyEmbeddedVideo = val; - browser.storage.local.set({ OnlyEmbeddedVideo }) - console.log("OnlyEmbeddedVideo: ", OnlyEmbeddedVideo) -} const getOnlyEmbeddedVideo = () => OnlyEmbeddedVideo; - let frontend; const getFrontend = () => frontend; -function setFrontend(val) { - frontend = val; - browser.storage.local.set({ youtubeFrontend: val }) - console.log("youtubeFrontend: ", val) -} - let youtubeEmbedFrontend; const getYoutubeEmbedFrontend = () => youtubeEmbedFrontend; -function setYoutubeEmbedFrontend(val) { - youtubeEmbedFrontend = val; - browser.storage.local.set({ youtubeEmbedFrontend }) - console.log("youtubeEmbedFrontend: ", youtubeEmbedFrontend) -} - let bypassWatchOnYoutube; const getBypassWatchOnYoutube = () => bypassWatchOnYoutube; -function setBypassWatchOnYoutube(val) { - bypassWatchOnYoutube = val; - browser.storage.local.set({ bypassWatchOnYoutube }) - console.log("bypassWatchOnYoutube: ", bypassWatchOnYoutube) -} let alwaysUsePreferred; function redirect(url, details, initiator) { @@ -684,17 +627,16 @@ async function init() { } export default { + setYoutubeSettings, + getBypassWatchOnYoutube, - setBypassWatchOnYoutube, initPipedLocalStorage, initPipedMaterialLocalStorage, getFrontend, - setFrontend, getYoutubeEmbedFrontend, - setYoutubeEmbedFrontend, getRedirects, getCustomRedirects, @@ -708,28 +650,21 @@ export default { initInvidiousCookies, - setInvidiousAlwaysProxy, getInvidiousAlwaysProxy, - setinvidiousQuality, getInvidiousQuality, - setInvidiousPlayerStyle, getInvidiousPlayerStyle, getInvidiousVideoLoop, - setInvidiousVideoLoop, getDisable, setDisable, getEnableCustomSettings, - setEnableCustomSettings, getProtocol, - setProtocol, - setOnlyEmbeddedVideo, getOnlyEmbeddedVideo, setVolume, @@ -739,79 +674,54 @@ export default { getAutoplay, getInvidiousContinueAutoplay, - setInvidiousContinueAutoplay, getInvidiousContinue, - setInvidiousContinue, getYoutubeListen, - setYoutubeListen, getInvidiousSpeed, - setInvidiousSpeed, getInvidiousQualityDash, - setInvidiousQualityDash, getInvidiousComments, - setInvidiousComments, getInvidiousCaptions, - setInvidiousCaptions, getInvidiousRelatedVideos, - setInvidiousRelatedVideos, getInvidiousAnnotations, - setInvidiousAnnotations, getInvidiousExtendDesc, - setInvidiousExtendDesc, getInvidiousVrMode, - setInvidiousVrMode, 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, getPipedMaterialSkipToLastPoint, - setPipedMaterialSkipToLastPoint, getInvidiousNormalRedirectsChecks, setInvidiousNormalRedirectsChecks, diff --git a/src/pages/options/imgur/imgur.html b/src/pages/options/imgur/imgur.html index 578ad70d..a769bd06 100644 --- a/src/pages/options/imgur/imgur.html +++ b/src/pages/options/imgur/imgur.html @@ -143,50 +143,53 @@ </div> <hr> - - <div id="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 id="rimgo"> + <div class="normal"> <div class="some-block option-block"> - <input id="rimgo-normal-custom-instance" placeholder="https://rimgo.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="rimgo-normal-custom-checklist"></div> - </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 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> - <form id="custom-rimgo-tor-instance-form"> + <div class="tor"> <div class="some-block option-block"> - <input id="rimgo-tor-custom-instance" placeholder="https://rimgo.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="rimgo-tor-custom-checklist"></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> </section> @@ -196,4 +199,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/imgur/imgur.js b/src/pages/options/imgur/imgur.js index 25fd8914..9742bfd2 100644 --- a/src/pages/options/imgur/imgur.js +++ b/src/pages/options/imgur/imgur.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/instagram/instagram.html b/src/pages/options/instagram/instagram.html index f61f0015..baf5166f 100644 --- a/src/pages/options/instagram/instagram.html +++ b/src/pages/options/instagram/instagram.html @@ -135,50 +135,54 @@ </div> <hr> - <div id="normal"> - <div class="some-block option-block"> - <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 id="bibliogram"> + <div class="normal"> <div class="some-block option-block"> - <input id="bibliogram-normal-custom-instance" placeholder="https://bibliogram.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="bibliogram-normal-custom-checklist"></div> - </div> - - <div id="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 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://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> - <form id="custom-bibliogram-tor-instance-form"> + + <div class="tor"> <div class="some-block option-block"> - <input id="bibliogram-tor-custom-instance" placeholder="https://bibliogram.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="bibliogram-tor-custom-checklist"></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://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> </section> @@ -187,4 +191,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/instagram/instagram.js b/src/pages/options/instagram/instagram.js index 99671768..a7788a6b 100644 --- a/src/pages/options/instagram/instagram.js +++ b/src/pages/options/instagram/instagram.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/lbry/lbry.html b/src/pages/options/lbry/lbry.html index 6e0e43fe..40000076 100644 --- a/src/pages/options/lbry/lbry.html +++ b/src/pages/options/lbry/lbry.html @@ -144,56 +144,60 @@ <hr> - <div id="normal"> - <div class="some-block option-block"> - <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 id="librarian"> + <div class="normal"> <div class="some-block option-block"> - <input id="librarian-normal-custom-instance" placeholder="https://librarian.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="librarian-normal-custom-checklist"></div> - </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 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> - <form id="custom-librarian-tor-instance-form"> + <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"> - <input id="librarian-tor-custom-instance" placeholder="https://librarian.com" type="url" /> - <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> + <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - </form> - <div class="checklist" id="librarian-tor-custom-checklist"></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> </section> <script type="module" src="../init.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> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/lbry/lbry.js b/src/pages/options/lbry/lbry.js index 43ff74d3..75995213 100644 --- a/src/pages/options/lbry/lbry.js +++ b/src/pages/options/lbry/lbry.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/medium/medium.html b/src/pages/options/medium/medium.html index bc0b9d69..fde374eb 100644 --- a/src/pages/options/medium/medium.html +++ b/src/pages/options/medium/medium.html @@ -144,51 +144,54 @@ </div> <hr> - - <div id="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 id="scribe"> + <div class="normal"> <div class="some-block option-block"> - <input id="scribe-normal-custom-instance" placeholder="https://scribe.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="scribe-normal-custom-checklist"></div> - </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 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> - <form id="custom-scribe-tor-instance-form"> + + <div class="tor"> <div class="some-block option-block"> - <input id="scribe-tor-custom-instance" placeholder="https://scribe.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="scribe-tor-custom-checklist"></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> </section> @@ -198,4 +201,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/medium/medium.js b/src/pages/options/medium/medium.js index dcc4b4a4..5337e413 100644 --- a/src/pages/options/medium/medium.js +++ b/src/pages/options/medium/medium.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/peertube/peertube.html b/src/pages/options/peertube/peertube.html index fb95dd44..c4190498 100644 --- a/src/pages/options/peertube/peertube.html +++ b/src/pages/options/peertube/peertube.html @@ -144,57 +144,59 @@ </div> <hr> - - <div id="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 id="simpleertube"> + <div class="normal"> <div class="some-block option-block"> - <input id="simpleertube-normal-custom-instance" placeholder="https://simpleertube.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="simpleertube-normal-custom-checklist"></div> - </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 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://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> - <form id="custom-simpleertube-tor-instance-form"> + <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"> - <input id="simpleertube-tor-custom-instance" placeholder="https://simpleertube.com" type="url" /> - <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> + <h4 data-localise="__MSG_customPopup__">Custom Instances</h4> </div> - </form> - <div class="checklist" id="simpleertube-tor-custom-checklist"></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> </section> - <script type="module" src="../init.js"></script> <script type="module" src="./peertube.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/peertube/peertube.js b/src/pages/options/peertube/peertube.js index 7aa0f711..d01a6e08 100644 --- a/src/pages/options/peertube/peertube.js +++ b/src/pages/options/peertube/peertube.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/pixiv/pixiv.html b/src/pages/options/pixiv/pixiv.html index 8f153430..9ce7c1d8 100644 --- a/src/pages/options/pixiv/pixiv.html +++ b/src/pages/options/pixiv/pixiv.html @@ -135,7 +135,10 @@ </div> <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"> <option value="pixivMoe" data-localise="__MSG_pixivMoe__">pixiv萌え</option> </select> @@ -153,49 +156,53 @@ <hr> - <div id="normal"> - <div class="some-block option-block"> - <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 id="pixivMoe"> + <div class="normal"> <div class="some-block option-block"> - <input id="pixivMoe-normal-custom-instance" placeholder="https://pixiv.moe" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="pixivMoe-normal-custom-checklist"></div> - </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 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://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> - <form id="custom-pixivMoe-tor-instance-form"> + <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"> - <input id="pixivMoe-tor-custom-instance" placeholder="https://pixivMoe.com" type="url" /> - <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> + <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - </form> - <div class="checklist" id="pixivMoe-tor-custom-checklist"></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> </section> @@ -205,4 +212,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/pixiv/pixiv.js b/src/pages/options/pixiv/pixiv.js index 0cefd1d2..a9a11e18 100644 --- a/src/pages/options/pixiv/pixiv.js +++ b/src/pages/options/pixiv/pixiv.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html index d63618a3..820294b2 100644 --- a/src/pages/options/reddit/reddit.html +++ b/src/pages/options/reddit/reddit.html @@ -162,20 +162,20 @@ <div id="libreddit"> - <div id="libreddit-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="libreddit-normal-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-libreddit-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="libreddit-normal-custom-instance" placeholder="https://libreddit.com" type="url" /> - <button type="submit" class="add" id="libreddit-normal-add-instance"> + <input class="custom-instance" placeholder="https://libreddit.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" /> @@ -184,23 +184,23 @@ </button> </div> </form> - <div class="checklist" id="libreddit-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="libreddit-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="libreddit-tor-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-libreddit-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="libreddit-tor-custom-instance" placeholder="https://libreddit.com" type="url" /> - <button type="submit" class="add" id="libreddit-tor-add-instance"> + <input class="custom-instance" placeholder="https://libreddit.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" /> @@ -209,27 +209,27 @@ </button> </div> </form> - <div class="checklist" id="libreddit-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> <div id="teddit"> - <div id="teddit-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="teddit-normal-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-teddit-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="teddit-normal-custom-instance" placeholder="https://teddit.com" type="url" /> - <button type="submit" class="add" id="teddit-normal-add-instance"> + <input class="custom-instance" placeholder="https://teddit.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" /> @@ -238,22 +238,22 @@ </button> </div> </form> - <div class="checklist" id="teddit-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="teddit-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="teddit-tor-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-teddit-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="teddit-tor-custom-instance" placeholder="https://teddit.com" type="url" /> - <button type="submit" class="add" id="teddit-tor-add-instance"> + <input class="custom-instance" placeholder="https://teddit.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" /> @@ -262,7 +262,7 @@ </button> </div> </form> - <div class="checklist" id="teddit-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> </section> diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js index 6d747eb1..2645ed41 100644 --- a/src/pages/options/reddit/reddit.js +++ b/src/pages/options/reddit/reddit.js @@ -45,11 +45,11 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalLibredditDiv = document.getElementById("libreddit-normal"); - let torLibredditDiv = document.getElementById("libreddit-tor"); + let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0]; + let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0]; - let normalTedditDiv = document.getElementById("teddit-normal"); - let torTedditDiv = document.getElementById("teddit-tor"); + let normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0]; + let torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalLibredditDiv.style.display = 'block'; normalTedditDiv.style.display = 'block'; diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html index a90ad8ed..a5f26ab3 100644 --- a/src/pages/options/search/search.html +++ b/src/pages/options/search/search.html @@ -162,20 +162,20 @@ <div id="searx"> <hr> - <div id="searx-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="searx-normal-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-searx-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="searx-normal-custom-instance" placeholder="https://searx.com" type="url" /> - <button type="submit" class="add" id="searx-normal-add-instance"> + <input class="custom-instance" placeholder="https://searx.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" /> @@ -184,22 +184,22 @@ </button> </div> </form> - <div class="checklist" id="searx-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="searx-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="searx-tor-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-searx-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="searx-tor-custom-instance" placeholder="https://searx.com" type="url" /> - <button type="submit" class="add" id="searx-tor-add-instance"> + <input class="custom-instance" placeholder="https://searx.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" /> @@ -208,26 +208,26 @@ </button> </div> </form> - <div class="checklist" id="searx-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> <div id="searxng"> <hr> - <div id="searxng-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="searxng-normal-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-searxng-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="searxng-normal-custom-instance" placeholder="https://searxng.com" type="url" /> - <button type="submit" class="add" id="searxng-normal-add-instance"> + <input class="custom-instance" placeholder="https://searxng.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" /> @@ -236,22 +236,22 @@ </button> </div> </form> - <div class="checklist" id="searxng-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="searxng-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="searxng-tor-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-searxng-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="searxng-tor-custom-instance" placeholder="https://searxng.com" type="url" /> - <button type="submit" class="add" id="searxng-tor-add-instance"> + <input class="custom-instance" placeholder="https://searxng.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" /> @@ -260,26 +260,26 @@ </button> </div> </form> - <div class="checklist" id="searxng-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> <div id="whoogle"> <hr> - <div id="whoogle-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="whoogle-normal-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-whoogle-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="whoogle-normal-custom-instance" placeholder="https://whoogle.com" type="url" /> - <button type="submit" class="add" id="whoogle-normal-add-instance"> + <input class="custom-instance" placeholder="https://whoogle.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" /> @@ -288,22 +288,22 @@ </button> </div> </form> - <div class="checklist" id="whoogle-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="whoogle-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="whoogle-tor-checklist"> + <div class="checklist checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-whoogle-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="whoogle-tor-custom-instance" placeholder="https://whoogle.com" type="url" /> - <button type="submit" class="add" id="whoogle-tor-add-instance"> + <input class="custom-instance" placeholder="https://whoogle.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" /> @@ -312,10 +312,9 @@ </button> </div> </form> - <div class="checklist" id="whoogle-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> - </div> </section> @@ -325,4 +324,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/search/search.js b/src/pages/options/search/search.js index cc4a44ea..d96665e9 100644 --- a/src/pages/options/search/search.js +++ b/src/pages/options/search/search.js @@ -61,14 +61,15 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalsearxDiv = document.getElementById("searx-normal"); - let torsearxDiv = document.getElementById("searx-tor"); + let normalsearxDiv = searxDivElement.getElementsByClassName("normal")[0]; + let torsearxDiv = searxDivElement.getElementsByClassName("tor")[0]; - let normalsearxngDiv = document.getElementById("searxng-normal"); - let torsearxngDiv = document.getElementById("searxng-tor"); + let normalsearxngDiv = searxngDivElement.getElementsByClassName("normal")[0]; + 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') { normalsearxDiv.style.display = 'block'; normalsearxngDiv.style.display = 'block'; diff --git a/src/pages/options/sendTargets/sendTargets.html b/src/pages/options/sendTargets/sendTargets.html index 3a00adf8..7da5d1fa 100644 --- a/src/pages/options/sendTargets/sendTargets.html +++ b/src/pages/options/sendTargets/sendTargets.html @@ -143,50 +143,53 @@ </div> <hr> - - <div id="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 id="send"> + <div class="normal"> <div class="some-block option-block"> - <input id="send-normal-custom-instance" placeholder="https://send.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="send-normal-custom-checklist"></div> - </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 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> - <form id="custom-send-tor-instance-form"> + <div class="tor"> <div class="some-block option-block"> - <input id="send-tor-custom-instance" placeholder="https://send.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="send-tor-custom-checklist"></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> </section> @@ -196,4 +199,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/sendTargets/sendTargets.js b/src/pages/options/sendTargets/sendTargets.js index 0b0a9379..1e39e246 100644 --- a/src/pages/options/sendTargets/sendTargets.js +++ b/src/pages/options/sendTargets/sendTargets.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/spotify/spotify.html b/src/pages/options/spotify/spotify.html index 890bf970..731e7d5a 100644 --- a/src/pages/options/spotify/spotify.html +++ b/src/pages/options/spotify/spotify.html @@ -143,57 +143,59 @@ </div> <hr> - - <div id="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 id="soju"> + <div class="normal"> <div class="some-block option-block"> - <input id="soju-normal-custom-instance" placeholder="https://soju.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="soju-normal-custom-checklist"></div> - </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 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> - <form id="custom-soju-tor-instance-form"> + <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"> - <input id="soju-tor-custom-instance" placeholder="https://soju.com" type="url" /> - <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> + <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - </form> - <div class="checklist" id="soju-tor-custom-checklist"></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> </section> - <script type="module" src="../init.js"></script> <script type="module" src="./spotify.js"></script> <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/spotify/spotify.js b/src/pages/options/spotify/spotify.js index 1bd078cb..8dbc6bc6 100644 --- a/src/pages/options/spotify/spotify.js +++ b/src/pages/options/spotify/spotify.js @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/tiktok/tiktok.html b/src/pages/options/tiktok/tiktok.html index 34c091a8..8136ccd0 100644 --- a/src/pages/options/tiktok/tiktok.html +++ b/src/pages/options/tiktok/tiktok.html @@ -144,49 +144,53 @@ <hr> - <div id="normal"> - <div class="some-block option-block"> - <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 id="proxiTok"> + <div class="normal"> <div class="some-block option-block"> - <input id="proxiTok-normal-custom-instance" placeholder="https://proxiTok.com" type="url" /> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - </form> - <div class="checklist" id="proxiTok-normal-custom-checklist"></div> - </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 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> - <form id="custom-proxiTok-tor-instance-form"> + <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"> - <input id="proxiTok-tor-custom-instance" placeholder="https://proxiTok.com" type="url" /> - <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> + <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - </form> - <div class="checklist" id="proxiTok-tor-custom-checklist"></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> </section> @@ -196,4 +200,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/tiktok/tiktok.js b/src/pages/options/tiktok/tiktok.js index 13de04d8..1f5351aa 100644 --- a/src/pages/options/tiktok/tiktok.js +++ b/src/pages/options/tiktok/tiktok.js @@ -3,12 +3,12 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js"; let disableTiktokElement = document.getElementById("disable-tiktok"); disableTiktokElement.addEventListener("change", - (event) => tiktokHelper.setDisable(!event.target.checked) + event => tiktokHelper.setDisable(!event.target.checked) ); let protocolElement = document.getElementById("protocol") protocolElement.addEventListener("change", - (event) => { + event => { let protocol = event.target.options[protocolElement.selectedIndex].value tiktokHelper.setProtocol(protocol); changeProtocolSettings(protocol); @@ -16,8 +16,8 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html index aace2d45..3116a0ac 100644 --- a/src/pages/options/translate/translate.html +++ b/src/pages/options/translate/translate.html @@ -2,12 +2,12 @@ <html lang="en"> <head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" /> - <link href="../../stylesheets/styles.css" rel="stylesheet" /> - <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" /> + <link href="../../stylesheets/styles.css" rel="stylesheet" /> + <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title> </head> <body dir="auto" class="option"> @@ -128,380 +128,378 @@ </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-simplyTranslate" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_frontend__">Frontend</h4> + <select id="translate-frontend"> + <option value="simplyTranslate">SimplyTranslate</option> + <option value="lingva">Lingva</option> + </select> + </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="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_enable__">Enable</h4> - <input id="disable-simplyTranslate" type="checkbox" checked /> + <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_frontend__">Frontend</h4> - <select id="translate-frontend"> - <option value="simplyTranslate">SimplyTranslate</option> - <option value="lingva">Lingva</option> - </select> + <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 class="tor"> <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> + </div> + <div class="checklist checklist"> </div> - <hr> - - <div id="simplyTranslate"> - <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 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> - <div id="lingva"> - <div id="lingva-normal"> - <div class="some-block option-block"> - <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> - </div> - <div class="checklist" id="lingva-normal-checklist"> - </div> - <hr> - <div class="some-block option-block"> - <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> - </div> - <form id="custom-lingva-normal-instance-form"> - <div class="some-block option-block"> - <input id="lingva-normal-custom-instance" placeholder="https://lingva.com" type="url" /> - <button type="submit" class="add" id="lingva-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="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 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> - </section> + </section> - <script type="module" src="../init.js"></script> - <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> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js index d1df35ab..5da48740 100644 --- a/src/pages/options/translate/translate.js +++ b/src/pages/options/translate/translate.js @@ -6,8 +6,8 @@ disableElement.addEventListener("change", (event) => translateHelper.setDisable(!event.target.checked) ); -let simplyTranslateDivElement = document.getElementById("simplyTranslate") -let lingvaDivElement = document.getElementById("lingva") +let simplyTranslateDivElement = document.getElementById("simplyTranslate"); +let lingvaDivElement = document.getElementById("lingva"); function changeFrontendsSettings(frontend) { @@ -22,14 +22,14 @@ function changeFrontendsSettings(frontend) { } let translateFrontendElement = document.getElementById("translate-frontend"); translateFrontendElement.addEventListener("change", - (event) => { + event => { let frontend = event.target.options[translateFrontendElement.selectedIndex].value translateHelper.setFrontend(frontend) changeFrontendsSettings(frontend); } ); -let protocolElement = document.getElementById("protocol") +let protocolElement = document.getElementById("protocol"); protocolElement.addEventListener("change", (event) => { let protocol = event.target.options[protocolElement.selectedIndex].value @@ -39,11 +39,12 @@ protocolElement.addEventListener("change", ); function changeProtocolSettings(protocol) { - let normalSimplyTranslateDiv = document.getElementById("simplyTranslate-normal"); - let torSimplyTranslateDiv = document.getElementById("simplyTranslate-tor"); + let normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0]; + 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') { normalSimplyTranslateDiv.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", event => translateHelper.setFrom(event.target.options[fromElement.selectedIndex].value) ); -let toElement = document.getElementById("to"); +let toElement = document.getElementsByClassName("to")[0]; toElement.addEventListener("change", 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", event => translateHelper.setSimplyTranslateEngine(event.target.options[simplyTranslateEngineElement.selectedIndex].value) ); @@ -110,7 +112,6 @@ translateHelper.init().then(() => { translateHelper.setSimplyTranslateTorCustomRedirects ); - commonHelper.processDefaultCustomInstances( 'lingva', 'normal', diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html index 980fd557..d017ba78 100644 --- a/src/pages/options/twitter/twitter.html +++ b/src/pages/options/twitter/twitter.html @@ -149,84 +149,154 @@ <input id="bypass-watch-on-twitter" type="checkbox" checked /> </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 class="some-block option-block"> + <h4 data-localise="__MSG_enableCustomNitter__">Enable Custom Settings (will use cookies)</h4> + <input id="enable-twitter-custom-settings" type="checkbox" /> </div> + <div id="nitter"> - <div class="some-block option-block"> - <h4 data-localise="__MSG_infiniteScroll__">Infinite scrolling (experimental, requires JavaScript)</h4> - <input id="infiniteScroll" type="checkbox" /> - </div> + <div class="custom-settings"> - <div class="some-block option-block"> - <h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4> - <input id="stickyProfile" type="checkbox" /> - </div> + <hr> + <div class="some-block option-block"> + <h2>Display</h2> + </div> - <hr> + <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 id="normal"> + <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_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"> - <input id="nitter-normal-custom-instance" placeholder="https://nitter.com" type="url" /> - <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> + <h4 data-localise="__MSG_stickyProfile__">Make profile sidebar stick to top</h4> + <input class="stickyProfile" type="checkbox" /> </div> - </form> - <div class="checklist" id="nitter-normal-custom-checklist"></div> - </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 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 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> - <form id="custom-nitter-tor-instance-form"> + + <div class="tor"> <div class="some-block option-block"> - <input id="nitter-tor-custom-instance" placeholder="https://nitter.com" type="url" /> - <button type="submit" class="add" id="nitter-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> + <h4 data-localise="__MSG_defaultInstances__">Default Tor Instances</h4> </div> - </form> - <div class="checklist" id="nitter-tor-custom-checklist"></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> </section> diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js index 2d86d9a8..c6d7ea16 100644 --- a/src/pages/options/twitter/twitter.js +++ b/src/pages/options/twitter/twitter.js @@ -2,23 +2,23 @@ import twitterHelper from "../../../assets/javascripts/helpers/twitter.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; let disableTwitterElement = document.getElementById("disable-nitter"); -disableTwitterElement.addEventListener("change", - (event) => twitterHelper.setDisable(!event.target.checked) -); - -let protocolElement = document.getElementById("protocol") -protocolElement.addEventListener("change", - (event) => { - let protocol = event.target.options[protocolElement.selectedIndex].value - twitterHelper.setProtocol(protocol); - changeProtocolSettings(protocol); - } -); +let customSettingsDivElement = document.getElementsByClassName("custom-settings"); +let protocolElement = document.getElementById("protocol"); +let enableYoutubeCustomSettingsElement = document.getElementById("enable-twitter-custom-settings"); +let bypassWatchOnTwitterElement = document.getElementById("bypass-watch-on-twitter"); +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) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = nitterElement.getElementsByClassName("normal")[0]; + let torDiv = nitterElement.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; @@ -27,15 +27,15 @@ function changeProtocolSettings(protocol) { normalDiv.style.display = 'none'; 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(() => { disableTwitterElement.checked = !twitterHelper.getDisable(); + enableYoutubeCustomSettingsElement.checked = twitterHelper.getEnableCustomSettings(); bypassWatchOnTwitterElement.checked = twitterHelper.getBypassWatchOnTwitter(); let protocol = twitterHelper.getProtocol(); diff --git a/src/pages/options/wikipedia/wikipedia.html b/src/pages/options/wikipedia/wikipedia.html index 7ad257c0..728f2b10 100644 --- a/src/pages/options/wikipedia/wikipedia.html +++ b/src/pages/options/wikipedia/wikipedia.html @@ -2,12 +2,12 @@ <html lang="en"> <head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" /> - <link href="../../stylesheets/styles.css" rel="stylesheet" /> - <title>LibRedirect: Wikipedia</title> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" /> + <link href="../../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect: Wikipedia</title> </head> <body dir="auto" class="option"> @@ -54,7 +54,7 @@ <div class="title"> <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 class="title"> @@ -127,78 +127,78 @@ </div> </section> - <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> + <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"> - <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> + <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> + </div> + <div class="checklist checklist"> </div> - <hr> - - <div id="normal"> - <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 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> + </div> - <div id="tor"> - <div class="some-block option-block"> - <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 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> - </section> + <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> + </section> - <script type="module" src="../init.js"></script> - <script type="module" src="./wikipedia.js"></script> - <script type="module" src="../../../assets/javascripts/localise.js"></script> + <script type="module" src="../init.js"></script> + <script type="module" src="./wikipedia.js"></script> + <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/wikipedia/wikipedia.js b/src/pages/options/wikipedia/wikipedia.js index 92ab8dc5..1cad27a3 100644 --- a/src/pages/options/wikipedia/wikipedia.js +++ b/src/pages/options/wikipedia/wikipedia.js @@ -3,22 +3,21 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js"; let disableWikipediaElement = document.getElementById("disable-wikipedia"); 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", - (event) => { + event => { let protocol = event.target.options[protocolElement.selectedIndex].value wikipediaHelper.setProtocol(protocol); changeProtocolSettings(protocol); } ); - function changeProtocolSettings(protocol) { - let normalDiv = document.getElementById("normal"); - let torDiv = document.getElementById("tor"); + let normalDiv = document.getElementsByClassName("normal")[0]; + let torDiv = document.getElementsByClassName("tor")[0]; if (protocol == 'normal') { normalDiv.style.display = 'block'; torDiv.style.display = 'none'; @@ -33,6 +32,7 @@ wikipediaHelper.init().then(() => { disableWikipediaElement.checked = !wikipediaHelper.getDisable(); let protocol = wikipediaHelper.getProtocol(); + console.log('protocol', protocol); protocolElement.value = protocol; changeProtocolSettings(protocol); diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js index 9df34067..d735c18b 100644 --- a/src/pages/options/youtube/invidious.js +++ b/src/pages/options/youtube/invidious.js @@ -1,165 +1,121 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; -let invidiousAlwaysProxyElement = document.getElementById("invidious-local"); -invidiousAlwaysProxyElement.addEventListener("change", - event => youtubeHelper.setInvidiousAlwaysProxy(event.target.checked) -); +let invidiousElement = document.getElementById('invidious'); +let invidiousAlwaysProxyElement = invidiousElement.getElementsByClassName("local")[0]; +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"); -invidiousPlayerStyleElement.addEventListener("change", - event => youtubeHelper.setInvidiousPlayerStyle(event.target.options[invidiousPlayerStyleElement.selectedIndex].value) -); +volumeElement.addEventListener("input", () => volumeValueElement.textContent = `${volumeElement.value}%`); -let invidiousQualityElement = document.getElementById("invidious-quality"); -invidiousQualityElement.addEventListener("change", - event => youtubeHelper.setinvidiousQuality(event.target.options[invidiousQualityElement.selectedIndex].value) -); +invidiousElement.addEventListener("change", async _ => { + console.log('changed invidious settings'); + let commentsList = youtubeHelper.getInvidiousComments(); + commentsList[0] = invidiousComments0Element.value; + commentsList[1] = invidiousComments1Element.value; -let invidiousVideoLoopElement = document.getElementById("invidious-video_loop"); -invidiousVideoLoopElement.addEventListener("change", - event => youtubeHelper.setInvidiousVideoLoop(event.target.checked) -); + let captionsList = youtubeHelper.getInvidiousCaptions(); + captionsList[0] = invidiousCaptions0Element.value; + captionsList[1] = invidiousCaptions1Element.value; + captionsList[2] = invidiousCaptions2Element.value; -let invidiousContinueAutoplayElement = document.getElementById("invidious-continue_autoplay"); -invidiousContinueAutoplayElement.addEventListener("change", - event => youtubeHelper.setInvidiousContinueAutoplay(event.target.checked) -); + await youtubeHelper.setYoutubeSettings({ + invidiousAlwaysProxy: invidiousAlwaysProxyElement.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"); -invidiousContinueElement.addEventListener("change", - event => youtubeHelper.setInvidiousContinue(event.target.checked) -); +function init() { + youtubeHelper.init().then(() => { + invidiousVideoLoopElement.checked = youtubeHelper.getInvidiousVideoLoop(); -let youtubeListenElement = document.getElementById("invidious-listen"); -youtubeListenElement.addEventListener("change", - event => youtubeHelper.setYoutubeListen(event.target.checked) -); + autoplayElement.checked = youtubeHelper.getAutoplay(); -let invidiousSpeedElement = document.getElementById("invidious-speed"); -invidiousSpeedElement.addEventListener("change", - event => youtubeHelper.setInvidiousSpeed(event.target.options[invidiousSpeedElement.selectedIndex].value) -); + invidiousPlayerStyleElement.value = youtubeHelper.getInvidiousPlayerStyle(); -let invidiousQualityDashElement = document.getElementById("invidious-quality_dash"); -invidiousQualityDashElement.addEventListener("change", - event => youtubeHelper.setInvidiousQualityDash(event.target.options[invidiousQualityDashElement.selectedIndex].value) -); + invidiousContinueAutoplayElement.checked = youtubeHelper.getInvidiousContinueAutoplay(); + invidiousContinueElement.checked = youtubeHelper.getInvidiousContinue(); + invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy(); + youtubeListenElement.checked = youtubeHelper.getYoutubeListen(); -let invidiousComments0Element = document.getElementById("invidious-comments[0]"); -invidiousComments0Element.addEventListener("change", - event => { - 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) - } -); + invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed(); + invidiousQualityElement.value = youtubeHelper.getInvidiousQuality(); + invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash(); -let invidiousCaptions0Element = document.getElementById("invidious-captions[0]"); -invidiousCaptions0Element.addEventListener("change", - 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) - } -); + volumeElement.value = youtubeHelper.getVolume(); + volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`; -let invidiousRelatedVideoElement = document.getElementById("invidious-related_videos"); -invidiousRelatedVideoElement.addEventListener("change", - event => youtubeHelper.setInvidiousRelatedVideos(event.target.checked) -); + invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0]; + invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1]; -let invidiousAnnotationsElement = document.getElementById("invidious-annotations"); -invidiousAnnotationsElement.addEventListener("change", - event => youtubeHelper.setInvidiousAnnotations(event.target.checked) -); + 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(); -let invidiousExtendDescElement = document.getElementById("invidious-extend_desc"); -invidiousExtendDescElement.addEventListener("change", - event => youtubeHelper.setInvidiousExtendDesc(event.target.checked) -); + commonHelper.processDefaultCustomInstances( + 'invidious', + 'normal', + youtubeHelper, + document, + youtubeHelper.getInvidiousNormalRedirectsChecks, + youtubeHelper.setInvidiousNormalRedirectsChecks, + youtubeHelper.getInvidiousNormalCustomRedirects, + youtubeHelper.setInvidiousNormalCustomRedirects + ); -let invidiousVrModeElement = document.getElementById("invidious-vr_mode"); -invidiousVrModeElement.addEventListener("change", - event => youtubeHelper.setInvidiousVrMode(event.target.checked) -); + commonHelper.processDefaultCustomInstances( + 'invidious', + 'tor', + youtubeHelper, + document, + youtubeHelper.getInvidiousTorRedirectsChecks, + youtubeHelper.setInvidiousTorRedirectsChecks, + youtubeHelper.getInvidiousTorCustomRedirects, + youtubeHelper.setInvidiousTorCustomRedirects + ); + }); +} -let invidiousSavePlayerPosElement = document.getElementById("invidious-save_player_pos"); -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 - ); -});
\ No newline at end of file +init()
\ No newline at end of file diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js index 5f388d6f..e0495e7b 100644 --- a/src/pages/options/youtube/piped.js +++ b/src/pages/options/youtube/piped.js @@ -1,257 +1,132 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; -let pipedSponsorblockElement = document.getElementById("piped-sponsorblock"); -pipedSponsorblockElement.addEventListener("change", - event => youtubeHelper.setPipedSponsorblock(event.target.checked) -); +let pipedElement = document.getElementById('piped'); +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) { - if (boolean) { - if (!selectSkip.includes(value)) selectSkip.push(value); + if (boolean && !selectSkip.includes(value)) { + selectSkip.push(value); } - else { + else if (!boolean) { let i = selectSkip.indexOf(value); if (i > -1) selectSkip.splice(i, 1); } - youtubeHelper.setPipedSelectedSkip(selectSkip) } +let selectSkip = []; +pipedElement.addEventListener("change", async () => { + console.log("changed piped settings"); + let pipedEnabledCodecsResult = []; + for (const opt of pipedEnabledCodecsElement.options) + if (opt.selected) pipedEnabledCodecsResult.push(opt.value); -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) -); + selectSkipModify('sponsor', pipedSelectedSkipSponsorElement.checked); + selectSkipModify('intro', pipedSelectedSkipIntroElement.checked); + selectSkipModify('outro', pipedSelectedSkipOutroElement.checked); + selectSkipModify('preview', pipedSelectedSkipPreviewElement.checked); + selectSkipModify('interaction', pipedSelectedSkipInteractionElement.checked); + selectSkipModify('selfpromo', pipedSelectedSkipSelfpromoElement.checked); + selectSkipModify('music_offtopic', pipedSelectedSkipMusicOfftopicElement.checked); + selectSkipModify('poi_highlight', pipedSelectedSkipPoiHighlightElement.checked); + selectSkipModify('filler', pipedSelectedSkipFillerElement.checked); -let selectSkip = []; -youtubeHelper.init().then(() => { + await youtubeHelper.setYoutubeSettings({ + pipedQuality: pipedQualityElement.value, + pipedBufferGoal: pipedBufferGoalElement.value, + pipedRegion: pipedRegionElement.value, + pipedHomepage: pipedHomepageElement.value, + pipedComments: pipedCommentsElement.checked, + pipedMinimizeDescription: pipedMinimizeDescriptionElement.checked, + youtubeAutoplay: autoplayElement.checked, + pipedWatchHistory: pipedWatchHistoryElement.checked, + pipedDisableLBRY: pipedDisableLBRYElement.checked, + pipedProxyLBRY: pipedProxyLBRYElement.checked, + youtubeVolume: volumeElement.value, + pipedSponsorblock: pipedSponsorblockElement.checked, + pipedEnabledCodecs: pipedEnabledCodecsResult, + youtubeListen: pipedListenElement.checked, + pipedSelectedSkip: selectSkip, + }); + init(); +}); - 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'); - 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(); +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(); - pipedMaterialListenElement.checked = youtubeHelper.getYoutubeListen(); - pipedMaterialDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY(); - pipedMaterialProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY(); - pipedMaterialSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock() - pipedMaterialSkipToLastPointElement.checked = youtubeHelper.getPipedMaterialSkipToLastPoint(); - pipedMaterialSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor'); - pipedMaterialSelectedSkipIntroElement.checked = selectSkip.includes('intro'); - pipedMaterialSelectedSkipOutroElement.checked = selectSkip.includes('outro'); - pipedMaterialSelectedSkipPreviewElement.checked = selectSkip.includes('preview'); - pipedMaterialSelectedSkipInteractionElement.checked = selectSkip.includes('interaction'); - pipedMaterialSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo'); - pipedMaterialSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic'); - pipedMaterialSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight'); - pipedMaterialSelectedSkipFillerElement.checked = selectSkip.includes('filler'); + 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 - ); -}); + 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();
\ No newline at end of file diff --git a/src/pages/options/youtube/pipedMaterial.js b/src/pages/options/youtube/pipedMaterial.js index 9a8a9610..60b2c424 100644 --- a/src/pages/options/youtube/pipedMaterial.js +++ b/src/pages/options/youtube/pipedMaterial.js @@ -1,25 +1,112 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; -youtubeHelper.init().then(() => { - 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 - ); +let pipedMaterialElement = document.getElementById('pipedMaterial'); +let listenElement = pipedMaterialElement.getElementsByClassName("listen")[0]; +let disableLBRYElement = pipedMaterialElement.getElementsByClassName("disableLBRY")[0]; +let proxyLBRYElement = pipedMaterialElement.getElementsByClassName("proxyLBRY")[0]; +let sponsorblockElement = pipedMaterialElement.getElementsByClassName("sponsorblock")[0]; +let skipToLastPointElement = pipedMaterialElement.getElementsByClassName("skipToLastPoint")[0]; + +let selectedSkipSponsorElement = pipedMaterialElement.getElementsByClassName("selectedSkip-sponsor")[0]; +let selectedSkipIntroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-intro")[0]; +let selectedSkipOutroElement = pipedMaterialElement.getElementsByClassName("selectedSkip-outro")[0]; +let selectedSkipPreviewElement = pipedMaterialElement.getElementsByClassName("selectedSkip-preview")[0]; +let selectedSkipInteractionElement = pipedMaterialElement.getElementsByClassName("selectedSkip-interaction")[0]; +let selectedSkipSelfpromoElement = pipedMaterialElement.getElementsByClassName("selectedSkip-selfpromo")[0]; +let selectedSkipMusicOfftopicElement = pipedMaterialElement.getElementsByClassName("selectedSkip-music_offtopic")[0]; + +let autoplayElement = pipedMaterialElement.getElementsByClassName("youtubeAutoplay")[0]; + +let volumeElement = pipedMaterialElement.getElementsByClassName("volume")[0]; +let volumeValueElement = pipedMaterialElement.getElementsByClassName("volume-value")[0]; + +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();
\ No newline at end of file diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index c118694d..95ebb7d4 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -154,7 +154,7 @@ <select id="youtube-embed-frontend"> <option value="invidious">Invidious</option> <option value="piped">Piped</option> - <option value="pipedMaterial">Piped-Material</option> + <option value="pipedMaterial">Material</option> <option value="youtube">Youtube</option> </select> </div> @@ -190,64 +190,47 @@ <input id="enable-youtube-custom-settings" type="checkbox" /> </div> - <div class="custom-settings"> - - <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"> + + <hr> + <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> + <h4 data-localise="__MSG_alwaysLoop__">Always loop</h4> + <input class="video_loop" type="checkbox" /> </div> <div class="some-block option-block"> - <h4 data-localise="__MSG_alwaysLoop__">Always loop</h4> - <input id="invidious-video_loop" type="checkbox" /> + <h4 data-localise="__MSG_autoplayVid__">Autoplay Video</h4> + <input class="youtubeAutoplay" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_playNext__">Play next by default</h4> - <input id="invidious-continue" type="checkbox" /> + <input class="continue" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_autoplayNext__">Autoplay next video</h4> - <input id="invidious-continue_autoplay" type="checkbox" /> + <input class="continue_autoplay" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos</h4> - <input id="invidious-local" type="checkbox" /> + <input class="local" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_listenByDefault__">Listen by default</h4> - <input id="invidious-listen" type="checkbox" /> + <input class="listen" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultSpeed__">Default speed</h4> - <select id="invidious-speed"> + <select class="speed"> <option>2.0</option> <option>1.75</option> <option>1.5</option> @@ -261,7 +244,7 @@ <div class="some-block option-block"> <h4 data-localise="__MSG_prefQuality__">Preferred video quality</h4> - <select id="invidious-quality"> + <select class="quality"> <option value="hd720">720p</option> <option value="medium">480p</option> <option value="dash" data-localise="__MSG_dash__">DASH (adaptive quality)</option> @@ -271,7 +254,7 @@ <div class="some-block option-block"> <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="best" data-localise="__MSG_best__">Best</option> <option value="4320p">4320p</option> @@ -289,15 +272,22 @@ </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"> <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="youtube">YouTube</option> <option value="reddit">Reddit</option> </option> </select> - <select id="invidious-comments[1]"> + <select class="comments[1]"> <option value="" data-localise="__MSG_none__">none</option> <option value="youtube">YouTube</option> <option value="reddit">Reddit</option> @@ -306,7 +296,7 @@ <div class="some-block option-block"> <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="English">English</option> <option value="English (auto-generated)">English (auto-generated)</option> @@ -439,7 +429,7 @@ <option value="Zulu">Zulu</option> </select> - <select id="invidious-captions[1]"> + <select class="captions[1]"> <option value="" data-localise="__MSG_none__">none</option> <option value="English">English</option> <option value="English (auto-generated)">English (auto-generated)</option> @@ -572,7 +562,7 @@ <option value="Zulu">Zulu</option> </select> - <select id="invidious-captions[2]"> + <select class="captions[2]"> <option value="" data-localise="__MSG_none__">none</option> <option value="English">English</option> <option value="English (auto-generated)">English (auto-generated)</option> @@ -708,47 +698,54 @@ <div class="some-block option-block"> <h4 data-localise="__MSG_showRelated__">Show related videos</h4> - <input id="invidious-related_videos" type="checkbox" /> + <input class="related_videos" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_showAnnotations__">Show annotations by default</h4> - <input id="invidious-annotations" type="checkbox" /> + <input class="annotations" type="checkbox" /> </div> <div class="some-block option-block"> <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 class="some-block option-block"> <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 class="some-block option-block"> <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> <hr> - <div id="invidious-normal"> - + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="invidious-normal-checklist"> + <div class="checklist" class="checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-invidious-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="invidious-normal-custom-instance" placeholder="https://invidious.com" type="url" /> - <button type="submit" class="add" id="invidious-normal-add-instance"> + <input class="custom-instance" placeholder="https://invidious.com" type="url" /> + <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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -757,23 +754,23 @@ </button> </div> </form> - <div class="checklist" id="invidious-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="invidious-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="invidious-tor-checklist"> + <div class="checklist" class="checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-invidious-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="invidious-tor-custom-instance" placeholder="https://invidious.com" type="url" /> - <button type="submit" class="add" id="invidious-tor-add-instance"> + <input class="custom-instance" placeholder="https://invidious.com" type="url" /> + <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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -782,73 +779,85 @@ </button> </div> </form> - <div class="checklist" id="invidious-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> <div id="piped"> - <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"> <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4> - <input id="piped-sponsorblock" type="checkbox" /> + <input class="sponsorblock" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4> - <input id="piped-selectedSkip-sponsor" type="checkbox" /> + <input class="selectedSkip-sponsor" type="checkbox" /> </div> <div class="some-block option-block"> <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 class="some-block option-block"> <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4> - <input id="piped-selectedSkip-outro" type="checkbox" /> + <input class="selectedSkip-outro" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4> - <input id="piped-selectedSkip-preview" type="checkbox" /> + <input class="selectedSkip-preview" type="checkbox" /> </div> <div class="some-block option-block"> <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 class="some-block option-block"> <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 class="some-block option-block"> <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 class="some-block option-block"> <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 class="some-block option-block"> <h4 data-localise="__MSG_skipFiller__">Skip Filler Tangent</h4> - <input id="piped-selectedSkip-filler" type="checkbox" /> + <input class="selectedSkip-filler" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_audioOnly__">Audio Only</h4> - <input id="piped-listen" type="checkbox" /> + <input class="listen" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultQuality__">Default Quality</h4> - <select id="piped-quality"> + <select class="quality"> <option value="0">Auto</option> <option value="144">144p</option> <option value="240">240p</option> @@ -864,12 +873,12 @@ <div class="some-block option-block"> <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 class="some-block option-block"> <h4 data-localise="__MSG_countrySelection__">Country Selection</h4> - <select id="piped-region"> + <select class="region"> <option value="AF">Afghanistan</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> @@ -1068,7 +1077,7 @@ <div class="some-block option-block"> <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="feed" data-localise="__MSG_feed__">Feed</option> </select> @@ -1076,22 +1085,22 @@ <div class="some-block option-block"> <h4 data-localise="__MSG_showComments__">Show Comments</h4> - <input id="piped-comments" type="checkbox" /> + <input class="comments" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_minimizeDesc__">Minimize Description by default</h4> - <input id="piped-minimizeDescription" type="checkbox" /> + <input class="minimizeDescription" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_storeHistory__">Store Watch History</h4> - <input id="piped-watchHistory" type="checkbox" /> + <input class="watchHistory" type="checkbox" /> </div> <div class="some-block option-block"> <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="vp9">VP9</option> <option value="avc">AVC (h.264)</option> @@ -1100,30 +1109,31 @@ <div class="some-block option-block"> <h4 data-localise="__MSG_disableLBRY__">Disable LBRY for Streaming</h4> - <input id="piped-disableLBRY" type="checkbox" /> + <input class="disableLBRY" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_enableProxyLBRY__">Enable Proxy for LBRY</h4> - <input id="piped-proxyLBRY" type="checkbox" /> + <input class="proxyLBRY" type="checkbox" /> </div> </div> + <hr> - <div id="piped-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="piped-normal-checklist"> + <div class="checklist" class="checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-piped-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="piped-normal-custom-instance" placeholder="https://piped.com" type="url" /> - <button type="submit" class="add" id="piped-normal-add-instance"> + <input class="custom-instance" placeholder="https://piped.com" type="url" /> + <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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -1132,23 +1142,23 @@ </button> </div> </form> - <div class="checklist" id="piped-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="piped-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="piped-tor-checklist"> + <div class="checklist" class="checklist"> </div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-piped-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="piped-tor-custom-instance" placeholder="https://piped.com" type="url" /> - <button type="submit" class="add" id="piped-tor-add-instance"> + <input class="custom-instance" placeholder="https://piped.com" type="url" /> + <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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -1157,101 +1167,103 @@ </button> </div> </form> - <div class="checklist" id="piped-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> <hr> </div> <div id="pipedMaterial"> - <hr> - <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"> <h4 data-localise="__MSG_audioOnly__">Audio Only</h4> - <input id="pipedMaterial-listen" type="checkbox" /> + <input class="listen" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_disableLBRY__">Disable LBRY</h4> - <input id="pipedMaterial-disableLBRY" type="checkbox" /> + <input class="disableLBRY" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_proxyLBRY__">Proxy LBRY videos</h4> - <input id="pipedMaterial-proxyLBRY" type="checkbox" /> + <input class="proxyLBRY" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_enableSponsorBlock__">Enable Sponsorblock</h4> - <input id="pipedMaterial-sponsorblock" type="checkbox" /> + <input class="sponsorblock" type="checkbox" /> </div> <div class="some-block option-block"> - <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen</h4> - <input id="pipedMaterial-skipToLastPoint" type="checkbox" /> + <h4 data-localise="__MSG_skipNote__">Skip to the last watched point when encountering a video already seen + </h4> + <input class="skipToLastPoint" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_skipSponsors__">Skip Sponsors</h4> - <input id="pipedMaterial-selectedSkip-sponsor" type="checkbox" /> + <input class="selectedSkip-sponsor" type="checkbox" /> </div> <div class="some-block option-block"> <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 class="some-block option-block"> <h4 data-localise="__MSG_skripEndcars__">Skip Endcards/Credits</h4> - <input id="pipedMaterial-selectedSkip-outro" type="checkbox" /> + <input class="selectedSkip-outro" type="checkbox" /> </div> <div class="some-block option-block"> <h4 data-localise="__MSG_skripPreview__">Skip Preview/Recap</h4> - <input id="pipedMaterial-selectedSkip-preview" type="checkbox" /> + <input class="selectedSkip-preview" type="checkbox" /> </div> <div class="some-block option-block"> <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 class="some-block option-block"> <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 class="some-block option-block"> <h4 data-localise="__MSG_skipMusic__">Skip Music: Non-Music Section</h4> - <input id="pipedMaterial-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" /> + <input class="selectedSkip-music_offtopic" type="checkbox" /> </div> <hr> </div> - <div id="pipedMaterial-normal"> + <div class="normal"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="pipedMaterial-normal-checklist"></div> + <div class="checklist" class="checklist"></div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-pipedMaterial-normal-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="pipedMaterial-normal-custom-instance" placeholder="https://piped-material.com" type="url" /> - <button type="submit" class="add" id="pipedMaterial-normal-add-instance"> + <input class="custom-instance" placeholder="https://material.com" type="url" /> + <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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -1260,22 +1272,22 @@ </button> </div> </form> - <div class="checklist" id="pipedMaterial-normal-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> - <div id="pipedMaterial-tor"> + <div class="tor"> <div class="some-block option-block"> <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4> </div> - <div class="checklist" id="pipedMaterial-tor-checklist"></div> + <div class="checklist" class="checklist"></div> <hr> <div class="some-block option-block"> <h4 data-localise="__MSG_customInstances__">Custom Instances</h4> </div> - <form id="custom-pipedMaterial-tor-instance-form"> + <form class="custom-instance-form"> <div class="some-block option-block"> - <input id="pipedMaterial-tor-custom-instance" placeholder="https://pipedMaterial.com" type="url" /> - <button type="submit" class="add" id="pipedMaterial-tor-add-instance"> + <input class="custom-instance" placeholder="https://pipedMaterial.com" type="url" /> + <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" fill="currentColor"> <path d="M0 0h24v24H0V0z" fill="none" /> @@ -1284,7 +1296,7 @@ </button> </div> </form> - <div class="checklist" id="pipedMaterial-tor-custom-checklist"></div> + <div class="checklist custom-checklist"></div> </div> </div> </section> @@ -1299,4 +1311,4 @@ <script type="module" src="../../../assets/javascripts/localise.js"></script> </body> -</html> +</html>
\ No newline at end of file diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index 3fec42cc..5f915251 100644 --- a/src/pages/options/youtube/youtube.js +++ b/src/pages/options/youtube/youtube.js @@ -1,12 +1,17 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; +let disableYoutubeElement = document.getElementById("disable-invidious"); let youtubeFrontendElement = document.getElementById("youtube-frontend"); let invidiousDivElement = document.getElementById("invidious"); let pipedDivElement = document.getElementById("piped"); let pipedMaterialDivElement = document.getElementById("pipedMaterial"); -let invidiousPipedPipedMaterialDivElement = document.getElementById("invidious-piped-pipedMaterial"); let freetubeYatteeDivElement = document.getElementById("freetube-yatte"); 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() { let frontend = youtubeFrontendElement.value; @@ -17,28 +22,24 @@ function changeFrontendsSettings() { for (const item of customSettingsDivElement) item.style.display = 'none'; if (frontend == 'invidious') { - invidiousPipedPipedMaterialDivElement.style.display = 'block' invidiousDivElement.style.display = 'block'; pipedDivElement.style.display = 'none'; pipedMaterialDivElement.style.display = 'none'; freetubeYatteeDivElement.style.display = 'none'; } else if (frontend == 'piped') { - invidiousPipedPipedMaterialDivElement.style.display = 'block' invidiousDivElement.style.display = 'none'; pipedDivElement.style.display = 'block'; pipedMaterialDivElement.style.display = 'none'; freetubeYatteeDivElement.style.display = 'none'; } else if (frontend == 'pipedMaterial') { - invidiousPipedPipedMaterialDivElement.style.display = 'block' invidiousDivElement.style.display = 'none'; pipedDivElement.style.display = 'none'; pipedMaterialDivElement.style.display = 'block'; freetubeYatteeDivElement.style.display = 'none'; } else if (frontend == 'freetube' || frontend == 'yatte') { - invidiousPipedPipedMaterialDivElement.style.display = 'none' invidiousDivElement.style.display = 'none'; pipedDivElement.style.display = 'none'; pipedMaterialDivElement.style.display = 'none'; @@ -49,91 +50,28 @@ function changeFrontendsSettings() { function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) { if (youtubeEmbedFrontend == 'invidious') { - invidiousPipedPipedMaterialDivElement.style.display = 'block' pipedDivElement.style.display = 'none'; invidiousDivElement.style.display = 'block'; } if (youtubeEmbedFrontend == 'piped') { - invidiousPipedPipedMaterialDivElement.style.display = 'block' pipedDivElement.style.display = 'block'; invidiousDivElement.style.display = 'none'; } else if (youtubeEmbedFrontend == 'youtube') { - invidiousPipedPipedMaterialDivElement.style.display = 'none' pipedDivElement.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) { - let normalPipedDiv = document.getElementById("piped-normal"); - let torPipedDiv = document.getElementById("piped-tor"); + let normalPipedDiv = document.getElementById('piped').getElementsByClassName("normal")[0]; + let torPipedDiv = document.getElementById('piped').getElementsByClassName("tor")[0]; - let normalPipedMaterialDiv = document.getElementById("pipedMaterial-normal"); - let torPipedMaterialDiv = document.getElementById("pipedMaterial-tor"); + let normalPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("normal")[0]; + let torPipedMaterialDiv = document.getElementById('pipedMaterial').getElementsByClassName("tor")[0]; - let normalInvidiousDiv = document.getElementById("invidious-normal"); - let torInvidiousDiv = document.getElementById("invidious-tor"); + let normalInvidiousDiv = document.getElementById('invidious').getElementsByClassName("normal")[0]; + let torInvidiousDiv = document.getElementById('invidious').getElementsByClassName("tor")[0]; if (protocol == 'normal') { 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(() => { disableYoutubeElement.checked = !youtubeHelper.getDisable(); enableYoutubeCustomSettingsElement.checked = youtubeHelper.getEnableCustomSettings(); - volumeElement.value = youtubeHelper.getVolume(); - volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`; + OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo(); bypassWatchOnYoutubeElement.checked = youtubeHelper.getBypassWatchOnYoutube(); - autoplayElement.checked = youtubeHelper.getAutoplay(); + let frontend = youtubeHelper.getFrontend(); youtubeFrontendElement.value = frontend; changeFrontendsSettings(); diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 58f3a62f..a98adc29 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -90,7 +90,7 @@ select { background-color: var(--bg-secondary); border: none; margin: 0; - width: 200px; + width: 180px; border-radius: 3px; } @@ -108,6 +108,9 @@ section.option-block { width: 700px; margin: 0 50px; } +section.option-block h2{ + margin: 0; +} body.option { display: flex; |