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 }) => {