From feb8d995349a7784464a5a15e31a8afa319a62a9 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Thu, 23 Oct 2025 16:29:01 +0200
Subject: [PATCH] better music selection

---
 src/screens/Studio/SongReady.js | 219 +++++++++++++++++++-------------
 1 file changed, 129 insertions(+), 90 deletions(-)

diff --git a/src/screens/Studio/SongReady.js b/src/screens/Studio/SongReady.js
index fdba00f..7602c0e 100644
--- a/src/screens/Studio/SongReady.js
+++ b/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,106 +246,144 @@ const SongReady = () => {
           }}
         />
         <View style={{ gap: 16 }}>
-          {[0, 1].map((idx) => (
-            <BlurView
-              key={idx}
-              intensity={Platform.OS !== "ios" ? 10 : 40}
-              tint="dark"
-              style={{
-                borderRadius: 16,
-                overflow: "hidden",
-                padding: 12,
-                backgroundColor: "#FFFFFF0A",
-              }}
-              // experimentalBlurMethod={
-              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-              // }
-            >
-              <View
-                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+          {[0, 1].map((idx) => {
+            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 },
+                ]}
               >
-                <Pressable
-                  onPress={() => togglePlay(idx)}
-                  style={{ ...Style.containerCenter, ...size({ size: 48 }) }}
-                >
-                  <Image source={isPlaying[idx] ? icons.pause : icons.play} />
-                </Pressable>
-                <View style={{ flex: 1 }}>
-                  <Text
-                    style={{
-                      color: "white",
-                      marginBottom: responsiveHeight(1),
-                    }}
-                  >{`Morceau ${idx + 1}`}</Text>
-                  <Slider
-                    value={fmt(progressInfo[idx]?.pos)}
-                    maxValue={fmt(progressInfo[idx]?.dur)}
-                    progress={
-                      progressInfo[idx]?.dur
-                        ? (progressInfo[idx].pos || 0) / progressInfo[idx].dur
-                        : 0
-                    }
-                    seekEnabled={!!musicUrls[idx]}
-                    onSeekStart={async () => {
-                      try {
-                        const player = idx === 0 ? player0 : player1;
-                        wasPlayingBeforeSeek.current[idx] = !!player?.playing;
-                        if (player?.playing) {
-                          await player.pause?.();
-                          setIsPlaying((p) => ({ ...p, [idx]: false }));
-                        }
-                      } catch (e) {
-                        console.log(
-                          "SongReady pause on seek start",
-                          e?.message
-                        );
-                      }
-                    }}
-                    onSeek={(ratio) => onSeek(idx, ratio)}
-                    onSeekEnd={async () => {
-                      try {
-                        const player = idx === 0 ? player0 : player1;
-                        if (player && wasPlayingBeforeSeek.current[idx]) {
-                          await player.play?.();
-                          setIsPlaying((p) => ({ ...p, [idx]: true }));
-                        }
-                        wasPlayingBeforeSeek.current[idx] = false;
-                      } catch (e) {
-                        console.log("SongReady resume after seek", e?.message);
-                      }
-                    }}
-                  />
-                </View>
-                <Pressable
-                  onPress={() => setSelectedIndex(idx)}
-                  style={{ ...Style.containerCenter, ...size({ size: 24 }) }}
+                <BlurView
+                  intensity={Platform.OS !== "ios" ? 10 : 40}
+                  tint="dark"
+                  style={{
+                    borderRadius: 18,
+                    overflow: "hidden",
+                    padding: 12,
+                    backgroundColor: "#FFFFFF0A",
+                  }}
+                  // experimentalBlurMethod={
+                  //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  // }
                 >
                   <View
                     style={{
-                      width: 18,
-                      height: 18,
-                      borderRadius: 9,
-                      borderWidth: 2,
-                      borderColor: "white",
+                      flexDirection: "row",
                       alignItems: "center",
-                      justifyContent: "center",
+                      gap: 12,
                     }}
                   >
-                    {selectedIndex === idx && (
-                      <View
+                    <Pressable
+                      onPress={() => togglePlay(idx)}
+                      style={{
+                        ...Style.containerCenter,
+                        ...size({ size: 48 }),
+                      }}
+                    >
+                      <Image
+                        source={isPlaying[idx] ? icons.pause : icons.play}
+                      />
+                    </Pressable>
+                    <View style={{ flex: 1 }}>
+                      <Text
                         style={{
-                          width: 10,
-                          height: 10,
-                          borderRadius: 5,
-                          backgroundColor: "white",
+                          color: "white",
+                          marginBottom: responsiveHeight(1),
+                        }}
+                      >{`Morceau ${idx + 1}`}</Text>
+                      <Slider
+                        value={fmt(progressInfo[idx]?.pos)}
+                        maxValue={fmt(progressInfo[idx]?.dur)}
+                        progress={
+                          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;
+                            if (player?.playing) {
+                              await player.pause?.();
+                              setIsPlaying((p) => ({ ...p, [idx]: false }));
+                            }
+                          } catch (e) {
+                            console.log(
+                              "SongReady pause on seek start",
+                              e?.message
+                            );
+                          }
+                        }}
+                        onSeek={(ratio) => onSeek(idx, ratio)}
+                        onSeekEnd={async () => {
+                          try {
+                            const player = idx === 0 ? player0 : player1;
+                            if (player && wasPlayingBeforeSeek.current[idx]) {
+                              await player.play?.();
+                              setIsPlaying((p) => ({ ...p, [idx]: true }));
+                            }
+                            wasPlayingBeforeSeek.current[idx] = false;
+                          } catch (e) {
+                            console.log(
+                              "SongReady resume after seek",
+                              e?.message
+                            );
+                          }
                         }}
                       />
-                    )}
+                    </View>
+                    <Pressable
+                      onPress={() => setSelectedIndex(idx)}
+                      style={{
+                        ...Style.containerCenter,
+                        ...size({ size: 24 }),
+                      }}
+                    >
+                      <View
+                        style={{
+                          width: 18,
+                          height: 18,
+                          borderRadius: 9,
+                          borderWidth: 2,
+                          borderColor: isSelected
+                            ? Palette.primary
+                            : "white",
+                          alignItems: "center",
+                          justifyContent: "center",
+                        }}
+                      >
+                        {isSelected && (
+                          <View
+                            style={{
+                              width: 10,
+                              height: 10,
+                              borderRadius: 5,
+                              backgroundColor: Palette.primary,
+                            }}
+                          />
+                        )}
+                      </View>
+                    </Pressable>
                   </View>
-                </Pressable>
-              </View>
-            </BlurView>
-          ))}
+                </BlurView>
+              </Pressable>
+            );
+          })}
         </View>
       </View>
       <View