+ return
{data?.stop.name || config.stopName}
ridebus
{dateFormat.format(now)}
{!fresh && !settings.demo &&
{data ? `Нет свежих данных. Сохранённое расписание · обновлено в ${updateLabel}` : loading ? 'Подключаемся к RideBus…' : 'Не удалось загрузить расписание. Проверьте подключение.'}
}
- {scene === 'departures' &&
}
- {scene === 'info' &&
}
+ {scene === 'departures' &&
}
+ {scene === 'info' &&
}
{scene === 'ad' &&
РЕКЛАМА · ПРЕДПРОСМОТР {settings.adTitle} {settings.adText}
}
- {scene !== 'departures' &&
БЛИЖАЙШИЙ РЕЙС {departures[0] ? <>
{departures[0].destination}
:
Нет доступных рейсов }
}
-
+ {scene !== 'departures' && БЛИЖАЙШИЙ РЕЙС {first ? <>
{first.destination}
:
Нет доступных рейсов }
{notice}
}
- {settingsOpen && { setSettingsOpen(false); setStartedAt(Date.now()); }} onFullscreen={() => void toggleFullscreen()} onSave={value => { setSettings(value); saveSettings(value); setScene('departures'); setStartedAt(Date.now()); setSettingsOpen(false); showNotice('Настройки сохранены'); }} />}
+ {settingsOpen && { setSettingsOpen(false); setStartedAt(Date.now()); }} onFullscreen={() => void toggleFullscreen()} onSave={value => { setSettings(value); saveSettings(value); setScene('departures'); setInfoPage(0); setStartedAt(Date.now()); setSettingsOpen(false); showNotice('Настройки сохранены'); }} />}
;
}
diff --git a/src/FittedDestination.tsx b/src/FittedDestination.tsx
index f358ef5..1deae6b 100644
--- a/src/FittedDestination.tsx
+++ b/src/FittedDestination.tsx
@@ -7,9 +7,17 @@ export function FittedDestination({ text, rowHeight, as: Tag = 'h3' }: { text: s
useLayoutEffect(() => {
const element = heading.current, container = element?.parentElement;
if (!element || !container) return;
+ const context = document.createElement('canvas').getContext('2d');
const fit = () => {
element.style.fontSize = '';
- const base = parseFloat(getComputedStyle(element).fontSize);
+ const headingCss = getComputedStyle(element);
+ let base = parseFloat(headingCss.fontSize);
+ if (context && element.clientWidth > 0) {
+ context.font = `${headingCss.fontStyle} ${headingCss.fontWeight} ${headingCss.fontSize} ${headingCss.fontFamily}`;
+ const longestWord = Math.max(1, ...text.split(/\s+/).map(word => context.measureText(word).width));
+ base = Math.max(Math.min(16, base), Math.min(base, base * element.clientWidth / longestWord));
+ element.style.fontSize = `${base}px`;
+ }
const detailsHeight = Array.from(container.children).filter(child => child !== element).reduce((height, child) => {
const css = getComputedStyle(child);
return height + (css.display === 'none' || css.position === 'absolute' ? 0 : child.clientHeight + parseFloat(css.marginTop) + parseFloat(css.marginBottom));
diff --git a/src/ServiceWindow.tsx b/src/ServiceWindow.tsx
new file mode 100644
index 0000000..764293c
--- /dev/null
+++ b/src/ServiceWindow.tsx
@@ -0,0 +1,22 @@
+import { NumericText } from './NumericText';
+import { RouteBadge } from './RouteBadge';
+import type { Departure } from './types';
+
+export function ServiceWindow({ lastToday, firstTomorrow, available, tomorrowAvailable, loading, now }: {
+ lastToday: Departure | null; firstTomorrow: Departure | null; available: boolean;
+ tomorrowAvailable: boolean; loading: boolean; now: number;
+}) {
+ return <>
Первый и последний рейс
+ {available ?
+ {[
+ { label: 'Последний сегодня', departure: lastToday, empty: 'Сегодня рейсов нет', ended: Boolean(lastToday && Date.parse(lastToday.scheduledAt) + 60000 <= now) },
+ { label: 'Первый завтра', departure: firstTomorrow, empty: tomorrowAvailable ? 'Завтра рейсов нет' : 'Расписание на завтра недоступно', ended: false },
+ ].map(item =>
+
{item.label}{item.ended && время прошло }
+ {item.departure ? <>
+
{item.departure.destination}
+ :
{item.empty}
}
+
)}
+
:
{loading ? 'Загружаем полное расписание' : 'Полное расписание пока недоступно'}
}
+ ;
+}
diff --git a/src/SettingsPanel.tsx b/src/SettingsPanel.tsx
index 719f6b0..f5bd09a 100644
--- a/src/SettingsPanel.tsx
+++ b/src/SettingsPanel.tsx
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { ArrowDown, ArrowUp, Check, Fullscreen, Reset, Close } from './Icons';
import { schemesForTheme } from './lib/presentation.mjs';
+import { informationBlocks, informationOptions } from './lib/information';
import { useSettingsNavigation } from './useSettingsNavigation';
import type { BoardData, Config, Settings, Stop } from './types';
@@ -83,12 +84,21 @@ export function SettingsPanel({ settings, config, data, onSave, onClose, onFulls
Цветовая схема Акцент для {draft.theme === 'light' ? 'белого' : 'чёрного'} фона
{schemesForTheme(draft.theme).map(scheme => {scheme.name} У каждой темы своя контрастная палитра. Выбранные цвета сохраняются отдельно.
+
Читаемость
+ Профиль экрана update('displayProfile', event.target.value as Settings['displayProfile'])}>Телевизор Уличное табло
+ Расстояние просмотра update('viewingDistance', event.target.value as Settings['viewingDistance'])}>Близко Средне Далеко
+
Уличный профиль — крупнее текст и спокойнее анимация. Для просмотра издалека меньше рейсов показывается одновременно; остальные сменяются страницами.
Экраны и переходы
Главный экран, сек
Информация, сек
Следующие рейсы update('rowCount', Number(event.target.value))}>{[2,3,4,5,6].map(number => {number} )}
Удерживать главный экранКогда до рейса осталось не больше 2 минут Следующий рейс того же маршрутаВ том же направлении, под ближайшим отправлением Режим длительного ожиданияОт 90 минут — крупное время отправления вместо отсчёта Блоки информации
+ {informationOptions.map(block => {block.label} Экран информации появится только при предупреждениях о движении.
}