diff --git a/apps/expo/package.json b/apps/expo/package.json
index b6db05b..df8453a 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -26,6 +26,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"expo": "~50.0.5",
+ "expo-av": "~13.10.5",
"expo-build-properties": "~0.11.1",
"expo-constants": "~15.4.5",
"expo-linking": "~6.2.2",
@@ -34,6 +35,7 @@
"expo-splash-screen": "~0.26.4",
"expo-status-bar": "~1.11.1",
"expo-web-browser": "^12.8.2",
+ "immer": "^10.0.3",
"nativewind": "~4.0.23",
"react": "18.2.0",
"react-dom": "18.2.0",
@@ -45,9 +47,9 @@
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "~4.8.2",
"react-native-screens": "~3.29.0",
- "react-native-video": "6.0.0-beta.5",
"react-native-web": "^0.19.10",
- "tailwind-merge": "^2.2.1"
+ "tailwind-merge": "^2.2.1",
+ "zustand": "^4.4.7"
},
"devDependencies": {
"@babel/core": "^7.23.9",
diff --git a/apps/expo/src/app/videoPlayer.tsx b/apps/expo/src/app/videoPlayer.tsx
index af4abaf..e79eeca 100644
--- a/apps/expo/src/app/videoPlayer.tsx
+++ b/apps/expo/src/app/videoPlayer.tsx
@@ -1,11 +1,7 @@
-import type {
- ISO639_1,
- ReactVideoSource,
- TextTracks,
-} from "react-native-video";
+import type { AVPlaybackSource } from "expo-av";
import React, { useEffect, useState } from "react";
-import { ActivityIndicator, Platform, StyleSheet, View } from "react-native";
-import Video, { TextTracksType } from "react-native-video";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { ResizeMode, Video } from "expo-av";
import { useLocalSearchParams, useRouter } from "expo-router";
import * as ScreenOrientation from "expo-screen-orientation";
@@ -18,18 +14,14 @@ import { fetchMediaDetails } from "@movie-web/tmdb";
import type { ItemData } from "~/components/item/item";
import { Header } from "~/components/player/Header";
-import { PlayerProvider, usePlayer } from "~/context/player.context";
+import { usePlayerStore } from "~/stores/player/store";
export default function VideoPlayerWrapper() {
const params = useLocalSearchParams();
const data = params.data
? (JSON.parse(params.data as string) as ItemData)
: null;
- return (
-
-
-
- );
+ return ;
}
interface VideoPlayerProps {
@@ -37,16 +29,18 @@ interface VideoPlayerProps {
}
const VideoPlayer: React.FC = ({ data }) => {
- const [videoSrc, setVideoSrc] = useState();
- const [_textTracks, setTextTracks] = useState([]);
+ const [videoSrc, setVideoSrc] = useState();
const [isLoading, setIsLoading] = useState(true);
const router = useRouter();
- const {
- setVideoRef,
- unlockOrientation,
- presentFullscreenPlayer,
- dismissFullscreenPlayer,
- } = usePlayer();
+ const setVideoRef = usePlayerStore((state) => state.setVideoRef);
+ const setStatus = usePlayerStore((state) => state.setStatus);
+ const setIsIdle = usePlayerStore((state) => state.setIsIdle);
+ const presentFullscreenPlayer = usePlayerStore(
+ (state) => state.presentFullscreenPlayer,
+ );
+ const dismissFullscreenPlayer = usePlayerStore(
+ (state) => state.dismissFullscreenPlayer,
+ );
useEffect(() => {
const initializePlayer = async () => {
@@ -98,11 +92,11 @@ const VideoPlayer: React.FC = ({ data }) => {
url = stream.playlist;
}
- setTextTracks(
- stream.captions && stream.captions.length > 0
- ? convertCaptionsToTextTracks(stream.captions)
- : [],
- );
+ // setTextTracks(
+ // stream.captions && stream.captions.length > 0
+ // ? convertCaptionsToTextTracks(stream.captions)
+ // : [],
+ // );
setVideoSrc({
uri: url,
@@ -127,15 +121,8 @@ const VideoPlayer: React.FC = ({ data }) => {
return () => {
void dismissFullscreenPlayer();
- void unlockOrientation();
};
- }, [
- data,
- dismissFullscreenPlayer,
- presentFullscreenPlayer,
- router,
- unlockOrientation,
- ]);
+ }, [data, dismissFullscreenPlayer, presentFullscreenPlayer, router]);
const onVideoLoadStart = () => {
setIsLoading(true);
@@ -150,58 +137,56 @@ const VideoPlayer: React.FC = ({ data }) => {