Improve layout, add current time and duration

apps/expo/src/app/videoPlayer/index.tsx

@@ -13,8 +13,7 @@ import { findHighestQuality } from "@movie-web/provider-utils";
 
 import type { ItemData } from "~/components/item/item";
 import type { HeaderData } from "~/components/player/Header";
-import { Header } from "~/components/player/Header";
-import { MiddleControls } from "~/components/player/MiddleControls";
+import { ControlsOverlay } from "~/components/player/ControlsOverlay";
 import { usePlayerStore } from "~/stores/player/store";
 
 export default function VideoPlayerWrapper() {
@@ -44,6 +43,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
   const scale = useSharedValue(1);
   const setVideoRef = usePlayerStore((state) => state.setVideoRef);
   const setStatus = usePlayerStore((state) => state.setStatus);
+  const isIdle = usePlayerStore((state) => state.interface.isIdle);
   const setIsIdle = usePlayerStore((state) => state.setIsIdle);
   const presentFullscreenPlayer = usePlayerStore(
     (state) => state.presentFullscreenPlayer,
@@ -67,6 +67,11 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
 
   useEffect(() => {
     const initializePlayer = async () => {
+      if (!data) {
+        await dismissFullscreenPlayer();
+        return router.push("/(tabs)");
+      }
+
       StatusBar.setStatusBarHidden(true);
 
       if (Platform.OS === "android") {
@@ -74,11 +79,6 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
       }
       setIsLoading(true);
 
-      if (!data) {
-        await dismissFullscreenPlayer();
-        return router.push("/(tabs)");
-      }
-
       const { item, stream, media } = data;
 
       setHeaderData({
@@ -145,16 +145,17 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ data }) => {
           ref={setVideoRef}
           source={videoSrc}
           shouldPlay
-          resizeMode={resizeMode}
+          resizeMode={ResizeMode.CONTAIN}
           onLoadStart={onVideoLoadStart}
           onReadyForDisplay={onReadyForDisplay}
           onPlaybackStatusUpdate={setStatus}
           style={styles.video}
-          onTouchStart={() => setIsIdle(false)}
+          onTouchStart={() => setIsIdle(!isIdle)}
         />
         {isLoading && <ActivityIndicator size="large" color="#0000ff" />}
-        {!isLoading && data && <Header data={headerData!} />}
-        {!isLoading && <MiddleControls />}
+        {!isLoading && headerData && (
+          <ControlsOverlay headerData={headerData} />
+        )}
       </View>
     </GestureDetector>
   );

apps/expo/src/components/player/BottomControls.tsx

@@ -0,0 +1,28 @@
+import { View } from "react-native";
+
+import { usePlayerStore } from "~/stores/player/store";
+import { Text } from "../ui/Text";
+import { Controls } from "./Controls";
+import { mapMillisecondsToTime } from "./utils";
+
+export const BottomControls = () => {
+  const status = usePlayerStore((state) => state.status);
+  status?.isLoaded;
+
+  if (status?.isLoaded) {
+    return (
+      <Controls>
+        <View className="flex h-16 w-full flex-row items-center justify-center">
+          <View className="flex flex-row items-center justify-center gap-2  px-4 py-2">
+            <Text className="font-bold">
+              {mapMillisecondsToTime(status.positionMillis ?? 0)}
+            </Text>
+            <Text className="font-bold">
+              {mapMillisecondsToTime(status.durationMillis ?? 0)}
+            </Text>
+          </View>
+        </View>
+      </Controls>
+    );
+  }
+};

apps/expo/src/components/player/Controls.tsx

@@ -1,5 +1,6 @@
+import type { TouchableOpacity } from "react-native";
 import React from "react";
-import { TouchableOpacity } from "react-native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 import { usePlayerStore } from "~/stores/player/store";
 
@@ -9,10 +10,14 @@ interface ControlsProps extends React.ComponentProps<typeof TouchableOpacity> {
 
 export const Controls = ({ children, className }: ControlsProps) => {
   const idle = usePlayerStore((state) => state.interface.isIdle);
+  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
 
   return (
-    <TouchableOpacity className={className}>
+    <TouchableWithoutFeedback
+      className={className}
+      onPress={() => setIsIdle(false)}
+    >
       {!idle && children}
-    </TouchableOpacity>
+    </TouchableWithoutFeedback>
   );
 };

apps/expo/src/components/player/ControlsOverlay.tsx

@@ -0,0 +1,20 @@
+import { View } from "react-native";
+
+import type { HeaderData } from "./Header";
+import { BottomControls } from "./BottomControls";
+import { Header } from "./Header";
+import { MiddleControls } from "./MiddleControls";
+
+interface ControlsOverlayProps {
+  headerData: HeaderData;
+}
+
+export const ControlsOverlay = ({ headerData }: ControlsOverlayProps) => {
+  return (
+    <View className="absolute left-0 top-0 flex h-full w-full flex-1">
+      <Header data={headerData} />
+      <MiddleControls />
+      <BottomControls />
+    </View>
+  );
+};

apps/expo/src/components/player/Header.tsx

@@ -1,5 +1,6 @@
 import { Image, View } from "react-native";
 
+import { usePlayerStore } from "~/stores/player/store";
 import Icon from "../../../assets/images/icon-transparent.png";
 import { Text } from "../ui/Text";
 import { BackButton } from "./BackButton";
@@ -17,18 +18,24 @@ interface HeaderProps {
 }
 
 export const Header = ({ data }: HeaderProps) => {
-  return (
-    <Controls className="absolute top-0 flex w-full flex-row items-center justify-between px-6 pt-6">
-      <BackButton className="w-36" />
-      <Text className="font-bold">
-        {data.season !== undefined && data.episode !== undefined
-          ? `${data.title} (${data.year}) S${data.season.toString().padStart(2, "0")}E${data.episode.toString().padStart(2, "0")}`
-          : `${data.title} (${data.year})`}
-      </Text>
-      <View className="flex w-36 flex-row items-center justify-center gap-2 space-x-2 rounded-full bg-secondary-300 px-4 py-2 opacity-80">
-        <Image source={Icon} className="h-6 w-6" />
-        <Text className="font-bold">movie-web</Text>
+  const isIdle = usePlayerStore((state) => state.interface.isIdle);
+
+  if (!isIdle) {
+    return (
+      <View className="flex h-16 w-full flex-row items-center justify-between px-6 pt-6">
+        <Controls>
+          <BackButton className="w-36" />
+        </Controls>
+        <Text className="font-bold">
+          {data.season !== undefined && data.episode !== undefined
+            ? `${data.title} (${data.year}) S${data.season.toString().padStart(2, "0")}E${data.episode.toString().padStart(2, "0")}`
+            : `${data.title} (${data.year})`}
+        </Text>
+        <View className="flex w-36 flex-row items-center justify-center gap-2 space-x-2 rounded-full bg-secondary-300 px-4 py-2 opacity-80">
+          <Image source={Icon} className="h-6 w-6" />
+          <Text className="font-bold">movie-web</Text>
+        </View>
       </View>
-    </Controls>
-  );
+    );
+  }
 };

apps/expo/src/components/player/MiddleControls.tsx

@@ -1,31 +1,21 @@
-import { TouchableWithoutFeedback, View } from "react-native";
+import { View } from "react-native";
 
-import { usePlayerStore } from "~/stores/player/store";
 import { Controls } from "./Controls";
 import { PlayButton } from "./PlayButton";
 import { SeekButton } from "./SeekButton";
 
 export const MiddleControls = () => {
-  const idle = usePlayerStore((state) => state.interface.isIdle);
-  const setIsIdle = usePlayerStore((state) => state.setIsIdle);
-
-  const handleTouch = () => {
-    setIsIdle(!idle);
-  };
-
   return (
-    <TouchableWithoutFeedback onPress={handleTouch}>
-      <View className="absolute inset-x-0 bottom-1/3 top-1/3 flex flex-row items-center justify-center gap-24">
-        <Controls>
-          <SeekButton type="backward" />
-        </Controls>
-        <Controls>
-          <PlayButton />
-        </Controls>
-        <Controls>
-          <SeekButton type="forward" />
-        </Controls>
-      </View>
-    </TouchableWithoutFeedback>
+    <View className="flex flex-1 flex-row items-center justify-center gap-24">
+      <Controls>
+        <SeekButton type="backward" />
+      </Controls>
+      <Controls>
+        <PlayButton />
+      </Controls>
+      <Controls>
+        <SeekButton type="forward" />
+      </Controls>
+    </View>
   );
 };

apps/expo/src/components/player/utils.ts

@@ -0,0 +1,18 @@
+export const mapMillisecondsToTime = (milliseconds: number): string => {
+  const hours = Math.floor(milliseconds / (1000 * 60 * 60));
+  const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
+
+  const components: string[] = [];
+
+  if (hours > 0) {
+    components.push(hours.toString().padStart(2, "0"));
+  }
+
+  components.push(minutes.toString().padStart(2, "0"));
+  components.push(seconds.toString().padStart(2, "0"));
+
+  const formattedTime = components.join(":");
+
+  return formattedTime;
+};