feat: add video player

apps/expo/index.js

@@ -0,0 +1 @@
+import "expo-router/entry";

apps/expo/package.json

@@ -2,7 +2,7 @@
   "name": "@movie-web/mobile",
   "version": "0.1.0",
   "private": true,
-  "main": "expo-router/entry",
+  "main": "index.js",
   "scripts": {
     "clean": "git clean -xdf .expo .turbo node_modules",
     "dev": "expo start",

apps/expo/src/app/components/item/item.tsx

@@ -1,4 +1,5 @@
-import { Image, View } from "react-native";
+import { useRouter } from "expo-router";
+import { Image, View, TouchableOpacity } from "react-native";
 
 import { Text } from "~/components/ui/Text";
 
@@ -11,10 +12,18 @@ export interface ItemData {
 }
 
 export default function Item({ data }: { data: ItemData }) {
+  const router = useRouter();
   const { title, type, year, posterUrl } = data;
 
+  const handlePress = () => {
+    console.log('Item pressed. Opening VideoPlayer...');
+	router.push('/video-player');
+  };
+
   return (
-    <View className="w-full">
+    <TouchableOpacity onPress={handlePress} style={{ width: '100%' }}>
+      {
+	<View className="w-full">
       <View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
         <Image
           source={{
@@ -32,5 +41,7 @@ export default function Item({ data }: { data: ItemData }) {
         <Text className="text-sm text-gray-600">{year}</Text>
       </View>
     </View>
+	}
+    </TouchableOpacity>
   );
 }

apps/expo/src/app/video-player.tsx

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import type { VideoRef } from 'react-native-video';
+import Video from 'react-native-video';
+
+interface VideoPlayerState {
+  videoUrl: string;
+  fullscreen: boolean;
+  isLoading: boolean;
+  paused: boolean;
+}
+
+class VideoPlayer extends Component<object, VideoPlayerState> {
+  private videoPlayer: React.RefObject<VideoRef>;
+
+  constructor(props: object) {
+    super(props);
+    this.state = {
+      videoUrl: 'your_video_url',
+      fullscreen: true,
+      isLoading: true,
+      paused: false
+    };
+    this.videoPlayer = React.createRef();
+  }
+
+  componentDidMount() {
+    if (this.videoPlayer.current) {
+      this.videoPlayer.current.presentFullscreenPlayer();
+    }
+  }
+
+  onVideoLoadStart = () => {
+    this.setState({ isLoading: true });
+  };
+
+  onReadyForDisplay = () => {
+    this.setState({ isLoading: false });
+  };
+
+  onVideoError = () => {
+    console.log("Video playback error");
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Video
+          ref={this.videoPlayer}
+          source={{ uri: this.state.videoUrl }}
+          style={styles.fullScreen}
+          fullscreen={this.state.fullscreen}
+          paused={this.state.paused}
+          onLoadStart={this.onVideoLoadStart}
+          onReadyForDisplay={this.onReadyForDisplay}
+          onError={this.onVideoError}
+        />
+        {this.state.isLoading && (
+          <ActivityIndicator size="large" color="#0000ff" />
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'black',
+  },
+  fullScreen: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  }
+});
+
+export default VideoPlayer;