@pickleball/expo-sdk 0.2.0 → 1.0.0

package/src/ui/controls-sheet.tsx

@@ -0,0 +1,445 @@
+import React, { useEffect, useState, type ReactNode } from "react";
+import {
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+  useWindowDimensions,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import {
+  setExposureBias,
+  setExposureLocked,
+  setFocusLocked,
+  setTorch,
+  setZoom,
+} from "../camera-controls";
+import { useCameraSettings, type CameraSettings, type CameraSettingsStore } from "../camera-settings";
+import { useLivestream } from "../provider";
+import { runUplinkCheck, type UplinkCheckResult } from "../uplink-check";
+import { uiCopy, type UiLocale } from "./copy";
+import { useCameraCapabilities } from "./hooks";
+import {
+  CameraOption,
+  ControlRow,
+  Note,
+  PresetButton,
+  Segmented,
+  uiColors,
+  uiStyles,
+} from "./primitives";
+
+/**
+ * Sheet cấu hình camera — menu ••• của Picklive Camera chuyển vào SDK, trừ ba
+ * mục kiosk (Nguồn, Thoát kiosk, badge OTA) mà app fleet đưa lại qua `footer`.
+ *
+ * Zoom/EV/khoá/đèn pin gọi thẳng native (camera-controls, typeof-guard) — tinh
+ * chỉnh camera runtime, không phải lifecycle phiên. Resolution/FPS/camera mặc
+ * định ghi vào CameraSettingsStore; app remount PickleballLiveProvider theo
+ * `cameraSettingsKey` để engine re-prepare.
+ */
+
+const ZOOM_PRESETS = [1, 2, 3, 5] as const;
+const EV_PRESETS = [-2, -1, 0, 1, 2] as const;
+/** Tập tối đa; mức nào hiện thật do capabilities của lens quyết định. */
+const FPS_CHOICES: Array<{ value: CameraSettings["fps"]; label: string }> = [
+  { value: 24, label: "24" },
+  { value: 30, label: "30" },
+  { value: 60, label: "60" },
+];
+
+export interface CameraControlsSheetSections {
+  quality?: boolean;
+  antiFlicker?: boolean;
+  camera?: boolean;
+  zoom?: boolean;
+  exposure?: boolean;
+  locks?: boolean;
+  torch?: boolean;
+  uplink?: boolean;
+}
+
+export interface CameraControlsSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  settings: CameraSettingsStore;
+  /** Ẩn mục không cần (mặc định hiện tất cả). */
+  sections?: CameraControlsSheetSections;
+  /** Đo mạng: đích POST + HEAD đo RTT (VD ingest của bạn). */
+  uplink?: { uploadUrl?: string; pingUrl?: string };
+  /**
+   * "side": panel nửa phải (màn ngang); "bottom": bottom-sheet (màn dọc);
+   * "auto" (mặc định) theo kích thước cửa sổ.
+   */
+  layout?: "auto" | "side" | "bottom";
+  title?: string;
+  /** Hàng thêm của app ở cuối sheet (Picklive Camera: Nguồn, Thoát kiosk, badge OTA). */
+  footer?: ReactNode;
+  locale?: UiLocale;
+}
+
+const IN_SESSION = new Set(["connecting", "standby", "live", "reconnecting", "ending"]);
+const UPLINK_BUSY = new Set(["connecting", "live", "reconnecting", "ending"]);
+
+export function CameraControlsSheet(props: CameraControlsSheetProps) {
+  const { visible, onClose, settings, uplink, footer } = props;
+  const sections = props.sections ?? {};
+  const show = (key: keyof CameraControlsSheetSections) => sections[key] !== false;
+  const live = useLivestream();
+  const locale = props.locale ?? live.locale;
+  const copy = uiCopy[locale].sheet;
+  const config = useCameraSettings(settings);
+  const { width, height } = useWindowDimensions();
+  const side =
+    props.layout === "side" || (props.layout !== "bottom" && width > height);
+
+  const caps = useCameraCapabilities(visible, live.selectedCameraId);
+  const [zoom, setZoomValue] = useState(1);
+  const [ev, setEvValue] = useState(0);
+  const [focusLocked, setFocusLockedValue] = useState(false);
+  const [exposureLocked, setExposureLockedValue] = useState(false);
+  const [torch, setTorchValue] = useState(false);
+  const [net, setNet] = useState<{
+    running: boolean;
+    result: UplinkCheckResult | null;
+    error: string | null;
+  }>({ running: false, result: null, error: null });
+
+  // Đổi resolution/fps/camera → remount provider + re-prepare — khoá khi đang trong phiên.
+  const configLocked = IN_SESSION.has(live.state);
+  // Đo mạng lúc ĐANG PHÁT là giành uplink với chính luồng video → cấm.
+  // Standby thì đo được: RTMP nối nhưng chưa publish, lưu lượng không đáng kể.
+  const netBusy = UPLINK_BUSY.has(live.state);
+
+  // Chỉ chào fps mà lens đang gắn chạy được. Native im lặng bỏ qua mức không
+  // hỗ trợ, nên nút chào bừa sẽ là nút chết: người dùng bấm 60, UI hiện 60,
+  // camera vẫn 30. Chưa đọc được capabilities thì giữ 24/30 như trước.
+  const supportedFps = caps?.supportedFrameRates ?? [24, 30];
+  const fpsOptions = FPS_CHOICES.filter((choice) => supportedFps.includes(choice.value));
+
+  // Đổi sang lens không có 60fps trong khi config đang để 60 → hạ về 30, nếu
+  // không Segmented không có ô nào sáng và người dùng kẹt ở giá trị vô hiệu.
+  useEffect(() => {
+    if (configLocked || !caps) return;
+    if (!supportedFps.includes(config.fps)) settings.set({ fps: 30 });
+  }, [caps, config.fps, configLocked, settings, supportedFps]);
+
+  async function runNetworkCheck() {
+    setNet({ running: true, result: null, error: null });
+    try {
+      const result = await runUplinkCheck({
+        resolution: config.resolution,
+        ...(uplink?.uploadUrl ? { uploadUrl: uplink.uploadUrl } : {}),
+        ...(uplink?.pingUrl ? { pingUrl: uplink.pingUrl } : {}),
+      });
+      setNet({ running: false, result, error: null });
+    } catch {
+      setNet({ running: false, result: null, error: copy.checkError });
+    }
+  }
+
+  return (
+    // supportedOrientations đủ cả dọc lẫn ngang: mặc định của Modal là
+    // ["portrait"], app khoá landscape (Info.plist chỉ có LandscapeLeft/Right)
+    // → iOS không tìm được hướng chung và ABORT ngay khi mount modal
+    // ("Supported orientations has no common orientation with the application").
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      // Android: cho modal phủ cả vùng status/navigation bar rồi tự né bằng
+      // SafeAreaView — không né là thanh điều hướng đè lên hàng nút.
+      statusBarTranslucent
+      navigationBarTranslucent
+      supportedOrientations={[
+        "portrait",
+        "portrait-upside-down",
+        "landscape",
+        "landscape-left",
+        "landscape-right",
+      ]}
+    >
+      <View style={side ? styles.overlaySide : styles.overlayBottom}>
+        <Pressable
+          style={styles.backdrop}
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel={copy.closeBackdrop}
+        />
+        <SafeAreaView
+          edges={side ? ["top", "right", "bottom"] : ["bottom", "left", "right"]}
+          style={side ? styles.panelSide : styles.panelBottom}
+        >
+          <View style={styles.panelHeader}>
+            <Text style={styles.heading}>{props.title ?? copy.title}</Text>
+            <Pressable
+              onPress={onClose}
+              style={styles.closeX}
+              accessibilityRole="button"
+              accessibilityLabel={copy.close}
+            >
+              <Text style={styles.closeXText}>✕</Text>
+            </Pressable>
+          </View>
+          <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+            {show("quality") ? (
+              <>
+                <ControlRow label={copy.resolution}>
+                  <Segmented
+                    options={[
+                      { value: 720, label: "720p" },
+                      { value: 1080, label: "1080p" },
+                    ]}
+                    value={config.resolution}
+                    disabled={configLocked}
+                    onChange={(value) => settings.set({ resolution: value })}
+                  />
+                </ControlRow>
+                <ControlRow label={copy.fps}>
+                  <Segmented
+                    options={fpsOptions}
+                    value={config.fps}
+                    disabled={configLocked}
+                    onChange={(value) => settings.set({ fps: value })}
+                  />
+                </ControlRow>
+                {config.fps === 60 ? <Note>{copy.fps60Note}</Note> : null}
+              </>
+            ) : null}
+
+            {/* Chống chớp đèn — Android-only (iOS chưa có API antibanding).
+                Không khoá theo phiên: là key trên repeating request, đổi giữa
+                sóng an toàn — thấy vằn là chỉnh ngay được. */}
+            {show("antiFlicker") && Platform.OS === "android" ? (
+              <>
+                <ControlRow label={copy.antiFlicker}>
+                  <Segmented
+                    options={[
+                      { value: "50hz", label: "50Hz" },
+                      { value: "60hz", label: "60Hz" },
+                      { value: "auto", label: copy.auto },
+                    ]}
+                    value={config.antiFlicker}
+                    onChange={(value) => settings.set({ antiFlicker: value })}
+                  />
+                </ControlRow>
+                <Note>{copy.antiFlickerNote}</Note>
+              </>
+            ) : null}
+            {configLocked && (show("quality") || show("camera")) ? (
+              <Note>{copy.lockedNote}</Note>
+            ) : null}
+
+            {/* Camera mặc định mỗi lần mở app — danh sách dọc kèm id vì máy
+                thật phơi ra nhiều camera TRÙNG NHÃN. */}
+            {show("camera") ? (
+              <>
+                <ControlRow label={copy.defaultCamera} />
+                <View style={[styles.cameraList, configLocked && uiStyles.disabled]}>
+                  <CameraOption
+                    label={copy.autoCamera}
+                    hint={copy.autoCameraHint}
+                    active={config.cameraId === null}
+                    disabled={configLocked}
+                    onPress={() => settings.set({ cameraId: null })}
+                  />
+                  {live.cameras.map((camera) => (
+                    <CameraOption
+                      key={camera.deviceId}
+                      label={camera.facing === "front" ? copy.frontCamera : copy.backCamera}
+                      hint={copy.cameraIdHint(camera.deviceId)}
+                      active={config.cameraId === camera.deviceId}
+                      disabled={configLocked}
+                      onPress={() => settings.set({ cameraId: camera.deviceId })}
+                    />
+                  ))}
+                </View>
+              </>
+            ) : null}
+
+            {show("zoom") && caps?.zoom.supported ? (
+              <ControlRow label={copy.zoom}>
+                <View style={uiStyles.presetRow}>
+                  {ZOOM_PRESETS.filter(
+                    (preset) => preset >= caps.zoom.min && preset <= caps.zoom.max,
+                  ).map((preset) => (
+                    <PresetButton
+                      key={preset}
+                      label={`${preset}x`}
+                      active={zoom === preset}
+                      onPress={() => {
+                        setZoomValue(preset);
+                        void setZoom(preset);
+                      }}
+                    />
+                  ))}
+                </View>
+              </ControlRow>
+            ) : null}
+
+            {show("exposure") && caps?.exposureBias.supported ? (
+              <ControlRow label={copy.ev}>
+                <View style={uiStyles.presetRow}>
+                  {EV_PRESETS.filter(
+                    (preset) =>
+                      preset >= caps.exposureBias.min && preset <= caps.exposureBias.max,
+                  ).map((preset) => (
+                    <PresetButton
+                      key={preset}
+                      label={preset > 0 ? `+${preset}` : `${preset}`}
+                      active={ev === preset}
+                      onPress={() => {
+                        setEvValue(preset);
+                        void setExposureBias(preset);
+                      }}
+                    />
+                  ))}
+                </View>
+              </ControlRow>
+            ) : null}
+
+            {show("locks") && caps?.focusLock.supported ? (
+              <ControlRow label={copy.focusLock}>
+                <Switch
+                  value={focusLocked}
+                  accessibilityLabel={copy.focusLock}
+                  onValueChange={(value) => {
+                    setFocusLockedValue(value);
+                    void setFocusLocked(value);
+                  }}
+                />
+              </ControlRow>
+            ) : null}
+            {show("locks") && caps?.exposureLock.supported ? (
+              <ControlRow label={copy.exposureLock}>
+                <Switch
+                  value={exposureLocked}
+                  accessibilityLabel={copy.exposureLock}
+                  onValueChange={(value) => {
+                    setExposureLockedValue(value);
+                    void setExposureLocked(value);
+                  }}
+                />
+              </ControlRow>
+            ) : null}
+            {show("torch") && caps?.torch.supported ? (
+              <ControlRow label={copy.torch}>
+                <Switch
+                  value={torch}
+                  accessibilityLabel={copy.torch}
+                  onValueChange={(value) => {
+                    setTorchValue(value);
+                    void setTorch(value);
+                  }}
+                />
+              </ControlRow>
+            ) : null}
+
+            {show("uplink") ? (
+              <>
+                <ControlRow label={copy.network} />
+                <Pressable
+                  accessibilityRole="button"
+                  disabled={net.running || netBusy}
+                  onPress={() => void runNetworkCheck()}
+                  style={[uiStyles.actionButton, (net.running || netBusy) && uiStyles.disabled]}
+                >
+                  <Text style={uiStyles.actionButtonText}>
+                    {net.running ? copy.running : copy.runCheck}
+                  </Text>
+                </Pressable>
+                {netBusy ? <Note>{copy.busyNote}</Note> : null}
+                {net.result ? (
+                  <Text
+                    style={[
+                      styles.netResult,
+                      net.result.verdict === "good"
+                        ? styles.netGood
+                        : net.result.verdict === "ok"
+                          ? styles.netOk
+                          : styles.netLow,
+                    ]}
+                  >
+                    {copy.resultLine({
+                      uploadMbps: net.result.uploadMbps,
+                      requiredMbps: net.result.requiredMbps,
+                      resolution: config.resolution,
+                      fps: config.fps,
+                      pingMs: net.result.pingMs,
+                    })}
+                    {"\n"}
+                    {net.result.verdict === "good"
+                      ? copy.good
+                      : net.result.verdict === "ok"
+                        ? copy.ok
+                        : copy.low}
+                  </Text>
+                ) : null}
+                {net.error ? <Note>{net.error}</Note> : null}
+              </>
+            ) : null}
+
+            {footer}
+          </ScrollView>
+        </SafeAreaView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlaySide: { flex: 1, flexDirection: "row" },
+  overlayBottom: { flex: 1, flexDirection: "column" },
+  // Phần còn lại: mờ NHẸ để vẫn canh được khung hình trong lúc chỉnh; bấm là đóng.
+  backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.3)" },
+  // Màn ngang: panel NỬA PHẢI — label và nút đứng gần nhau, nửa trái vẫn thấy
+  // khung hình. minWidth giữ dùng được trên màn hẹp, maxWidth để tablet không
+  // thành tấm bảng quá khổ.
+  panelSide: {
+    width: "50%",
+    minWidth: 340,
+    maxWidth: 480,
+    backgroundColor: uiColors.panel,
+    borderLeftWidth: 1,
+    borderLeftColor: uiColors.hairline,
+  },
+  // Màn dọc: bottom-sheet tối đa 70% chiều cao.
+  panelBottom: {
+    maxHeight: "70%",
+    backgroundColor: uiColors.panel,
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    borderTopWidth: 1,
+    borderTopColor: uiColors.hairline,
+  },
+  panelHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: uiColors.hairline,
+  },
+  closeX: {
+    width: 30,
+    height: 30,
+    borderRadius: 999,
+    backgroundColor: "rgba(255,255,255,0.1)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  closeXText: { color: uiColors.textSecondary, fontSize: 14, fontWeight: "700" },
+  content: { padding: 14, paddingBottom: 24, gap: 10 },
+  heading: { color: uiColors.text, fontSize: 15, fontWeight: "800" },
+  netResult: { fontSize: 12, fontWeight: "700", lineHeight: 17 },
+  netGood: { color: uiColors.good },
+  netOk: { color: uiColors.ok },
+  netLow: { color: uiColors.low },
+  cameraList: { gap: 5 },
+});