feat: add all source files - services, store, hooks, components, screens

components/VideoPlayer.tsx

@@ -0,0 +1,47 @@
+import React, { useRef, useState } from 'react';
+import { View, StyleSheet, Dimensions, Text } from 'react-native';
+import { Video, ResizeMode, AVPlaybackStatus } from 'expo-av';
+
+const { width } = Dimensions.get('window');
+const VIDEO_HEIGHT = width * 0.5625;
+
+interface Props {
+  uri: string | null;
+}
+
+export function VideoPlayer({ uri }: Props) {
+  const videoRef = useRef<Video>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const onPlaybackStatusUpdate = (s: AVPlaybackStatus) => {
+    if (s.isLoaded) setIsPlaying(s.isPlaying);
+  };
+
+  if (!uri) {
+    return (
+      <View style={[styles.container, styles.placeholder]}>
+        <Text style={styles.placeholderText}>视频加载中...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Video
+        ref={videoRef}
+        source={{ uri, headers: { Referer: 'https://www.bilibili.com' } }}
+        style={styles.video}
+        resizeMode={ResizeMode.CONTAIN}
+        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+        useNativeControls
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { width, height: VIDEO_HEIGHT, backgroundColor: '#000' },
+  video: { width, height: VIDEO_HEIGHT },
+  placeholder: { justifyContent: 'center', alignItems: 'center' },
+  placeholderText: { color: '#fff', fontSize: 14 },
+});