From 0b0fd0585db317db0fae0c77048f6062f74bbdd1 Mon Sep 17 00:00:00 2001
From: danis <amaury.danis-cousandier@epitech.eu>
Date: Fri, 22 Sep 2023 15:49:12 +0200
Subject: [PATCH] added DurationInfo

---
 front/components/SongRow.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/front/components/SongRow.tsx b/front/components/SongRow.tsx
index c300a46..5e8ad24 100644
--- a/front/components/SongRow.tsx
+++ b/front/components/SongRow.tsx
@@ -11,6 +11,26 @@ type SongRowProps = {
 	handleLike: (state: boolean, songId: number) => Promise<void>;
 };
 
+type DurationInfoProps = {
+    length: number;
+}
+
+const DurationInfo = ({length}: DurationInfoProps) => {
+    const minutes = Math.floor(length / 60);
+    const seconds = Math.round(length - minutes * 60);
+
+    return (
+        <Text
+        style={{
+            flexShrink: 0,
+        }}
+        fontSize={'sm'}
+    >
+        {`${minutes}'${seconds}` ?? '--.--'}
+    </Text>
+    );
+}
+
 const SongRow = ({ song, onPress, handleLike, isLiked }: SongRowProps) => {
 	return (
 		<RowCustom width={'100%'}>
@@ -55,14 +75,7 @@ const SongRow = ({ song, onPress, handleLike, isLiked }: SongRowProps) => {
 					>
 						{song.artistId ?? 'artist'}
 					</Text>
-					<Text
-						style={{
-							flexShrink: 0,
-						}}
-						fontSize={'sm'}
-					>
-						{song.details.length ?? '--.--'}
-					</Text>
+					<DurationInfo length={song.details.length}/>
 				</HStack>
 				<IconButton
 					colorScheme="rose"