react-native-expo-video-player 0.1.0

package/src/types.ts

@@ -0,0 +1,89 @@
+import type { VideoView } from 'expo-video';
+
+/**
+ * 从 VideoView 组件中提取 props 类型。
+ * 用于透传所有原生 VideoView 属性。
+ */
+type VideoViewProps = React.ComponentProps<typeof VideoView>;
+
+export interface VideoPlayerTheme {
+  /** 主题色，用于滑块、选中状态等 */
+  primary: string;
+  /** 文字颜色 */
+  text?: string;
+  /** 次要文字颜色 */
+  textSecondary?: string;
+}
+
+/**
+ * ExpoVideoPlayer 组件的 Props。
+ *
+ * 继承了 expo-video 的所有原生 `VideoView` 属性（如 `contentFit`、
+ * `allowsPictureInPicture`、`surfaceType`、`onFirstFrameRender` 等）。
+ *
+ * 内部管理的属性（`player`、`nativeControls`、`style`）已排除，
+ * 请使用本接口中的专用属性代替。
+ */
+export interface ExpoVideoPlayerProps
+  extends Omit<VideoViewProps, 'player' | 'nativeControls' | 'style'> {
+  /** expo-video 的 VideoPlayer 实例，通过 useVideoPlayer() 创建 */
+  player: import('expo-video').VideoPlayer;
+  /** 播放器 UI 主题色 */
+  theme?: VideoPlayerTheme;
+  /** 是否当前处于全屏模式 */
+  isFullscreen?: boolean;
+  /** 全屏切换回调 */
+  onToggleFullscreen?: () => void;
+  /** 返回按钮回调 */
+  onBack?: () => void;
+  /** 倍速选项，默认 [0.5, 0.75, 1, 1.25, 1.5, 2] */
+  speedOptions?: number[];
+  /** 1x 速度时显示的文字，默认 "倍速" */
+  speedLabel?: string;
+  /** 控制栏自动隐藏超时（毫秒），默认 3000 */
+  autoHideTimeout?: number;
+  /** 是否启用全屏手势（音量/亮度/快进），默认 true */
+  enableGestures?: boolean;
+  /** 是否显示倍速按钮，默认 true */
+  showSpeedPicker?: boolean;
+  /** 是否显示全屏按钮，默认 true */
+  showFullscreenButton?: boolean;
+  /** 是否显示画质选择按钮，默认 false */
+  showQualityPicker?: boolean;
+  /** 画质选择标签（按钮上"自动"时显示的文字），默认 "画质" */
+  qualityLabel?: string;
+  /**
+   * 画质选项列表，格式为 { label: string; url: string }[]。
+   * 示例: [{ label: '1080p', url: 'https://...' }, { label: '720p', url: 'https://...' }]
+   * 会自动在最前面添加"自动"选项（使用第一个 URL）。
+   * 不传或为空数组时画质按钮不会显示。
+   */
+  qualityOptions?: Array<{ label: string; url: string }>;
+  /** 画质切换回调，返回选中的画质标签和 URL，null 表示选择了"自动" */
+  onQualityChange?: (quality: { label: string; url: string } | null) => void;
+  /** 自定义滑块拇指图片（require() 结果），iOS 专用 */
+  thumbImage?: any;
+  /** 视频容器宽度（非全屏），默认窗口宽度 */
+  width?: number;
+  /** 视频容器高度（非全屏），默认 width * 9/16 */
+  height?: number;
+}
+
+export interface VideoControlsProps {
+  player: import('expo-video').VideoPlayer;
+  theme: VideoPlayerTheme;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+  onBack: () => void;
+  speedOptions: number[];
+  speedLabel: string;
+  autoHideTimeout: number;
+  enableGestures: boolean;
+  showSpeedPicker: boolean;
+  showFullscreenButton: boolean;
+  showQualityPicker: boolean;
+  qualityLabel: string;
+  qualityOptions: Array<{ label: string; url: string }>;
+  onQualityChange: (quality: { label: string; url: string } | null) => void;
+  thumbImage?: any;
+}

package/src/useFullscreen.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform, StatusBar, BackHandler } from 'react-native';
+
+/**
+ * 全屏状态管理 Hook：屏幕方向锁定、状态栏显隐、Android 返回键处理。
+ *
+ * 需要 `expo-screen-orientation` 作为 peer dependency。
+ */
+export function useFullscreen(initialFullscreen = false) {
+  const [isFullscreen, setIsFullscreen] = useState(initialFullscreen);
+  const prevOrientation = useRef<number | null>(null);
+
+  const enterFullscreen = useCallback(async () => {
+    try {
+      const ScreenOrientation = require('expo-screen-orientation');
+      prevOrientation.current = await ScreenOrientation.getOrientationLockAsync?.() ?? null;
+      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
+    } catch {}
+    StatusBar.setHidden(true, 'fade');
+    setIsFullscreen(true);
+  }, []);
+
+  const exitFullscreen = useCallback(async () => {
+    try {
+      const ScreenOrientation = require('expo-screen-orientation');
+      await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
+    } catch {}
+    StatusBar.setHidden(false, 'fade');
+    setIsFullscreen(false);
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    if (isFullscreen) exitFullscreen();
+    else enterFullscreen();
+  }, [isFullscreen, enterFullscreen, exitFullscreen]);
+
+  // Android 返回键退出全屏
+  useEffect(() => {
+    if (Platform.OS !== 'android' || !isFullscreen) return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      exitFullscreen();
+      return true;
+    });
+    return () => sub.remove();
+  }, [isFullscreen, exitFullscreen]);
+
+  // 组件卸载时恢复屏幕方向
+  useEffect(() => {
+    return () => {
+      try {
+        const ScreenOrientation = require('expo-screen-orientation');
+        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP).catch(() => {});
+      } catch {}
+      StatusBar.setHidden(false, 'fade');
+    };
+  }, []);
+
+  return {
+    isFullscreen,
+    enterFullscreen,
+    exitFullscreen,
+    toggleFullscreen,
+  };
+}