react-native-expo-video-player 0.1.0

package/src/VideoControls.tsx

@@ -0,0 +1,654 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Animated,
+  Platform,
+  type GestureResponderEvent,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useEvent } from 'expo';
+import Slider from '@react-native-community/slider';
+import type { VideoControlsProps } from './types';
+import { PlayerIcon } from './PlayerIcon';
+
+const defaultThumbImage = Platform.OS === 'ios' ? require('./assets/slider-thumb.png') : undefined;
+
+/** 格式化秒数为 m:ss */
+const formatTime = (seconds: number) => {
+  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: React.FC<VideoControlsProps> = ({
+  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<{
+    type: 'volume' | 'brightness' | 'seek';
+    value: number;
+  } | null>(null);
+
+  const lastTapRef = useRef(0);
+  const gestureStartValue = useRef(0);
+  const gestureType = useRef<'volume' | 'brightness' | 'seek' | null>(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<ReturnType<typeof setTimeout> | null>(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: any;
+      try {
+        Brightness = require('expo-brightness');
+        Brightness.getBrightnessAsync().then((b: number) => setBrightness(b)).catch(() => {});
+      } catch {}
+    }
+  }, [isFullscreen, enableGestures]);
+
+  // 全屏手势处理
+  const onGestureTouchStart = useCallback(
+    (e: GestureResponderEvent) => {
+      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: GestureResponderEvent) => {
+      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: number) => {
+    setSeekValue(value);
+    setCurrentTime(value);
+  };
+  const handleSeekComplete = (value: number) => {
+    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: number) => {
+    player.playbackRate = speed;
+    setPlaybackRate(speed);
+    setShowSpeedPicker(false);
+    setShowQualityPicker(false);
+    resetHideTimer();
+  };
+
+  /** 切换画质：通过 replaceAsync 切换视频 URL */
+  const handleQualityChange = async (option: { label: string; url: string } | null) => {
+    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 (
+    <View
+      style={StyleSheet.absoluteFill}
+      onTouchStart={onGestureTouchStart}
+      onTouchMove={onGestureTouchMove}
+      onTouchEnd={onGestureTouchEnd}
+    >
+      <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleTap}>
+        {(visible || !isPlaying) && (
+          <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+            {/* 返回按钮 */}
+            <TouchableOpacity
+              onPress={onBack}
+              style={[styles.backBtn, { top: 6, left: isFullscreen ? insets.left + 8 : 8 }]}
+              activeOpacity={0.7}
+            >
+              <PlayerIcon name="arrow-left" size={24} color="#fff" />
+            </TouchableOpacity>
+
+            {/* 底部控制栏 */}
+            <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,
+                },
+              ]}
+            >
+              <TouchableOpacity onPress={togglePlay} style={styles.playBtn} activeOpacity={0.7}>
+                <PlayerIcon name={isPlaying ? 'pause' : 'play'} size={22} color="#fff" />
+              </TouchableOpacity>
+
+              <Text style={styles.timeText}>{formatTime(displayTime)}</Text>
+
+              <View style={styles.sliderContainer}>
+                <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 } : {})}
+                />
+              </View>
+
+              <Text style={styles.timeText}>{formatTime(duration)}</Text>
+
+              {showSpeedPickerButton && (
+                <TouchableOpacity
+                  onPress={() => {
+                    setShowSpeedPicker(!showSpeedPicker);
+                    setShowQualityPicker(false);
+                    resetHideTimer();
+                  }}
+                  style={styles.bottomBtn}
+                  activeOpacity={0.7}
+                >
+                  <Text style={styles.speedText}>
+                    {playbackRate === 1 ? speedLabel : `${playbackRate}x`}
+                  </Text>
+                </TouchableOpacity>
+              )}
+
+              {showQualityPickerButton && (
+                <TouchableOpacity
+                  onPress={() => {
+                    setShowQualityPicker(!showQualityPicker);
+                    setShowSpeedPicker(false);
+                    resetHideTimer();
+                  }}
+                  style={styles.bottomBtn}
+                  activeOpacity={0.7}
+                >
+                  <Text style={styles.speedText}>
+                    {selectedQualityLabel === '自动' ? qualityLabel : selectedQualityLabel}
+                  </Text>
+                </TouchableOpacity>
+              )}
+
+              {showFullscreenButton && (
+                <TouchableOpacity
+                  onPress={handleFullscreen}
+                  style={styles.bottomBtn}
+                  activeOpacity={0.7}
+                >
+                  <PlayerIcon
+                    name={isFullscreen ? 'fullscreen-exit' : 'fullscreen'}
+                    size={22}
+                    color="#fff"
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+
+            {/* 倍速选择器 */}
+            {showSpeedPicker && (
+              <View
+                style={[
+                  styles.speedPicker,
+                  {
+                    right: isFullscreen ? insets.right + 12 : 12,
+                    bottom: isFullscreen
+                      ? 44 + Math.max(insets.bottom, Platform.OS === 'ios' ? 8 : 4)
+                      : 44,
+                  },
+                ]}
+              >
+                {speedOptions.map((speed) => (
+                  <TouchableOpacity
+                    key={speed}
+                    style={[
+                      styles.speedOption,
+                      playbackRate === speed && { backgroundColor: theme.primary },
+                    ]}
+                    onPress={() => handleSpeedChange(speed)}
+                    activeOpacity={0.7}
+                  >
+                    <Text
+                      style={[
+                        styles.speedOptionText,
+                        playbackRate === speed && { color: '#fff' },
+                      ]}
+                    >
+                      {speed === 1 ? '1.0x' : `${speed}x`}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
+
+            {/* 画质选择器 */}
+            {showQualityPicker && qualityOptions.length > 0 && (
+              <View
+                style={[
+                  styles.speedPicker,
+                  {
+                    right: isFullscreen ? insets.right + 12 : 12,
+                    bottom: isFullscreen
+                      ? 44 + Math.max(insets.bottom, Platform.OS === 'ios' ? 8 : 4)
+                      : 44,
+                  },
+                ]}
+              >
+                <TouchableOpacity
+                  style={[
+                    styles.speedOption,
+                    selectedQualityLabel === '自动' && { backgroundColor: theme.primary },
+                  ]}
+                  onPress={() => handleQualityChange(null)}
+                  activeOpacity={0.7}
+                >
+                  <Text
+                    style={[
+                      styles.speedOptionText,
+                      selectedQualityLabel === '自动' && { color: '#fff' },
+                    ]}
+                  >
+                    自动
+                  </Text>
+                </TouchableOpacity>
+                {qualityOptions.map((option) => (
+                  <TouchableOpacity
+                    key={option.label}
+                    style={[
+                      styles.speedOption,
+                      selectedQualityLabel === option.label && { backgroundColor: theme.primary },
+                    ]}
+                    onPress={() => handleQualityChange(option)}
+                    activeOpacity={0.7}
+                  >
+                    <Text
+                      style={[
+                        styles.speedOptionText,
+                        selectedQualityLabel === option.label && { color: '#fff' },
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
+          </Animated.View>
+        )}
+      </TouchableOpacity>
+
+      {/* 手势提示指示器 */}
+      {gestureHint && (
+        <View style={styles.gestureIndicator} pointerEvents="none">
+          {gestureHint.type !== 'seek' ? (
+            <>
+              <PlayerIcon
+                name={
+                  gestureHint.type === 'volume'
+                    ? gestureHint.value === 0
+                      ? 'volume-off'
+                      : gestureHint.value < 0.5
+                        ? 'volume-medium'
+                        : 'volume-high'
+                    : 'brightness-6'
+                }
+                size={22}
+                color="#fff"
+              />
+              <View style={styles.gestureBarBg}>
+                <View
+                  style={[
+                    styles.gestureBarFill,
+                    { height: `${Math.round(gestureHint.value * 100)}%` },
+                  ]}
+                />
+              </View>
+              <Text style={styles.gestureValueText}>
+                {Math.round(gestureHint.value * 100)}%
+              </Text>
+            </>
+          ) : (
+            <>
+              <PlayerIcon
+                name={gestureHint.value >= 0 ? 'fast-forward' : 'rewind'}
+                size={22}
+                color="#fff"
+              />
+              <Text style={styles.gestureSeekText}>
+                {gestureHint.value >= 0 ? '+' : ''}
+                {Math.round(gestureHint.value)}s
+              </Text>
+              <Text style={styles.gestureSeekTime}>{formatTime(seekTarget.current)}</Text>
+            </>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+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/src/index.ts

@@ -0,0 +1,23 @@
+export { ExpoVideoPlayer } from './ExpoVideoPlayer';
+export { VideoControls } from './VideoControls';
+export { useFullscreen } from './useFullscreen';
+export { PlayerIcon } from './PlayerIcon';
+export type { ExpoVideoPlayerProps, VideoControlsProps, VideoPlayerTheme } from './types';
+
+// 从 expo-video 重新导出常用符号，方便使用者直接引入
+export {
+  useVideoPlayer,
+  VideoView,
+  createVideoPlayer,
+  isPictureInPictureSupported,
+} from 'expo-video';
+export type {
+  VideoSource,
+  VideoPlayer,
+  VideoPlayerStatus,
+  VideoPlayerEvents,
+  VideoContentFit,
+  DRMOptions,
+  BufferOptions,
+  VideoMetadata,
+} from 'expo-video';