react-native-expo-video-player 0.1.0

package/lib/VideoControls.js

@@ -0,0 +1,429 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View, Animated, Platform, } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useEvent } from 'expo';
+import Slider from '@react-native-community/slider';
+import { PlayerIcon } from './PlayerIcon';
+const defaultThumbImage = Platform.OS === 'ios' ? require('./assets/slider-thumb.png') : undefined;
+/** 格式化秒数为 m:ss */
+const formatTime = (seconds) => {
+    if (!seconds || seconds < 0)
+        return '0:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+};
+export const VideoControls = ({ player, theme, isFullscreen, onToggleFullscreen, onBack, speedOptions, speedLabel, autoHideTimeout, enableGestures, showSpeedPicker: showSpeedPickerButton, showFullscreenButton, showQualityPicker: showQualityPickerButton, qualityLabel, qualityOptions, onQualityChange, thumbImage, }) => {
+    const insets = useSafeAreaInsets();
+    const { isPlaying } = useEvent(player, 'playingChange', { isPlaying: player.playing });
+    const { status } = useEvent(player, 'statusChange', { status: player.status });
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [visible, setVisible] = useState(true);
+    const [isSeeking, setIsSeeking] = useState(false);
+    const [seekValue, setSeekValue] = useState(0);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const [showSpeedPicker, setShowSpeedPicker] = useState(false);
+    const [showQualityPicker, setShowQualityPicker] = useState(false);
+    const [selectedQualityLabel, setSelectedQualityLabel] = useState('自动');
+    const [brightness, setBrightness] = useState(0.5);
+    const [gestureHint, setGestureHint] = useState(null);
+    const lastTapRef = useRef(0);
+    const gestureStartValue = useRef(0);
+    const gestureType = useRef(null);
+    const touchStartY = useRef(0);
+    const touchStartX = useRef(0);
+    const isGesturing = useRef(false);
+    const seekTarget = useRef(0);
+    const fadeAnim = useRef(new Animated.Value(1)).current;
+    const hideTimer = useRef(null);
+    const resolvedThumbImage = thumbImage ?? defaultThumbImage;
+    // 时间更新
+    useEffect(() => {
+        player.timeUpdateEventInterval = 0.5;
+        const sub = player.addListener('timeUpdate', (payload) => {
+            if (!isSeeking)
+                setCurrentTime(payload.currentTime);
+        });
+        return () => sub.remove();
+    }, [player, isSeeking]);
+    // 从资源加载获取时长
+    useEffect(() => {
+        const sub = player.addListener('sourceLoad', (payload) => {
+            setDuration(payload.duration);
+        });
+        if (player.duration > 0)
+            setDuration(player.duration);
+        return () => sub.remove();
+    }, [player]);
+    // 全屏时初始化亮度
+    useEffect(() => {
+        if (isFullscreen && enableGestures) {
+            let Brightness;
+            try {
+                Brightness = require('expo-brightness');
+                Brightness.getBrightnessAsync().then((b) => setBrightness(b)).catch(() => { });
+            }
+            catch { }
+        }
+    }, [isFullscreen, enableGestures]);
+    // 全屏手势处理
+    const onGestureTouchStart = useCallback((e) => {
+        if (!isFullscreen || !enableGestures)
+            return;
+        touchStartX.current = e.nativeEvent.pageX;
+        touchStartY.current = e.nativeEvent.pageY;
+        isGesturing.current = false;
+        gestureType.current = null;
+    }, [isFullscreen, enableGestures]);
+    const onGestureTouchMove = useCallback((e) => {
+        if (!isFullscreen || !enableGestures)
+            return;
+        const dx = e.nativeEvent.pageX - touchStartX.current;
+        const dy = e.nativeEvent.pageY - touchStartY.current;
+        if (!isGesturing.current && !gestureType.current) {
+            if (Math.abs(dy) > 15 && Math.abs(dy) > Math.abs(dx) * 1.5) {
+                const windowWidth = Dimensions.get('window').width;
+                const isLeft = touchStartX.current < windowWidth / 2;
+                gestureType.current = isLeft ? 'volume' : 'brightness';
+                gestureStartValue.current = isLeft ? player.volume : brightness;
+                isGesturing.current = true;
+            }
+            else if (Math.abs(dx) > 15 && Math.abs(dx) > Math.abs(dy) * 1.5) {
+                gestureType.current = 'seek';
+                gestureStartValue.current = player.currentTime;
+                seekTarget.current = player.currentTime;
+                isGesturing.current = true;
+            }
+            return;
+        }
+        if (!isGesturing.current)
+            return;
+        const delta = -dy / 200;
+        if (gestureType.current === 'volume') {
+            const newVal = Math.max(0, Math.min(1, gestureStartValue.current + delta));
+            player.volume = newVal;
+            setGestureHint({ type: 'volume', value: newVal });
+        }
+        else if (gestureType.current === 'brightness') {
+            const newVal = Math.max(0, Math.min(1, gestureStartValue.current + delta));
+            try {
+                const Brightness = require('expo-brightness');
+                Brightness.setBrightnessAsync(newVal).catch(() => { });
+            }
+            catch { }
+            setBrightness(newVal);
+            setGestureHint({ type: 'brightness', value: newVal });
+        }
+        else if (gestureType.current === 'seek') {
+            const seekDelta = Math.max(-120, Math.min(120, dx * 0.5));
+            const newTime = Math.max(0, Math.min(duration, gestureStartValue.current + seekDelta));
+            seekTarget.current = newTime;
+            setGestureHint({ type: 'seek', value: seekDelta });
+        }
+    }, [isFullscreen, enableGestures, player, brightness, duration]);
+    const onGestureTouchEnd = useCallback(() => {
+        if (isGesturing.current) {
+            if (gestureType.current === 'seek') {
+                player.currentTime = seekTarget.current;
+            }
+            isGesturing.current = false;
+            gestureType.current = null;
+            setGestureHint(null);
+        }
+    }, [player]);
+    // 控制栏自动隐藏
+    const resetHideTimer = useCallback(() => {
+        if (hideTimer.current)
+            clearTimeout(hideTimer.current);
+        if (isPlaying) {
+            hideTimer.current = setTimeout(() => {
+                Animated.timing(fadeAnim, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: true,
+                }).start(() => setVisible(false));
+            }, autoHideTimeout);
+        }
+    }, [isPlaying, fadeAnim, autoHideTimeout]);
+    useEffect(() => {
+        if (isPlaying) {
+            resetHideTimer();
+        }
+        else {
+            if (hideTimer.current)
+                clearTimeout(hideTimer.current);
+            setVisible(true);
+            fadeAnim.setValue(1);
+        }
+        return () => {
+            if (hideTimer.current)
+                clearTimeout(hideTimer.current);
+        };
+    }, [isPlaying, resetHideTimer, fadeAnim]);
+    const toggleVisibility = () => {
+        if (visible) {
+            Animated.timing(fadeAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }).start(() => setVisible(false));
+        }
+        else {
+            setVisible(true);
+            fadeAnim.setValue(1);
+            resetHideTimer();
+        }
+    };
+    const togglePlay = () => {
+        if (isPlaying)
+            player.pause();
+        else
+            player.play();
+        resetHideTimer();
+    };
+    const handleSeekStart = () => setIsSeeking(true);
+    const handleSeekChange = (value) => {
+        setSeekValue(value);
+        setCurrentTime(value);
+    };
+    const handleSeekComplete = (value) => {
+        player.currentTime = value;
+        setIsSeeking(false);
+        resetHideTimer();
+    };
+    const handleTap = () => {
+        const now = Date.now();
+        if (now - lastTapRef.current < 300) {
+            togglePlay();
+            lastTapRef.current = 0;
+        }
+        else {
+            lastTapRef.current = now;
+            setTimeout(() => {
+                if (lastTapRef.current !== 0 && Date.now() - lastTapRef.current >= 280) {
+                    toggleVisibility();
+                    lastTapRef.current = 0;
+                }
+            }, 300);
+        }
+    };
+    const handleSpeedChange = (speed) => {
+        player.playbackRate = speed;
+        setPlaybackRate(speed);
+        setShowSpeedPicker(false);
+        setShowQualityPicker(false);
+        resetHideTimer();
+    };
+    /** 切换画质：通过 replaceAsync 切换视频 URL */
+    const handleQualityChange = async (option) => {
+        const prevTime = player.currentTime;
+        const wasPlaying = player.playing;
+        if (option) {
+            await player.replaceAsync(option.url);
+        }
+        else if (qualityOptions.length > 0) {
+            // "自动"选项：使用第一个 URL
+            await player.replaceAsync(qualityOptions[0].url);
+        }
+        // 恢复播放进度和状态
+        player.currentTime = prevTime;
+        if (wasPlaying)
+            player.play();
+        setSelectedQualityLabel(option?.label ?? '自动');
+        setShowQualityPicker(false);
+        onQualityChange(option);
+        resetHideTimer();
+    };
+    const handleFullscreen = () => {
+        onToggleFullscreen();
+        resetHideTimer();
+    };
+    const displayTime = isSeeking ? seekValue : currentTime;
+    return (_jsxs(View, { style: StyleSheet.absoluteFill, onTouchStart: onGestureTouchStart, onTouchMove: onGestureTouchMove, onTouchEnd: onGestureTouchEnd, children: [_jsx(TouchableOpacity, { style: StyleSheet.absoluteFill, activeOpacity: 1, onPress: handleTap, children: (visible || !isPlaying) && (_jsxs(Animated.View, { style: [styles.overlay, { opacity: fadeAnim }], children: [_jsx(TouchableOpacity, { onPress: onBack, style: [styles.backBtn, { top: 6, left: isFullscreen ? insets.left + 8 : 8 }], activeOpacity: 0.7, children: _jsx(PlayerIcon, { name: "arrow-left", size: 24, color: "#fff" }) }), _jsxs(View, { style: [
+                                styles.bottomBar,
+                                {
+                                    paddingBottom: isFullscreen
+                                        ? Math.max(insets.bottom, Platform.OS === 'ios' ? 8 : 4)
+                                        : 2,
+                                    paddingLeft: isFullscreen ? insets.left + 12 : 12,
+                                    paddingRight: isFullscreen ? insets.right + 12 : 12,
+                                },
+                            ], children: [_jsx(TouchableOpacity, { onPress: togglePlay, style: styles.playBtn, activeOpacity: 0.7, children: _jsx(PlayerIcon, { name: isPlaying ? 'pause' : 'play', size: 22, color: "#fff" }) }), _jsx(Text, { style: styles.timeText, children: formatTime(displayTime) }), _jsx(View, { style: styles.sliderContainer, children: _jsx(Slider, { style: styles.slider, minimumValue: 0, maximumValue: duration > 0 ? duration : 1, value: displayTime, onSlidingStart: handleSeekStart, onValueChange: handleSeekChange, onSlidingComplete: handleSeekComplete, minimumTrackTintColor: theme.primary, maximumTrackTintColor: "rgba(255,255,255,0.3)", thumbTintColor: theme.primary, thumbImage: resolvedThumbImage, ...(Platform.OS === 'ios' ? { tapToSeek: true } : {}) }) }), _jsx(Text, { style: styles.timeText, children: formatTime(duration) }), showSpeedPickerButton && (_jsx(TouchableOpacity, { onPress: () => {
+                                        setShowSpeedPicker(!showSpeedPicker);
+                                        setShowQualityPicker(false);
+                                        resetHideTimer();
+                                    }, style: styles.bottomBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.speedText, children: playbackRate === 1 ? speedLabel : `${playbackRate}x` }) })), showQualityPickerButton && (_jsx(TouchableOpacity, { onPress: () => {
+                                        setShowQualityPicker(!showQualityPicker);
+                                        setShowSpeedPicker(false);
+                                        resetHideTimer();
+                                    }, style: styles.bottomBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.speedText, children: selectedQualityLabel === '自动' ? qualityLabel : selectedQualityLabel }) })), showFullscreenButton && (_jsx(TouchableOpacity, { onPress: handleFullscreen, style: styles.bottomBtn, activeOpacity: 0.7, children: _jsx(PlayerIcon, { name: isFullscreen ? 'fullscreen-exit' : 'fullscreen', size: 22, color: "#fff" }) }))] }), showSpeedPicker && (_jsx(View, { style: [
+                                styles.speedPicker,
+                                {
+                                    right: isFullscreen ? insets.right + 12 : 12,
+                                    bottom: isFullscreen
+                                        ? 44 + Math.max(insets.bottom, Platform.OS === 'ios' ? 8 : 4)
+                                        : 44,
+                                },
+                            ], children: speedOptions.map((speed) => (_jsx(TouchableOpacity, { style: [
+                                    styles.speedOption,
+                                    playbackRate === speed && { backgroundColor: theme.primary },
+                                ], onPress: () => handleSpeedChange(speed), activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                        styles.speedOptionText,
+                                        playbackRate === speed && { color: '#fff' },
+                                    ], children: speed === 1 ? '1.0x' : `${speed}x` }) }, speed))) })), showQualityPicker && qualityOptions.length > 0 && (_jsxs(View, { style: [
+                                styles.speedPicker,
+                                {
+                                    right: isFullscreen ? insets.right + 12 : 12,
+                                    bottom: isFullscreen
+                                        ? 44 + Math.max(insets.bottom, Platform.OS === 'ios' ? 8 : 4)
+                                        : 44,
+                                },
+                            ], children: [_jsx(TouchableOpacity, { style: [
+                                        styles.speedOption,
+                                        selectedQualityLabel === '自动' && { backgroundColor: theme.primary },
+                                    ], onPress: () => handleQualityChange(null), activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                            styles.speedOptionText,
+                                            selectedQualityLabel === '自动' && { color: '#fff' },
+                                        ], children: "\u81EA\u52A8" }) }), qualityOptions.map((option) => (_jsx(TouchableOpacity, { style: [
+                                        styles.speedOption,
+                                        selectedQualityLabel === option.label && { backgroundColor: theme.primary },
+                                    ], onPress: () => handleQualityChange(option), activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                            styles.speedOptionText,
+                                            selectedQualityLabel === option.label && { color: '#fff' },
+                                        ], children: option.label }) }, option.label)))] }))] })) }), gestureHint && (_jsx(View, { style: styles.gestureIndicator, pointerEvents: "none", children: gestureHint.type !== 'seek' ? (_jsxs(_Fragment, { children: [_jsx(PlayerIcon, { name: gestureHint.type === 'volume'
+                                ? gestureHint.value === 0
+                                    ? 'volume-off'
+                                    : gestureHint.value < 0.5
+                                        ? 'volume-medium'
+                                        : 'volume-high'
+                                : 'brightness-6', size: 22, color: "#fff" }), _jsx(View, { style: styles.gestureBarBg, children: _jsx(View, { style: [
+                                    styles.gestureBarFill,
+                                    { height: `${Math.round(gestureHint.value * 100)}%` },
+                                ] }) }), _jsxs(Text, { style: styles.gestureValueText, children: [Math.round(gestureHint.value * 100), "%"] })] })) : (_jsxs(_Fragment, { children: [_jsx(PlayerIcon, { name: gestureHint.value >= 0 ? 'fast-forward' : 'rewind', size: 22, color: "#fff" }), _jsxs(Text, { style: styles.gestureSeekText, children: [gestureHint.value >= 0 ? '+' : '', Math.round(gestureHint.value), "s"] }), _jsx(Text, { style: styles.gestureSeekTime, children: formatTime(seekTarget.current) })] })) }))] }));
+};
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.15)',
+        justifyContent: 'flex-end',
+    },
+    backBtn: {
+        position: 'absolute',
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    bottomBar: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingTop: 4,
+    },
+    timeText: {
+        color: '#fff',
+        fontSize: 12,
+        fontVariant: ['tabular-nums'],
+        minWidth: 36,
+        textAlign: 'center',
+    },
+    sliderContainer: {
+        flex: 1,
+        marginHorizontal: 4,
+    },
+    slider: {
+        width: '100%',
+        height: Platform.OS === 'ios' ? 20 : 28,
+    },
+    bottomBtn: {
+        marginLeft: 6,
+        width: 32,
+        height: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    playBtn: {
+        width: 32,
+        height: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    speedText: {
+        color: '#fff',
+        fontSize: 11,
+        fontWeight: '600',
+    },
+    speedPicker: {
+        position: 'absolute',
+        backgroundColor: 'rgba(0,0,0,0.85)',
+        borderRadius: 8,
+        paddingVertical: 4,
+        paddingHorizontal: 4,
+        flexDirection: 'row',
+        gap: 4,
+    },
+    speedOption: {
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 6,
+    },
+    speedOptionText: {
+        color: 'rgba(255,255,255,0.8)',
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    gestureIndicator: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        marginTop: -60,
+        marginLeft: -36,
+        width: 72,
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.7)',
+        borderRadius: 8,
+        paddingVertical: 8,
+        paddingHorizontal: 6,
+    },
+    gestureBarBg: {
+        width: 4,
+        height: 60,
+        backgroundColor: 'rgba(255,255,255,0.3)',
+        borderRadius: 2,
+        marginTop: 6,
+        overflow: 'hidden',
+        justifyContent: 'flex-end',
+    },
+    gestureBarFill: {
+        width: '100%',
+        backgroundColor: '#fff',
+        borderRadius: 2,
+    },
+    gestureValueText: {
+        color: '#fff',
+        fontSize: 10,
+        marginTop: 4,
+        fontVariant: ['tabular-nums'],
+    },
+    gestureSeekText: {
+        color: '#fff',
+        fontSize: 14,
+        fontWeight: '600',
+        marginTop: 4,
+        fontVariant: ['tabular-nums'],
+    },
+    gestureSeekTime: {
+        color: 'rgba(255,255,255,0.7)',
+        fontSize: 10,
+        marginTop: 2,
+        fontVariant: ['tabular-nums'],
+    },
+});

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export { ExpoVideoPlayer } from './ExpoVideoPlayer';
+export { VideoControls } from './VideoControls';
+export { useFullscreen } from './useFullscreen';
+export { PlayerIcon } from './PlayerIcon';
+export type { ExpoVideoPlayerProps, VideoControlsProps, VideoPlayerTheme } from './types';
+export { useVideoPlayer, VideoView, createVideoPlayer, isPictureInPictureSupported, } from 'expo-video';
+export type { VideoSource, VideoPlayer, VideoPlayerStatus, VideoPlayerEvents, VideoContentFit, DRMOptions, BufferOptions, VideoMetadata, } from 'expo-video';

package/lib/index.js

@@ -0,0 +1,6 @@
+export { ExpoVideoPlayer } from './ExpoVideoPlayer';
+export { VideoControls } from './VideoControls';
+export { useFullscreen } from './useFullscreen';
+export { PlayerIcon } from './PlayerIcon';
+// 从 expo-video 重新导出常用符号，方便使用者直接引入
+export { useVideoPlayer, VideoView, createVideoPlayer, isPictureInPictureSupported, } from 'expo-video';

package/lib/types.d.ts

@@ -0,0 +1,97 @@
+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;
+}
+export {};

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/lib/useFullscreen.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 全屏状态管理 Hook：屏幕方向锁定、状态栏显隐、Android 返回键处理。
+ *
+ * 需要 `expo-screen-orientation` 作为 peer dependency。
+ */
+export declare function useFullscreen(initialFullscreen?: boolean): {
+    isFullscreen: boolean;
+    enterFullscreen: () => Promise<void>;
+    exitFullscreen: () => Promise<void>;
+    toggleFullscreen: () => void;
+};

package/lib/useFullscreen.js

@@ -0,0 +1,63 @@
+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(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,
+    };
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-native-expo-video-player",
+  "version": "0.1.0",
+  "description": "基于 expo-video 的功能丰富的 React Native 视频播放器组件，内置自定义控制栏、全屏手势、倍速切换等功能。",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "video",
+    "player",
+    "expo-video",
+    "fullscreen",
+    "controls",
+    "gesture"
+  ],
+  "author": "xiaocheng",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xiaocheng121380/react-native-expo-video-player.git"
+  },
+  "peerDependencies": {
+    "expo": ">=51.0.0",
+    "expo-brightness": ">=12.0.0",
+    "expo-screen-orientation": ">=7.0.0",
+    "expo-video": ">=2.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.75.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "@react-native-community/slider": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": ">=18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ]
+}