react-native-expo-video-player 0.1.0

package/src/ExpoVideoPlayer.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
+import { VideoView } from 'expo-video';
+import { VideoControls } from './VideoControls';
+import type { ExpoVideoPlayerProps, VideoPlayerTheme } from './types';
+
+const DEFAULT_THEME: VideoPlayerTheme = { primary: '#2979FF' };
+const DEFAULT_SPEED_OPTIONS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+/**
+ * 开箱即用的视频播放器组件，基于 `expo-video` 构建。
+ *
+ * 提供自定义浮层控制栏：播放/暂停、进度条、倍速切换、
+ * 全屏切换、全屏手势（音量/亮度/快进快退）。
+ *
+ * 所有原生 `VideoView` 属性（如 `contentFit`、`allowsPictureInPicture`、
+ * `surfaceType`、`onFirstFrameRender`、`onPictureInPictureStart` 等）
+ * 均会透传给底层 `VideoView` 组件。
+ *
+ * 可使用本包的 `useFullscreen()` hook 管理全屏状态，
+ * 也可自行提供 `isFullscreen` / `onToggleFullscreen`。
+ */
+export const ExpoVideoPlayer: React.FC<ExpoVideoPlayerProps> = ({
+  player,
+  theme,
+  isFullscreen = false,
+  onToggleFullscreen = () => {},
+  onBack = () => {},
+  speedOptions = DEFAULT_SPEED_OPTIONS,
+  speedLabel = '倍速',
+  autoHideTimeout = 3000,
+  enableGestures = true,
+  showSpeedPicker = true,
+  showFullscreenButton = true,
+  showQualityPicker = false,
+  qualityLabel = '画质',
+  qualityOptions = [],
+  onQualityChange = () => {},
+  thumbImage,
+  width: propWidth,
+  height: propHeight,
+  // --- 剩余属性全部透传给 VideoView ---
+  ...videoViewProps
+}) => {
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const resolvedTheme = { ...DEFAULT_THEME, ...theme };
+
+  const videoWidth = isFullscreen ? windowWidth : (propWidth ?? windowWidth);
+  const videoHeight = isFullscreen ? windowHeight : (propHeight ?? videoWidth * 9 / 16);
+
+  return (
+    <View style={isFullscreen ? styles.fullscreenContainer : { width: videoWidth, height: videoHeight }}>
+      <VideoView
+        player={player}
+        style={styles.video}
+        nativeControls={false}
+        {...videoViewProps}
+      />
+      <VideoControls
+        player={player}
+        theme={resolvedTheme}
+        isFullscreen={isFullscreen}
+        onToggleFullscreen={onToggleFullscreen}
+        onBack={onBack}
+        speedOptions={speedOptions}
+        speedLabel={speedLabel}
+        autoHideTimeout={autoHideTimeout}
+        enableGestures={enableGestures}
+        showSpeedPicker={showSpeedPicker}
+        showFullscreenButton={showFullscreenButton}
+        showQualityPicker={showQualityPicker}
+        qualityLabel={qualityLabel}
+        qualityOptions={qualityOptions}
+        onQualityChange={onQualityChange}
+        thumbImage={thumbImage}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullscreenContainer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#000',
+    zIndex: 999,
+  },
+  video: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/src/PlayerIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, StyleSheet, type TextStyle } from 'react-native';
+
+/**
+ * 基于 Unicode 符号的轻量级图标组件，无需引入外部图标库。
+ * 如需替换图标，使用者可通过 render props 自行覆盖。
+ */
+
+const ICONS: Record<string, string> = {
+  play: '▶',
+  pause: '❚❚',
+  'arrow-left': '←',
+  fullscreen: '⛶',
+  'fullscreen-exit': '⛶',
+  'fast-forward': '⏩',
+  rewind: '⏪',
+  'volume-off': '🔇',
+  'volume-medium': '🔉',
+  'volume-high': '🔊',
+  'brightness-4': '☀',
+  'brightness-6': '☀',
+  'brightness-7': '☀',
+};
+
+interface IconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  style?: TextStyle;
+}
+
+export const PlayerIcon: React.FC<IconProps> = ({ name, size = 22, color = '#fff', style }) => {
+  const icon = ICONS[name] || '?';
+  return (
+    <Text style={[styles.icon, { fontSize: size * 0.75, color, lineHeight: size }, style]}>
+      {icon}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: 'center',
+  },
+});