@pickleball/expo-sdk 0.2.0 → 1.0.0

package/src/ui/primitives.tsx

@@ -0,0 +1,304 @@
+import React, { type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import type { CameraDeviceInfo } from "../engine";
+import { uiCopy, type UiLocale } from "./copy";
+import { activeLensId, lensShortLabel } from "./helpers";
+
+/**
+ * Khối dựng sẵn của màn hình camera / sheet cấu hình — export để app đối tác
+ * ghép thêm hàng của riêng mình vào footer sheet (Picklive Camera: "Nguồn",
+ * "Thoát kiosk") mà vẫn cùng một ngôn ngữ hình ảnh.
+ */
+
+export const uiColors = Object.freeze({
+  ink: "#0a0a0b",
+  text: "#ffffff",
+  textSecondary: "#e5e7eb",
+  textMuted: "#d1d5db",
+  textDim: "#9ca3af",
+  border: "#3f3f46",
+  panel: "rgba(15,15,19,0.93)",
+  chip: "rgba(0,0,0,0.55)",
+  chipStrong: "rgba(0,0,0,0.72)",
+  surface: "rgba(255,255,255,0.06)",
+  hairline: "rgba(255,255,255,0.08)",
+  good: "#4ade80",
+  ok: "#facc15",
+  low: "#f87171",
+});
+
+export function StatusPill({
+  label,
+  color,
+  style,
+}: {
+  label: string;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return (
+    <View style={[uiStyles.pill, { backgroundColor: color }, style]} accessibilityRole="text">
+      <Text style={uiStyles.pillText}>{label}</Text>
+    </View>
+  );
+}
+
+export function ControlRow({ label, children }: { label: string; children?: ReactNode }) {
+  return (
+    <View style={uiStyles.row}>
+      <Text style={uiStyles.rowLabel}>{label}</Text>
+      {children}
+    </View>
+  );
+}
+
+export function Note({ children }: { children: ReactNode }) {
+  return <Text style={uiStyles.note}>{children}</Text>;
+}
+
+export function ActionButton({
+  label,
+  onPress,
+  disabled,
+  accessibilityLabel,
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      disabled={disabled}
+      onPress={onPress}
+      style={[uiStyles.actionButton, disabled && uiStyles.disabled]}
+    >
+      <Text style={uiStyles.actionButtonText}>{label}</Text>
+    </Pressable>
+  );
+}
+
+/** Một dòng chọn camera — nhãn + id, vì nhãn máy thật hay trùng nhau. */
+export function CameraOption({
+  label,
+  hint,
+  active,
+  disabled,
+  onPress,
+}: {
+  label: string;
+  hint: string;
+  active: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: active, disabled: disabled === true }}
+      onPress={onPress}
+      disabled={disabled}
+      style={[uiStyles.cameraOption, active && uiStyles.cameraOptionActive]}
+    >
+      <Text style={[uiStyles.cameraOptionText, active && uiStyles.cameraOptionTextActive]}>
+        {label}
+      </Text>
+      <Text style={[uiStyles.cameraOptionHint, active && uiStyles.cameraOptionTextActive]}>
+        {hint}
+      </Text>
+    </Pressable>
+  );
+}
+
+export function Segmented<T extends number | string>({
+  options,
+  value,
+  disabled,
+  onChange,
+}: {
+  options: Array<{ value: T; label: string }>;
+  value: T;
+  disabled?: boolean;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <View style={[uiStyles.segmented, disabled && uiStyles.disabled]}>
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <Pressable
+            key={String(option.value)}
+            accessibilityRole="button"
+            accessibilityState={{ selected: active, disabled: disabled === true }}
+            disabled={disabled}
+            onPress={() => onChange(option.value)}
+            style={[uiStyles.segment, active && uiStyles.segmentActive]}
+          >
+            <Text style={[uiStyles.segmentText, active && uiStyles.segmentTextActive]}>
+              {option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export function PresetButton({
+  label,
+  active,
+  onPress,
+}: {
+  label: string;
+  active: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: active }}
+      onPress={onPress}
+      style={[uiStyles.preset, active && uiStyles.presetActive]}
+    >
+      <Text style={[uiStyles.presetText, active && uiStyles.presetTextActive]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+/** Hàng chọn ống kính: 0.5x / 1x / Tele (camera sau) + camera trước nếu có. */
+export function LensRow({
+  cameras,
+  selectedCameraId,
+  onSelect,
+  locale = "vi",
+}: {
+  cameras: CameraDeviceInfo[];
+  selectedCameraId: string | null;
+  onSelect: (deviceId: string) => void;
+  locale?: UiLocale;
+}) {
+  const backLenses = cameras.filter((camera) => camera.facing === "environment");
+  const frontLens = cameras.find((camera) => camera.facing === "front");
+  const active = activeLensId(cameras, selectedCameraId);
+  if (backLenses.length === 0 && !frontLens) return null;
+  return (
+    <View style={uiStyles.lensRow}>
+      {backLenses.map((camera) => {
+        const isActive = camera.deviceId === active;
+        return (
+          <Pressable
+            key={camera.deviceId}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isActive }}
+            onPress={() => onSelect(camera.deviceId)}
+            style={[uiStyles.lensButton, isActive && uiStyles.lensButtonActive]}
+          >
+            <Text style={[uiStyles.lensText, isActive && uiStyles.lensTextActive]}>
+              {lensShortLabel(camera.label)}
+            </Text>
+          </Pressable>
+        );
+      })}
+      {frontLens ? (
+        <Pressable
+          key={frontLens.deviceId}
+          accessibilityRole="button"
+          accessibilityState={{ selected: frontLens.deviceId === selectedCameraId }}
+          onPress={() => onSelect(frontLens.deviceId)}
+          style={[
+            uiStyles.lensButton,
+            frontLens.deviceId === selectedCameraId && uiStyles.lensButtonActive,
+          ]}
+        >
+          <Text
+            style={[
+              uiStyles.lensText,
+              frontLens.deviceId === selectedCameraId && uiStyles.lensTextActive,
+            ]}
+          >
+            {uiCopy[locale].lens.front}
+          </Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export const uiStyles = StyleSheet.create({
+  pill: { borderRadius: 999, paddingHorizontal: 10, paddingVertical: 5 },
+  pillText: {
+    color: uiColors.text,
+    fontWeight: "800",
+    fontSize: 11,
+    letterSpacing: 0.5,
+    fontVariant: ["tabular-nums"],
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 10,
+    minHeight: 32,
+  },
+  rowLabel: { color: uiColors.textSecondary, fontSize: 13, fontWeight: "600" },
+  note: { color: uiColors.textDim, fontSize: 11, lineHeight: 15 },
+  actionButton: {
+    borderRadius: 9,
+    backgroundColor: uiColors.surface,
+    borderWidth: 1,
+    borderColor: uiColors.border,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    alignSelf: "flex-start",
+  },
+  actionButtonText: { color: uiColors.textSecondary, fontSize: 12, fontWeight: "700" },
+  cameraOption: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    backgroundColor: uiColors.surface,
+    borderRadius: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  cameraOptionActive: { backgroundColor: uiColors.text },
+  cameraOptionText: { color: uiColors.textMuted, fontSize: 12, fontWeight: "700" },
+  cameraOptionHint: { color: uiColors.textDim, fontSize: 11, flexShrink: 1 },
+  cameraOptionTextActive: { color: uiColors.ink },
+  segmented: {
+    flexDirection: "row",
+    backgroundColor: uiColors.surface,
+    borderRadius: 999,
+    padding: 3,
+  },
+  segment: { borderRadius: 999, paddingHorizontal: 13, paddingVertical: 6 },
+  segmentActive: { backgroundColor: uiColors.text },
+  segmentText: { color: uiColors.textMuted, fontSize: 12, fontWeight: "700" },
+  segmentTextActive: { color: uiColors.ink },
+  disabled: { opacity: 0.4 },
+  presetRow: { flexDirection: "row", gap: 6, flexWrap: "wrap" },
+  preset: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: uiColors.border,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  presetActive: { backgroundColor: uiColors.text, borderColor: uiColors.text },
+  presetText: { color: uiColors.textMuted, fontSize: 12, fontWeight: "700" },
+  presetTextActive: { color: uiColors.ink },
+  lensRow: {
+    flexDirection: "row",
+    gap: 8,
+    backgroundColor: uiColors.chip,
+    borderRadius: 999,
+    padding: 4,
+  },
+  lensButton: { borderRadius: 999, paddingHorizontal: 14, paddingVertical: 7 },
+  lensButtonActive: { backgroundColor: uiColors.text },
+  lensText: { color: uiColors.textSecondary, fontSize: 13, fontWeight: "700" },
+  lensTextActive: { color: uiColors.ink },
+});

package/src/uplink-check.ts

@@ -0,0 +1,173 @@
+/**
+ * Đo tốc độ TẢI LÊN — chiều duy nhất quan trọng với máy phát RTMP (root cause
+ * các ca đứng hình field day là uplink hụt). Chuyển từ apps/device-streamer/
+ * src/net-check.ts; bảng bitrate giờ là nguồn duy nhất (adapter RTMP import lại).
+ *
+ * Đích đo mặc định speed.cloudflare.com/__up (edge gần VN/SG): đo "sức uplink
+ * của đường mạng", không phải đường tới đúng VPS ingest — nghẽn thực tế nằm ở
+ * last-mile WiFi/4G nên xấp xỉ tốt, và không phải mở endpoint nào trên hạ tầng.
+ */
+
+declare const require: (name: string) => any;
+
+/**
+ * Trần bitrate video theo mức chất lượng — trong khoảng TikTok khuyến nghị cho
+ * live (720p 3–6 Mbps, 1080p 6–9 Mbps). Thấp hơn là pickleball bể khối rất rõ.
+ */
+export const VIDEO_BITRATE_BPS: Readonly<Record<720 | 1080, number>> = Object.freeze({
+  720: 3_500_000,
+  1080: 6_000_000,
+});
+export const AUDIO_BITRATE_BPS = 128_000;
+
+export interface UplinkCheckOptions {
+  resolution: 720 | 1080;
+  /** Đích POST khối dữ liệu; mặc định Cloudflare speed test. */
+  uploadUrl?: string;
+  /** HEAD để đo RTT (VD ingest của bạn). Bỏ trống = không đo ping. */
+  pingUrl?: string;
+  fetch?: typeof globalThis.fetch;
+  /** Đo tối thiểu chừng này thời gian sau warmup (mặc định 6s). */
+  measureMs?: number;
+  /** Trần cho cả bài đo (mặc định 25s). */
+  totalTimeoutMs?: number;
+  /** Cỡ mỗi khối POST (mặc định 2 MiB). */
+  chunkBytes?: number;
+  /** Trần cho khối warmup (mặc định 10s) — quá là mạng "low", không phải lỗi đo. */
+  warmupTimeoutMs?: number;
+}
+
+export interface UplinkCheckResult {
+  uploadMbps: number;
+  /** RTT tới pingUrl, null nếu không đo/đo hỏng. */
+  pingMs: number | null;
+  /** Băng thông cần cho cấu hình (video trần + audio), Mbps. */
+  requiredMbps: number;
+  verdict: "good" | "ok" | "low";
+}
+
+export const DEFAULT_UPLOAD_URL = "https://speed.cloudflare.com/__up";
+const WARMUP_BYTES = 512 * 1024;
+
+export function requiredMbpsFor(settings: { resolution: 720 | 1080 }): number {
+  return (VIDEO_BITRATE_BPS[settings.resolution] + AUDIO_BITRATE_BPS) / 1_000_000;
+}
+
+/**
+ * Verdict theo tỉ lệ đo/cần: ≥1.8× là dư (chịu được dao động), ≥1.25× tạm đủ
+ * (AIMD sẽ phải hạ bitrate lúc mạng chùng), dưới đó là thiếu — hạ cấu hình
+ * hoặc đổi mạng trước khi lên sóng.
+ */
+export function verdictFor(uploadMbps: number, requiredMbps: number): UplinkCheckResult["verdict"] {
+  if (uploadMbps >= requiredMbps * 1.8) return "good";
+  if (uploadMbps >= requiredMbps * 1.25) return "ok";
+  return "low";
+}
+
+function chunk(bytes: number): Uint8Array<ArrayBuffer> {
+  const buffer = new Uint8Array(bytes);
+  // TLS mã hoá nên nội dung không cần ngẫu nhiên thật — điền mẫu cho rẻ CPU.
+  for (let i = 0; i < bytes; i += 977) buffer[i] = i & 0xff;
+  return buffer;
+}
+
+/**
+ * fetch của Expo (`expo/fetch`) nhận Uint8Array body — đường upload bytes đã
+ * chạy trên fleet; fetch RN mặc định không gửi được body nhị phân. Thiếu thì rơi
+ * về globalThis.fetch (test/Node).
+ */
+function resolveFetch(explicit?: typeof globalThis.fetch): typeof globalThis.fetch {
+  if (explicit) return explicit;
+  try {
+    const expoFetch = require("expo/fetch")?.fetch;
+    if (typeof expoFetch === "function") return expoFetch;
+  } catch {
+    // expo/fetch không có (Node) → fetch chuẩn.
+  }
+  return globalThis.fetch;
+}
+
+export async function runUplinkCheck(options: UplinkCheckOptions): Promise<UplinkCheckResult> {
+  const fetchImplementation = resolveFetch(options.fetch);
+  const uploadUrl = options.uploadUrl ?? DEFAULT_UPLOAD_URL;
+  const measureMs = options.measureMs ?? 6_000;
+  const totalTimeoutMs = options.totalTimeoutMs ?? 25_000;
+  const chunkBytes = options.chunkBytes ?? 2 * 1024 * 1024;
+
+  async function post(body: Uint8Array<ArrayBuffer>, timeoutMs: number): Promise<void> {
+    const abort = new AbortController();
+    const timer = setTimeout(() => abort.abort(), timeoutMs);
+    try {
+      const response = await fetchImplementation(uploadUrl, {
+        method: "POST",
+        body,
+        signal: abort.signal,
+      });
+      // Đọc cạn body để kết thúc trọn request trước khi bấm giờ cú kế.
+      await response.text().catch(() => undefined);
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+
+  async function measurePing(url: string): Promise<number | null> {
+    let best: number | null = null;
+    for (let i = 0; i < 3; i += 1) {
+      const abort = new AbortController();
+      const timer = setTimeout(() => abort.abort(), 4_000);
+      const started = Date.now();
+      try {
+        await fetchImplementation(url, { method: "HEAD", signal: abort.signal });
+        const elapsed = Date.now() - started;
+        if (best === null || elapsed < best) best = elapsed;
+      } catch {
+        // bỏ lượt hỏng — ping chỉ là số phụ, không chặn kết quả
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+    return best;
+  }
+
+  const deadline = Date.now() + totalTimeoutMs;
+  const requiredMbps = requiredMbpsFor(options);
+  const isAbort = (error: unknown) =>
+    (error as { name?: unknown } | null)?.name === "AbortError";
+
+  // Warmup nhỏ không tính giờ: nuốt TCP slow-start + bắt tay TLS. Quá 10s cho
+  // 512 KiB (< ~0,4 Mbps) là mạng KHÔNG ĐỦ — đó là kết quả đo, không phải lỗi
+  // đo: trả verdict "low" thay vì ném để UI hiện đúng cảnh báo.
+  const warmupBytes = Math.min(WARMUP_BYTES, chunkBytes);
+  const warmupStarted = Date.now();
+  try {
+    await post(chunk(warmupBytes), options.warmupTimeoutMs ?? 10_000);
+  } catch (error) {
+    if (!isAbort(error)) throw error;
+    const seconds = Math.max(1, (Date.now() - warmupStarted) / 1000);
+    const uploadMbps = (warmupBytes * 8) / seconds / 1_000_000;
+    return { uploadMbps, pingMs: null, requiredMbps, verdict: "low" };
+  }
+
+  const body = chunk(chunkBytes);
+  let sentBytes = 0;
+  const started = Date.now();
+  while (Date.now() - started < measureMs && Date.now() < deadline) {
+    try {
+      await post(body, Math.max(3_000, deadline - Date.now()));
+    } catch (error) {
+      // Hết trần thời gian giữa chừng: tính theo phần đã gửi trọn (đường mạng
+      // yếu tới mức này thì verdict chắc chắn là "low").
+      if (!isAbort(error)) throw error;
+      break;
+    }
+    sentBytes += body.byteLength;
+  }
+  const elapsedSeconds = Math.max((Date.now() - started) / 1000, 0.001);
+  const uploadMbps = (sentBytes * 8) / elapsedSeconds / 1_000_000;
+  return {
+    uploadMbps,
+    pingMs: options.pingUrl ? await measurePing(options.pingUrl) : null,
+    requiredMbps,
+    verdict: verdictFor(uploadMbps, requiredMbps),
+  };
+}