diff --git a/src/components/ConnectionsModal.tsx b/src/components/ConnectionsTableOrderingModal.tsx similarity index 100% rename from src/components/ConnectionsModal.tsx rename to src/components/ConnectionsTableOrderingModal.tsx diff --git a/src/components/Delay.tsx b/src/components/Latency.tsx similarity index 56% rename from src/components/Delay.tsx rename to src/components/Latency.tsx index 79704ba9..4341e678 100644 --- a/src/components/Delay.tsx +++ b/src/components/Latency.tsx @@ -1,8 +1,8 @@ import { Show, createEffect, createMemo, createSignal } from 'solid-js' -import { DELAY } from '~/constants' -import { useProxies } from '~/signals' +import { LATENCY_QUALITY_MAP_HTTP } from '~/constants' +import { latencyQualityMap, useProxies } from '~/signals' -export const Delay = (props: { name?: string }) => { +export const Latency = (props: { name?: string }) => { const { delayMap } = useProxies() const [textClassName, setTextClassName] = createSignal('') const delay = createMemo(() => { @@ -12,9 +12,9 @@ export const Delay = (props: { name?: string }) => { createEffect(() => { setTextClassName('text-success') - if (delay() > DELAY.HIGH) { + if (delay() > latencyQualityMap().HIGH) { setTextClassName('text-error') - } else if (delay() > DELAY.MEDIUM) { + } else if (delay() > latencyQualityMap().MEDIUM) { setTextClassName('text-warning') } }) @@ -22,7 +22,10 @@ export const Delay = (props: { name?: string }) => { return ( <> {delay()}ms diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx index a202a35e..8303c7d0 100644 --- a/src/components/ProxyNodeCard.tsx +++ b/src/components/ProxyNodeCard.tsx @@ -1,6 +1,6 @@ import { createMemo } from 'solid-js' import { twMerge } from 'tailwind-merge' -import { Delay } from '~/components' +import { Latency } from '~/components' import { useProxies } from '~/signals' export default (props: { @@ -44,7 +44,7 @@ export default (props: { {proxyNode()?.udp && ' :: udp'}
- +
diff --git a/src/components/ProxyPreviewBar.tsx b/src/components/ProxyPreviewBar.tsx index b0ddfa60..aff07a4b 100644 --- a/src/components/ProxyPreviewBar.tsx +++ b/src/components/ProxyPreviewBar.tsx @@ -1,7 +1,6 @@ import { createMemo } from 'solid-js' -import { Delay } from '~/components' -import { DELAY } from '~/constants' -import { useProxies } from '~/signals' +import { Latency } from '~/components' +import { latencyQualityMap, useProxies } from '~/signals' export const ProxyPreviewBar = (props: { proxyNameList: string[] @@ -15,21 +14,29 @@ export const ProxyPreviewBar = (props: { const good = createMemo( () => delayList().filter( - (delay) => delay > DELAY.NOT_CONNECTED && delay <= DELAY.MEDIUM, + (delay) => + delay > latencyQualityMap().NOT_CONNECTED && + delay <= latencyQualityMap().MEDIUM, ).length, ) const middle = createMemo( () => - delayList().filter((delay) => delay > DELAY.MEDIUM && delay <= DELAY.HIGH) - .length, + delayList().filter( + (delay) => + delay > latencyQualityMap().NOT_CONNECTED && + delay <= latencyQualityMap().HIGH, + ).length, ) const slow = createMemo( - () => delayList().filter((delay) => delay > DELAY.HIGH).length, + () => + delayList().filter((delay) => delay > latencyQualityMap().HIGH).length, ) const notConnected = createMemo( () => delayList().filter( - (delay) => delay === DELAY.NOT_CONNECTED || typeof delay !== 'number', + (delay) => + delay === latencyQualityMap().NOT_CONNECTED || + typeof delay !== 'number', ).length, ) @@ -62,7 +69,7 @@ export const ProxyPreviewBar = (props: { >
- +
) diff --git a/src/components/ProxyPreviewDots.tsx b/src/components/ProxyPreviewDots.tsx index 1e8ac861..f509f92f 100644 --- a/src/components/ProxyPreviewDots.tsx +++ b/src/components/ProxyPreviewDots.tsx @@ -1,20 +1,27 @@ import { For } from 'solid-js' import { twMerge } from 'tailwind-merge' -import { DELAY } from '~/constants' -import { useProxies } from '~/signals' +import { + LATENCY_QUALITY_MAP_HTTP, + LATENCY_QUALITY_MAP_HTTPS, +} from '~/constants' +import { isLatencyTestByHttps, useProxies } from '~/signals' const DelayDots = (p: { delay: number | undefined; selected: boolean }) => { + const delayMap = isLatencyTestByHttps() + ? LATENCY_QUALITY_MAP_HTTP + : LATENCY_QUALITY_MAP_HTTPS + let dotClassName = p.selected ? 'bg-white border-4 border-success' : 'bg-success' - if (typeof p.delay !== 'number' || p.delay === DELAY.NOT_CONNECTED) { + if (typeof p.delay !== 'number' || p.delay === delayMap.NOT_CONNECTED) { dotClassName = p.selected ? 'bg-white border-4 border-neutral' : 'bg-neutral' - } else if (p.delay > DELAY.HIGH) { + } else if (p.delay > delayMap.HIGH) { dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error' - } else if (p.delay > DELAY.MEDIUM) { + } else if (p.delay > delayMap.MEDIUM) { dotClassName = p.selected ? 'bg-white border-4 border-warning' : 'bg-warning' diff --git a/src/components/index.ts b/src/components/index.ts index 1916d217..ff30046a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,9 +1,9 @@ export * from './Button' export * from './Collpase' -export * from './ConnectionsModal' -export * from './Delay' +export * from './ConnectionsTableOrderingModal' export * from './ForTwoColumns' export * from './Header' +export * from './Latency' export * from './ProxyCardGroups' export * from './ProxyNodeCard' export * from './ProxyNodePreview' diff --git a/src/constants/index.ts b/src/constants/index.ts index 5bb3c21d..3a63284f 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -40,12 +40,18 @@ export enum ROUTES { Config = '/config', } -export enum DELAY { +export enum LATENCY_QUALITY_MAP_HTTP { NOT_CONNECTED = 0, MEDIUM = 200, HIGH = 500, } +export enum LATENCY_QUALITY_MAP_HTTPS { + NOT_CONNECTED = 0, + MEDIUM = 800, + HIGH = 1500, +} + export enum PROXIES_PREVIEW_TYPE { OFF = 'off', DOTS = 'dots', diff --git a/src/signals/config.ts b/src/signals/config.ts index 9b56f49c..0dd0e23f 100644 --- a/src/signals/config.ts +++ b/src/signals/config.ts @@ -1,6 +1,11 @@ import { makePersisted } from '@solid-primitives/storage' import { createSignal } from 'solid-js' -import { PROXIES_PREVIEW_TYPE, PROXIES_SORTING_TYPE } from '~/constants' +import { + LATENCY_QUALITY_MAP_HTTP, + LATENCY_QUALITY_MAP_HTTPS, + PROXIES_PREVIEW_TYPE, + PROXIES_SORTING_TYPE, +} from '~/constants' import { setCurTheme } from '~/signals' export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted( @@ -36,6 +41,11 @@ export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted( { name: 'renderInTwoColumn', storage: localStorage }, ) +export const isLatencyTestByHttps = () => urlForDelayTest().startsWith('https') + +export const latencyQualityMap = () => + isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP + const setTheme = (isDark: boolean) => { if (autoSwitchTheme()) { if (isDark) {