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
+129 -90
View File
@@ -16,7 +16,7 @@ import Page from "../../layouts/Page";
import { Routes } from "../../navigation"; import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService"; import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider"; import { useUser } from "../../providers/UserDataProvider";
import { Style } from "../../styles"; import { Palette, Style } from "../../styles";
import { gutters, size } from "../../styles/Style"; import { gutters, size } from "../../styles/Style";
import { isWeb } from "../../hooks/useLayoutType"; import { isWeb } from "../../hooks/useLayoutType";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
@@ -97,6 +97,7 @@ const SongReady = () => {
}, [player0, player1]); }, [player0, player1]);
const togglePlay = async (idx) => { const togglePlay = async (idx) => {
setSelectedIndex(idx);
const url = musicUrls[idx]; const url = musicUrls[idx];
if (!url) return; if (!url) return;
try { try {
@@ -245,106 +246,144 @@ const SongReady = () => {
}} }}
/> />
<View style={{ gap: 16 }}> <View style={{ gap: 16 }}>
{[0, 1].map((idx) => ( {[0, 1].map((idx) => {
<BlurView const isSelected = selectedIndex === idx;
key={idx} return (
intensity={Platform.OS !== "ios" ? 10 : 40} <Pressable
tint="dark" key={idx}
style={{ onPress={() => setSelectedIndex(idx)}
borderRadius: 16, style={({ pressed }) => [
overflow: "hidden", {
padding: 12, borderRadius: 20,
backgroundColor: "#FFFFFF0A", borderWidth: isSelected ? 2 : 1,
}} borderColor: isSelected
// experimentalBlurMethod={ ? Palette.primary
// Platform.OS !== "ios" ? "dimezisBlurView" : "none" : Palette.ultraLightWhite,
// } overflow: "hidden",
> },
<View pressed && { opacity: 0.96 },
style={{ flexDirection: "row", alignItems: "center", gap: 12 }} ]}
> >
<Pressable <BlurView
onPress={() => togglePlay(idx)} intensity={Platform.OS !== "ios" ? 10 : 40}
style={{ ...Style.containerCenter, ...size({ size: 48 }) }} tint="dark"
> style={{
<Image source={isPlaying[idx] ? icons.pause : icons.play} /> borderRadius: 18,
</Pressable> overflow: "hidden",
<View style={{ flex: 1 }}> padding: 12,
<Text backgroundColor: "#FFFFFF0A",
style={{ }}
color: "white", // experimentalBlurMethod={
marginBottom: responsiveHeight(1), // Platform.OS !== "ios" ? "dimezisBlurView" : "none"
}} // }
>{`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 }) }}
> >
<View <View
style={{ style={{
width: 18, flexDirection: "row",
height: 18,
borderRadius: 9,
borderWidth: 2,
borderColor: "white",
alignItems: "center", alignItems: "center",
justifyContent: "center", gap: 12,
}} }}
> >
{selectedIndex === idx && ( <Pressable
<View onPress={() => togglePlay(idx)}
style={{
...Style.containerCenter,
...size({ size: 48 }),
}}
>
<Image
source={isPlaying[idx] ? icons.pause : icons.play}
/>
</Pressable>
<View style={{ flex: 1 }}>
<Text
style={{ style={{
width: 10, color: "white",
height: 10, marginBottom: responsiveHeight(1),
borderRadius: 5, }}
backgroundColor: "white", >{`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> </View>
</Pressable> </BlurView>
</View> </Pressable>
</BlurView> );
))} })}
</View> </View>
</View> </View>
<View <View