From cc05d7d0f6b24b514ddc22f26da87885f9051863 Mon Sep 17 00:00:00 2001
From: Dariusz Cebula <darko2448@gmail.com>
Date: Tue, 3 Jun 2025 14:13:33 +0200
Subject: [PATCH 1/2] Add react-native-community/slider to package.json

---
 frontend/package.json | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index c0cb452..6a4ac57 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,12 +17,13 @@
     "@expo-google-fonts/roboto-mono": "^0.3.0",
     "@expo/vector-icons": "^14.1.0",
     "@react-native-community/datetimepicker": "8.3.0",
+    "@react-native-community/slider": "^4.5.7",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "@tanstack/react-query": "^5.75.2",
-    "dotenv": "^16.5.0",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.5.0",
     "expo": "~53.0.0",
     "expo-blur": "~14.1.4",
     "expo-constants": "~17.1.5",
@@ -50,8 +51,8 @@
     "react-native-track-player": "^4.1.1",
     "react-native-web": "^0.20.0",
     "react-native-webview": "13.13.5",
-    "zustand": "^5.0.4",
-    "shaka-player": "^4.14.11"
+    "shaka-player": "^4.14.11",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

From 9dab45f6d98ba68d6fe67ebaa72f63c43d9c93f9 Mon Sep 17 00:00:00 2001
From: Dariusz Cebula <darko2448@gmail.com>
Date: Tue, 3 Jun 2025 14:14:37 +0200
Subject: [PATCH 2/2] Update Progress bar

---
 frontend/components/karaoke/SongSpinner.tsx | 67 +++++++++++++++------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/frontend/components/karaoke/SongSpinner.tsx b/frontend/components/karaoke/SongSpinner.tsx
index 21bcc37..f608f3d 100644
--- a/frontend/components/karaoke/SongSpinner.tsx
+++ b/frontend/components/karaoke/SongSpinner.tsx
@@ -1,28 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
 import { Text } from 'react-native';
+import TrackPlayer from 'react-native-track-player'; 
 import { useProgress } from 'react-native-track-player';
+import Slider from '@react-native-community/slider';
+import colors from '@/constants/colors';
 
 export default function SongSpinner() {
-  const progress = useProgress();
+  const [isSeeking, setIsSeeking] = useState(false);
+  const [seekPosition, setSeekPosition] = useState(0);
+  const progress = useProgress(50);
+
+  const formatTime = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
+  }
+
+  const position = isSeeking ? seekPosition : progress.position;
+
+  const handleSlidingStart = () => {
+    setIsSeeking(true);
+    setSeekPosition(progress.position);
+  }
+
+  const handleValueChange = (value: number) => {
+    setSeekPosition(value);
+  }
+
+  const handleSlidingComplete = async (value: number) => {
+    await TrackPlayer.seekTo(value);
+    setSeekPosition(value);
+    setIsSeeking(false);
+  }
 
   return (
-    <>
-      <View>
-        <Text>
-          Elapsed Time: {Math.floor(progress.position)}/{Math.floor(progress.duration)}s
-        </Text>
-        <View
-          style={{ height: 10, backgroundColor: '#e0e0e0', borderRadius: 5, overflow: 'hidden' }}>
-          <View
-            style={{
-              height: '100%',
-              width: `${(progress.duration > 0 ? progress.position / progress.duration : 0) * 100}%`,
-              backgroundColor: '#3b5998',
-            }}
-          />
-        </View>
-      </View>
-    </>
+    <View className="w-full flex flex-col items-center justify-center">
+      <Slider style={{ width: '90%', height: 40 }}
+        minimumValue={0}
+        maximumValue={progress.duration}
+        value={position}
+        onSlidingStart={handleSlidingStart}
+        onValueChange={handleValueChange}
+        onSlidingComplete={handleSlidingComplete}
+        minimumTrackTintColor={colors.background}
+        maximumTrackTintColor={colors['slate-gray']}
+        thumbTintColor={colors.background}
+      />
+      <Text className='text-base font-roboto-mono truncate'>
+        {formatTime(position)} / {formatTime(progress.duration)}
+      </Text>
+    </View>
   );
-}
+}
\ No newline at end of file