444 lines
16 KiB
TypeScript
444 lines
16 KiB
TypeScript
import {
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
type CSSProperties,
|
|
} from 'react';
|
|
import {
|
|
autoServer,
|
|
filterServers,
|
|
groupServers,
|
|
parseServerPingResults,
|
|
SERVER_RESULT_WINDOW,
|
|
} from './serverPickerModel.js';
|
|
import type { HarborServer } from '../../../shared/contracts/state.js';
|
|
|
|
type PickerServer = HarborServer & {
|
|
country?: string;
|
|
city?: string;
|
|
provider?: string;
|
|
};
|
|
|
|
const FAVORITES_KEY = 'harbor-server-favorites';
|
|
const RECENT_KEY = 'harbor-server-recent';
|
|
const AUTO_KEY = 'harbor-server-auto';
|
|
const INLINE_SERVER_ROWS = 8;
|
|
|
|
interface PingResult {
|
|
id?: string;
|
|
latency?: number | null;
|
|
ok?: boolean;
|
|
error?: unknown;
|
|
checkedAt?: string;
|
|
checking?: boolean;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
type PingState = Record<string, PingResult | undefined>;
|
|
|
|
function readList(key: string) {
|
|
try {
|
|
const value = JSON.parse(localStorage.getItem(key) || '[]');
|
|
return Array.isArray(value) ? value.map(String) : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function write(key: string, value: string | string[]) {
|
|
try {
|
|
localStorage.setItem(key, typeof value === 'string' ? value : JSON.stringify(value));
|
|
} catch {
|
|
// Preferences remain available for this session.
|
|
}
|
|
}
|
|
|
|
function readAuto(key: string) {
|
|
try {
|
|
return localStorage.getItem(key) === 'true';
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function serverHealthText(ping?: PingResult) {
|
|
if (ping?.error) return 'Проверка недоступна';
|
|
if (ping?.ok) return `${ping.latency} мс`;
|
|
return ping ? 'Недоступен' : null;
|
|
}
|
|
|
|
function ServerHealth({ ping, fallback }: { ping?: PingResult; fallback?: string }) {
|
|
const health = fallback || serverHealthText(ping);
|
|
if (!health && !ping?.checking) return null;
|
|
|
|
return <small
|
|
className={`client-server-health${ping?.checking ? ' is-checking' : ''}`}
|
|
title={ping?.checkedAt || undefined}
|
|
aria-label={ping?.checking ? 'Проверяем пинг' : health || undefined}
|
|
>
|
|
<span aria-hidden="true">{health}</span>
|
|
<svg className="client-server-health-checking" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
|
|
</svg>
|
|
</small>;
|
|
}
|
|
|
|
function ServerCheckButton({
|
|
checking,
|
|
disabled,
|
|
onClick,
|
|
}: {
|
|
checking: boolean;
|
|
disabled?: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
return <button
|
|
className={`client-server-check${checking ? ' is-checking' : ''}`}
|
|
type="button"
|
|
aria-label={checking ? 'Проверяем пинг серверов' : 'Проверить пинг серверов'}
|
|
disabled={checking || disabled}
|
|
onClick={onClick}
|
|
>
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
|
|
</svg>
|
|
<span className="client-server-check-label">{checking ? 'Проверяем пинг…' : 'Проверить пинг'}</span>
|
|
</button>;
|
|
}
|
|
|
|
function ServerRow({
|
|
server,
|
|
selected,
|
|
favorite,
|
|
ping,
|
|
disabled,
|
|
index,
|
|
onSelect,
|
|
onFavorite,
|
|
}: {
|
|
server: PickerServer;
|
|
selected: boolean;
|
|
favorite?: boolean;
|
|
ping?: PingResult;
|
|
disabled: boolean;
|
|
index: number;
|
|
onSelect: (id: string) => unknown;
|
|
onFavorite?: (id: string) => void;
|
|
}) {
|
|
const health = ping?.checking ? 'Проверяем пинг' : serverHealthText(ping);
|
|
|
|
return <div
|
|
className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}
|
|
style={{
|
|
'--server-index': Math.min(index, 7),
|
|
'--server-exit-delay': `${90 + Math.max(0, 4 - Math.min(index, 4)) * 45}ms`,
|
|
} as CSSProperties}
|
|
>
|
|
<button
|
|
className={`client-server${selected ? ' is-selected' : ''}`}
|
|
type="button"
|
|
disabled={disabled}
|
|
aria-pressed={selected}
|
|
aria-label={`${server.label}, ${server.host}:${server.port}${health ? `, ${health}` : ''}`}
|
|
onClick={() => onSelect(server.id)}
|
|
>
|
|
<strong>{server.label}</strong>
|
|
{(server.city || server.country) && <small>{[server.city, server.country].filter(Boolean).join(' · ')}</small>}
|
|
</button>
|
|
<div className="client-server-meta">
|
|
<ServerHealth ping={ping} />
|
|
{onFavorite && <button
|
|
className={`client-server-favorite${favorite ? ' is-active' : ''}`}
|
|
type="button"
|
|
aria-pressed={favorite}
|
|
aria-label={`${favorite ? 'Убрать из избранного' : 'Добавить в избранное'}: ${server.label}`}
|
|
onClick={() => onFavorite(server.id)}
|
|
>★</button>}
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
interface ServerPickerProps {
|
|
profileId: string;
|
|
pingServers: (profileId: string, ids: string[]) => Promise<unknown>;
|
|
servers: PickerServer[];
|
|
selectedServerId: string;
|
|
disabled: boolean;
|
|
prompt: boolean;
|
|
leaving: boolean;
|
|
revealVersion: number;
|
|
anchorServerId?: string;
|
|
onSelect: (id: string) => unknown;
|
|
}
|
|
|
|
export function ServerPicker({
|
|
profileId,
|
|
pingServers,
|
|
servers,
|
|
selectedServerId,
|
|
disabled,
|
|
prompt,
|
|
leaving,
|
|
revealVersion,
|
|
anchorServerId = '',
|
|
onSelect,
|
|
}: ServerPickerProps) {
|
|
const favoritesKey = `${FAVORITES_KEY}:${profileId}`;
|
|
const recentKey = `${RECENT_KEY}:${profileId}`;
|
|
const autoKey = `${AUTO_KEY}:${profileId}`;
|
|
const [query, setQuery] = useState('');
|
|
const [advanced, setAdvanced] = useState(false);
|
|
const [view, setView] = useState<'all' | 'favorites' | 'recent'>('all');
|
|
const [page, setPage] = useState(0);
|
|
const [favorites, setFavorites] = useState(() => readList(favoritesKey));
|
|
const [recent, setRecent] = useState(() => readList(recentKey));
|
|
const [autoActive, setAutoActive] = useState(() => readAuto(autoKey));
|
|
const [collapsed, setCollapsed] = useState<string[]>([]);
|
|
const [pings, setPings] = useState<PingState>({});
|
|
const [checking, setChecking] = useState(false);
|
|
const serverKey = servers.map(({ id }) => id).join('|');
|
|
|
|
useEffect(() => {
|
|
setPage(0);
|
|
}, [query, view, serverKey]);
|
|
|
|
const selected = servers.find(({ id }) => id === selectedServerId);
|
|
const filtered = useMemo<PickerServer[]>(() => {
|
|
const found = filterServers(servers, query) as PickerServer[];
|
|
if (view === 'favorites') return found.filter(({ id }) => favorites.includes(id));
|
|
if (view === 'recent') return recent.flatMap((id) => found.find((server) => server.id === id) || []);
|
|
return found;
|
|
}, [servers, query, view, favorites, recent]);
|
|
const results = filtered.filter(({ id }) => id !== selectedServerId && id !== anchorServerId);
|
|
const pageCount = Math.max(1, Math.ceil(results.length / SERVER_RESULT_WINDOW));
|
|
const visible = results.slice(page * SERVER_RESULT_WINDOW, (page + 1) * SERVER_RESULT_WINDOW);
|
|
const grouped = servers.length >= 10;
|
|
|
|
useEffect(() => {
|
|
setPage((current) => Math.min(current, pageCount - 1));
|
|
}, [pageCount]);
|
|
|
|
function toggleFavorite(id: string) {
|
|
setFavorites((current) => {
|
|
const next = current.includes(id) ? current.filter((item) => item !== id) : [id, ...current];
|
|
write(favoritesKey, next);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function select(id: string, automatic = false) {
|
|
setAutoActive(automatic);
|
|
write(autoKey, String(automatic));
|
|
if (!automatic) {
|
|
setRecent((current) => {
|
|
const next = [id, ...current.filter((item) => item !== id)].slice(0, 5);
|
|
write(recentKey, next);
|
|
return next;
|
|
});
|
|
}
|
|
onSelect(id);
|
|
}
|
|
|
|
async function checkVisible() {
|
|
const ids = [...new Set([selectedServerId, ...visible.map(({ id }) => id)].filter(Boolean))].slice(0, 30);
|
|
if (!ids.length) return;
|
|
const startedAt = performance.now();
|
|
setChecking(true);
|
|
setPings((current) => ({
|
|
...current,
|
|
...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: true }])),
|
|
}));
|
|
try {
|
|
const results = parseServerPingResults(await pingServers(profileId, ids)) as PingResult[];
|
|
setPings((current) => ({
|
|
...current,
|
|
...Object.fromEntries(results.map((result) => [result.id, { ...result, checking: true }])),
|
|
}));
|
|
} catch {
|
|
setPings((current) => ({
|
|
...current,
|
|
...Object.fromEntries(ids.map((id) => [id, {
|
|
error: true,
|
|
checking: true,
|
|
checkedAt: new Date().toISOString(),
|
|
}])),
|
|
}));
|
|
} finally {
|
|
const elapsed = performance.now() - startedAt;
|
|
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
const completeAt = reduced ? elapsed : Math.max(900, Math.ceil(elapsed / 900) * 900);
|
|
await new Promise((resolve) => setTimeout(resolve, Math.max(0, completeAt - elapsed)));
|
|
setPings((current) => ({
|
|
...current,
|
|
...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: false }])),
|
|
}));
|
|
setChecking(false);
|
|
}
|
|
}
|
|
|
|
if (servers.length === 1) {
|
|
return <section className="client-servers" aria-label="Выберите сервер">
|
|
{prompt && <span className="client-server-prompt">Выберите сервер</span>}
|
|
<div className="client-server-toolbar is-single">
|
|
<span className="client-server-toolbar-title">Список серверов</span>
|
|
<ServerCheckButton checking={checking} onClick={checkVisible} />
|
|
</div>
|
|
<div className="client-server-grid">
|
|
{servers[0].id !== anchorServerId && <ServerRow
|
|
server={servers[0]}
|
|
selected={servers[0].id === selectedServerId}
|
|
favorite={false}
|
|
ping={pings[servers[0].id]}
|
|
disabled={disabled}
|
|
index={0}
|
|
onSelect={onSelect}
|
|
/>}
|
|
</div>
|
|
</section>;
|
|
}
|
|
|
|
const renderRows = (items: PickerServer[], offset = 0) => items.map((server, index) => (
|
|
<ServerRow
|
|
key={server.id}
|
|
server={server}
|
|
selected={!autoActive && server.id === selectedServerId}
|
|
favorite={favorites.includes(server.id)}
|
|
ping={pings[server.id]}
|
|
disabled={disabled}
|
|
index={offset + index}
|
|
onSelect={select}
|
|
onFavorite={toggleFavorite}
|
|
/>
|
|
));
|
|
|
|
const simpleServers = [
|
|
...(selected && selected.id !== anchorServerId ? [selected] : []),
|
|
...servers.filter(({ id }) => id !== selectedServerId && id !== anchorServerId),
|
|
];
|
|
|
|
return <section className={`client-servers is-scalable${simpleServers.length <= INLINE_SERVER_ROWS ? ' is-short' : ''}`} aria-label="Выберите сервер">
|
|
{prompt && <span className="client-server-prompt">Выберите сервер</span>}
|
|
<div className="client-server-toolbar">
|
|
<span className="client-server-toolbar-title">Список серверов</span>
|
|
<ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
|
|
<button
|
|
className={`client-server-mode-toggle${advanced ? ' is-open' : ''}`}
|
|
type="button"
|
|
aria-expanded={advanced}
|
|
aria-label={advanced ? 'Скрыть поиск и фильтры' : 'Показать поиск и фильтры'}
|
|
onClick={() => setAdvanced((current) => !current)}
|
|
>
|
|
<span>Поиск и фильтры</span>
|
|
<svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="client-server-mode-panels">
|
|
<div
|
|
className={`client-server-mode-panel is-simple${advanced ? '' : ' is-open'}`}
|
|
aria-hidden={advanced}
|
|
inert={advanced ? true : undefined}
|
|
>
|
|
<div className="client-server-mode-panel-inner">
|
|
<div className={`client-server-scroll${leaving ? ' is-leaving' : ''}`} key={`simple:${revealVersion}`}>
|
|
<div className="client-server-grid">
|
|
{simpleServers.map((server, index) => <ServerRow
|
|
key={server.id}
|
|
server={server}
|
|
selected={server.id === selectedServerId}
|
|
ping={pings[server.id]}
|
|
disabled={disabled}
|
|
index={index}
|
|
onSelect={select}
|
|
/>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`client-server-mode-panel is-advanced${advanced ? ' is-open' : ''}`}
|
|
aria-hidden={!advanced}
|
|
inert={!advanced ? true : undefined}
|
|
>
|
|
<div className="client-server-mode-panel-inner">
|
|
<div className="client-server-tools">
|
|
<input
|
|
type="search"
|
|
value={query}
|
|
aria-label="Найти сервер"
|
|
placeholder="Поиск сервера"
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
/>
|
|
<div className="client-server-filters" aria-label="Фильтр серверов">
|
|
{([
|
|
['all', 'Все'],
|
|
['favorites', '★'],
|
|
['recent', 'Недавние'],
|
|
] as const).map(([id, label]) => <button
|
|
type="button"
|
|
className={view === id ? 'is-active' : ''}
|
|
aria-pressed={view === id}
|
|
key={id}
|
|
onClick={() => setView(id)}
|
|
>{label}</button>)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="client-server-pinned">
|
|
<button
|
|
className={`client-server-auto${autoActive ? ' is-selected' : ''}`}
|
|
type="button"
|
|
aria-pressed={autoActive}
|
|
disabled={disabled || !servers.length}
|
|
onClick={() => {
|
|
const automatic = autoServer(servers);
|
|
if (automatic) select(automatic.id, true);
|
|
}}
|
|
>
|
|
<strong>Auto</strong>
|
|
<ServerHealth
|
|
ping={autoActive ? pings[selectedServerId] : undefined}
|
|
fallback={autoActive ? undefined : 'Первый стабильный сервер'}
|
|
/>
|
|
</button>
|
|
{selected && selected.id !== anchorServerId && <ServerRow
|
|
server={selected}
|
|
selected
|
|
favorite={favorites.includes(selected.id)}
|
|
ping={pings[selected.id]}
|
|
disabled={disabled}
|
|
index={0}
|
|
onSelect={select}
|
|
onFavorite={toggleFavorite}
|
|
/>}
|
|
</div>
|
|
|
|
<div className={`client-server-scroll${leaving ? ' is-leaving' : ''}`} key={`advanced:${revealVersion}`}>
|
|
{!visible.length && <p className="client-server-empty">Серверы не найдены</p>}
|
|
{grouped ? groupServers(visible).map(([group, items]) => {
|
|
const isCollapsed = collapsed.includes(group);
|
|
return <section className="client-server-group" key={group}>
|
|
<button
|
|
className="client-server-group-toggle"
|
|
type="button"
|
|
aria-expanded={!isCollapsed}
|
|
onClick={() => setCollapsed((current) => current.includes(group)
|
|
? current.filter((item) => item !== group)
|
|
: [...current, group])}
|
|
>{group} <small>{items.length}</small></button>
|
|
{!isCollapsed && <div className="client-server-grid">{renderRows(items)}</div>}
|
|
</section>;
|
|
}) : <div className="client-server-grid">{renderRows(visible)}</div>}
|
|
{pageCount > 1 && <nav className="client-server-pages" aria-label="Страницы серверов">
|
|
<button className="client-server-more" type="button" disabled={page === 0} onClick={() => setPage((current) => current - 1)}>Назад</button>
|
|
<span>{page + 1} / {pageCount}</span>
|
|
<button className="client-server-more" type="button" disabled={page + 1 === pageCount} onClick={() => setPage((current) => current + 1)}>Дальше</button>
|
|
</nav>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>;
|
|
}
|