feat: show remaining time in bottomcontrols when time is tapped

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

@@ -1,4 +1,5 @@
-import { View } from "react-native";
+import { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
 
 import { usePlayerStore } from "~/stores/player/store";
 import { Text } from "../ui/Text";
@@ -8,6 +9,22 @@ import { mapMillisecondsToTime } from "./utils";
 
 export const BottomControls = () => {
   const status = usePlayerStore((state) => state.status);
+  const [showRemaining, setShowRemaining] = useState(false);
+
+  const toggleTimeDisplay = () => {
+    setShowRemaining(!showRemaining);
+  };
+
+  const getTimeDisplay = () => {
+    if (status?.isLoaded) {
+      if (showRemaining) {
+        const remainingTime =
+          (status.durationMillis ?? 0) - (status.positionMillis ?? 0);
+        return "-" + mapMillisecondsToTime(remainingTime);
+      }
+      return mapMillisecondsToTime(status.durationMillis ?? 0);
+    }
+  };
 
   if (status?.isLoaded) {
     return (
@@ -18,9 +35,9 @@ export const BottomControls = () => {
               {mapMillisecondsToTime(status.positionMillis ?? 0)}
             </Text>
             <ProgressBar />
-            <Text className="font-bold">
-              {mapMillisecondsToTime(status.durationMillis ?? 0)}
-            </Text>
+            <TouchableOpacity onPress={toggleTimeDisplay}>
+              <Text className="font-bold">{getTimeDisplay()}</Text>
+            </TouchableOpacity>
           </View>
         </View>
       </Controls>