@pickleball/expo-sdk 0.2.0 → 1.0.0

package/src/livestream-screen.tsx

@@ -1,1002 +0,0 @@
-import React, { useEffect, useState, type ReactNode } from "react";
-import {
-  Pressable,
-  ScrollView,
-  Text,
-  View,
-  useWindowDimensions,
-  type ViewStyle,
-} from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { sessionShortCode } from "@pickleball/shared";
-import type { LivestreamState, StartLivestreamInput } from "./contracts";
-import type { ExpoSdkErrorCode } from "./errors";
-import type { LocalPreviewReference } from "./livekit-room-adapter";
-import { useLivestream } from "./provider";
-
-declare const require: (name: string) => any;
-
-type RenderState = ReturnType<typeof useLivestream>;
-
-export interface LivestreamScreenProps {
-  input: StartLivestreamInput;
-  style?: ViewStyle;
-  /**
-   * Hướng máy vật lý (từ cảm biến, ví dụ expo-sensors DeviceMotion). Khi được
-   * cung cấp, nút bắt đầu phát bị chặn nếu máy đang cầm lệch với khung
-   * 9:16/16:9 đã chọn. Bỏ trống để tắt kiểm tra.
-   */
-  physicalOrientation?: "portrait" | "landscape" | null;
-  /**
-   * Tự kết nối vào phòng khi mở màn hình nếu consent đã được lưu từ trước
-   * (mặc định bật) — dashboard điều khiển được ngay từ lúc app bật.
-   */
-  autoConnect?: boolean;
-  renderPreview?: (state: RenderState) => ReactNode;
-  renderHeader?: (state: RenderState) => ReactNode;
-  renderControls?: (state: RenderState) => ReactNode;
-  renderError?: (state: RenderState) => ReactNode;
-  onEnded?: () => void;
-}
-
-const copy = {
-  vi: {
-    states: {
-      idle: "Sẵn sàng",
-      preparing: "Đang chuẩn bị…",
-      preview: "Xem trước",
-      connecting: "Đang kết nối…",
-      standby: "SẴN SÀNG PHÁT",
-      live: "ĐANG PHÁT",
-      reconnecting: "Đang kết nối lại…",
-      ending: "Đang kết thúc…",
-      ended: "Đã kết thúc",
-      error: "Đã xảy ra lỗi",
-    },
-    consent: "Đồng ý ghi hình",
-    consentDetail: "Tôi đồng ý phiên phát này được ghi hình và lưu thành video.",
-    start: "Bắt đầu kết nối",
-    startStandby: "Chế độ chờ",
-    startLive: "Phát ngay",
-    confirmStart: "Xác nhận bắt đầu",
-    afterThree: "Kết nối sau 3 giây",
-    live: "ĐANG PHÁT",
-    endLabel: "Kết thúc phát",
-    endQuestion: "Kết thúc phiên phát?",
-    end: "Kết thúc",
-    cancel: "Hủy",
-    ended: "Đã kết thúc",
-    retry: "Thử lại",
-    errorDetail: "Chi tiết kỹ thuật",
-    offline: "Mất kết nối mạng",
-    flip: "Đổi camera",
-    playLabel: "Bắt đầu phát",
-    pauseLabel: "Tạm dừng phát",
-    mic: "Micrô",
-    orientationLabel: "Khung hình",
-    portrait: "9:16 Dọc",
-    landscape: "16:9 Ngang",
-    portraitHint: "Cầm máy dọc trong suốt buổi quay.",
-    landscapeHint: "Cầm máy ngang trong suốt buổi quay.",
-    rotatePortrait: "Xoay máy dọc theo khung 9:16 để bắt đầu phát.",
-    rotateLandscape: "Xoay máy ngang theo khung 16:9 để bắt đầu phát.",
-    lensLabel: "Ống kính",
-    cameraLabel: "Camera",
-    cameraFront: "Trước",
-    cameraBack: "Sau",
-    visibilityLabel: "Chế độ",
-    visPublic: "Công khai",
-    visPrivate: "Riêng tư",
-    backToPreview: "Quay lại màn hình chờ",
-  },
-  en: {
-    states: {
-      idle: "Ready",
-      preparing: "Preparing…",
-      preview: "Preview",
-      connecting: "Connecting…",
-      standby: "READY",
-      live: "LIVE",
-      reconnecting: "Reconnecting…",
-      ending: "Ending…",
-      ended: "Livestream ended",
-      error: "Something went wrong",
-    },
-    consent: "Recording consent",
-    consentDetail: "I consent to recording and saving this livestream as video.",
-    start: "Connect",
-    startStandby: "Standby Mode",
-    startLive: "Go Live Now",
-    confirmStart: "Confirm start",
-    afterThree: "Connect in 3 seconds",
-    live: "LIVE",
-    endLabel: "End livestream",
-    endQuestion: "End this livestream?",
-    end: "End",
-    cancel: "Cancel",
-    ended: "Livestream ended",
-    retry: "Try again",
-    errorDetail: "Technical details",
-    offline: "Network offline",
-    flip: "Flip camera",
-    playLabel: "Start broadcasting",
-    pauseLabel: "Pause broadcasting",
-    mic: "Microphone",
-    orientationLabel: "Frame",
-    portrait: "9:16 Tall",
-    landscape: "16:9 Wide",
-    portraitHint: "Hold the phone upright while filming.",
-    landscapeHint: "Hold the phone sideways while filming.",
-    rotatePortrait: "Rotate the phone upright to match the 9:16 frame before going live.",
-    rotateLandscape: "Rotate the phone sideways to match the 16:9 frame before going live.",
-    lensLabel: "Lens",
-    cameraLabel: "Camera",
-    cameraFront: "Front",
-    cameraBack: "Back",
-    visibilityLabel: "Mode",
-    visPublic: "Public",
-    visPrivate: "Private",
-    backToPreview: "Back to standby",
-  },
-} as const;
-
-const errorTitle: Record<
-  "vi" | "en",
-  Record<ExpoSdkErrorCode, string>
-> = {
-  vi: {
-    PERMISSION_DENIED: "Cần quyền Camera và Micrô",
-    NETWORK_UNAVAILABLE: "Không có kết nối mạng",
-    TOKEN_EXPIRED: "Phiên xác thực đã hết hạn",
-    SDK_UPGRADE_REQUIRED: "Cần cập nhật ứng dụng",
-    UNSUPPORTED_RUNTIME: "Môi trường chạy không được hỗ trợ",
-    SESSION_CONFLICT: "Đang có phiên phát khác",
-    RECORDING_FAILED: "Không thể ghi hình",
-    CONSENT_REQUIRED: "Cần đồng ý ghi hình",
-    SDK_DISABLED: "Tính năng phát trực tiếp đang tắt",
-    CONFIGURATION_ERROR: "Cấu hình SDK chưa đúng",
-    INVALID_RESPONSE: "Phản hồi máy chủ không hợp lệ",
-    TIMEOUT: "Yêu cầu quá thời gian",
-    UNKNOWN: "Đã xảy ra lỗi",
-  },
-  en: {
-    PERMISSION_DENIED: "Camera and Microphone access required",
-    NETWORK_UNAVAILABLE: "No network connection",
-    TOKEN_EXPIRED: "Authentication expired",
-    SDK_UPGRADE_REQUIRED: "App update required",
-    UNSUPPORTED_RUNTIME: "Unsupported runtime",
-    SESSION_CONFLICT: "Another livestream is active",
-    RECORDING_FAILED: "Recording failed",
-    CONSENT_REQUIRED: "Recording consent required",
-    SDK_DISABLED: "Livestreaming is disabled",
-    CONFIGURATION_ERROR: "SDK configuration error",
-    INVALID_RESPONSE: "Invalid server response",
-    TIMEOUT: "Request timed out",
-    UNKNOWN: "Something went wrong",
-  },
-};
-
-const remediation: Record<
-  "vi" | "en",
-  Record<ExpoSdkErrorCode, string>
-> = {
-  vi: {
-    PERMISSION_DENIED:
-      "Mở Cài đặt và cho phép Camera cùng Micrô, sau đó thử lại.",
-    NETWORK_UNAVAILABLE:
-      "Kiểm tra Wi-Fi hoặc dữ liệu di động rồi thử lại.",
-    TOKEN_EXPIRED:
-      "Phiên xác thực đã hết hạn. Hãy kết nối mạng và thử lại.",
-    SDK_UPGRADE_REQUIRED:
-      "Cập nhật ứng dụng lên bản mới nhất và cài lại Development Build.",
-    UNSUPPORTED_RUNTIME:
-      "Cài Development Build trên iOS hoặc Android; Expo Go và web không được hỗ trợ.",
-    SESSION_CONFLICT:
-      "Kết thúc phiên phát đang hoạt động trước khi bắt đầu phiên mới.",
-    RECORDING_FAILED:
-      "Không thể tạo bản ghi máy chủ. Hãy thử lại hoặc liên hệ hỗ trợ.",
-    CONSENT_REQUIRED:
-      "Đồng ý ghi hình trước khi bắt đầu phát trực tiếp.",
-    SDK_DISABLED:
-      "Tính năng đang bị tắt cho ứng dụng này. Hãy liên hệ quản trị viên.",
-    CONFIGURATION_ERROR:
-      "Kiểm tra cấu hình Provider và config plugin, sau đó rebuild ứng dụng.",
-    INVALID_RESPONSE:
-      "Máy chủ trả về dữ liệu không hợp lệ. Hãy thử lại hoặc liên hệ hỗ trợ.",
-    TIMEOUT: "Yêu cầu quá thời gian. Kiểm tra kết nối rồi thử lại.",
-    UNKNOWN: "Thử lại. Nếu lỗi tiếp diễn, hãy liên hệ hỗ trợ.",
-  },
-  en: {
-    PERMISSION_DENIED:
-      "Open Settings and allow Camera and Microphone, then try again.",
-    NETWORK_UNAVAILABLE: "Check Wi-Fi or mobile data, then try again.",
-    TOKEN_EXPIRED:
-      "Your authentication has expired. Connect to the network and try again.",
-    SDK_UPGRADE_REQUIRED:
-      "Update the app to the latest version and install a new Development Build.",
-    UNSUPPORTED_RUNTIME:
-      "Install an iOS or Android Development Build; Expo Go and web are unsupported.",
-    SESSION_CONFLICT:
-      "End the active livestream before starting another one.",
-    RECORDING_FAILED:
-      "The server recording could not be created. Try again or contact support.",
-    CONSENT_REQUIRED: "Accept recording consent before going live.",
-    SDK_DISABLED:
-      "Livestreaming is disabled for this app. Contact an administrator.",
-    CONFIGURATION_ERROR:
-      "Check the Provider and config plugin setup, then rebuild the app.",
-    INVALID_RESPONSE:
-      "The server returned invalid data. Try again or contact support.",
-    TIMEOUT: "The request timed out. Check your connection and try again.",
-    UNKNOWN: "Try again. If the problem continues, contact support.",
-  },
-};
-
-export function LivestreamScreen(props: LivestreamScreenProps) {
-  const state = useLivestream();
-  const strings = copy[state.locale];
-  const insets = useSafeAreaInsets();
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-  // UI ngang: panel điều khiển chuyển sang cạnh phải như app camera.
-  const landscapeUi = windowWidth > windowHeight;
-  const panelWidth = Math.min(360, Math.round(windowWidth * 0.42));
-  const selectedOrientation = state.captureOrientation ?? "portrait";
-  // Chặn vào live khi máy đang cầm lệch với khung 9:16/16:9 đã chọn.
-  const orientationMismatch =
-    props.physicalOrientation != null &&
-    props.physicalOrientation !== selectedOrientation;
-  const rotateWarning =
-    selectedOrientation === "landscape"
-      ? strings.rotateLandscape
-      : strings.rotatePortrait;
-  // Consent ghi nhớ theo consentVersion — lần mở app sau tự kết nối để
-  // dashboard toàn quyền điều khiển từ lúc app bật (mô hình camera box).
-  const consentStorageKey = `@pickleball/consent:${props.input.consentVersion}`;
-  const storedConsent = (() => {
-    try {
-      return globalThis.localStorage?.getItem(consentStorageKey) === "yes";
-    } catch {
-      return false;
-    }
-  })();
-  const [consented, setConsented] = useState(storedConsent);
-  const [confirmingEnd, setConfirmingEnd] = useState(false);
-  // Chế độ hiển thị của phiên; mặc định theo input của app.
-  const [visibility, setVisibility] = useState<"public" | "private">(
-    props.input.visibility ?? "public",
-  );
-  // Trong phiên (standby/live/reconnecting): camera full màn hình, nút
-  // floating tự ẩn sau 10s; chạm để hiện.
-  const inLive =
-    state.state === "standby" ||
-    state.state === "live" ||
-    state.state === "reconnecting";
-  const isPublishing = state.state === "live";
-  const [liveControlsVisible, setLiveControlsVisible] = useState(true);
-  const [controlsTick, setControlsTick] = useState(0);
-  const showLiveControls = () => {
-    setLiveControlsVisible(true);
-    setControlsTick((tick) => tick + 1);
-  };
-
-  useEffect(() => {
-    if (inLive) setLiveControlsVisible(true);
-  }, [inLive]);
-
-  useEffect(() => {
-    if (!inLive || !liveControlsVisible || confirmingEnd) return;
-    const timer = setTimeout(() => setLiveControlsVisible(false), 10_000);
-    return () => clearTimeout(timer);
-  }, [inLive, liveControlsVisible, confirmingEnd, controlsTick]);
-
-  useEffect(() => {
-    if (state.state === "idle") void state.prepare().catch(() => undefined);
-  }, [state.prepare, state.state]);
-
-  // Kết nối vào phòng (standby hoặc autoPublish) — lưu consent để các
-  // lần mở app sau tự kết nối.
-  const connect = (autoPublish = false) => {
-    try {
-      globalThis.localStorage?.setItem(consentStorageKey, "yes");
-    } catch {
-      // Storage không khả dụng — chỉ mất auto-connect lần sau.
-    }
-    void state
-      .start({ ...props.input, visibility }, { autoPublish })
-      .catch(() => undefined);
-  };
-
-  // Auto-connect chỉ khi props.autoConnect === true (ví dụ box tự động).
-  const autoConnectedRef = React.useRef(false);
-  useEffect(() => {
-    if (props.autoConnect !== true || autoConnectedRef.current) return;
-    if (state.state !== "preview" || !storedConsent) return;
-    autoConnectedRef.current = true;
-    connect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.autoConnect, state.state, storedConsent]);
-
-  const theme = state.theme;
-  const bodyFont = fontOf(theme);
-  const boldFont = fontOf(theme, true);
-  const displayFont = theme.displayFontFamily
-    ? { fontFamily: theme.displayFontFamily }
-    : boldFont;
-  // Pill compact — cùng ngôn ngữ rounded-full của dashboard.
-  const button = (color: string): ViewStyle => ({
-    minHeight: 40,
-    minWidth: 44,
-    paddingHorizontal: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: color,
-    borderRadius: 999,
-  });
-  const secondaryButton: ViewStyle = {
-    ...button(theme.elevated),
-    borderWidth: 1,
-    borderColor: theme.hairline,
-  };
-  // CTA chính: accent + quầng sáng (glow) — chữ ký của design system.
-  const cta = (enabled: boolean): ViewStyle => ({
-    minHeight: 48,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 999,
-    backgroundColor: enabled ? theme.accent : theme.elevated,
-    ...(enabled
-      ? {
-          shadowColor: theme.accent,
-          shadowOpacity: 0.45,
-          shadowRadius: 14,
-          shadowOffset: { width: 0, height: 0 },
-          elevation: 8,
-        }
-      : { borderWidth: 1, borderColor: theme.hairline }),
-  });
-  // Nút tròn floating cho màn live (icon-only).
-  const fab = (bg: string): ViewStyle => ({
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: bg,
-    borderWidth: 1,
-    borderColor: theme.hairline,
-  });
-  const statusLabel = statusText(state.state, strings);
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: landscapeUi ? "row" : "column",
-        backgroundColor: theme.background,
-        paddingTop: insets.top,
-        paddingBottom: insets.bottom,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-        ...props.style,
-      }}
-    >
-      <View style={{ flex: 1 }}>
-        {props.renderPreview ? (
-          props.renderPreview(state)
-        ) : inLive ? (
-          // Live: camera full màn hình; chạm để hiện nút điều khiển.
-          <Pressable style={{ flex: 1 }} onPress={showLiveControls}>
-            <DefaultPreview state={state} />
-          </Pressable>
-        ) : (
-          <AspectBox
-            ratio={selectedOrientation === "landscape" ? 16 / 9 : 9 / 16}
-            background={theme.background}
-          >
-            <DefaultPreview state={state} />
-          </AspectBox>
-        )}
-      </View>
-      <View
-        style={{
-          position: "absolute",
-          top: insets.top + 12,
-          left: 12,
-          right: 12,
-          gap: 8,
-        }}
-      >
-        {props.renderHeader ? (
-          props.renderHeader(state)
-        ) : (
-          <View
-            style={{
-              alignSelf: "flex-start",
-              flexDirection: "row",
-              alignItems: "center",
-              gap: 8,
-              paddingVertical: 6,
-              paddingHorizontal: 12,
-              borderRadius: 999,
-              borderWidth: 1,
-              borderColor: theme.hairline,
-              backgroundColor: theme.overlay,
-              ...(state.state === "live"
-                ? { shadowColor: theme.accent, shadowOpacity: 0.4, shadowRadius: 10, shadowOffset: { width: 0, height: 0 }, elevation: 6 }
-                : {}),
-            }}
-          >
-            {state.state === "live" ? (
-              <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: theme.accent }} />
-            ) : null}
-            <Text
-              selectable
-              style={[
-                {
-                  color: state.state === "live" ? theme.accent : theme.foreground,
-                  fontSize: 12,
-                  fontWeight: "700",
-                  letterSpacing: 0.6,
-                },
-                displayFont,
-              ]}
-            >
-              {statusLabel}
-            </Text>
-            {state.state === "live" ? (
-              <Text selectable style={[{ color: theme.textSecondary, fontSize: 12, fontVariant: ["tabular-nums"] }, bodyFont]}>
-                {formatElapsed(state.elapsedMs)}
-              </Text>
-            ) : null}
-            {/* Mã ngắn trùng với mã trên dashboard — 8 sân chạy cùng lúc thì
-                cần thứ đối chiếu được, tiêu đề không đủ phân biệt. */}
-            {state.sessionId ? (
-              <Text
-                selectable
-                style={[{ color: theme.textSecondary, fontSize: 12, letterSpacing: 1 }, bodyFont]}
-              >
-                {sessionShortCode(state.sessionId)}
-              </Text>
-            ) : null}
-            {inLive && state.deviceMetrics ? (
-              <Text
-                selectable
-                numberOfLines={1}
-                style={[{ color: theme.textSecondary, fontSize: 12 }, bodyFont]}
-              >
-                {[
-                  state.deviceMetrics.batteryPct !== undefined
-                    ? `🔋${state.deviceMetrics.batteryPct}%${state.deviceMetrics.charging ? "⚡" : ""}`
-                    : null,
-                  state.deviceMetrics.netType ? `📶${state.deviceMetrics.netType}` : null,
-                  state.deviceMetrics.connQuality ?? null,
-                ]
-                  .filter(Boolean)
-                  .join("  ")}
-              </Text>
-            ) : null}
-            {!state.isOnline ? <Text selectable style={[{ color: theme.danger, fontSize: 12 }, bodyFont]}>{strings.offline}</Text> : null}
-          </View>
-        )}
-      </View>
-
-
-      {!inLive || state.error ? (
-      <View style={landscapeUi ? { width: panelWidth } : null}>
-      <ScrollView
-        style={landscapeUi ? { flex: 1 } : undefined}
-        scrollEnabled={landscapeUi}
-        contentContainerStyle={
-          landscapeUi ? { flexGrow: 1, justifyContent: "center" } : undefined
-        }
-      >
-      {state.error ? (
-        props.renderError ? props.renderError(state) : (
-          <View style={{ padding: 14, gap: 10, backgroundColor: theme.overlay }}>
-            <Text selectable accessibilityRole="alert" style={[{ color: theme.foreground, fontSize: 15, fontWeight: "700" }, displayFont]}>
-              {errorTitle[state.locale][state.error.code]}
-            </Text>
-            <Text selectable style={[{ color: theme.textSecondary, fontSize: 13 }, bodyFont]}>
-              {remediation[state.locale][state.error.code]}
-            </Text>
-            <Text selectable style={[{ color: theme.muted, fontSize: 11 }, bodyFont]}>
-              {strings.errorDetail}: {state.error.message}
-            </Text>
-            <Pressable accessibilityRole="button" onPress={() => void state.retry()} style={cta(true)}>
-              <Text style={[{ color: theme.ink, fontSize: 14, fontWeight: "800" }, boldFont]}>{strings.retry}</Text>
-            </Pressable>
-          </View>
-        )
-      ) : props.renderControls ? (
-        props.renderControls(state)
-      ) : (
-        <View style={{ padding: 14, gap: 10, backgroundColor: theme.overlay }}>
-          {state.state === "preview" ? (
-            <>
-              <ControlRow label={strings.orientationLabel} theme={theme}>
-                <Segmented
-                  theme={theme}
-                  value={selectedOrientation}
-                  onSelect={(value) =>
-                    void state.setCaptureOrientation(value as "portrait" | "landscape")
-                  }
-                  options={[
-                    { value: "portrait", label: strings.portrait },
-                    { value: "landscape", label: strings.landscape },
-                  ]}
-                />
-              </ControlRow>
-              <ControlRow label={strings.visibilityLabel} theme={theme}>
-                <Segmented
-                  theme={theme}
-                  value={visibility}
-                  onSelect={(value) => setVisibility(value as "public" | "private")}
-                  options={[
-                    { value: "public", label: strings.visPublic },
-                    { value: "private", label: strings.visPrivate },
-                  ]}
-                />
-              </ControlRow>
-              <ControlRow label={strings.cameraLabel} theme={theme}>
-                <Segmented
-                  theme={theme}
-                  value={state.isCameraFront ? "front" : "back"}
-                  onSelect={(value) => {
-                    if ((value === "front") !== state.isCameraFront) {
-                      void state.switchCamera();
-                    }
-                  }}
-                  options={[
-                    { value: "back", label: strings.cameraBack },
-                    { value: "front", label: strings.cameraFront },
-                  ]}
-                />
-              </ControlRow>
-              {(() => {
-                // Chỉ liệt kê ống kính vật lý mặt sau; bỏ thiết bị ảo đa ống
-                // kính (Dual/Triple) vì WebRTC không điều khiển được auto-switch.
-                const backLenses = state.cameras.filter(
-                  (camera) =>
-                    camera.facing === "environment" &&
-                    !/dual|triple/i.test(camera.label),
-                );
-                if (backLenses.length < 2 || state.isCameraFront) return null;
-                const lensName = (label: string) =>
-                  /ultra\s*wide/i.test(label)
-                    ? "0.5x"
-                    : /telephoto/i.test(label)
-                      ? "Tele"
-                      : "1x";
-                return (
-                  <ControlRow label={strings.lensLabel} theme={theme}>
-                    <Segmented
-                      theme={theme}
-                      value={state.selectedCameraId}
-                      onSelect={(deviceId) => void state.selectCamera(deviceId)}
-                      options={backLenses.map((camera) => ({
-                        value: camera.deviceId,
-                        label: lensName(camera.label),
-                        accessibilityLabel: camera.label,
-                      }))}
-                    />
-                  </ControlRow>
-                );
-              })()}
-              <Text selectable style={[{ color: theme.muted, fontSize: 11 }, bodyFont]}>
-                {selectedOrientation === "landscape" ? strings.landscapeHint : strings.portraitHint}
-              </Text>
-              <Pressable
-                accessibilityRole="checkbox"
-                accessibilityLabel={strings.consent}
-                accessibilityState={{ checked: consented }}
-                onPress={() => setConsented((value) => !value)}
-                style={{ minHeight: 40, flexDirection: "row", alignItems: "center", gap: 10 }}
-              >
-                <View
-                  style={{
-                    width: 22,
-                    height: 22,
-                    borderRadius: theme.radiusSm,
-                    borderWidth: 1.5,
-                    borderColor: consented ? theme.accent : theme.hairline,
-                    backgroundColor: consented ? theme.accent : theme.surface,
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  {consented ? (
-                    <Text style={{ color: theme.ink, fontSize: 13, fontWeight: "800" }}>✓</Text>
-                  ) : null}
-                </View>
-                <Text selectable style={[{ color: theme.textSecondary, fontSize: 13, flex: 1 }, bodyFont]}>
-                  {strings.consentDetail}
-                </Text>
-              </Pressable>
-              <View style={{ flexDirection: "row", gap: 8 }}>
-                <Pressable
-                  accessibilityRole="button"
-                  accessibilityLabel={strings.startStandby}
-                  accessibilityState={{ disabled: !consented }}
-                  disabled={!consented}
-                  onPress={() => connect(false)}
-                  style={[
-                    secondaryButton,
-                    {
-                      flex: 1,
-                      minHeight: 48,
-                      backgroundColor: consented ? theme.elevated : theme.surface,
-                    },
-                  ]}
-                >
-                  <Text
-                    style={[
-                      {
-                        color: consented ? theme.foreground : theme.muted,
-                        fontSize: 14,
-                        fontWeight: "800",
-                      },
-                      boldFont,
-                    ]}
-                  >
-                    {`🟡 ${strings.startStandby}`}
-                  </Text>
-                </Pressable>
-                <Pressable
-                  accessibilityRole="button"
-                  accessibilityLabel={strings.startLive}
-                  accessibilityState={{ disabled: !consented }}
-                  disabled={!consented}
-                  onPress={() => connect(true)}
-                  style={[cta(consented), { flex: 1 }]}
-                >
-                  <Text
-                    style={[
-                      {
-                        color: consented ? theme.ink : theme.muted,
-                        fontSize: 14,
-                        fontWeight: "800",
-                      },
-                      boldFont,
-                    ]}
-                  >
-                    {`🟢 ${strings.startLive}`}
-                  </Text>
-                </Pressable>
-              </View>
-            </>
-          ) : null}
-          {state.state === "ended" ? (
-            <View style={{ gap: 10 }}>
-              <Text selectable style={[{ color: theme.foreground, textAlign: "center", fontSize: 15, fontWeight: "700" }, displayFont]}>
-                {strings.ended}
-              </Text>
-              <Pressable
-                accessibilityRole="button"
-                onPress={() => {
-                  // Consent đã lưu bền — quay về preview chỉ cần một chạm
-                  // "Bắt đầu kết nối" để vào phiên mới (không auto để người
-                  // dùng chủ động sau khi vừa kết thúc).
-                  setConfirmingEnd(false);
-                  props.onEnded?.();
-                  void state.prepare();
-                }}
-                style={cta(true)}
-              >
-                <Text style={[{ color: theme.ink, fontSize: 14, fontWeight: "800" }, boldFont]}>
-                  {strings.backToPreview}
-                </Text>
-              </Pressable>
-            </View>
-          ) : null}
-        </View>
-      )}
-      </ScrollView>
-      </View>
-      ) : null}
-
-      {inLive && liveControlsVisible && !confirmingEnd ? (
-        <View
-          style={{
-            position: "absolute",
-            right: 16,
-            bottom: insets.bottom + 24,
-            gap: 12,
-            alignItems: "center",
-          }}
-        >
-          {state.state === "standby" && orientationMismatch ? (
-            <Text
-              style={[
-                {
-                  maxWidth: 200,
-                  textAlign: "center",
-                  color: theme.danger,
-                  fontSize: 11,
-                  fontWeight: "700",
-                },
-                boldFont,
-              ]}
-            >
-              {rotateWarning}
-            </Text>
-          ) : null}
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={isPublishing ? strings.pauseLabel : strings.playLabel}
-            accessibilityState={{
-              disabled: state.state === "standby" && orientationMismatch,
-            }}
-            disabled={state.state === "standby" && orientationMismatch}
-            onPress={() => {
-              showLiveControls();
-              if (isPublishing) void state.stopPublishing();
-              else void state.startPublishing();
-            }}
-            style={[
-              fab(
-                state.state === "standby" && orientationMismatch
-                  ? theme.elevated
-                  : theme.accent,
-              ),
-              { borderColor: theme.accent },
-            ]}
-          >
-            <Text style={{ fontSize: 18, color: theme.ink, fontWeight: "800" }}>
-              {isPublishing ? "⏸" : "▶"}
-            </Text>
-          </Pressable>
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={strings.flip}
-            onPress={() => {
-              showLiveControls();
-              void state.switchCamera();
-            }}
-            style={fab(theme.overlay)}
-          >
-            <Text style={{ fontSize: 20 }}>🔄</Text>
-          </Pressable>
-          <Pressable
-            accessibilityRole="switch"
-            accessibilityLabel={strings.mic}
-            accessibilityState={{ checked: state.isMicrophoneEnabled }}
-            onPress={() => {
-              showLiveControls();
-              void state.setMicrophoneEnabled(!state.isMicrophoneEnabled);
-            }}
-            style={[
-              fab(theme.overlay),
-              state.isMicrophoneEnabled ? null : { borderColor: theme.danger },
-            ]}
-          >
-            <Text style={{ fontSize: 20 }}>{state.isMicrophoneEnabled ? "🎙️" : "🔇"}</Text>
-          </Pressable>
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={strings.endLabel}
-            onPress={() => setConfirmingEnd(true)}
-            style={[fab(theme.danger), { borderColor: theme.danger }]}
-          >
-            <Text style={{ fontSize: 18, color: theme.ink, fontWeight: "800" }}>■</Text>
-          </Pressable>
-        </View>
-      ) : null}
-
-      {confirmingEnd ? (
-        <View
-          style={{
-            position: "absolute",
-            inset: 0,
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: theme.overlay,
-          }}
-        >
-          <View
-            style={{
-              width: 280,
-              gap: 10,
-              padding: 16,
-              borderRadius: theme.radius,
-              borderWidth: 1,
-              borderColor: theme.hairline,
-              backgroundColor: theme.surface,
-            }}
-          >
-            <Text selectable style={[{ color: theme.foreground, fontSize: 15, fontWeight: "700" }, displayFont]}>
-              {strings.endQuestion}
-            </Text>
-            <Pressable
-              accessibilityRole="button"
-              onPress={() => { setConfirmingEnd(false); void state.stop("user"); }}
-              style={button(theme.danger)}
-            >
-              <Text style={[{ color: theme.ink, fontSize: 14, fontWeight: "800" }, boldFont]}>{strings.end}</Text>
-            </Pressable>
-            <Pressable accessibilityRole="button" onPress={() => setConfirmingEnd(false)} style={secondaryButton}>
-              <Text style={[{ color: theme.textSecondary, fontSize: 13, fontWeight: "600" }, bodyFont]}>{strings.cancel}</Text>
-            </Pressable>
-          </View>
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-type ThemeLike = RenderState["theme"];
-
-const fontOf = (theme: ThemeLike, bold = false) =>
-  bold
-    ? { fontFamily: theme.fontFamilyBold ?? theme.fontFamily }
-    : { fontFamily: theme.fontFamily };
-
-/** Segmented pill — cùng ngôn ngữ với bộ lọc rounded-full của dashboard. */
-function Segmented({
-  options,
-  value,
-  onSelect,
-  theme,
-}: {
-  options: Array<{ value: string; label: string; accessibilityLabel?: string }>;
-  value: string | null;
-  onSelect(value: string): void;
-  theme: ThemeLike;
-}) {
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: "row",
-        padding: 3,
-        gap: 3,
-        borderRadius: 999,
-        borderWidth: 1,
-        borderColor: theme.hairline,
-        backgroundColor: theme.surface,
-      }}
-    >
-      {options.map((option) => {
-        const selected = option.value === value;
-        return (
-          <Pressable
-            key={option.value}
-            accessibilityRole="button"
-            accessibilityLabel={option.accessibilityLabel ?? option.label}
-            accessibilityState={{ selected }}
-            onPress={() => onSelect(option.value)}
-            style={{
-              flex: 1,
-              minHeight: 32,
-              alignItems: "center",
-              justifyContent: "center",
-              borderRadius: 999,
-              backgroundColor: selected ? theme.accent : "transparent",
-            }}
-          >
-            <Text
-              numberOfLines={1}
-              style={[
-                {
-                  fontSize: 12,
-                  fontWeight: "700",
-                  color: selected ? theme.ink : theme.textSecondary,
-                },
-                fontOf(theme, true),
-              ]}
-            >
-              {option.label}
-            </Text>
-          </Pressable>
-        );
-      })}
-    </View>
-  );
-}
-
-/** Hàng cấu hình compact: nhãn nhỏ bên trái, control chiếm phần còn lại. */
-function ControlRow({
-  label,
-  theme,
-  children,
-}: {
-  label: string;
-  theme: ThemeLike;
-  children: ReactNode;
-}) {
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-      <Text
-        numberOfLines={1}
-        style={[
-          {
-            width: 78,
-            fontSize: 10,
-            letterSpacing: 1,
-            textTransform: "uppercase",
-            fontWeight: "700",
-            color: theme.muted,
-          },
-          fontOf(theme, true),
-        ]}
-      >
-        {label}
-      </Text>
-      {children}
-    </View>
-  );
-}
-
-/**
- * Khung cố định theo tỷ lệ đã chốt (9:16 hoặc 16:9), letterbox giữa vùng còn
- * lại — người quay thấy đúng khung mà người xem sẽ thấy, bất kể máy xoay.
- */
-function AspectBox({
-  ratio,
-  background,
-  children,
-}: {
-  ratio: number;
-  background: string;
-  children: ReactNode;
-}) {
-  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
-  return (
-    <View
-      style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: background }}
-      onLayout={(event) => {
-        const { width, height } = event.nativeEvent.layout;
-        setSize({ w: width, h: height });
-      }}
-    >
-      {size ? (
-        <View
-          style={{
-            width: Math.min(size.w, size.h * ratio),
-            height: Math.min(size.h, size.w / ratio),
-            overflow: "hidden",
-          }}
-        >
-          {children}
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-function DefaultPreview({ state }: { state: RenderState }) {
-  const preview = state.previewTrack as
-    | LocalPreviewReference
-    | { kind?: string }
-    | null;
-  if (!preview) return <View style={{ flex: 1, backgroundColor: state.theme.background }} />;
-  // Mode device-rtmp: khung hình đi thẳng trong native, JS không có track nào để
-  // bind. Render view native của HaishinKit; thiếu nhánh này thì màn TỐI ĐEN dù
-  // camera đã mở và đang encode bình thường.
-  if ((preview as { kind?: string }).kind === "rtmp") {
-    const rtmp = require("@pickleball/rtmp-native");
-    return <rtmp.PickleballRtmpPreviewView style={{ flex: 1 }} />;
-  }
-  const liveKit = require("@livekit/react-native");
-  const liveKitPreview = preview as LocalPreviewReference;
-  // restartTrack thay mediaStreamTrack bên trong cùng một track object nên
-  // React không thấy prop đổi; remount view theo camera đang chọn để render
-  // đúng stream mới sau khi lật camera / chọn ống kính.
-  const remountKey = `${state.selectedCameraId ?? "auto"}:${state.isCameraFront ? "front" : "back"}`;
-  return liveKitPreview.trackRef ? (
-    <liveKit.VideoTrack key={remountKey} trackRef={liveKitPreview.trackRef} mirror={state.isCameraFront} objectFit="cover" style={{ flex: 1 }} />
-  ) : (
-    <liveKit.VideoView key={remountKey} videoTrack={liveKitPreview.videoTrack} mirror={state.isCameraFront} objectFit="cover" style={{ flex: 1 }} />
-  );
-}
-
-function formatElapsed(milliseconds: number) {
-  const total = Math.floor(milliseconds / 1_000);
-  const hours = Math.floor(total / 3_600);
-  const minutes = Math.floor((total % 3_600) / 60);
-  const seconds = total % 60;
-  return [hours, minutes, seconds].map((value) => String(value).padStart(2, "0")).join(":");
-}
-
-function statusText(state: LivestreamState, strings: typeof copy.vi | typeof copy.en) {
-  return strings.states[state];
-}