From 36678a6580a37f9dadf60409ac0227fc574bcc74 Mon Sep 17 00:00:00 2001
From: Adrian Castro <22133246+castdrian@users.noreply.github.com>
Date: Thu, 15 Feb 2024 19:28:00 +0100
Subject: [PATCH] feat: show remaining time in bottomcontrols when time is
 tapped

---
 .../src/components/player/BottomControls.tsx  | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/expo/src/components/player/BottomControls.tsx b/apps/expo/src/components/player/BottomControls.tsx
index c263702..e68eb2b 100644
--- a/apps/expo/src/components/player/BottomControls.tsx
+++ b/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>