start with expo-video (broken)

JorrinKievit · Aug 12, 2024 · 2d98413 · 2d98413
1 parent 3bc17a6
commit 2d98413
Show file tree

Hide file tree

Showing 20 changed files with 253 additions and 286 deletions.
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -43,6 +43,7 @@ const defineConfig = (): ExpoConfig => ({
   },
   plugins: [
     "expo-router",
+    "expo-video",
     [withRemoveiOSNotificationEntitlement as unknown as string],
     [
       "expo-screen-orientation",

diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -21,80 +21,81 @@
     "browserify-sign": "4.2.2"
   },
   "dependencies": {
-    "@expo/metro-config": "^0.17.3",
+    "@expo/metro-config": "~0.17.1",
     "@movie-web/api": "workspace:*",
     "@movie-web/colors": "workspace:*",
     "@movie-web/provider-utils": "workspace:*",
     "@movie-web/tmdb": "workspace:*",
     "@octokit/rest": "^20.0.2",
     "@react-native-anywhere/polyfill-base64": "0.0.1-alpha.0",
-    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native": "^6.1.18",
     "@salihgun/react-native-video-processor": "^0.3.1",
-    "@tamagui/animations-moti": "^1.96.0",
-    "@tamagui/babel-plugin": "^1.96.0",
-    "@tamagui/config": "^1.96.0",
-    "@tamagui/metro-plugin": "^1.96.0",
-    "@tamagui/toast": "1.96.0",
-    "@tanstack/react-query": "^5.22.2",
-    "ajv": "^8.13.0",
+    "@tamagui/animations-moti": "1.94.0",
+    "@tamagui/babel-plugin": "1.94.0",
+    "@tamagui/config": "1.94.0",
+    "@tamagui/metro-plugin": "1.94.0",
+    "@tamagui/toast": "1.94.0",
+    "@tanstack/react-query": "^5.51.23",
+    "ajv": "^8.17.1",
     "burnt": "^0.12.2",
     "class-variance-authority": "^0.7.0",
-    "expo": "~50.0.14",
-    "expo-alternate-app-icons": "^0.1.7",
+    "expo": "~50.0.20",
+    "expo-alternate-app-icons": "^0.1.9",
     "expo-application": "~5.8.3",
     "expo-av": "~13.10.5",
     "expo-brightness": "~11.8.0",
     "expo-build-properties": "~0.11.1",
-    "expo-clipboard": "^5.0.1",
+    "expo-clipboard": "~5.0.1",
     "expo-constants": "~15.4.5",
     "expo-file-system": "~16.0.8",
     "expo-haptics": "~12.8.1",
     "expo-keep-awake": "~12.8.2",
-    "expo-linear-gradient": "^12.7.2",
+    "expo-linear-gradient": "~12.7.2",
     "expo-linking": "~6.2.2",
     "expo-media-library": "~15.9.1",
-    "expo-navigation-bar": "^2.8.1",
+    "expo-navigation-bar": "~2.8.1",
     "expo-network": "~5.8.0",
     "expo-pod-pinner": "^1.0.1",
     "expo-router": "~3.4.10",
     "expo-screen-orientation": "~6.4.1",
     "expo-splash-screen": "~0.26.5",
     "expo-status-bar": "~1.11.1",
-    "expo-system-ui": "^2.9.3",
-    "expo-web-browser": "^12.8.2",
+    "expo-system-ui": "~2.9.3",
+    "expo-video": "~1.2.4",
+    "expo-web-browser": "~12.8.2",
     "ffmpeg-kit-react-native": "^6.0.2",
-    "immer": "^10.0.3",
+    "immer": "^10.1.1",
     "iso-639-1": "^3.1.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
     "react-native": "0.73.6",
     "react-native-gesture-handler": "~2.14.1",
     "react-native-markdown-display": "^7.0.2",
     "react-native-mmkv": "^2.12.2",
     "react-native-modal": "^13.0.1",
     "react-native-quick-base64": "^2.1.2",
-    "react-native-quick-crypto": "^0.6.1",
+    "react-native-quick-crypto": "^0.7.3",
     "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "~4.8.2",
+    "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-svg": "14.1.0",
-    "react-native-web": "^0.19.10",
+    "react-native-web": "^0.19.12",
     "subsrt-ts": "^2.1.2",
-    "tamagui": "^1.94.0",
+    "tamagui": "1.94.0",
     "text-encoding-polyfill": "^0.6.7",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/runtime": "^7.23.9",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
     "@movie-web/eslint-config": "workspace:^0.2.0",
     "@movie-web/prettier-config": "workspace:^0.1.0",
     "@movie-web/tsconfig": "workspace:^0.1.0",
-    "@tanstack/eslint-plugin-query": "^5.20.1",
+    "@tanstack/eslint-plugin-query": "^5.51.15",
     "@types/babel__core": "^7.20.5",
-    "@types/react": "~18.2.45",
-    "babel-plugin-module-resolver": "^5.0.0",
+    "@types/react": "~18.2.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^8.57.0",
     "prettier": "^3.2.5",
     "typescript": "^5.4.3"

diff --git a/apps/expo/src/app/(tabs)/search.tsx b/apps/expo/src/app/(tabs)/search.tsx
@@ -105,24 +105,26 @@ export default function SearchScreen() {
         scrollEnabled={searchResultsLoaded ? true : false}
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
-        contentContainerStyle={{ flexGrow: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
-        <View>
-          <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
-            <View flexDirection="row" flexWrap="wrap">
-              {data?.map((item, index) => (
-                <View
-                  key={index}
-                  paddingHorizontal={12}
-                  paddingBottom={12}
-                  width="50%"
-                >
-                  <Item data={item} />
-                </View>
-              ))}
-            </View>
-          </Animated.View>
-        </View>
+        <Animated.View style={[searchResultsStyle, { flex: 1 }]}>
+          <View flexDirection="row" flexWrap="wrap">
+            {data?.map((item, index) => (
+              <View
+                key={index}
+                paddingHorizontal={12}
+                paddingBottom={12}
+                width="50%"
+              >
+                <Item data={item} />
+              </View>
+            ))}
+          </View>
+        </Animated.View>
       </ScreenLayout>
       <Animated.View
         style={[

diff --git a/apps/expo/src/components/item/item.tsx b/apps/expo/src/components/item/item.tsx
@@ -120,7 +120,7 @@ export default function Item({ data }: { data: ItemData }) {
       onLongPress={handleLongPress}
       style={{ width: "100%" }}
     >
-      <View width="100%">
+      <View width="100%" justifyContent="center" alignItems="center">
         <View
           marginBottom={4}
           aspectRatio={9 / 14}
@@ -131,10 +131,10 @@ export default function Item({ data }: { data: ItemData }) {
         >
           <Image source={{ uri: posterUrl }} width="100%" height="100%" />
         </View>
-        <Text fontWeight="bold" fontSize={14}>
+        <Text fontWeight="bold" fontSize={14} numberOfLines={1}>
           {title}
         </Text>
-        <View flexDirection="row" alignItems="center" gap={3}>
+        <View flexDirection="row" alignItems="center" gap="$2">
           <Text fontSize={12} color="$ash100">
             {type === "tv" ? "Show" : "Movie"}
           </Text>

diff --git a/apps/expo/src/components/player/BottomControls.tsx b/apps/expo/src/components/player/BottomControls.tsx
@@ -18,10 +18,10 @@ import { ProgressBar } from "./ProgressBar";
 import { SeasonSelector } from "./SeasonEpisodeSelector";
 import { SettingsSelector } from "./SettingsSelector";
 import { SourceSelector } from "./SourceSelector";
-import { mapMillisecondsToTime } from "./utils";
+import { mapSecondsToTime } from "./utils";
 
 export const BottomControls = () => {
-  const status = usePlayerStore((state) => state.status);
+  const player = usePlayerStore((state) => state.player);
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
   const isLocalFile = usePlayerStore((state) => state.isLocalFile);
@@ -33,25 +33,23 @@ export const BottomControls = () => {
   }, [showRemaining, setIsIdle]);
 
   const { currentTime, remainingTime } = useMemo(() => {
-    if (status?.isLoaded) {
-      const current = mapMillisecondsToTime(status.positionMillis ?? 0);
-      const remaining = `-${mapMillisecondsToTime(
-        (status.durationMillis ?? 0) - (status.positionMillis ?? 0),
+    if (player) {
+      const current = mapSecondsToTime(player.currentTime);
+      const remaining = `-${mapSecondsToTime(
+        (player.duration ?? 0) - (player.currentTime ?? 0),
       )}`;
       return { currentTime: current, remainingTime: remaining };
     } else {
       return {
-        currentTime: mapMillisecondsToTime(0),
-        remainingTime: mapMillisecondsToTime(0),
+        currentTime: mapSecondsToTime(0),
+        remainingTime: mapSecondsToTime(0),
       };
     }
-  }, [status]);
+  }, [player]);
 
   const durationTime = useMemo(() => {
-    return mapMillisecondsToTime(
-      status?.isLoaded ? status.durationMillis ?? 0 : 0,
-    );
-  }, [status]);
+    return mapSecondsToTime(player?.duration ?? 0);
+  }, [player]);
 
   const translateY = useSharedValue(128);
 

diff --git a/apps/expo/src/components/player/CaptionRenderer.tsx b/apps/expo/src/components/player/CaptionRenderer.tsx
@@ -8,7 +8,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { Text, View } from "tamagui";
 
-import { convertMilliSecondsToSeconds } from "~/lib/number";
 import { useCaptionsStore } from "~/stores/captions";
 import { usePlayerStore } from "~/stores/player/store";
 
@@ -27,10 +26,10 @@ export const captionIsVisible = (
 };
 
 export const CaptionRenderer = () => {
+  const player = usePlayerStore((state) => state.player);
   const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const selectedCaption = useCaptionsStore((state) => state.selectedCaption);
   const delay = useCaptionsStore((state) => state.delay);
-  const status = usePlayerStore((state) => state.status);
 
   const translateY = useSharedValue(0);
 
@@ -56,20 +55,12 @@ export const CaptionRenderer = () => {
   const visibleCaptions = useMemo(
     () =>
       selectedCaption?.data.filter(({ start, end }) =>
-        captionIsVisible(
-          start,
-          end,
-          delay,
-          status?.isLoaded
-            ? convertMilliSecondsToSeconds(status.positionMillis)
-            : 0,
-        ),
+        captionIsVisible(start, end, delay, player ? player.currentTime : 0),
       ),
-    [selectedCaption, delay, status],
+    [selectedCaption, player, delay],
   );
 
-  if (!status?.isLoaded || !selectedCaption || !visibleCaptions?.length)
-    return null;
+  if (!player || !selectedCaption || !visibleCaptions?.length) return null;
 
   return (
     <Animated.View

diff --git a/apps/expo/src/components/player/PlayButton.tsx b/apps/expo/src/components/player/PlayButton.tsx
@@ -4,38 +4,31 @@ import { Spinner } from "tamagui";
 import { usePlayerStore } from "~/stores/player/store";
 
 export const PlayButton = () => {
-  const videoRef = usePlayerStore((state) => state.videoRef);
-  const status = usePlayerStore((state) => state.status);
+  const player = usePlayerStore((state) => state.player);
   const playAudio = usePlayerStore((state) => state.playAudio);
   const pauseAudio = usePlayerStore((state) => state.pauseAudio);
 
-  if (
-    status?.isLoaded &&
-    !status.isPlaying &&
-    status.isBuffering &&
-    status.positionMillis > status.playableDurationMillis!
-  ) {
+  if (!player) return null;
+
+  if (player.status === "loading") {
     return <Spinner size="large" color="white" />;
   }
 
   return (
     <FontAwesome
-      name={status?.isLoaded && status.isPlaying ? "pause" : "play"}
+      name={player.playing ? "pause" : "play"}
       size={36}
       color="white"
       onPress={() => {
-        if (status?.isLoaded) {
-          if (status.isPlaying) {
-            videoRef?.pauseAsync().catch(() => {
-              console.log("Error pausing video");
-            });
-            void pauseAudio();
-          } else {
-            videoRef?.playAsync().catch(() => {
-              console.log("Error playing video");
-            });
-            void playAudio();
-          }
+        if (player.playing) {
+          void pauseAudio();
+        } else {
+          void playAudio();
+        }
+
+        if (!player.playing) {
+          player.play();
+          void playAudio();
         }
       }}
     />

diff --git a/apps/expo/src/components/player/PlaybackSpeedSelector.tsx b/apps/expo/src/components/player/PlaybackSpeedSelector.tsx
@@ -44,11 +44,8 @@ export const PlaybackSpeedSelector = (props: SheetProps) => {
                 )
               }
               onPress={() => {
-                changePlaybackSpeed(speed)
-                  .then(() => props.onOpenChange?.(false))
-                  .catch((err) => {
-                    console.log("error", err);
-                  });
+                changePlaybackSpeed(speed);
+                props.onOpenChange?.(false);
               }}
             />
           ))}

diff --git a/apps/expo/src/components/player/ProgressBar.tsx b/apps/expo/src/components/player/ProgressBar.tsx
@@ -5,19 +5,19 @@ import { usePlayerStore } from "~/stores/player/store";
 import VideoSlider from "./VideoSlider";
 
 export const ProgressBar = () => {
-  const status = usePlayerStore((state) => state.status);
-  const videoRef = usePlayerStore((state) => state.videoRef);
+  const player = usePlayerStore((state) => state.player);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
 
   const updateProgress = useCallback(
     (newProgress: number) => {
-      videoRef?.setStatusAsync({ positionMillis: newProgress }).catch(() => {
-        console.error("Error updating progress");
-      });
+      if (!player) return;
+      player.currentTime = newProgress * player.duration;
     },
-    [videoRef],
+    [player],
   );
 
+  if (!player) return null;
+
   return (
     <TouchableOpacity
       style={{
@@ -28,7 +28,7 @@ export const ProgressBar = () => {
         paddingTop: 24,
       }}
       onPress={() => setIsIdle(false)}
-      disabled={!status?.isLoaded}
+      disabled={player.status !== "readyToPlay"}
     >
       <VideoSlider onSlidingComplete={updateProgress} />
     </TouchableOpacity>