end of lyricks and misic generation

src/components/Slider.js

@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
+  runOnJS,
 } from "react-native-reanimated";
 import { LinearGradient } from "./LinearGradient/LinearGradient";
 import { Palette, Style } from "../styles";
@@ -11,7 +12,7 @@ import { FONT_FAMILY } from "../styles/Fonts";
 
 const INITIAL_BOX_SIZE = 6;
 
-export default ({ value, maxValue }) => {
+export default ({ value, maxValue, progress, onSeek, seekEnabled = false }) => {
   const offset = useSharedValue(0);
   const boxWidth = useSharedValue(INITIAL_BOX_SIZE);
   const [layout, setLayout] = useState(null);
@@ -19,19 +20,39 @@ export default ({ value, maxValue }) => {
   const SLIDER_WIDTH = layout?.width;
   const MAX_VALUE = SLIDER_WIDTH - INITIAL_BOX_SIZE;
 
-  const pan = Gesture.Pan().onChange((event) => {
-    offset.value =
-      Math.abs(offset.value) <= MAX_VALUE
-        ? offset.value + event.changeX <= 0
-          ? 0
-          : offset.value + event.changeX >= MAX_VALUE
-          ? MAX_VALUE
-          : offset.value + event.changeX
-        : offset.value;
+  const pan = Gesture.Pan()
+    .enabled(seekEnabled)
+    .onChange((event) => {
+      offset.value =
+        Math.abs(offset.value) <= MAX_VALUE
+          ? offset.value + event.changeX <= 0
+            ? 0
+            : offset.value + event.changeX >= MAX_VALUE
+            ? MAX_VALUE
+            : offset.value + event.changeX
+          : offset.value;
 
-    const newWidth = INITIAL_BOX_SIZE + offset.value;
-    boxWidth.value = newWidth;
-  });
+      const newWidth = INITIAL_BOX_SIZE + offset.value;
+      boxWidth.value = newWidth;
+    })
+    .onEnd(() => {
+      if (!seekEnabled || !onSeek || !MAX_VALUE) return;
+      const ratio = MAX_VALUE > 0 ? Math.min(1, Math.max(0, offset.value / MAX_VALUE)) : 0;
+      // Reanimated -> JS thread bridge
+      runOnJS(onSeek)(ratio);
+    });
+
+  // Reflect external progress into the slider UI
+  useEffect(() => {
+    if (typeof progress === "number" && layout?.width) {
+      const max = layout.width - INITIAL_BOX_SIZE;
+      const clamped = Math.max(0, Math.min(1, progress));
+      const newOffset = clamped * max;
+      offset.value = newOffset;
+      boxWidth.value = INITIAL_BOX_SIZE + newOffset;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progress, layout?.width]);
 
   const boxStyle = useAnimatedStyle(() => {
     return {