Duration component

front/components/DurationComponent.tsx

@@ -0,0 +1,29 @@
+import { Box, Icon, Text } from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
+
+type DurationComponentProps = {
+	length: number;
+};
+
+const DurationComponent = ({ length }: DurationComponentProps) => {
+	const minutes = Math.floor(length / 60);
+	const seconds = Math.round(length - minutes * 60);
+
+	return (
+		<Box flexDirection={'row'} >
+			<Icon as={MaterialIcons} name="timer" color="coolGray.800" _dark={{
+		color: "warmGray.50"
+		}} />
+			<Text
+				style={{
+					flexShrink: 0,
+				}}
+				fontSize={'sm'}
+			>
+				{`${minutes}'${seconds}` ?? '--\'--'}
+			</Text>
+		</Box>
+	);
+};
+
+export default DurationComponent;

front/components/FavSongRow.tsx

@@ -4,6 +4,7 @@ import TextButton from './TextButton';
 import { LikedSongWithDetails } from '../models/LikedSong';
 import { MaterialIcons } from '@expo/vector-icons';
 import API from '../API';
+import DurationComponent from './DurationComponent';
 
 type FavSongRowProps = {
 	FavSong: LikedSongWithDetails; // TODO: remove Song
@@ -54,6 +55,7 @@ const FavSongRow = ({ FavSong, onPress }: FavSongRowProps) => {
 					>
 						{FavSong.addedDate.toLocaleDateString()}
 					</Text>
+					<DurationComponent length={FavSong.details.details.length} />
 				</HStack>
 				<IconButton
 					colorScheme="primary"

front/components/SongRow.tsx

@@ -3,6 +3,7 @@ import Song, { SongWithArtist } from '../models/Song';
 import RowCustom from './RowCustom';
 import TextButton from './TextButton';
 import { MaterialIcons } from '@expo/vector-icons';
+import DurationComponent from './DurationComponent';
 
 type SongRowProps = {
 	song: Song | SongWithArtist; // TODO: remove Song
@@ -11,26 +12,6 @@ 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%'}>
@@ -75,7 +56,8 @@ const SongRow = ({ song, onPress, handleLike, isLiked }: SongRowProps) => {
 					>
 						{song.artistId ?? 'artist'}
 					</Text>
-					<DurationInfo length={song.details.length} />
+					{/* <DurationInfo length={song.details.length} /> */}
+					<DurationComponent length={song.details.length} />
 				</HStack>
 				<IconButton
 					colorScheme="rose"

front/views/SongLobbyView.tsx

@@ -7,6 +7,7 @@ import API from '../API';
 import TextButton from '../components/TextButton';
 import { RouteProps, useNavigation } from '../Navigation';
 import ScoreGraph from '../components/ScoreGraph';
+import DurationComponent from '../components/DurationComponent';
 
 interface SongLobbyProps {
 	// The unique identifier to find a song
@@ -66,6 +67,7 @@ const SongLobbyView = (props: RouteProps<SongLobbyProps>) => {
 								}
 							/>
 						</Text>
+                        <DurationComponent length={songQuery.data?.details.length} />
 						<TextButton
 							translate={{ translationKey: 'playBtn' }}
 							width="auto"