diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js index c0a6495f..066869ec 100644 --- a/src/assets/javascripts/helpers/common.js +++ b/src/assets/javascripts/helpers/common.js @@ -20,13 +20,13 @@ function getInstances() { if (request.status === 200) { const instances = JSON.parse(request.responseText); - const nitterRandomPool = addHttps(filterInstances(instances.nitter)); + const list = addHttps(filterInstances(instances.nitter)); const invidiousRandomPool = addHttps(filterInstances(instances.invidious)); const bibliogramRandomPool = addHttps(filterInstances(instances.bibliogram)); const wikilessRandomPool = addHttps(filterInstances(instances.wikiless)); const scribeRandomPool = addHttps(filterInstances(instances.scribe)); browser.storage.sync.set({ - nitterRandomPool, + list, invidiousRandomPool, bibliogramRandomPool, wikilessRandomPool, @@ -53,10 +53,45 @@ function debounce(func, wait, immediate) { }; } +function validURL(str) { + var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name + '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path + '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator + return !!pattern.test(str); +} + +function filterList(oldList) { + + oldList.filter((x) => x.trim() != ""); + let newList = []; + oldList.forEach((c) => { + if (!newList.includes(c.trim())) + newList.push(c.trim()); + }); + newList = newList.filter(validURL) + return newList; +} + +function updateListElement(listElement, list) { + while (listElement.firstChild) + listElement.removeChild(listElement.firstChild); + list.forEach(element => { + let entry = document.createElement('li'); + entry.appendChild(document.createTextNode(element)); + listElement.appendChild(entry); + }); +} + export default { filterInstances, getRandomInstance, getInstances, addHttps, - debounce + debounce, + validURL, + filterList, + updateListElement }; diff --git a/src/pages/background/background.js b/src/pages/background/background.js index f48b31a9..741e9116 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -164,7 +164,7 @@ browser.storage.sync.get( disableNitter = result.disableNitter; nitterRandomPool = result.nitterRandomPool - ? result.nitterRandomPool.split(",") + ? result.nitterRandomPool : commonHelper.filterInstances(nitterInstances); @@ -172,7 +172,7 @@ browser.storage.sync.get( disableBibliogram = result.disableBibliogram; bibliogramRandomPool = result.bibliogramRandomPool - ? result.bibliogramRandomPool.split(",") + ? result.bibliogramRandomPool : commonHelper.filterInstances(bibliogramInstances); @@ -180,7 +180,7 @@ browser.storage.sync.get( disableScribe = result.disableScribe; scribeRandomPool = result.scribeRandomPool - ? result.scribeRandomPool.split(",") + ? result.scribeRandomPool : commonHelper.filterInstances(scribeInstances); } ); diff --git a/src/pages/options/instagram.js b/src/pages/options/instagram.js index 29e80ee9..7d2864e1 100644 --- a/src/pages/options/instagram.js +++ b/src/pages/options/instagram.js @@ -8,6 +8,9 @@ const bibliogramInstances = instagramHelper.redirects; let bibliogramInstanceElement = document.getElementById("bibliogram-instance"); let disableBibliogramElement = document.getElementById("disable-bibliogram"); let bibliogramRandomPoolElement = document.getElementById("bibliogram-random-pool"); +let bibliogramRandomPoolListElement = document.getElementById("bibliogram-random-pool-list"); + +let bibliogramRandomPool; browser.storage.sync.get( [ @@ -18,7 +21,11 @@ browser.storage.sync.get( (result) => { bibliogramInstanceElement.value = result.bibliogramInstance || ""; disableBibliogramElement.checked = !result.disableBibliogram; - bibliogramRandomPoolElement.value = result.bibliogramRandomPool || commonHelper.filterInstances(bibliogramInstances); + + + bibliogramRandomPool = result.bibliogramRandomPool || commonHelper.filterInstances(bibliogramInstances) + bibliogramRandomPoolElement.value = bibliogramRandomPool.join("\n"); + commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool); let id = "bibliogram-instance"; let instances = bibliogramRandomPoolElement.value.split(',') shared.autocompletes.push({ id: id, instances: instances }) @@ -36,6 +43,7 @@ disableBibliogramElement.addEventListener("change", (event) => { }); bibliogramRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { - browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPoolElement.value }); -}, 500)); - + bibliogramRandomPool = commonHelper.filterList(bibliogramRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(bibliogramRandomPoolListElement, bibliogramRandomPool); + browser.storage.sync.set({ bibliogramRandomPool: bibliogramRandomPool }); +}, 50)); \ No newline at end of file diff --git a/src/pages/options/medium.js b/src/pages/options/medium.js index cd00c1a2..6fbc390d 100644 --- a/src/pages/options/medium.js +++ b/src/pages/options/medium.js @@ -7,6 +7,9 @@ const scribeInstances = mediumHelper.redirects; let scribeInstanceElement = document.getElementById("scribe-instance"); let disableScribeElement = document.getElementById("disable-scribe"); let scribeRandomPoolElement = document.getElementById("scribe-random-pool"); +let scribeRandomPoolListElement = document.getElementById('scribe-random-pool-list'); + +let scribeRandomPool; browser.storage.sync.get( [ @@ -17,9 +20,13 @@ browser.storage.sync.get( (result) => { scribeInstanceElement.value = result.scribeInstance || ""; disableScribeElement.checked = !result.disableScribe; - scribeRandomPoolElement.value = (result.scribeRandomPool || commonHelper.filterInstances(scribeInstances)).join("\n"); + + scribeRandomPool = result.scribeRandomPool || commonHelper.filterInstances(scribeInstances) + scribeRandomPoolElement.value = scribeRandomPool.join("\n"); + commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool); + let id = "scribe-instance"; - let instances = scribeRandomPoolElement.value.split(',') + let instances = scribeRandomPoolElement.value.split('\n') shared.autocompletes.push({ id: id, instances: instances }) shared.autocomplete(document.getElementById(id), instances); } @@ -40,7 +47,7 @@ scribeInstanceElement.addEventListener("input", commonHelper.debounce(() => { }, 500)); scribeRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { - browser.storage.sync.set({ - scribeRandomPool: scribeRandomPoolElement.value.split('\n') - }); -}, 500)); \ No newline at end of file + scribeRandomPool = commonHelper.filterList(scribeRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(scribeRandomPoolListElement, scribeRandomPool); + browser.storage.sync.set({ scribeRandomPool: scribeRandomPool }); +}, 50)); \ No newline at end of file diff --git a/src/pages/options/options.html b/src/pages/options/options.html index c4a9c187..04903e7f 100644 --- a/src/pages/options/options.html +++ b/src/pages/options/options.html @@ -102,7 +102,10 @@

Random Instance Pool

- +
+ + +
@@ -183,16 +186,17 @@
-

Random instance pool (comma-separated)

- +

Random instance pool

+
+ + +

Proactively remove Twitter service worker

- -
@@ -209,8 +213,11 @@
-

Random instance pool (comma-separated)

- +

Random instance pool

+
+ +
    +
    @@ -230,11 +237,6 @@ -
    -

    Random instance pool (comma-separated)

    - -
    -

    Frontend

    +
    +

    LibReddit Random instance pool

    +
    + +
      +
      +
      + +
      +

      Teddit Random instance pool

      +
      + +
        +
        +
        +
        @@ -325,7 +346,10 @@

        Random instance pool (comma-separated)

        - +
        + + +
        diff --git a/src/pages/options/options.js b/src/pages/options/options.js index 6d4c7ba1..5d6aed4e 100644 --- a/src/pages/options/options.js +++ b/src/pages/options/options.js @@ -42,7 +42,6 @@ browser.storage.sync.get( exceptions = result.exceptions || []; exceptions.forEach(prependExceptionsItem); shared.autocompletes.forEach((value) => { - }); } ); diff --git a/src/pages/options/reddit.js b/src/pages/options/reddit.js index affc7a88..59307096 100644 --- a/src/pages/options/reddit.js +++ b/src/pages/options/reddit.js @@ -9,16 +9,36 @@ let redditInstanceElement = document.getElementById("reddit-instance"); let disableRedditElement = document.getElementById("disable-reddit"); let redditFrontendElement = document.getElementById("reddit-frontend"); +let libredditRandomPoolElement = document.getElementById("libreddit-random-pool"); +let libredditRandomPoolListElement = document.getElementById("libreddit-random-pool-list"); + +let tedditRandomPoolElement = document.getElementById("teddit-random-pool"); +let tedditRandomPoolListElement = document.getElementById("teddit-random-pool-list"); + +let libredditRandomPool +let tedditRandomPool + browser.storage.sync.get( [ "redditInstance", "disableReddit", - "redditFrontend" + "redditFrontend", + "libredditRandomPool", + "tedditRandomPool" ], (result) => { redditInstanceElement.value = result.redditInstance || ""; disableRedditElement.checked = !result.disableReddit; redditFrontendElement.value = result.redditFrontend; + + libredditRandomPool = result.libredditRandomPool || commonHelper.filterInstances(redditInstances.libreddit) + libredditRandomPoolElement.value = libredditRandomPool.join("\n"); + commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool); + + tedditRandomPool = result.tedditRandomPool || commonHelper.filterInstances(redditInstances.teddit) + tedditRandomPoolElement.value = tedditRandomPool.join("\n"); + commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool); + let id = "reddit-instance"; let instances = redditInstances; shared.autocompletes.push({ id: id, instances: instances }) @@ -40,6 +60,18 @@ disableRedditElement.addEventListener("change", (event) => { redditFrontendElement.addEventListener("change", (event) => { const value = event.target.options[redditFrontendElement.selectedIndex].value; - console.info("Reddit Frontend", value) + console.info("Reddit Frontend:", value) browser.storage.sync.set({ redditFrontend: value }) -}) \ No newline at end of file +}); + +libredditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { + libredditRandomPool = commonHelper.filterList(libredditRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(libredditRandomPoolListElement, libredditRandomPool); + browser.storage.sync.set({ libredditRandomPool: libredditRandomPool }); +}, 50)); + +tedditRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { + tedditRandomPool = commonHelper.filterList(tedditRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(tedditRandomPoolListElement, tedditRandomPool); + browser.storage.sync.set({ tedditRandomPool: tedditRandomPool }); +}, 50)); \ No newline at end of file diff --git a/src/pages/options/twitter.js b/src/pages/options/twitter.js index 1f6be4e1..3e9b2a4a 100644 --- a/src/pages/options/twitter.js +++ b/src/pages/options/twitter.js @@ -5,9 +5,12 @@ import shared from "./shared.js"; const nitterInstances = twitterHelper.redirects; let nitterInstanceElement = document.getElementById("nitter-instance"); +let removeTwitterSWElement = document.getElementById("remove-twitter-sw"); let disableNitterElement = document.getElementById("disable-nitter"); let nitterRandomPoolElement = document.getElementById("nitter-random-pool"); -let removeTwitterSWElement = document.getElementById("remove-twitter-sw"); +let nitterRandomPoolListElement = document.getElementById('nitter-random-pool-list'); + +let nitterRandomPool browser.storage.sync.get( [ @@ -19,10 +22,14 @@ browser.storage.sync.get( (result) => { nitterInstanceElement.value = result.nitterInstance || ""; disableNitterElement.checked = !result.disableNitter; - nitterRandomPoolElement.value = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances); removeTwitterSWElement.checked = !result.removeTwitterSW; + + nitterRandomPool = result.nitterRandomPool || commonHelper.filterInstances(nitterInstances) + nitterRandomPoolElement.value = nitterRandomPool.join("\n"); + commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool); + let id = "nitter-instance" - let instances = nitterRandomPoolElement.value.split(',') + let instances = nitterRandomPool shared.autocompletes.push({ id: id, instances: instances }) shared.autocomplete(document.getElementById(id), instances); } @@ -45,5 +52,7 @@ removeTwitterSWElement.addEventListener("change", (event) => { }); nitterRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { - browser.storage.sync.set({ nitterRandomPool: nitterRandomPoolElement.value }); -}, 500)); + nitterRandomPool = commonHelper.filterList(nitterRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(nitterRandomPoolListElement, nitterRandomPool); + browser.storage.sync.set({ nitterRandomPool: nitterRandomPool }); +}, 50)); diff --git a/src/pages/options/wikipedia.js b/src/pages/options/wikipedia.js index f7ff15fa..243c918e 100644 --- a/src/pages/options/wikipedia.js +++ b/src/pages/options/wikipedia.js @@ -8,6 +8,9 @@ const wikilessInstances = wikipediaHelper.redirects; let wikipediaInstanceElement = document.getElementById("wikipedia-instance"); let disableWikipediaElement = document.getElementById("disable-wikipedia"); let wikilessRandomPoolElement = document.getElementById("wikiless-random-pool"); +let wikilessRandomPoolListElement = document.getElementById('wikiless-random-pool-list'); + +let wikilessRandomPool browser.storage.sync.get( [ @@ -18,7 +21,11 @@ browser.storage.sync.get( (result) => { wikipediaInstanceElement.value = result.wikipediaInstance || ""; disableWikipediaElement.checked = !result.disableWikipedia; - wikilessRandomPoolElement.value = (result.wikilessRandomPool || commonHelper.filterInstances(wikilessInstances)).join("\n") + + wikilessRandomPool = result.wikilessRandomPool || commonHelper.filterInstances(wikilessInstances) + wikilessRandomPoolElement.value = wikilessRandomPool.join("\n") + commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool); + let id = "wikipedia-instance"; let instances = wikilessInstances; shared.autocompletes.push({ id: id, instances: instances }) @@ -38,7 +45,9 @@ disableWikipediaElement.addEventListener("change", (event) => { browser.storage.sync.set({ disableWikipedia: !event.target.checked }); }); -browser.storage.onChanged.addListener((changes) => { - if ("wikilessRandomPool" in changes) - wikilessRandomPoolElement.value = changes.wikilessRandomPool.newValue.join("\n"); -}) \ No newline at end of file +wikilessRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { + wikilessRandomPool = commonHelper.filterList(wikilessRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(wikilessRandomPoolListElement, wikilessRandomPool); + browser.storage.sync.set({ wikilessRandomPool: wikilessRandomPool }); +}, 50)); + diff --git a/src/pages/options/youtube.js b/src/pages/options/youtube.js index d581064d..60b31afa 100644 --- a/src/pages/options/youtube.js +++ b/src/pages/options/youtube.js @@ -13,11 +13,14 @@ let invidiousPlayerStyleElement = document.getElementById("invidious-player-styl let invidiousSubtitlesElement = document.getElementById("invidious-subtitles"); let invidiousAutoplayElement = document.getElementById("invidious-autoplay"); let invidiousRandomPoolElement = document.getElementById("invidious-random-pool"); +let invidiousRandomPoolListElement = document.getElementById('invidious-random-pool-list'); let useFreeTubeElement = document.getElementById("use-freetube"); let alwaysProxyElement = document.getElementById("always-proxy"); let onlyEmbeddedVideoElement = document.getElementById("only-embed"); let videoQualityElement = document.getElementById("video-quality"); +let invidiousRandomPool; + browser.storage.sync.get( [ "invidiousInstance", @@ -43,14 +46,18 @@ browser.storage.sync.get( document.querySelector("#volume-value").textContent = result.invidiousVolume ? `${result.invidiousVolume}%` : " - "; invidiousPlayerStyleElement.value = result.invidiousPlayerStyle || ""; invidiousSubtitlesElement.value = result.invidiousSubtitles || ""; - invidiousAutoplayElement.checked = result.invidiousAutoplay; - invidiousRandomPoolElement.value = (result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances)).join("\n"); useFreeTubeElement.checked = result.useFreeTube; onlyEmbeddedVideoElement.checked = result.onlyEmbeddedVideo; alwaysProxyElement.checked = result.alwaysProxy; videoQualityElement.value = result.videoQuality || ""; + invidiousAutoplayElement.checked = result.invidiousAutoplay; + + invidiousRandomPool = result.invidiousRandomPool || commonHelper.filterInstances(invidiousInstances) + invidiousRandomPoolElement.value = invidiousRandomPool.join("\n"); + commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool); + let id = "invidious-instance" - let instances = invidiousRandomPoolElement.value.split('\n'); + let instances = invidiousRandomPool; shared.autocompletes.push({ id: id, instances: instances }); shared.autocomplete(document.getElementById(id), instances); } @@ -100,10 +107,11 @@ invidiousAutoplayElement.addEventListener("change", (event) => { browser.storage.sync.set({ invidiousAutoplay: event.target.checked }); }); -invidiousRandomPool.addEventListener("input", - commonHelper.debounce(() => { - browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool.value.split("\n") }); - }, 500) +invidiousRandomPoolElement.addEventListener("input", commonHelper.debounce(() => { + invidiousRandomPool = commonHelper.filterList(invidiousRandomPoolElement.value.split("\n")) + commonHelper.updateListElement(invidiousRandomPoolListElement, invidiousRandomPool); + browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool }); +}, 50) ); useFreeTubeElement.addEventListener("change", (event) => { diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index aeca8009..22c4b17b 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -162,6 +162,7 @@ ul { } li { + white-space: nowrap; border-bottom: solid 0.5px var(--bg-secondary); padding: 20px 0px 20px 20px; } @@ -311,10 +312,13 @@ body.light-theme { --bg-secondary: #fff; } -textarea { - resize: vertical; - width: 100%; - height: 200px; +body.light-theme textarea { + color: black; + border: 1px solid #767676; +} + +body.light-theme textarea:focus { + outline: none; } @@ -496,6 +500,32 @@ div.option { "translate medium wikipedia" } +div.random-pool { + display: flex; + align-items: stretch; +} + +div.random-pool ul { + list-style: disc; + margin: 0 20px; +} + +div.random-pool li { + border: none; + padding: 10px 0; + font-size: 15px; + line-height: 1px; +} + +textarea { + line-height: 21px; + background-color: var(--bg-secondary); + color: white; + border: none; + resize: none; + width: 100%; +} + @media (max-width: 1590px) { div.option { max-width: 1200px;