@pickleball/expo-sdk 0.1.1

package/src/livestream-screen.tsx

@@ -0,0 +1,980 @@
+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 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}
+            {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 | null;
+  if (!preview) return <View style={{ flex: 1, backgroundColor: state.theme.background }} />;
+  const liveKit = require("@livekit/react-native");
+  // 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 preview.trackRef ? (
+    <liveKit.VideoTrack key={remountKey} trackRef={preview.trackRef} mirror={state.isCameraFront} objectFit="cover" style={{ flex: 1 }} />
+  ) : (
+    <liveKit.VideoView key={remountKey} videoTrack={preview.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];
+}