Improve layout, add current time and duration

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;
+};