@ohmykreee/dsh-remote-control 0.0.0-stage → 1.0.2

package/src/svelte/App.svelte

@@ -0,0 +1,385 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import WifiOff from '@lucide/svelte/icons/wifi-off';
+  import { app, exposeState, restoreUrl, startLive, startTicks, stopLive, toast } from './lib/state.svelte';
+  import { DEFAULT_ORDER, enabledOrder, normalizeOrder } from './lib/pages';
+  import { pageLabel, t } from './lib/i18n.svelte';
+  import type { PageKey } from './lib/types';
+  import { refreshLive } from './lib/ws';
+  import { tabAlert } from './lib/timer-alarm.svelte';
+  import HomePage from './lib/components/HomePage.svelte';
+  import MusicPage from './lib/components/MusicPage.svelte';
+  import PerformancePage from './lib/components/PerformancePage.svelte';
+  import QuestionSheet from './lib/components/QuestionSheet.svelte';
+  import Rail from './lib/components/Rail.svelte';
+  import SessionsPage from './lib/components/SessionsPage.svelte';
+  import Toast from './lib/components/Toast.svelte';
+
+  interface DisplayPage {
+    key: PageKey;
+    clone: 'first' | 'last' | null;
+    uid: string;
+  }
+
+  const order = $derived(enabledOrder(normalizeOrder(app.pageOrder), app.pageEnabled));
+  const questionCount = $derived(app.sessions.filter((session) => session.status === 'question').length);
+  const errorCount = $derived(app.sessions.filter((session) => session.status === 'error').length);
+
+  const displayPages = $derived.by<DisplayPage[]>(() => {
+    const pages: DisplayPage[] = order.map((key) => ({ key, clone: null, uid: `real-${key}` }));
+    if (order.length < 2) return pages;
+    return [
+      { key: order[order.length - 1], clone: 'last', uid: `clone-last-${order[order.length - 1]}` },
+      ...pages,
+      { key: order[0], clone: 'first', uid: `clone-first-${order[0]}` },
+    ];
+  });
+
+  let pager: HTMLElement | undefined = $state();
+  let jumpTimer: ReturnType<typeof setTimeout> | null = null;
+  let suppressScrollUntil = 0;
+  let appliedOrderSignature = '';
+  let revisionSeen = 0;
+  let scrollFrame = 0;
+
+  const params = new URLSearchParams(location.search);
+  const pageParam = params.get('page');
+  if (pageParam && DEFAULT_ORDER.includes(pageParam as PageKey)) app.initialKey = pageParam as PageKey;
+
+  function pageOffset(): number {
+    return order.length > 1 ? 1 : 0;
+  }
+
+  function scrollToKey(key: PageKey, smooth = false): void {
+    if (!pager) return;
+    const index = order.indexOf(key);
+    if (index < 0) return;
+    const left = (index + pageOffset()) * pager.clientWidth;
+    if (smooth) {
+      pager.scrollTo({ left, behavior: 'smooth' });
+      return;
+    }
+    pager.scrollLeft = left;
+    requestAnimationFrame(() => {
+      if (pager) pager.scrollLeft = left;
+    });
+  }
+
+  function goTo(key: PageKey, smooth = true): void {
+    if (!order.includes(key)) return;
+    app.hasNavigated = true;
+    app.activeKey = key;
+    suppressScrollUntil = Date.now() + (smooth ? 620 : 120);
+    if (jumpTimer) {
+      clearTimeout(jumpTimer);
+      jumpTimer = null;
+    }
+    scrollToKey(key, smooth);
+  }
+
+  function applyPageOrder(): void {
+    if (revisionSeen === 0) return;
+    const signature = order.join('|');
+    const same = signature === appliedOrderSignature;
+    const previousKey = app.activeKey;
+    const initialKey = app.initialKey && order.includes(app.initialKey) ? app.initialKey : null;
+    const wanted: PageKey = initialKey ?? (!app.hasNavigated ? order[0] : order.includes(previousKey) ? previousKey : order[0]);
+    app.initialKey = null;
+    app.hasNavigated = true;
+    app.activeKey = wanted;
+    appliedOrderSignature = signature;
+    if (initialKey || !same || wanted !== previousKey) {
+      suppressScrollUntil = Date.now() + 220;
+      scrollToKey(wanted, false);
+    }
+  }
+
+  $effect(() => {
+    const revision = app.pageRevision;
+    if (revision === revisionSeen) return;
+    revisionSeen = revision;
+    applyPageOrder();
+  });
+
+  $effect(() => {
+    document.body.dataset.theme = app.theme;
+    document.body.dataset.page = app.activeKey;
+    document.documentElement.classList.toggle('dark', app.theme === 'dark');
+    document.documentElement.classList.toggle('light', app.theme === 'light');
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', app.theme === 'light' ? '#eef2f8' : '#151a23');
+  });
+
+  function scheduleEdgeJump(jumpTo: number, count: number): void {
+    if (jumpTimer) clearTimeout(jumpTimer);
+    jumpTimer = setTimeout(() => {
+      jumpTimer = null;
+      if (!pager) return;
+      const raw = Math.round(pager.scrollLeft / Math.max(1, pager.clientWidth));
+      const stillAtEdge = jumpTo === count ? raw <= 0 : raw >= count + 1;
+      if (!stillAtEdge) return;
+      pager.style.scrollSnapType = 'none';
+      suppressScrollUntil = Date.now() + 220;
+      pager.scrollLeft = jumpTo * pager.clientWidth;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          if (pager) pager.style.scrollSnapType = '';
+        });
+      });
+    }, 150);
+  }
+
+  function handleScroll(): void {
+    if (!pager) return;
+    cancelAnimationFrame(scrollFrame);
+    scrollFrame = requestAnimationFrame(() => {
+      if (!pager || Date.now() < suppressScrollUntil) return;
+      const count = order.length;
+      const raw = Math.round(pager.scrollLeft / Math.max(1, pager.clientWidth));
+      let key: PageKey | null = null;
+      let jumpTo: number | null = null;
+      if (count < 2) {
+        key = order[0];
+      } else if (raw <= 0) {
+        key = order[count - 1];
+        jumpTo = count;
+      } else if (raw >= count + 1) {
+        key = order[0];
+        jumpTo = 1;
+      } else {
+        key = order[raw - 1] ?? null;
+      }
+      if (key && key !== app.activeKey) {
+        app.activeKey = key;
+        app.hasNavigated = true;
+      }
+      if (jumpTo !== null) scheduleEdgeJump(jumpTo, count);
+      else if (jumpTimer) {
+        clearTimeout(jumpTimer);
+        jumpTimer = null;
+      }
+    });
+  }
+
+  function handleResize(): void {
+    if (!pager) return;
+    suppressScrollUntil = Date.now() + 160;
+    pager.scrollLeft = (order.indexOf(app.activeKey) + pageOffset()) * pager.clientWidth;
+  }
+
+  type FullscreenDocument = Document & {
+    webkitFullscreenElement?: Element | null;
+    webkitExitFullscreen?: () => Promise<void> | void;
+  };
+  type FullscreenElement = HTMLElement & {
+    webkitRequestFullscreen?: () => Promise<void> | void;
+  };
+
+  function isFullscreen(): boolean {
+    return Boolean(document.fullscreenElement || (document as FullscreenDocument).webkitFullscreenElement);
+  }
+
+  function updateFullscreen(): void {
+    app.fullscreen = isFullscreen();
+  }
+
+  async function toggleFullscreen(): Promise<void> {
+    try {
+      if (isFullscreen()) {
+        const doc = document as FullscreenDocument;
+        if (document.exitFullscreen) await document.exitFullscreen();
+        else if (doc.webkitExitFullscreen) await doc.webkitExitFullscreen();
+      } else {
+        const root = document.documentElement as FullscreenElement;
+        if (root.requestFullscreen) await root.requestFullscreen();
+        else if (root.webkitRequestFullscreen) await root.webkitRequestFullscreen();
+        else toast(t('fullscreenUnsupported'));
+      }
+    } catch {
+      toast(t('fullscreenDenied'));
+    }
+    setTimeout(updateFullscreen, 120);
+  }
+
+  function handleVisibility(): void {
+    if (!document.hidden) refreshLive();
+  }
+
+  function handleRefresh(): void {
+    refreshLive();
+    toast(t('refreshing'));
+  }
+
+  onMount(() => {
+    const stopTicks = startTicks();
+    const initial = app.initialKey && order.includes(app.initialKey) ? app.initialKey : order[0];
+    app.activeKey = initial;
+    appliedOrderSignature = order.join('|');
+    void tick().then(() => scrollToKey(initial, false));
+    startLive();
+    exposeState();
+    restoreUrl();
+    updateFullscreen();
+
+    document.addEventListener('fullscreenchange', updateFullscreen);
+    document.addEventListener('webkitfullscreenchange' as 'fullscreenchange', updateFullscreen);
+    document.addEventListener('visibilitychange', handleVisibility);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      stopTicks();
+      stopLive();
+      if (jumpTimer) clearTimeout(jumpTimer);
+      cancelAnimationFrame(scrollFrame);
+      document.removeEventListener('fullscreenchange', updateFullscreen);
+      document.removeEventListener('webkitfullscreenchange' as 'fullscreenchange', updateFullscreen);
+      document.removeEventListener('visibilitychange', handleVisibility);
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+</script>
+
+<div class="app-shell nav-{app.navPosition}">
+  <Rail
+    {order}
+    activeKey={app.activeKey}
+    {questionCount}
+    {errorCount}
+    timerAlert={tabAlert.active}
+    onNavigate={goTo}
+    onFullscreen={toggleFullscreen}
+    onRefresh={handleRefresh}
+  />
+
+  <main class="pager" bind:this={pager} onscroll={handleScroll}>
+    {#each displayPages as item (item.uid)}
+      <section
+        class="page page-{item.key}"
+        class:page-clone={item.clone !== null}
+        data-page-key={item.clone ? (item.clone === 'first' ? '__first-clone' : '__last-clone') : item.key}
+        data-source-key={item.clone ? item.key : undefined}
+        aria-label={pageLabel(item.key)}
+        aria-hidden={item.clone ? 'true' : undefined}
+      >
+        {#if item.key === 'home'}
+          <HomePage />
+        {:else if item.key === 'sessions'}
+          <SessionsPage />
+        {:else if item.key === 'music'}
+          <MusicPage />
+        {:else if item.key === 'performance'}
+          <PerformancePage />
+        {/if}
+      </section>
+    {/each}
+  </main>
+</div>
+
+{#if app.online === false}
+  <div class="offline" role="status">
+    <WifiOff class="size-3.5" strokeWidth={1.8} />
+    <span>{t('offline')}</span>
+  </div>
+{/if}
+
+<Toast />
+<QuestionSheet />
+
+<style>
+.app-shell {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 14px;
+  padding: 14px;
+  background: transparent;
+}
+
+/* Navigation placement: the rail itself is styled from Rail.svelte. */
+.app-shell.nav-right {
+  flex-direction: row-reverse;
+}
+
+.app-shell.nav-top {
+  flex-direction: column;
+}
+
+.app-shell.nav-bottom {
+  flex-direction: column-reverse;
+}
+
+.app-shell.nav-top .pager,
+.app-shell.nav-bottom .pager {
+  height: auto;
+  min-height: 0;
+}
+
+.pager {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: auto;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+
+.pager::-webkit-scrollbar {
+  display: none;
+}
+
+.page {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  scroll-snap-align: start;
+  /* One gesture can advance at most one page, no matter how fast the fling. */
+  scroll-snap-stop: always;
+}
+
+.page-music {
+  isolation: isolate;
+}
+
+.offline {
+  position: fixed;
+  z-index: 50;
+  top: 20px;
+  left: 50%;
+  display: inline-flex;
+  transform: translateX(-50%);
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
+  background: color-mix(in srgb, var(--card) 92%, transparent);
+  color: var(--danger);
+  font-size: 15px;
+  font-weight: 600;
+  box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
+  backdrop-filter: blur(16px);
+}
+
+@media (max-height: 760px) {
+  .app-shell {
+    gap: 10px;
+    padding: 10px;
+  }
+}
+
+@media (orientation: portrait) {
+  .app-shell {
+    gap: 10px;
+    padding: 10px;
+  }
+  .page {
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+}
+</style>

package/src/svelte/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1">
+  <meta name="theme-color" content="#151a23">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="DSH Home">
+  <title>DSH Home</title>
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+</head>
+<body data-theme="dark">
+  <div id="app"></div>
+  <script type="module" src="/main.ts"></script>
+</body>
+</html>

package/src/svelte/lib/billing.svelte.ts

@@ -0,0 +1,228 @@
+/**
+ * Peak/off-peak tariff indicator for the console balance card.
+ *
+ * The console decides this in the browser: weekdays in 09:00–12:00 and
+ * 14:00–18:00 Beijing time are peak; everything else — including weekends and
+ * statutory holidays all day — is off-peak.
+ *
+ * Holiday dates come exclusively from the timor.tech API, fetched by this
+ * browser. There is deliberately no local holiday calendar: holiday policy can
+ * change, so the API is the only authority. If it is unreachable the indicator
+ * still follows the time/weekend rules, using only cached API data if present.
+ */
+
+export type TariffPeriod = 'peak' | 'offpeak';
+
+const BEIJING_TIME_ZONE = 'Asia/Shanghai';
+const HOLIDAY_API = 'https://timor.tech/api/holiday/year';
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+const RETRY_MS = 10 * 60 * 1000;
+
+export interface HolidayState {
+  year: number;
+  status: 'idle' | 'loading' | 'ready' | 'stale' | 'error';
+  days: Record<string, true>;
+  source: string;
+  version: number;
+}
+
+export const holidayState = $state<HolidayState>({
+  year: 0,
+  status: 'idle',
+  days: {},
+  source: '',
+  version: 0,
+});
+
+interface BeijingParts {
+  year: number;
+  month: number;
+  day: number;
+  hour: number;
+  minute: number;
+  weekday: number;
+}
+
+let dateTimeFormatter: Intl.DateTimeFormat | null = null;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function getFormatter(): Intl.DateTimeFormat {
+  dateTimeFormatter ??= new Intl.DateTimeFormat('en-US', {
+    timeZone: BEIJING_TIME_ZONE,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    weekday: 'short',
+    hourCycle: 'h23',
+  });
+  return dateTimeFormatter;
+}
+
+const WEEKDAY_INDEX: Record<string, number> = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 };
+
+export function beijingParts(now: Date = new Date()): BeijingParts {
+  const parts = getFormatter().formatToParts(now);
+  const get = (type: Intl.DateTimeFormatPartTypes): string => parts.find((part) => part.type === type)?.value || '';
+  return {
+    year: Number(get('year')),
+    month: Number(get('month')),
+    day: Number(get('day')),
+    hour: Number(get('hour')),
+    minute: Number(get('minute')),
+    weekday: WEEKDAY_INDEX[get('weekday')] ?? 0,
+  };
+}
+
+export function beijingDateKey(now: Date = new Date()): string {
+  const parts = beijingParts(now);
+  return `${parts.year}-${String(parts.month).padStart(2, '0')}-${String(parts.day).padStart(2, '0')}`;
+}
+
+export function beijingYear(now: Date = new Date()): number {
+  return beijingParts(now).year;
+}
+
+/** Only API-provided holiday data is authoritative; unknown days are not holidays. */
+export function isStatutoryHoliday(now: Date = new Date()): boolean {
+  const year = beijingYear(now);
+  if (holidayState.year !== year) return false;
+  if (holidayState.status !== 'ready' && holidayState.status !== 'stale') return false;
+  return Boolean(holidayState.days[beijingDateKey(now)]);
+}
+
+/** Peak only on a non-holiday weekday inside the two Beijing price windows. */
+export function tariffPeriod(now: Date = new Date()): TariffPeriod {
+  const parts = beijingParts(now);
+  if (parts.weekday === 0 || parts.weekday === 6) return 'offpeak';
+  if (isStatutoryHoliday(now)) return 'offpeak';
+  const minutes = parts.hour * 60 + parts.minute;
+  return (minutes >= 9 * 60 && minutes < 12 * 60) || (minutes >= 14 * 60 && minutes < 18 * 60) ? 'peak' : 'offpeak';
+}
+
+function storageKey(year: number): string {
+  return `dsh-rc-holiday-${year}`;
+}
+
+interface CachedHolidays {
+  at: number;
+  days: Set<string>;
+}
+
+function readCache(year: number): CachedHolidays | null {
+  try {
+    const raw = localStorage.getItem(storageKey(year));
+    if (!raw) return null;
+    const parsed: unknown = JSON.parse(raw);
+    if (!isRecord(parsed) || !Array.isArray(parsed.days) || typeof parsed.at !== 'number') return null;
+    const days = new Set(parsed.days.filter((day): day is string => typeof day === 'string'));
+    return days.size > 0 ? { at: parsed.at, days } : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeCache(year: number, days: Set<string>): void {
+  try {
+    localStorage.setItem(storageKey(year), JSON.stringify({ at: Date.now(), days: [...days] }));
+  } catch {
+    /* storage may be unavailable in private mode */
+  }
+}
+
+function markDays(year: number, days: Set<string>, status: HolidayState['status'], source: string): void {
+  holidayState.year = year;
+  holidayState.days = Object.fromEntries([...days].map((day) => [day, true] as const));
+  holidayState.status = status;
+  holidayState.source = source;
+  holidayState.version += 1;
+}
+
+function markUnavailable(year: number): void {
+  holidayState.year = year;
+  holidayState.days = {};
+  holidayState.status = 'error';
+  holidayState.source = '';
+  holidayState.version += 1;
+}
+
+const inflight = new Map<number, Promise<void>>();
+const failedAt = new Map<number, number>();
+
+/**
+ * Load one year of holiday data from the API in this browser. A successful
+ * response is cached for a day; a failed request retries later without
+ * inventing holiday dates locally.
+ */
+export function ensureHolidayYear(year: number): Promise<void> {
+  if (holidayState.year === year && holidayState.status === 'ready') return Promise.resolve();
+  if (holidayState.year === year && holidayState.status === 'error') {
+    const failed = failedAt.get(year) || 0;
+    if (Date.now() - failed < RETRY_MS) return Promise.resolve();
+  }
+  const cached = readCache(year);
+  if (cached && Date.now() - cached.at <= CACHE_TTL_MS) {
+    markDays(year, cached.days, 'ready', 'cache');
+    return Promise.resolve();
+  }
+  const running = inflight.get(year);
+  if (running) return running;
+
+  holidayState.year = year;
+  holidayState.status = 'loading';
+  holidayState.version += 1;
+
+  const task = (async (): Promise<void> => {
+    try {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 7000);
+      let response: Response;
+      try {
+        response = await fetch(`${HOLIDAY_API}/${year}/?type=Y&week=N`, {
+          signal: controller.signal,
+          headers: { accept: 'application/json' },
+          cache: 'no-store',
+        });
+      } finally {
+        clearTimeout(timer);
+      }
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const payload: unknown = await response.json();
+      const map = isRecord(payload) && isRecord(payload.holiday) ? payload.holiday : null;
+      if (!map) throw new Error('invalid holiday payload');
+      const days = new Set<string>();
+      for (const [key, value] of Object.entries(map)) {
+        if (isRecord(value) && value.holiday === true) days.add(`${year}-${key}`);
+      }
+      if (days.size === 0) throw new Error('empty holiday payload');
+      writeCache(year, days);
+      markDays(year, days, 'ready', 'timor.tech');
+    } catch {
+      failedAt.set(year, Date.now());
+      // An expired cache still contains API-provided dates; keep using it
+      // rather than guessing a holiday calendar locally.
+      const stale = readCache(year);
+      if (stale) markDays(year, stale.days, 'stale', 'cache');
+      else markUnavailable(year);
+    } finally {
+      inflight.delete(year);
+    }
+  })();
+  inflight.set(year, task);
+  return task;
+}
+
+if (typeof window !== 'undefined') {
+  (window as unknown as { __DSH_BILLING__?: unknown }).__DSH_BILLING__ = {
+    beijingDateKey,
+    beijingParts,
+    ensureHolidayYear,
+    holidayState,
+    isStatutoryHoliday,
+    tariffPeriod,
+  };
+}