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

instrumental introduction

Browse Source
This commit is contained in:
leon-morival
2025-10-21 13:34:16 +02:00
parent 3a5d449424
commit 837a634997
6 changed files with 226 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CreatingLyrics.js
+34 -11
View File
@@ -12,7 +12,11 @@ import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { sanitizeStructureList } from "../../utils/songStructure";
import {
normalizeStructureType,
sanitizeStructureList,
segmentRequiresLyrics,
} from "../../utils/songStructure";
const CreatingLyrics = ({ active, config, selections }) => {
const [progress, setProgress] = useState(0);
@@ -74,21 +78,40 @@ const CreatingLyrics = ({ active, config, selections }) => {
});
const rawLyrics = Array.isArray(data?.lyrics) ? data.lyrics : [];
const normalizedLyrics = rawLyrics.map((section) => {
const sanitizedType =
sanitizeStructureList([section?.type])[0] || section?.type || "";
const sanitizedType = normalizeStructureType(section?.type);
return {
...section,
type: sanitizedType,
lyrics: section?.lyrics || "",
};
});
const alignedLyrics =
sanitizedStructure.length > 0 &&
sanitizedStructure.length === normalizedLyrics.length
? normalizedLyrics.map((section, index) => ({
...section,
type: sanitizedStructure[index],
}))
: normalizedLyrics;
const remaining = [...normalizedLyrics];
const takeForType = (type, { fallback = true } = {}) => {
const index = remaining.findIndex((item) => item.type === type);
if (index !== -1) {
return remaining.splice(index, 1)[0];
}
if (!fallback) return null;
return remaining.shift() || null;
};
const structuredLyrics = sanitizedStructure.length
? sanitizedStructure.map((rawType) => {
const type = normalizeStructureType(rawType);
if (!segmentRequiresLyrics(type)) {
const match = takeForType(type, { fallback: false });
return { type, lyrics: match?.lyrics || "" };
}
const match = takeForType(type, { fallback: true });
return {
type,
lyrics: match?.lyrics || "",
};
})
: normalizedLyrics;
const alignedLyrics = structuredLyrics.concat(remaining);
const processedResult = {
...data,
lyrics: alignedLyrics,
src/screens/Writing/CustomizeSongStructure.js
+21 -32
View File
@@ -23,15 +23,14 @@ import {
import CreateLyricsHeader from "./components/CreateLyricsHeader";
const randomSuffix = () => Math.random().toString(36).slice(2, 8);
const createItemId = (type) => `${type}-${Date.now()}-${randomSuffix()}`;
const createSortableItem = (type, index = 0) => ({
id: `${type}-${index}-${randomSuffix()}`,
type,
value: type,
});
const buildInitialItems = (structure = []) =>
sanitizeStructureList(structure).map((type, index) =>
const buildSortableItems = (values = []) =>
sanitizeStructureList(values).map((type, index) =>
createSortableItem(type, index)
);
@@ -42,24 +41,17 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
[baseStructure]
);
const [sortableItems, setSortableItems] = useState(() =>
buildInitialItems(sanitizedBase)
buildSortableItems(sanitizedBase)
);
useEffect(() => {
setSortableItems((prev) => {
const prevTypes = prev.map((item) => item.type);
if (
prevTypes.length === sanitizedBase.length &&
prevTypes.every((type, index) => type === sanitizedBase[index])
) {
return prev;
}
return buildInitialItems(sanitizedBase);
});
setSortableItems(buildSortableItems(sanitizedBase));
}, [sanitizedBase]);
useEffect(() => {
const values = sortableItems.map((item) => item.type).filter(Boolean);
const values = sortableItems
.map((item) => item?.type || item?.value)
.filter(Boolean);
onChange?.(values);
}, [sortableItems, onChange]);
@@ -99,20 +91,21 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
const toggleOptionalSegment = (type) => {
setSortableItems((prev) => {
const existsIndex = prev.findIndex((item) => item.type === type);
if (existsIndex !== -1) {
return prev.filter((item) => item.type !== type);
const currentValues = prev.map((item) => item.type || item.value);
if (currentValues.includes(type)) {
const filtered = currentValues.filter((value) => value !== type);
return buildSortableItems(filtered);
}
const meta = getSegmentMeta(type);
let next = [...prev];
let nextValues = [...currentValues];
if (meta?.exclusiveGroup) {
next = next.filter((item) => {
const itemMeta = getSegmentMeta(item.type || item.value);
nextValues = nextValues.filter((value) => {
const itemMeta = getSegmentMeta(value);
return itemMeta?.exclusiveGroup !== meta.exclusiveGroup;
});
}
next.push(createSortableItem(type, next.length));
return next;
nextValues.push(type);
return buildSortableItems(nextValues);
});
};
@@ -182,15 +175,11 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
customHandle
scrollableRef={scrollRef}
onDragEnd={({ data: newData }) => {
const next = (newData || []).map((it, index) => {
const nextType = it?.type || it?.value;
return {
id: it?.id || createItemId(nextType || `section-${index}`),
type: nextType,
value: nextType,
};
});
setSortableItems(next.filter((item) => item.type));
const values = (newData || [])
.map((it) => it?.type || it?.value)
.filter(Boolean);
const sanitized = sanitizeStructureList(values);
setSortableItems(buildSortableItems(sanitized));
}}
/>
<FlatList
src/screens/Writing/CustomizeSongStructure.web.js
+32 -30
View File
@@ -17,9 +17,9 @@ const getScrollY = () => (typeof window !== "undefined" ? window.scrollY : 0);
const randomSuffix = () => Math.random().toString(36).slice(2, 8);
const buildItems = (structure = []) => {
const buildSortableItems = (values = []) => {
const counters = {};
return structure.map((segment, index) => {
return sanitizeStructureList(values).map((segment, index) => {
counters[segment] = (counters[segment] || 0) + 1;
return {
id: `${segment}-${index}-${randomSuffix()}`,
@@ -44,7 +44,7 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
() => sanitizeStructureList(baseStructure),
[baseStructure]
);
const [items, setItems] = React.useState(() => buildItems(sanitized));
const [items, setItems] = React.useState(() => buildSortableItems(sanitized));
const [activeItemId, setActiveItemId] = React.useState(null);
const containerRef = React.useRef(null);
const dragStateRef = React.useRef({
@@ -54,38 +54,40 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
React.useEffect(() => {
console.debug("[CustomizeSongStructure.web] sanitized", sanitized);
setItems((prev) => {
const prevTypes = prev.map((item) => item.type);
if (prevTypes.length === sanitized.length) {
const same = prevTypes.every((type, idx) => type === sanitized[idx]);
if (same) return prev;
}
return buildItems(sanitized);
});
setItems(buildSortableItems(sanitized));
dragStateRef.current = { itemId: null, containerTop: 0 };
setActiveItemId(null);
}, [sanitized]);
React.useEffect(() => {
console.debug("[CustomizeSongStructure.web] items", items);
onChange?.(items.map((item) => item.type));
onChange?.(
items.map((item) => (item?.type || item?.value)).filter(Boolean)
);
}, [items, onChange]);
const labeledItems = React.useMemo(() => {
const counts = {};
return items.map((item) => {
counts[item.type] = (counts[item.type] || 0) + 1;
const type = item?.type || item?.value;
counts[type] = (counts[type] || 0) + 1;
return {
...item,
label: formatStructureLabel(item.type, counts[item.type]),
type,
value: type,
label: formatStructureLabel(type, counts[type]),
};
});
}, [items]);
const selectedTypes = React.useMemo(
() => new Set(items.map((item) => item.type)),
[items]
);
const selectedTypes = React.useMemo(() => {
const set = new Set();
items.forEach((item) => {
if (item?.type) set.add(item.type);
else if (item?.value) set.add(item.value);
});
return set;
}, [items]);
const optionalSegments = React.useMemo(
() =>
@@ -98,24 +100,21 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
const toggleOptionalSegment = React.useCallback((type) => {
setItems((prev) => {
const exists = prev.some((item) => item.type === type);
if (exists) {
return prev.filter((item) => item.type !== type);
const currentValues = prev.map((item) => item.type || item.value);
if (currentValues.includes(type)) {
const filtered = currentValues.filter((value) => value !== type);
return buildSortableItems(filtered);
}
const meta = getSegmentMeta(type);
let next = [...prev];
let nextValues = [...currentValues];
if (meta?.exclusiveGroup) {
next = next.filter((item) => {
const itemMeta = getSegmentMeta(item.type);
nextValues = nextValues.filter((value) => {
const itemMeta = getSegmentMeta(value);
return itemMeta?.exclusiveGroup !== meta.exclusiveGroup;
});
}
next.push({
id: `${type}-${Date.now()}-${randomSuffix()}`,
type,
value: type,
});
return next;
nextValues.push(type);
return buildSortableItems(nextValues);
});
}, []);
@@ -169,6 +168,9 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
};
const handleRelease = () => {
setItems((prev) =>
buildSortableItems(prev.map((item) => item.type || item.value))
);
dragStateRef.current = {
itemId: null,
containerTop: 0,
src/screens/Writing/Lyrics.js
+72 -14
View File
@@ -17,9 +17,11 @@ import { Palette, gutters } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import {
formatStructureLabel,
getPromptLabelForStructure,
getSegmentMeta,
normalizeStructureType,
sanitizeStructureList,
segmentRequiresLyrics,
} from "../../utils/songStructure";
import CustomInput from "./components/CustomInput";
@@ -52,21 +54,42 @@ const Lyrics = ({ navigation }) => {
? sanitizeStructureList(projectConfig.structure)
: null;
if (normalizedSections.length) {
return {
title,
sections: normalizedSections,
};
const structureToUse =
targetStructure && targetStructure.length
? targetStructure
: normalizedSections.map((s) => s.type);
if (!structureToUse.length && normalizedSections.length) {
return { title, sections: normalizedSections };
}
if (targetStructure && targetStructure.length) {
return {
title,
sections: targetStructure.map((t) => ({ type: t, lyrics: "" })),
};
}
const remaining = [...normalizedSections];
const takeMatching = (type) => {
const index = remaining.findIndex((s) => s.type === type);
if (index !== -1) {
return remaining.splice(index, 1)[0];
}
return remaining.shift() || null;
};
return { title, sections: [] };
const sections = structureToUse.map((segmentType) => {
const normalizedType = normalizeStructureType(segmentType);
if (!segmentRequiresLyrics(normalizedType)) {
return { type: normalizedType, lyrics: "" };
}
const matched = takeMatching(normalizedType);
return {
type: normalizedType,
lyrics: matched?.lyrics || "",
};
});
const remainingTextual = remaining.filter((item) =>
segmentRequiresLyrics(item.type)
);
sections.push(...remainingTextual);
return { title, sections };
}, [projectTitle, projectLyrics, projectConfig]);
const [titleValue, setTitleValue] = useState(initial.title || "");
@@ -131,7 +154,11 @@ const Lyrics = ({ navigation }) => {
alertMessage("Titre manquant", "Veuillez renseigner un titre.");
return;
}
const invalid = (sections || []).some((s) => !(s?.lyrics || "").trim());
const invalid = (sections || []).some((s) => {
const type = normalizeStructureType(s?.type);
if (!segmentRequiresLyrics(type)) return false;
return !(s?.lyrics || "").trim();
});
if (invalid) {
alertMessage(
"Champs incomplets",
@@ -141,7 +168,9 @@ const Lyrics = ({ navigation }) => {
}
const normalizedNewLyrics = (sections || []).map((s) => ({
type: normalizeStructureType(s?.type),
lyrics: (s?.lyrics || "").trim(),
lyrics: segmentRequiresLyrics(normalizeStructureType(s?.type))
? (s?.lyrics || "").trim()
: "",
}));
const normalizedOldLyrics = Array.isArray(projectLyrics)
? projectLyrics.map((s) => ({
@@ -349,6 +378,18 @@ const Lyrics = ({ navigation }) => {
? 170
: 225;
const placeholder = meta?.label || label;
const requiresLyrics = segmentRequiresLyrics(key);
if (!requiresLyrics) {
return (
<View key={idx} style={styles.instrumentalBlock}>
<Text style={styles.instrumentalTitle}>{label}</Text>
<Text style={styles.instrumentalText}>
{getPromptLabelForStructure(key)} — section instrumentale
sans paroles.
</Text>
</View>
);
}
return (
<CustomInput
key={idx}
@@ -417,4 +458,21 @@ const styles = StyleSheet.create({
instructionsHighlight: {
fontFamily: FONT_FAMILY.InterSemiBold,
},
instrumentalBlock: {
padding: 16,
borderRadius: 12,
backgroundColor: Palette.ultraLightWhite,
gap: 6,
},
instrumentalTitle: {
fontFamily: FONT_FAMILY.InterSemiBold,
fontSize: 16,
color: Palette.white,
},
instrumentalText: {
fontFamily: FONT_FAMILY.InterRegular,
fontSize: 14,
color: Palette.white,
opacity: 0.8,
},
});