aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages
diff options
context:
space:
mode:
authorManeraKai <manerakai@protonmail.com>2024-08-29 13:36:21 +0300
committerManeraKai <manerakai@protonmail.com>2024-08-29 13:36:21 +0300
commit97d390737e7e953fe1e6559e41963c547b31afa0 (patch)
treefff6e211ba49d82825eb250b4b9507929537e950 /src/pages
parentAdded Auto Pick Instance https://github.com/libredirect/browser_extension/iss... (diff)
downloadlibredirect-97d390737e7e953fe1e6559e41963c547b31afa0.zip
Improving popup messages
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/background/background.js21
-rw-r--r--src/pages/components/Button.svelte10
-rw-r--r--src/pages/messages/index.html14
-rw-r--r--src/pages/messages/no_instance.html24
-rw-r--r--src/pages/messages_src/App.svelte132
-rw-r--r--src/pages/messages_src/main.js7
-rw-r--r--src/pages/messages_src/stores.js5
-rw-r--r--src/pages/options_src/App.svelte44
-rw-r--r--src/pages/options_src/Services/Instances.svelte13
-rw-r--r--src/pages/popup_src/App.svelte42
10 files changed, 193 insertions, 119 deletions
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index f41cb55e..db7ad087 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -67,10 +67,25 @@ browser.webRequest.onBeforeRequest.addListener(
tabIdRedirects[details.tabId]
)
+ if (newUrl && newUrl.startsWith("https://no-instance.libredirect.invalid")) {
+ const url = new URL(newUrl)
+ const frontend = url.searchParams.get("frontend")
+ const oldUrl = new URL(url.searchParams.get("url"))
+
+ browser.tabs.update({
+ url: browser.runtime.getURL(
+ `/pages/messages/index.html?message=no_instance&url=${encodeURIComponent(oldUrl)}&frontend=${encodeURIComponent(frontend)}`
+ ),
+ })
+ }
+
if (!newUrl) {
- const match = url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/)
- if (match) {
- browser.tabs.update({ url: browser.runtime.getURL(`/pages/messages/no_instance.html`) })
+ if (url.href.match(/^https?:\/{2}(.*\.)?libredirect\.invalid.*/)) {
+ browser.tabs.update({
+ url: browser.runtime.getURL(
+ `/pages/messages/index.html?message=disabled&url=${encodeURIComponent(url.href)}`
+ ),
+ })
}
}
diff --git a/src/pages/components/Button.svelte b/src/pages/components/Button.svelte
index 8836b47e..6ae2ba61 100644
--- a/src/pages/components/Button.svelte
+++ b/src/pages/components/Button.svelte
@@ -19,11 +19,17 @@
padding: 10px;
}
- button:hover {
+ button:hover:enabled {
color: var(--active);
}
- button:active {
+ button:active:enabled {
transform: translateY(1px);
}
+
+ button:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+
</style>
diff --git a/src/pages/messages/index.html b/src/pages/messages/index.html
new file mode 100644
index 00000000..8701c152
--- /dev/null
+++ b/src/pages/messages/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
+ <title>Settings</title>
+ <link rel="stylesheet" href="build/bundle.css" />
+ <link rel="stylesheet" href="../fonts/styles.css" />
+ <script defer src="build/bundle.js"></script>
+ </head>
+
+ <body></body>
+</html>
diff --git a/src/pages/messages/no_instance.html b/src/pages/messages/no_instance.html
deleted file mode 100644
index 55e5fac7..00000000
--- a/src/pages/messages/no_instance.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!doctype html>
-<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 href="../stylesheets/styles.css" rel="stylesheet" />
- <title>No instances found</title>
- <style>
- #body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
- </style>
- </head>
-
- <body>
- <div id="body">
- <h1>LibRedirect: You have no instance selected for this frontend</h1>
- </div>
- </body>
-</html>
diff --git a/src/pages/messages_src/App.svelte b/src/pages/messages_src/App.svelte
new file mode 100644
index 00000000..b08a143b
--- /dev/null
+++ b/src/pages/messages_src/App.svelte
@@ -0,0 +1,132 @@
+<script>
+ const browser = window.browser || window.chrome
+
+ import utils from "../../assets/javascripts/utils.js"
+ import { onDestroy } from "svelte"
+ import servicesHelper from "../../assets/javascripts/services.js"
+ import { onMount } from "svelte"
+
+ import { options, config, page } from "./stores"
+ import Button from "../components/Button.svelte"
+ import AutoPickIcon from "../icons/AutoPickIcon.svelte"
+
+ let _options
+ const unsubscribeOptions = options.subscribe(val => {
+ if (val) {
+ _options = val
+ browser.storage.local.set({ options: val })
+ }
+ })
+
+ let _config
+ const unsubscribeConfig = config.subscribe(val => (_config = val))
+
+ onDestroy(() => {
+ unsubscribeOptions()
+ unsubscribeConfig()
+ })
+
+ onMount(async () => {
+ let opts = await utils.getOptions()
+ if (!opts) {
+ await servicesHelper.initDefaults()
+ opts = await utils.getOptions()
+ }
+ redirects = await utils.getList(opts)
+ options.set(opts)
+ config.set(await utils.getConfig())
+ })
+
+ let _page
+ page.subscribe(val => (_page = val))
+
+ let style
+ $: if (_options) style = utils.style(_options, window)
+
+ let autoPicking = false
+ let redirects
+
+ const params = new URLSearchParams(window.location.search)
+ const oldUrl = new URL(params.get("url"))
+
+ async function autoPickInstance() {
+ const frontend = params.get("frontend")
+ autoPicking = true
+ const instances = utils.randomInstances(redirects[frontend]["clearnet"], 5)
+ const pings = await Promise.all([...instances.map(async instance => [instance, await utils.ping(instance)])])
+ pings.sort((a, b) => a[1] - b[1])
+ console.log(pings)
+ _options[frontend].push(pings[0][0])
+ options.set(_options)
+ autoPicking = false
+ await redirectUrl()
+ }
+
+ async function enableService() {
+ const service = await servicesHelper.computeService(oldUrl)
+ _options[service].enabled = true
+ options.set(_options)
+ await redirectUrl()
+ }
+
+ async function redirectUrl() {
+ const newUrl = await servicesHelper.redirectAsync(oldUrl, "main_frame", null, null, false, true)
+ browser.tabs.update({ url: newUrl })
+ }
+</script>
+
+{#if _options && _config}
+ <div class="main" dir="auto" {style}>
+ {#if window.location.search.includes("message=disabled")}
+ <div>
+ <h1>You disabled redirections for this service</h1>
+ <Button on:click={enableService}>
+ {browser.i18n.getMessage("enable") || "Enable"}
+ </Button>
+ </div>
+ {:else if window.location.search.includes("message=no_instance")}
+ <div>
+ <h1>You have no instance selected for this frontend</h1>
+ <Button on:click={autoPickInstance} disabled={autoPicking}>
+ <AutoPickIcon class="margin margin_{document.body.dir}" />
+ {browser.i18n.getMessage("autoPickInstance") || "Auto Pick Instance"}
+ </Button>
+ </div>
+ {/if}
+ </div>
+{:else}
+ <p>Loading...</p>
+{/if}
+
+<style>
+ :global(body) {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ }
+
+ div.main {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 800px;
+ margin: 0;
+ padding-top: 50px;
+ justify-content: center;
+ font-family: "Inter", sans-serif;
+ box-sizing: border-box;
+ font-size: 16px;
+ background-color: var(--bg-main);
+ color: var(--text);
+ overflow: scroll;
+ }
+
+ :global(.margin) {
+ margin-right: 10px;
+ margin-left: 0;
+ }
+ :global(.margin_rtl) {
+ margin-right: 0;
+ margin-left: 10px;
+ }
+</style>
diff --git a/src/pages/messages_src/main.js b/src/pages/messages_src/main.js
new file mode 100644
index 00000000..c4012f4a
--- /dev/null
+++ b/src/pages/messages_src/main.js
@@ -0,0 +1,7 @@
+import App from "./App.svelte"
+
+const app = new App({
+ target: document.body,
+})
+
+export default app
diff --git a/src/pages/messages_src/stores.js b/src/pages/messages_src/stores.js
new file mode 100644
index 00000000..782f6064
--- /dev/null
+++ b/src/pages/messages_src/stores.js
@@ -0,0 +1,5 @@
+import { writable } from "svelte/store"
+
+export const options = writable(null)
+export const config = writable(null)
+export const page = writable("general")
diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index 565aacef..1c4830bf 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -2,7 +2,7 @@
const browser = window.browser || window.chrome
import General from "./General/General.svelte"
- import url from './url'
+ import url from "./url"
import utils from "../../assets/javascripts/utils.js"
import { onDestroy } from "svelte"
import servicesHelper from "../../assets/javascripts/services.js"
@@ -37,51 +37,15 @@
config.set(await utils.getConfig())
})
- const dark = {
- text: "#fff",
- bgMain: "#121212",
- bgSecondary: "#202020",
- active: "#fbc117",
- danger: "#f04141",
- lightGrey: "#c3c3c3",
- }
- const light = {
- text: "black",
- bgMain: "white",
- bgSecondary: "#e4e4e4",
- active: "#fb9817",
- danger: "#f04141",
- lightGrey: "#c3c3c3",
- }
- let cssVariables
- $: if (_options) {
- if (_options.theme == "dark") {
- cssVariables = dark
- } else if (_options.theme == "light") {
- cssVariables = light
- } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
- cssVariables = dark
- } else {
- cssVariables = light
- }
- }
+ let style
+ $: if (_options) style = utils.style(_options, window)
const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr"
document.body.dir = dir
</script>
{#if _options && _config}
- <div
- class={dir}
- {dir}
- style="
- --text: {cssVariables.text};
- --bg-main: {cssVariables.bgMain};
- --bg-secondary: {cssVariables.bgSecondary};
- --active: {cssVariables.active};
- --danger: {cssVariables.danger};
- --light-grey: {cssVariables.lightGrey};"
- >
+ <div class={dir} {dir} {style}>
<Sidebar />
{#if !$url.hash || $url.hash == "#general"}
<General />
diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte
index 32425b80..4e5d1e7d 100644
--- a/src/pages/options_src/Services/Instances.svelte
+++ b/src/pages/options_src/Services/Instances.svelte
@@ -64,16 +64,9 @@
pingCache[instance] = colorTime(time)
}
}
- function randomInstances(n) {
- let instances = []
- for (let i = 0; i < n; i++) {
- instances.push(redirects[selectedFrontend]["clearnet"][Math.floor(Math.random() * allInstances.length)])
- }
- return instances
- }
async function autoPickInstance() {
- const instances = randomInstances(5)
+ const instances = utils.randomInstances(redirects[selectedFrontend]["clearnet"], 5)
const myInstancesCache = []
for (const instance of instances) {
pingCache[instance] = { color: "lightblue", value: "pinging..." }
@@ -81,9 +74,7 @@
pingCache[instance] = colorTime(time)
myInstancesCache.push([instance, time])
}
- myInstancesCache.sort(function (a, b) {
- return a[1] - b[1]
- })
+ myInstancesCache.sort((a, b) => a[1] - b[1])
_options[selectedFrontend].push(myInstancesCache[0][0])
options.set(_options)
diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
index 8f958a3e..f6699312 100644
--- a/src/pages/popup_src/App.svelte
+++ b/src/pages/popup_src/App.svelte
@@ -38,48 +38,12 @@
let _page
page.subscribe(val => (_page = val))
- const dark = {
- text: "#fff",
- bgMain: "#121212",
- bgSecondary: "#202020",
- active: "#fbc117",
- danger: "#f04141",
- lightGrey: "#c3c3c3",
- }
- const light = {
- text: "black",
- bgMain: "white",
- bgSecondary: "#e4e4e4",
- active: "#fb9817",
- danger: "#f04141",
- lightGrey: "#c3c3c3",
- }
- let cssVariables
- $: if (_options) {
- if (_options.theme == "dark") {
- cssVariables = dark
- } else if (_options.theme == "light") {
- cssVariables = light
- } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
- cssVariables = dark
- } else {
- cssVariables = light
- }
- }
+ let style
+ $: if (_options) style = utils.style(_options, window)
</script>
{#if _options && _config}
- <div
- class="main"
- dir="auto"
- style="
- --text: {cssVariables.text};
- --bg-main: {cssVariables.bgMain};
- --bg-secondary: {cssVariables.bgSecondary};
- --active: {cssVariables.active};
- --danger: {cssVariables.danger};
- --light-grey: {cssVariables.lightGrey};"
- >
+ <div class="main" dir="auto" {style}>
<Buttons />
</div>
{:else}
generated by cgit v1.3.1 (git 2.54.0) at 2026-05-31 11:34:51 +0000