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}
+ />
+ >