diff --git a/src/components/MusicLandHeader.js b/src/components/MusicLandHeader.js index 8914014..4486fb7 100644 --- a/src/components/MusicLandHeader.js +++ b/src/components/MusicLandHeader.js @@ -40,7 +40,11 @@ const MusicLandHeader = ({ diff --git a/src/screens/Library/MusicDetails.web.js b/src/screens/Library/MusicDetails.web.js index 15ece19..b3dceb1 100644 --- a/src/screens/Library/MusicDetails.web.js +++ b/src/screens/Library/MusicDetails.web.js @@ -250,13 +250,7 @@ const MusicDetails = ({ route }) => { console.log("MusicDetails seek error", e?.message); } }, - [ - trackDescriptor, - durationMs, - isCurrentTrack, - ensureLoaded, - seekTrackTo, - ] + [trackDescriptor, durationMs, isCurrentTrack, ensureLoaded, seekTrackTo] ); const handleSliderSeekEnd = useCallback(async () => { @@ -293,13 +287,7 @@ const MusicDetails = ({ route }) => { console.log("MusicDetails seekBy error", e?.message); } }, - [ - trackDescriptor, - positionMs, - isCurrentTrack, - ensureLoaded, - seekTrackBy, - ] + [trackDescriptor, positionMs, isCurrentTrack, ensureLoaded, seekTrackBy] ); const handleLyricsSeek = useCallback( diff --git a/src/screens/Writing/CustomizeSongStructure.js b/src/screens/Writing/CustomizeSongStructure.js index 9508dc6..e1e33a2 100644 --- a/src/screens/Writing/CustomizeSongStructure.js +++ b/src/screens/Writing/CustomizeSongStructure.js @@ -1,6 +1,13 @@ import { BlurView } from "expo-blur"; -import React, { useEffect, useMemo, useState } from "react"; -import { Image, Platform, StyleSheet, Text, View } from "react-native"; +import React, { useEffect, useMemo } from "react"; +import { + FlatList, + Image, + Platform, + StyleSheet, + Text, + View, +} from "react-native"; import Animated, { useAnimatedRef } from "react-native-reanimated"; import Sortable from "react-native-sortables"; import { icons } from "../../assets"; @@ -11,7 +18,6 @@ import CreateLyricsHeader from "./components/CreateLyricsHeader"; // baseStructure: array like ['couplet','refrain',...] // onChange: callback that receives array like ['couplet','refrain',...] const CustomizeSongStructure = ({ baseStructure = [], onChange }) => { - const [containerLayout, setContainerLayout] = useState(null); const scrollRef = useAnimatedRef(); // Build stable keyed data like { 'couplet-1': { label, value }, ... } @@ -34,6 +40,23 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => { const items = useMemo(() => Object.values(data), [data]); + const newItems = [ + { + id: "short_intro", + label: "Introduction instrumentale courte", + value: "short_intro", + }, + { + id: "long_intro", + label: "Introduction instrumentale longue", + value: "long_intro", + }, + { + id: "pre_chorus", + label: "Pré-refrain", + value: "pre_chorus", + }, + ]; // Initialize parent with current order (so it's saved even without drag) useEffect(() => { const initialValues = (items || []).map((it) => it?.value).filter(Boolean); @@ -65,9 +88,12 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => { {rowData?.label || ""} - - - + {/* Render handle only for items that come from the sortable data (have an id like 'couplet-1') */} + {String(rowData?.id || "").includes("-") ? ( + + + + ) : null} @@ -79,30 +105,43 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => { title="Personnalise la structure de ta chanson" subTitle="Réorganise par glisser-déposer" /> - setContainerLayout(e.nativeEvent.layout)} - > + - } - customHandle - // Enable auto-scroll when dragging near edges - scrollableRef={scrollRef} - onDragEnd={({ data: newData }) => { - const values = (newData || []) - .map((it) => it?.value) - .filter(Boolean); - onChange?.(values); - }} - /> + <> + } + customHandle + // Enable auto-scroll when dragging near edges + scrollableRef={scrollRef} + onDragEnd={({ data: newData }) => { + const values = (newData || []) + .map((it) => it?.value) + .filter(Boolean); + onChange?.(values); + }} + /> + ( + + + + )} + keyExtractor={(item) => item.id} + contentContainerStyle={{ paddingBottom: 24 }} + // Prevent FlatList from capturing scroll gestures so Sortable can handle drags + scrollEnabled={false} + nestedScrollEnabled={false} + /> +