@pickleball/expo-sdk 0.2.0 → 1.0.0

package/src/ui/copy.ts

@@ -0,0 +1,326 @@
+/**
+ * Chữ trên màn hình camera + sheet cấu hình (vi/en). Chuyển từ
+ * apps/device-streamer; bản en là bản dịch tương đương để app đối tác dùng
+ * được ngay. App muốn chữ khác thì truyền prop (statusPill/statusHint/title)
+ * — không cần fork màn hình.
+ */
+
+import type { ExpoSdkErrorCode } from "../errors";
+
+export type UiLocale = "vi" | "en";
+
+export interface UiCopy {
+  pill: {
+    opening: string;
+    ready: string;
+    connecting: string;
+    paused: string;
+    court: string;
+    standby: string;
+    live: string;
+    reconnecting: string;
+    ending: string;
+    error: string;
+  };
+  hint: {
+    casualPreview: string;
+    casualStandby: string;
+    paused: string;
+    courtPreview: string;
+    courtStandby: (court: string) => string;
+    courtStandbyNoCourt: string;
+    connecting: string;
+    reconnecting: string;
+    ending: string;
+    errorFallback: string;
+    cameraOpening: string;
+    cameraError: string;
+  };
+  button: {
+    goLive: string;
+    publishNow: string;
+    resume: string;
+    stop: string;
+    stopQuestion: string;
+    confirmStop: string;
+    cancel: string;
+    retry: string;
+    connecting: string;
+    ending: string;
+  };
+  lens: { front: string };
+  thermal: { title: string; subtitle: string };
+  /** Tiêu đề + cách xử lý theo mã lỗi (chuyển từ LivestreamScreen 0.x). */
+  errors: {
+    title: Record<ExpoSdkErrorCode, string>;
+    remediation: Record<ExpoSdkErrorCode, string>;
+    technicalDetail: string;
+  };
+  sheet: {
+    title: string;
+    close: string;
+    /** Nhãn a11y của vùng nền bấm-để-đóng (khác nút ✕ để test/đọc màn hình phân biệt). */
+    closeBackdrop: string;
+    resolution: string;
+    fps: string;
+    fps60Note: string;
+    antiFlicker: string;
+    antiFlickerNote: string;
+    auto: string;
+    lockedNote: string;
+    defaultCamera: string;
+    autoCamera: string;
+    autoCameraHint: string;
+    frontCamera: string;
+    backCamera: string;
+    cameraIdHint: (id: string) => string;
+    zoom: string;
+    ev: string;
+    focusLock: string;
+    exposureLock: string;
+    torch: string;
+    network: string;
+    runCheck: string;
+    running: string;
+    busyNote: string;
+    resultLine: (input: {
+      uploadMbps: number;
+      requiredMbps: number;
+      resolution: number;
+      fps: number;
+      pingMs: number | null;
+    }) => string;
+    good: string;
+    ok: string;
+    low: string;
+    checkError: string;
+  };
+}
+
+const vi: UiCopy = {
+  pill: {
+    opening: "ĐANG MỞ CAMERA…",
+    ready: "SẴN SÀNG",
+    connecting: "ĐANG KẾT NỐI…",
+    paused: "TẠM DỪNG",
+    court: "TRỰC SÂN",
+    standby: "SẴN SÀNG PHÁT",
+    live: "LIVE",
+    reconnecting: "MẤT KẾT NỐI…",
+    ending: "ĐANG DỪNG…",
+    error: "LỖI",
+  },
+  hint: {
+    casualPreview: "Bấm “Bắt đầu phát” để lên sóng",
+    casualStandby: "Phiên đã sẵn sàng — bấm “Phát ngay”",
+    paused: "Đang tạm dừng — bấm “Phát tiếp” để tiếp tục",
+    courtPreview: "Đang chuẩn bị camera…",
+    courtStandby: (court) => `Đang gác ${court} — trọng tài bấm bắt đầu là tự phát`,
+    courtStandbyNoCourt: "Đang trực — chờ lệnh phát",
+    connecting: "Đang kết nối tới máy chủ…",
+    reconnecting: "Mất kết nối — đang thử lại…",
+    ending: "Đang dừng phát…",
+    errorFallback: "Có lỗi — thử lại",
+    cameraOpening: "Đang mở camera…",
+    cameraError: "Không mở được camera",
+  },
+  button: {
+    goLive: "Bắt đầu phát",
+    publishNow: "Phát ngay",
+    resume: "Phát tiếp",
+    stop: "Dừng",
+    stopQuestion: "Dừng phát?",
+    confirmStop: "Xác nhận dừng",
+    cancel: "Huỷ",
+    retry: "Thử lại",
+    connecting: "Đang kết nối…",
+    ending: "Đang dừng…",
+  },
+  lens: { front: "Trước" },
+  thermal: {
+    title: "Tiết kiệm nhiệt & pin",
+    subtitle: "Chạm vào màn hình để bật lại giao diện",
+  },
+  errors: {
+    title: {
+      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",
+    },
+    remediation: {
+      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ợ.",
+    },
+    technicalDetail: "Chi tiết kỹ thuật",
+  },
+  sheet: {
+    title: "Cấu hình camera",
+    close: "Đóng",
+    closeBackdrop: "Đóng cấu hình",
+    resolution: "Độ phân giải",
+    fps: "FPS",
+    fps60Note: "60fps gấp đôi bitrate và toả nhiệt — chỉ nên dùng khi sân đủ sáng và mạng khoẻ.",
+    antiFlicker: "Chống chớp đèn",
+    antiFlickerNote: "Điện VN 50Hz — đèn trong nhà thấy vằn sáng tối hay hình phập phồng thì giữ 50Hz.",
+    auto: "Auto",
+    lockedNote: "Đang trong phiên — đổi độ phân giải/FPS/camera sau khi dừng phát.",
+    defaultCamera: "Camera mặc định",
+    autoCamera: "Tự động",
+    autoCameraHint: "Camera sau mặc định của máy",
+    frontCamera: "Camera trước",
+    backCamera: "Camera sau",
+    cameraIdHint: (id) => `id ${id}`,
+    zoom: "Zoom",
+    ev: "EV",
+    focusLock: "Khoá nét",
+    exposureLock: "Khoá sáng",
+    torch: "Đèn pin",
+    network: "Mạng",
+    runCheck: "Kiểm tra tốc độ mạng",
+    running: "Đang đo tải lên… (~10 giây)",
+    busyNote: "Đang phát — đo lúc này sẽ giành băng thông với sóng. Dừng phát rồi đo.",
+    resultLine: ({ uploadMbps, requiredMbps, resolution, fps, pingMs }) =>
+      `Tải lên ${uploadMbps.toFixed(1)} Mbps · cần ~${requiredMbps.toFixed(1)} Mbps cho ${resolution}p${fps}` +
+      (pingMs !== null ? ` · ping ${pingMs}ms` : ""),
+    good: "ĐỦ TỐT — dư băng thông cho cấu hình này.",
+    ok: "TẠM ĐỦ — mạng chùng là chất lượng phải hạ theo.",
+    low: "KHÔNG ĐỦ — hạ độ phân giải hoặc đổi mạng trước khi lên sóng.",
+    checkError: "Không đo được — kiểm tra kết nối mạng rồi thử lại.",
+  },
+};
+
+const en: UiCopy = {
+  pill: {
+    opening: "OPENING CAMERA…",
+    ready: "READY",
+    connecting: "CONNECTING…",
+    paused: "PAUSED",
+    court: "ON COURT",
+    standby: "READY TO GO LIVE",
+    live: "LIVE",
+    reconnecting: "RECONNECTING…",
+    ending: "STOPPING…",
+    error: "ERROR",
+  },
+  hint: {
+    casualPreview: "Tap “Go live” to start streaming",
+    casualStandby: "Session ready — tap “Go live now”",
+    paused: "Paused — tap “Resume” to continue",
+    courtPreview: "Preparing the camera…",
+    courtStandby: (court) => `Standing by on ${court} — the referee's start button goes live automatically`,
+    courtStandbyNoCourt: "Standing by — waiting for the start command",
+    connecting: "Connecting to the server…",
+    reconnecting: "Connection lost — retrying…",
+    ending: "Stopping the stream…",
+    errorFallback: "Something went wrong — retry",
+    cameraOpening: "Opening the camera…",
+    cameraError: "The camera could not be opened",
+  },
+  button: {
+    goLive: "Go live",
+    publishNow: "Go live now",
+    resume: "Resume",
+    stop: "Stop",
+    stopQuestion: "Stop streaming?",
+    confirmStop: "Yes, stop",
+    cancel: "Cancel",
+    retry: "Retry",
+    connecting: "Connecting…",
+    ending: "Stopping…",
+  },
+  lens: { front: "Front" },
+  thermal: {
+    title: "Saving heat & battery",
+    subtitle: "Tap the screen to show the controls again",
+  },
+  errors: {
+    title: {
+      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",
+    },
+    remediation: {
+      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.",
+    },
+    technicalDetail: "Technical details",
+  },
+  sheet: {
+    title: "Camera settings",
+    close: "Close",
+    closeBackdrop: "Close settings",
+    resolution: "Resolution",
+    fps: "FPS",
+    fps60Note: "60 fps doubles the bitrate and heat — only for bright courts on a strong network.",
+    antiFlicker: "Anti-flicker",
+    antiFlickerNote: "Match the local mains frequency (VN: 50 Hz). Banding or pulsing indoor light means the wrong setting.",
+    auto: "Auto",
+    lockedNote: "In a session — change resolution/FPS/camera after stopping.",
+    defaultCamera: "Default camera",
+    autoCamera: "Automatic",
+    autoCameraHint: "The device's default back camera",
+    frontCamera: "Front camera",
+    backCamera: "Back camera",
+    cameraIdHint: (id) => `id ${id}`,
+    zoom: "Zoom",
+    ev: "EV",
+    focusLock: "Lock focus",
+    exposureLock: "Lock exposure",
+    torch: "Torch",
+    network: "Network",
+    runCheck: "Check upload speed",
+    running: "Measuring upload… (~10 s)",
+    busyNote: "Streaming — measuring now would compete with the stream. Stop first.",
+    resultLine: ({ uploadMbps, requiredMbps, resolution, fps, pingMs }) =>
+      `Upload ${uploadMbps.toFixed(1)} Mbps · needs ~${requiredMbps.toFixed(1)} Mbps for ${resolution}p${fps}` +
+      (pingMs !== null ? ` · ping ${pingMs} ms` : ""),
+    good: "GOOD — plenty of headroom for this configuration.",
+    ok: "MARGINAL — quality will drop when the network dips.",
+    low: "NOT ENOUGH — lower the resolution or switch networks before going live.",
+    checkError: "Could not measure — check the connection and try again.",
+  },
+};
+
+export const uiCopy: Record<UiLocale, UiCopy> = { vi, en };

package/src/ui/helpers.ts

@@ -0,0 +1,105 @@
+import type { LivestreamState } from "../contracts";
+import type { CameraDeviceInfo } from "../engine";
+import { uiCopy, type UiLocale } from "./copy";
+
+/** Luật THUẦN của màn hình camera — test được, không React. */
+
+export interface StatusPill {
+  label: string;
+  color: string;
+}
+
+/** Màu ngữ nghĩa của pill — trùng bảng màu app Picklive Camera (không theo theme). */
+export const PILL_COLORS = Object.freeze({
+  gray: "#6b7280",
+  green: "#22c55e",
+  amber: "#f59e0b",
+  orange: "#f97316",
+  red: "#ef4444",
+  darkRed: "#b91c1c",
+});
+
+export interface StatusPillOptions {
+  /** elapsedMs > 0 ở standby = đã phát rồi hạ về chờ (tạm dừng). */
+  elapsedMs?: number;
+  /** Phiên gắn sân: standby là "TRỰC SÂN" thay vì "SẴN SÀNG PHÁT". */
+  courtBound?: boolean;
+  locale?: UiLocale;
+}
+
+/** Pill theo TỪNG trạng thái engine — không gộp chung "Đang chờ". */
+export function statusPillFor(state: LivestreamState, options: StatusPillOptions = {}): StatusPill {
+  const copy = uiCopy[options.locale ?? "vi"].pill;
+  const elapsedMs = options.elapsedMs ?? 0;
+  switch (state) {
+    case "idle":
+    case "preparing":
+      return { label: copy.opening, color: PILL_COLORS.gray };
+    case "preview":
+      return { label: copy.ready, color: PILL_COLORS.green };
+    case "connecting":
+      return { label: copy.connecting, color: PILL_COLORS.amber };
+    case "standby":
+      if (elapsedMs > 0) return { label: copy.paused, color: PILL_COLORS.amber };
+      return options.courtBound
+        ? { label: copy.court, color: PILL_COLORS.orange }
+        : { label: copy.standby, color: PILL_COLORS.orange };
+    case "live":
+      return { label: copy.live, color: PILL_COLORS.red };
+    case "reconnecting":
+      return { label: copy.reconnecting, color: PILL_COLORS.amber };
+    case "ending":
+      return { label: copy.ending, color: PILL_COLORS.gray };
+    case "error":
+      return { label: copy.error, color: PILL_COLORS.darkRed };
+    // "ended" thoáng qua rồi AutoPrepare đưa về preview.
+    default:
+      return { label: copy.ready, color: PILL_COLORS.green };
+  }
+}
+
+/** Đuôi sessionId để đối chiếu với URL /dashboard/<id> — đủ phân biệt, không tràn màn hình. */
+export function shortSessionId(sessionId: string): string {
+  return sessionId.length <= 10 ? sessionId : `…${sessionId.slice(-8)}`;
+}
+
+/** mm:ss (hoặc h:mm:ss khi qua giờ) từ elapsedMs của engine — đếm thời gian PHÁT. */
+export function formatElapsed(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = total % 60;
+  const mm = String(minutes).padStart(2, "0");
+  const ss = String(seconds).padStart(2, "0");
+  return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+
+/**
+ * Nhãn lens từ label tiếng Anh của native ("Back Ultra Wide Camera", "Back
+ * Telephoto Camera", …) — load-bearing: native dựng nhãn đúng dạng này để UI
+ * dò được (native-contract test giữ hợp đồng).
+ */
+export function lensShortLabel(label: string): string {
+  if (/ultra\s*wide/i.test(label)) return "0.5x";
+  if (/telephoto/i.test(label)) return "Tele";
+  return "1x";
+}
+
+/** previewTrack của engine ở mode device-rtmp là `{kind:"rtmp"}` — JS không có track để bind. */
+export function isRtmpPreview(previewTrack: unknown): boolean {
+  return (
+    typeof previewTrack === "object" &&
+    previewTrack !== null &&
+    (previewTrack as { kind?: unknown }).kind === "rtmp"
+  );
+}
+
+/** Lens đang chọn: id engine chọn tường minh, không thì lens 1x mặc định của camera sau. */
+export function activeLensId(
+  cameras: CameraDeviceInfo[],
+  selectedCameraId: string | null,
+): string | null {
+  if (selectedCameraId) return selectedCameraId;
+  const backLenses = cameras.filter((camera) => camera.facing === "environment");
+  return backLenses.find((camera) => lensShortLabel(camera.label) === "1x")?.deviceId ?? null;
+}

package/src/ui/hooks.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import type { LivestreamState } from "../contracts";
+import { applyAntiFlicker, getCameraCapabilities, type CameraCapabilities } from "../camera-controls";
+import type { AntiFlickerMode } from "../camera-settings";
+
+/**
+ * Bounds + cờ hỗ trợ của lens đang gắn — đọc lại khi `active` bật (mở sheet)
+ * và khi đổi lens. null = module/hàm chưa có hoặc camera chưa mở → UI ẩn control.
+ */
+export function useCameraCapabilities(
+  active: boolean,
+  cameraKey: string | null,
+): CameraCapabilities | null {
+  const [capabilities, setCapabilities] = useState<CameraCapabilities | null>(null);
+  useEffect(() => {
+    if (!active) return;
+    let cancelled = false;
+    void getCameraCapabilities().then((value) => {
+      if (!cancelled) setCapabilities(value);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [active, cameraKey]);
+  return capabilities;
+}
+
+/**
+ * Tự tối màn hình tiết kiệm nhiệt/pin sau `afterMs` ở trạng thái LIVE; chạm để
+ * bật lại (setDimmed(false)). null = tắt tính năng.
+ */
+export function useThermalDim(
+  state: LivestreamState,
+  afterMs: number | null,
+): [boolean, (dimmed: boolean) => void] {
+  const [dimmed, setDimmed] = useState(false);
+  useEffect(() => {
+    if (state !== "live" || afterMs === null) {
+      setDimmed(false);
+      return;
+    }
+    const timer = setTimeout(() => setDimmed(true), afterMs);
+    return () => clearTimeout(timer);
+    // `dimmed` trong deps: chạm bật lại UI thì hẹn giờ lại từ đầu.
+  }, [state, afterMs, dimmed]);
+  return [dimmed, setDimmed];
+}
+
+/**
+ * Đẩy chế độ chống chớp xuống native khi mount + mỗi lần đổi. Gọi trước khi
+ * camera mở cũng không mất — native lưu giá trị và tự áp lại mỗi lần
+ * attachCamera (kể cả đổi lens). iOS/binary cũ thiếu hàm → no-op.
+ */
+export function useAntiFlicker(mode: AntiFlickerMode | undefined): void {
+  useEffect(() => {
+    if (!mode) return;
+    void applyAntiFlicker(mode);
+  }, [mode]);
+}

package/src/ui/index.ts

@@ -0,0 +1,42 @@
+/**
+ * `@pickleball/expo-sdk/ui` — màn hình camera + sheet cấu hình dựng sẵn (bố cục
+ * của app Picklive Camera). Subpath riêng để root entry không kéo theo
+ * react-native-safe-area-context/Modal cho app chỉ dùng engine.
+ *
+ * Yêu cầu: render trong PickleballLiveProvider; @pickleball/rtmp-native cài
+ * trong app để có khung hình (nạp lười — thiếu thì nền tối, không gãy import).
+ */
+export { PickleballCameraScreen } from "./camera-screen";
+export type {
+  CameraScreenMode,
+  CameraScreenSheetRenderProps,
+  PickleballCameraScreenProps,
+} from "./camera-screen";
+export { CameraControlsSheet } from "./controls-sheet";
+export type { CameraControlsSheetProps, CameraControlsSheetSections } from "./controls-sheet";
+export { uiCopy } from "./copy";
+export type { UiCopy, UiLocale } from "./copy";
+export {
+  PILL_COLORS,
+  activeLensId,
+  formatElapsed,
+  isRtmpPreview,
+  lensShortLabel,
+  shortSessionId,
+  statusPillFor,
+} from "./helpers";
+export type { StatusPill as StatusPillValue, StatusPillOptions } from "./helpers";
+export { useAntiFlicker, useCameraCapabilities, useThermalDim } from "./hooks";
+export { RtmpPreview, getRtmpPreviewView, resetRtmpPreviewViewCache } from "./preview-view";
+export {
+  ActionButton,
+  CameraOption,
+  ControlRow,
+  LensRow,
+  Note,
+  PresetButton,
+  Segmented,
+  StatusPill,
+  uiColors,
+  uiStyles,
+} from "./primitives";

package/src/ui/preview-view.tsx

@@ -0,0 +1,39 @@
+import React, { type ComponentType } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+
+declare const require: (name: string) => any;
+
+type PreviewComponent = ComponentType<{ style?: StyleProp<ViewStyle> }>;
+
+let cached: PreviewComponent | null | undefined;
+
+/**
+ * View native của @pickleball/rtmp-native, nạp LƯỜI: import tĩnh là app nào
+ * chưa cài module (hoặc static-render web của expo-router) gãy ngay lúc
+ * import subpath ./ui. Không có module → null, màn hình vẽ nền tối thay vì
+ * khung hình.
+ *
+ * BẮT BUỘC render view này khi camera đã mở, nếu không màn preview TỐI ĐEN:
+ * native vẫn encode bình thường nhưng không có đích để vẽ khung hình.
+ */
+export function getRtmpPreviewView(): PreviewComponent | null {
+  if (cached !== undefined) return cached;
+  try {
+    const loaded = require("@pickleball/rtmp-native");
+    const candidate = loaded?.PickleballRtmpPreviewView;
+    cached = candidate ? (candidate as PreviewComponent) : null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+}
+
+/** Cho test: xoá cache để mock module khác. */
+export function resetRtmpPreviewViewCache(): void {
+  cached = undefined;
+}
+
+export function RtmpPreview({ style }: { style?: StyleProp<ViewStyle> }) {
+  const Preview = getRtmpPreviewView();
+  return Preview ? <Preview style={style} /> : null;
+}