leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better music selection

Browse Source
This commit is contained in:
leon-morival
2025-10-23 16:29:01 +02:00
parent 1ac0acaede
commit feb8d99534
1 changed files with 129 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Studio/SongReady.js
+54 -15
View File
@@ -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) => (
<BlurView
{[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 },
]}
>
<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