@pickleball/expo-sdk 0.2.0 → 1.0.0

package/src/ui/camera-screen.tsx

@@ -0,0 +1,484 @@
+import React, { useState, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { PickleballAutoPrepare } from "../auto-resume";
+import { useCameraSettings, type CameraSettingsStore } from "../camera-settings";
+import { useLivestream } from "../provider";
+import { CameraControlsSheet, type CameraControlsSheetProps } from "./controls-sheet";
+import { uiCopy, type UiLocale } from "./copy";
+import {
+  formatElapsed,
+  isRtmpPreview,
+  shortSessionId,
+  statusPillFor,
+  type StatusPill as StatusPillValue,
+} from "./helpers";
+import { useAntiFlicker, useThermalDim } from "./hooks";
+import { RtmpPreview } from "./preview-view";
+import { LensRow, StatusPill, uiColors } from "./primitives";
+
+/**
+ * Màn hình camera dựng sẵn — bố cục của Picklive Camera (preview full-bleed,
+ * pill + tên/id phiên, hint, hàng lens, dòng info, •••, tối màn hình tiết kiệm
+ * nhiệt) cộng nút chính cho chế độ casual.
+ *
+ * Màn hình KHÔNG tự xin grant: casual thì `onGoLive` của app xin grant từ
+ * backend đối tác rồi gọi `live.start(input, {autoPublish:true})`; chế độ sân
+ * thì app arm bằng useStandbySession và trọng tài lật live qua match-start.
+ * Mọi ô chữ đều ghi đè được bằng prop để app fleet/đối tác chèn trạng thái
+ * của riêng mình (CHỜ GHÉP, tên máy, mã ghép…).
+ */
+
+export type CameraScreenMode = "casual" | "court";
+
+export interface CameraScreenSheetRenderProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export interface PickleballCameraScreenProps {
+  /** casual (mặc định): user bấm phát/dừng trên máy; court: đứng chờ lệnh server. */
+  mode?: CameraScreenMode;
+  /** Store cấu hình camera — nuôi dòng info + sheet ••• + chống chớp đèn. */
+  settings?: CameraSettingsStore;
+  /** Nút chính (Bắt đầu phát / Phát ngay / Dừng). Mặc định: bật ở casual, tắt ở court. */
+  showGoLiveButton?: boolean;
+  /** Casual, ở preview: app xin grant rồi start(autoPublish). Không có → ẩn nút ở preview. */
+  onGoLive?: () => void | Promise<void>;
+  /** Mặc định live.stop("user"). */
+  onStop?: () => void | Promise<void>;
+  /** Tiêu đề phiên (SDK không giữ tiêu đề trong snapshot). */
+  title?: string;
+  /** Nhãn sân cho hint chế độ court. */
+  courtLabel?: string;
+  /** Ghi đè pill (null = ẩn; undefined = mặc định theo state). */
+  statusPill?: StatusPillValue | null;
+  /** Ghi đè dòng hint (null = ẩn; undefined = mặc định theo state/mode). */
+  statusHint?: string | null;
+  /** Màu chấm trước hint (app fleet: xanh khi kênh điều khiển đã mở). */
+  statusHintDotColor?: string;
+  /** Góc trên phải, cạnh nút ••• (fleet: chip tên máy). */
+  renderTopRight?: () => ReactNode;
+  /** Dưới dòng info (fleet: badge OTA). */
+  renderBottom?: () => ReactNode;
+  /** Giữa màn hình (fleet: thẻ mã ghép). */
+  children?: ReactNode;
+  /**
+   * Sheet •••: false = không có nút; bỏ trống = CameraControlsSheet mặc định
+   * (cần `settings`); hàm = app dựng sheet của mình với {visible,onClose}.
+   */
+  controls?: false | ((sheet: CameraScreenSheetRenderProps) => ReactNode);
+  /** Props chuyển cho CameraControlsSheet mặc định (sections/uplink/footer/layout). */
+  controlsProps?: Omit<CameraControlsSheetProps, "visible" | "onClose" | "settings">;
+  /** Hàng chọn lens (mặc định bật). */
+  lensRow?: boolean;
+  /** Dòng info dưới lens (null = ẩn; mặc định "720p • 30 fps • H.264" từ settings). */
+  infoLine?: string | null;
+  /** Tự mở camera khi idle/ended (mặc định bật). Tắt nếu app tự lo (fleet có chế độ nghỉ). */
+  autoPrepare?: boolean;
+  captureOrientation?: "portrait" | "landscape";
+  /** Tối màn hình sau chừng này ms ở LIVE; null = tắt. Mặc định 30s. */
+  thermalDimAfterMs?: number | null;
+  /** Dòng phụ trên màn tối (fleet: tên máy). */
+  thermalDimCaption?: string;
+  locale?: UiLocale;
+  style?: StyleProp<ViewStyle>;
+}
+
+type MainAction = {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  tone: "go" | "stop" | "muted";
+};
+
+export function PickleballCameraScreen(props: PickleballCameraScreenProps) {
+  const {
+    mode = "casual",
+    settings,
+    onGoLive,
+    onStop,
+    title,
+    courtLabel,
+    renderTopRight,
+    renderBottom,
+    children,
+    controls,
+    controlsProps,
+    lensRow = true,
+    autoPrepare = true,
+    captureOrientation,
+    thermalDimAfterMs = 30_000,
+    thermalDimCaption,
+    style,
+  } = props;
+  const live = useLivestream();
+  const locale = props.locale ?? live.locale;
+  const copy = uiCopy[locale];
+  const config = useCameraSettings(settings ?? NO_SETTINGS);
+  useAntiFlicker(settings ? config.antiFlicker : undefined);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [confirmingStop, setConfirmingStop] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [thermalDimmed, setThermalDimmed] = useThermalDim(live.state, thermalDimAfterMs);
+
+  const showGoLiveButton = props.showGoLiveButton ?? mode === "casual";
+  const courtBound = mode === "court";
+  const paused = live.state === "standby" && live.elapsedMs > 0;
+
+  const pill =
+    props.statusPill === undefined
+      ? statusPillFor(live.state, { elapsedMs: live.elapsedMs, courtBound, locale })
+      : props.statusPill;
+  const pillLabel =
+    pill && live.state === "live" && props.statusPill === undefined
+      ? `${pill.label} ${formatElapsed(live.elapsedMs)}`
+      : pill?.label;
+
+  const hint = props.statusHint === undefined ? defaultHint() : props.statusHint;
+
+  function defaultHint(): string | null {
+    switch (live.state) {
+      case "preview":
+        return courtBound ? copy.hint.courtPreview : onGoLive ? copy.hint.casualPreview : null;
+      case "standby":
+        if (paused) return copy.hint.paused;
+        if (courtBound) {
+          return courtLabel ? copy.hint.courtStandby(courtLabel) : copy.hint.courtStandbyNoCourt;
+        }
+        return copy.hint.casualStandby;
+      case "connecting":
+        return copy.hint.connecting;
+      case "reconnecting":
+        return copy.hint.reconnecting;
+      case "ending":
+        return copy.hint.ending;
+      case "error":
+        return live.error ? copy.errors.remediation[live.error.code] : copy.hint.errorFallback;
+      default:
+        return null;
+    }
+  }
+  const errorTitle = live.error ? copy.errors.title[live.error.code] : null;
+
+  async function run(action: () => void | Promise<void>) {
+    setBusy(true);
+    try {
+      await action();
+    } catch {
+      // Lỗi đã vào snapshot (state "error" + message) — nút Thử lại lo tiếp.
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const mainAction = ((): MainAction | null => {
+    if (!showGoLiveButton) return null;
+    if (busy) return { label: copy.button.connecting, onPress: () => undefined, disabled: true, tone: "muted" };
+    switch (live.state) {
+      case "preview":
+        return onGoLive
+          ? { label: copy.button.goLive, onPress: () => void run(onGoLive), tone: "go" }
+          : null;
+      case "standby":
+        return {
+          label: paused ? copy.button.resume : copy.button.publishNow,
+          onPress: () => void run(() => live.startPublishing()),
+          tone: "go",
+        };
+      case "live":
+        return confirmingStop
+          ? {
+              label: copy.button.confirmStop,
+              onPress: () => {
+                setConfirmingStop(false);
+                void run(onStop ?? (() => live.stop("user")));
+              },
+              tone: "stop",
+            }
+          : { label: copy.button.stop, onPress: () => setConfirmingStop(true), tone: "stop" };
+      case "error":
+        return {
+          label: copy.button.retry,
+          onPress: () =>
+            void run(() => (live.sessionId ? live.retry() : live.prepare())),
+          tone: "go",
+        };
+      case "connecting":
+      case "reconnecting":
+        return { label: copy.button.connecting, onPress: () => undefined, disabled: true, tone: "muted" };
+      case "ending":
+        return { label: copy.button.ending, onPress: () => undefined, disabled: true, tone: "muted" };
+      default:
+        return null;
+    }
+  })();
+
+  const infoLine =
+    props.infoLine === undefined
+      ? settings
+        ? `${config.resolution}p • ${config.fps} fps • H.264`
+        : null
+      : props.infoLine;
+
+  const showPreview = isRtmpPreview(live.previewTrack);
+  const sheetEnabled = controls !== false && (controls !== undefined || settings !== undefined);
+
+  return (
+    <View style={[styles.root, style]}>
+      {autoPrepare ? (
+        <PickleballAutoPrepare captureOrientation={captureOrientation} />
+      ) : null}
+      {showPreview ? (
+        <RtmpPreview style={StyleSheet.absoluteFill} />
+      ) : (
+        <View style={[StyleSheet.absoluteFill, styles.center]}>
+          {live.state === "error" ? (
+            <>
+              <Text style={styles.errorTitle} accessibilityRole="alert">
+                {errorTitle ?? copy.hint.cameraError}
+              </Text>
+              {live.error ? (
+                <Text style={styles.errorDetail} selectable>
+                  {copy.errors.technicalDetail}: {live.error.message}
+                </Text>
+              ) : null}
+            </>
+          ) : (
+            <Text style={styles.mutedText}>{copy.hint.cameraOpening}</Text>
+          )}
+        </View>
+      )}
+
+      <SafeAreaView style={styles.overlay} pointerEvents="box-none">
+        <View style={styles.topArea} pointerEvents="box-none">
+          <View style={styles.topRow} pointerEvents="box-none">
+            <View style={styles.statusCard} pointerEvents="none">
+              {pill && pillLabel ? <StatusPill label={pillLabel} color={pill.color} /> : null}
+              {live.sessionId ? (
+                <View style={styles.sessionInfo}>
+                  {title ? (
+                    <Text style={styles.sessionTitleText} numberOfLines={1}>
+                      {title}
+                    </Text>
+                  ) : null}
+                  <Text style={styles.sessionIdText} numberOfLines={1}>
+                    {shortSessionId(live.sessionId)}
+                  </Text>
+                </View>
+              ) : null}
+            </View>
+            {renderTopRight?.()}
+            {sheetEnabled ? (
+              <Pressable
+                onPress={() => setSheetOpen(true)}
+                style={styles.moreButton}
+                accessibilityRole="button"
+                accessibilityLabel={copy.sheet.title}
+              >
+                <Text style={styles.moreButtonText}>•••</Text>
+              </Pressable>
+            ) : null}
+          </View>
+          {/* Hint ẩn khi LIVE — pill đã nói đủ, đỡ một dòng thừa */}
+          {hint && live.state !== "live" ? (
+            <View style={styles.stepHintChip} pointerEvents="none">
+              <View
+                style={[
+                  styles.stepHintDot,
+                  { backgroundColor: props.statusHintDotColor ?? uiColors.textDim },
+                ]}
+              />
+              <Text style={styles.stepHintText}>{hint}</Text>
+            </View>
+          ) : null}
+        </View>
+
+        {children ? (
+          <View style={styles.centerSlot} pointerEvents="box-none">
+            {children}
+          </View>
+        ) : null}
+
+        <View style={styles.bottomArea} pointerEvents="box-none">
+          {mainAction ? (
+            <View style={styles.mainRow}>
+              {confirmingStop && live.state === "live" ? (
+                <Pressable
+                  accessibilityRole="button"
+                  onPress={() => setConfirmingStop(false)}
+                  style={[styles.mainButton, styles.mainMuted]}
+                >
+                  <Text style={styles.mainButtonText}>{copy.button.cancel}</Text>
+                </Pressable>
+              ) : null}
+              <Pressable
+                accessibilityRole="button"
+                accessibilityState={{ disabled: mainAction.disabled === true }}
+                disabled={mainAction.disabled}
+                onPress={mainAction.onPress}
+                style={[
+                  styles.mainButton,
+                  mainAction.tone === "go" && styles.mainGo,
+                  mainAction.tone === "stop" && styles.mainStop,
+                  mainAction.tone === "muted" && styles.mainMuted,
+                ]}
+              >
+                <Text
+                  style={[styles.mainButtonText, mainAction.tone === "go" && styles.mainGoText]}
+                >
+                  {mainAction.label}
+                </Text>
+              </Pressable>
+            </View>
+          ) : null}
+          {lensRow ? (
+            <LensRow
+              cameras={live.cameras}
+              selectedCameraId={live.selectedCameraId}
+              onSelect={(deviceId) => void live.selectCamera(deviceId).catch(() => undefined)}
+              locale={locale}
+            />
+          ) : null}
+          {infoLine ? <Text style={styles.infoLine}>{infoLine}</Text> : null}
+          {renderBottom?.()}
+        </View>
+      </SafeAreaView>
+
+      {sheetEnabled
+        ? controls
+          ? controls({ visible: sheetOpen, onClose: () => setSheetOpen(false) })
+          : settings
+            ? (
+                <CameraControlsSheet
+                  {...controlsProps}
+                  visible={sheetOpen}
+                  onClose={() => setSheetOpen(false)}
+                  settings={settings}
+                  locale={controlsProps?.locale ?? locale}
+                />
+              )
+            : null
+        : null}
+
+      {thermalDimmed ? (
+        <Pressable
+          onPress={() => setThermalDimmed(false)}
+          style={styles.thermalOverlay}
+          accessibilityRole="button"
+          accessibilityLabel={copy.thermal.subtitle}
+        >
+          <View style={styles.thermalCard}>
+            <StatusPill label={`${copy.pill.live} ${formatElapsed(live.elapsedMs)}`} color="#ef4444" />
+            <Text style={styles.thermalTitle}>{copy.thermal.title}</Text>
+            {thermalDimCaption ? (
+              <Text style={styles.thermalCaption}>{thermalDimCaption}</Text>
+            ) : null}
+            <Text style={styles.thermalSubtitle}>{copy.thermal.subtitle}</Text>
+          </View>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * Store rỗng cho màn hình không có settings — hook vẫn phải gọi cùng số lần.
+ * `get` trả CÙNG MỘT object: useSyncExternalStore so sánh theo tham chiếu, trả
+ * object mới mỗi lần là React coi store đổi liên tục → "Maximum update depth".
+ */
+const NO_SETTINGS_VALUE = Object.freeze({
+  resolution: 720 as const,
+  fps: 30 as const,
+  antiFlicker: "50hz" as const,
+  cameraId: null,
+});
+const NO_SETTINGS: CameraSettingsStore = {
+  key: "none",
+  get: () => NO_SETTINGS_VALUE,
+  set: () => undefined,
+  subscribe: () => () => undefined,
+  restore: async () => undefined,
+  isRestored: () => true,
+};
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: uiColors.ink },
+  center: { alignItems: "center", justifyContent: "center", padding: 24 },
+  overlay: { flex: 1, justifyContent: "space-between" },
+  topArea: { gap: 8 },
+  topRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  statusCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  stepHintChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    alignSelf: "flex-start",
+    marginLeft: 16,
+    backgroundColor: uiColors.chip,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    maxWidth: 340,
+  },
+  stepHintDot: { width: 6, height: 6, borderRadius: 3 },
+  stepHintText: { color: uiColors.textMuted, fontSize: 11 },
+  sessionInfo: { flexShrink: 1, minWidth: 0 },
+  sessionTitleText: { color: uiColors.text, fontSize: 11, fontWeight: "700" },
+  sessionIdText: { color: uiColors.textMuted, fontSize: 9, fontVariant: ["tabular-nums"] },
+  moreButton: {
+    borderRadius: 999,
+    backgroundColor: uiColors.chip,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+  },
+  moreButtonText: { color: uiColors.text, fontSize: 13, fontWeight: "700" },
+  centerSlot: { alignItems: "center", justifyContent: "center" },
+  bottomArea: { alignItems: "center", gap: 10, paddingBottom: 12 },
+  mainRow: { flexDirection: "row", gap: 10 },
+  mainButton: {
+    borderRadius: 999,
+    paddingHorizontal: 26,
+    paddingVertical: 12,
+    minWidth: 150,
+    alignItems: "center",
+    backgroundColor: uiColors.chip,
+  },
+  mainGo: { backgroundColor: "#b4ff39" },
+  mainStop: { backgroundColor: "#ef4444" },
+  mainMuted: { backgroundColor: uiColors.chip },
+  mainButtonText: { color: uiColors.text, fontSize: 15, fontWeight: "800", letterSpacing: 0.3 },
+  mainGoText: { color: uiColors.ink },
+  infoLine: { color: uiColors.textDim, fontSize: 11, fontVariant: ["tabular-nums"] },
+  mutedText: { color: uiColors.textDim, fontSize: 14, textAlign: "center" },
+  errorTitle: { color: uiColors.text, fontSize: 16, fontWeight: "800", textAlign: "center" },
+  errorDetail: { color: uiColors.textDim, fontSize: 11, textAlign: "center", marginTop: 8 },
+  thermalOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.92)",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 99,
+  },
+  thermalCard: { alignItems: "center", gap: 12, padding: 24 },
+  thermalTitle: { color: uiColors.text, fontSize: 18, fontWeight: "700" },
+  thermalCaption: { color: uiColors.textMuted, fontSize: 16, fontWeight: "800", letterSpacing: 0.5 },
+  thermalSubtitle: { color: uiColors.textDim, fontSize: 13 },
+});