better music selection

src/screens/Studio/SongReady.js

@@ -16,7 +16,7 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
-import { Style } from "../../styles";
+import { Palette, Style } from "../../styles";
 import { gutters, size } from "../../styles/Style";
 import { isWeb } from "../../hooks/useLayoutType";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
@@ -97,6 +97,7 @@ const SongReady = () => {
   }, [player0, player1]);
 
   const togglePlay = async (idx) => {
+    setSelectedIndex(idx);
     const url = musicUrls[idx];
     if (!url) return;
     try {
@@ -245,13 +246,29 @@ const SongReady = () => {
           }}
         />
         <View style={{ gap: 16 }}>
-          {[0, 1].map((idx) => (
+          {[0, 1].map((idx) => {
-            <BlurView
+            const isSelected = selectedIndex === idx;
+            return (
+              <Pressable
                 key={idx}
+                onPress={() => setSelectedIndex(idx)}
+                style={({ pressed }) => [
+                  {
+                    borderRadius: 20,
+                    borderWidth: isSelected ? 2 : 1,
+                    borderColor: isSelected
+                      ? Palette.primary
+                      : Palette.ultraLightWhite,
+                    overflow: "hidden",
+                  },
+                  pressed && { opacity: 0.96 },
+                ]}
+              >
+                <BlurView
                   intensity={Platform.OS !== "ios" ? 10 : 40}
                   tint="dark"
                   style={{
-                borderRadius: 16,
+                    borderRadius: 18,
                     overflow: "hidden",
                     padding: 12,
                     backgroundColor: "#FFFFFF0A",
@@ -261,13 +278,22 @@ const SongReady = () => {
                   // }
                 >
                   <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+                    style={{
+                      flexDirection: "row",
+                      alignItems: "center",
+                      gap: 12,
+                    }}
                   >
                     <Pressable
                       onPress={() => togglePlay(idx)}
-                  style={{ ...Style.containerCenter, ...size({ size: 48 }) }}
+                      style={{
+                        ...Style.containerCenter,
+                        ...size({ size: 48 }),
+                      }}
                     >
-                  <Image source={isPlaying[idx] ? icons.pause : icons.play} />
+                      <Image
+                        source={isPlaying[idx] ? icons.pause : icons.play}
+                      />
                     </Pressable>
                     <View style={{ flex: 1 }}>
                       <Text
@@ -281,14 +307,17 @@ const SongReady = () => {
                         maxValue={fmt(progressInfo[idx]?.dur)}
                         progress={
                           progressInfo[idx]?.dur
-                        ? (progressInfo[idx].pos || 0) / progressInfo[idx].dur
+                            ? (progressInfo[idx].pos || 0) /
+                              progressInfo[idx].dur
                             : 0
                         }
                         seekEnabled={!!musicUrls[idx]}
                         onSeekStart={async () => {
+                          setSelectedIndex(idx);
                           try {
                             const player = idx === 0 ? player0 : player1;
-                        wasPlayingBeforeSeek.current[idx] = !!player?.playing;
+                            wasPlayingBeforeSeek.current[idx] =
+                              !!player?.playing;
                             if (player?.playing) {
                               await player.pause?.();
                               setIsPlaying((p) => ({ ...p, [idx]: false }));
@@ -310,14 +339,20 @@ const SongReady = () => {
                             }
                             wasPlayingBeforeSeek.current[idx] = false;
                           } catch (e) {
-                        console.log("SongReady resume after seek", e?.message);
+                            console.log(
+                              "SongReady resume after seek",
+                              e?.message
+                            );
                           }
                         }}
                       />
                     </View>
                     <Pressable
                       onPress={() => setSelectedIndex(idx)}
-                  style={{ ...Style.containerCenter, ...size({ size: 24 }) }}
+                      style={{
+                        ...Style.containerCenter,
+                        ...size({ size: 24 }),
+                      }}
                     >
                       <View
                         style={{
@@ -325,18 +360,20 @@ const SongReady = () => {
                           height: 18,
                           borderRadius: 9,
                           borderWidth: 2,
-                      borderColor: "white",
+                          borderColor: isSelected
+                            ? Palette.primary
+                            : "white",
                           alignItems: "center",
                           justifyContent: "center",
                         }}
                       >
-                    {selectedIndex === idx && (
+                        {isSelected && (
                           <View
                             style={{
                               width: 10,
                               height: 10,
                               borderRadius: 5,
-                          backgroundColor: "white",
+                              backgroundColor: Palette.primary,
                             }}
                           />
                         )}
@@ -344,7 +381,9 @@ const SongReady = () => {
                     </Pressable>
                   </View>
                 </BlurView>
-          ))}
+              </Pressable>
+            );
+          })}
         </View>
       </View>
       <View