/* Atelier - Chansons : ecoute ligne a ligne, shadowing, substitutions.
Drill libre, sans effet SRS. Extrait d'atelier.jsx (decoupage 2026-06-12). */
function songSections(song) {
return Array.isArray(song && song.sections) ? song.sections : [];
}
function songLines(song) {
return songSections(song).flatMap((section) => (section.lines || []).map((line) => ({ ...line, section: section.label })));
}
function songLineCount(song) {
return songLines(song).length;
}
function songSubstitutionCount(song) {
return (Array.isArray(song && song.substitutionSets) ? song.substitutionSets : [])
.reduce((total, set) => total + ((set.items && set.items.length) || 0), 0);
}
function songMasteredState(state) {
if (!state || typeof state !== "object") return false;
const box = Number(state.box || state.bucket || 0);
const stability = Number(state.stability || 0);
const reps = Number(state.reps || state.reviewCount || state.seenCount || 0);
const lapses = Number(state.lapses || state.errors || 0);
return box >= 3 || stability >= 2.5 || (reps >= 2 && lapses === 0);
}
function songItemMastered(item, cardStates) {
const ids = Array.isArray(item && item.sourceIds) ? item.sourceIds : [];
return ids.some((id) => songMasteredState(cardStates && cardStates[id]));
}
function songAvailableSubstitutions(set, cardStates) {
const items = Array.isArray(set && set.items) ? set.items : [];
const mastered = items.filter((item) => songItemMastered(item, cardStates));
const fallback = items.filter((item) => item.fromSong);
const out = [];
const seen = Object.create(null);
mastered.concat(fallback.length ? fallback : items).forEach((item) => {
const key = item.kr;
if (!key || seen[key]) return;
seen[key] = true;
out.push(item);
});
return out;
}
function songPatternText(set, item) {
const pattern = String((set && set.pattern) || "");
const slot = set && set.slot ? `{${set.slot}}` : "{}";
return pattern.replace(slot, item && item.kr ? item.kr : "___");
}
function songExerciseFr(set, item) {
if (!set || !item) return "";
if (set.id === "where-is-place") return `Où est ${item.fr} ?`;
if (set.id === "where-exists-object") return `Où est ${item.fr} ?`;
if (set.id === "here-there-exists") return `Il y en a ${item.fr}.`;
return item.fr;
}
function SongSpeakButton({ text, children, gloss, onSpeak, className, style, title = "Ecouter" }) {
const [open, setOpen] = useState(false);
const speak = (event) => {
event.stopPropagation();
if (typeof onSpeak === "function") onSpeak(text);
else if (window.LangAudio) window.LangAudio.speak(text, { ref: text, rate: 0.94 });
if (gloss) setOpen((value) => !value);
};
return (
{open && gloss && (
{gloss}
)}
);
}
function SongLineText({ line, onSpeak }) {
const tokens = Array.isArray(line && line.tokens) && line.tokens.length
? line.tokens
: String((line && line.kr) || "").split(/\s+/).filter(Boolean).map((kr) => ({ kr, fr: "" }));
return (
{tokens.map((token, index) => (
{index > 0 && " "}
{token.kr}
))}
);
}
function SongLineRow({ line, index, active, shadowed, onSelect, onSpeak }) {
return (
onSelect(line.id)} role="button" tabIndex={0}
onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); onSelect(line.id); } }}
style={{
border: `1px solid ${active ? "var(--accent-line)" : "var(--rule)"}`,
background: active ? "var(--accent-tint)" : "var(--card)",
borderRadius: "var(--radius-sm)",
padding: 14,
display: "grid",
gridTemplateColumns: "34px minmax(0, 1fr)",
gap: 12,
alignItems: "start",
cursor: "pointer",
}}>
{String(index + 1).padStart(2, "0")}
{line.section}
{shadowed > 0 && {shadowed}x}
{line.fr}
Shadowing
Ligne active
{line.section} · {index + 1}/{lines.length}
{line.kr}
{line.fr}
goLine(-1)}>Avant
onSpeak(line.kr)}>Parler
= lines.length - 1} onClick={() => goLine(1)}>Suite
markShadowed(line.id)}>J'ai répété
Répétitions : {shadowed[line.id] || 0}
);
}
function SongSubstitutionExercise({ song, cardStates, onSpeak }) {
const sets = Array.isArray(song && song.substitutionSets) ? song.substitutionSets : [];
const [setId, setSetId] = useState(() => (sets[0] && sets[0].id) || "");
const [picked, setPicked] = useState("");
const currentSet = sets.find((set) => set.id === setId) || sets[0];
const items = songAvailableSubstitutions(currentSet, cardStates);
const selected = items.find((item) => item.kr === picked) || items[0];
const phrase = selected ? songPatternText(currentSet, selected) : "";
const masteredCount = items.filter((item) => songItemMastered(item, cardStates)).length;
useEffect(() => {
if (currentSet && currentSet.id !== setId) setSetId(currentSet.id);
if (items.length && !items.some((item) => item.kr === picked)) setPicked(items[0].kr);
}, [setId, song && song.id]);
if (!sets.length) return ;
return (
Substitution
Remplacer sans casser la phrase
({ value: set.id, label: set.title }))} onChange={(value) => { setSetId(value); setPicked(""); }} size="sm" />
{items.length} choix
{masteredCount} solides SRS
{phrase || "___"}
{selected &&
{songExerciseFr(currentSet, selected)}
}
onSpeak(phrase)}>Parler
{
if (!items.length) return;
const currentIndex = Math.max(0, items.findIndex((item) => item.kr === (selected && selected.kr)));
const next = items[(currentIndex + 1) % items.length];
setPicked(next.kr);
}}>Changer
{items.map((item) => {
const on = selected && selected.kr === item.kr;
const mastered = songItemMastered(item, cardStates);
return (
);
})}
);
}
function SongLibrary({ songs, selectedId, onSelect }) {
return (
Bibliothèque
Morceaux
{songs.map((song, index) => {
const on = song.id === selectedId;
return (
);
})}
);
}
function SongsWorkshop() {
const [load, setLoad] = useState(() => ({ status: window.LangData && window.LangData.loadSongs ? "loading" : "error", payload: null, error: null }));
const [songId, setSongId] = useState("");
const [activeLineId, setActiveLineId] = useState("");
const [shadowed, setShadowed] = useState({});
const audioRef = useRef(null);
useEffect(() => {
let alive = true;
if (!window.LangData || !window.LangData.loadSongs) {
setLoad((state) => ({ ...state, status: "error", error: new Error("loadSongs missing") }));
return () => { alive = false; };
}
window.LangData.loadSongs().then((payload) => {
if (alive) setLoad({ status: "ready", payload, error: null });
}).catch((error) => {
if (alive) setLoad((state) => ({ ...state, status: "error", error }));
});
return () => { alive = false; };
}, []);
const songs = load.payload && Array.isArray(load.payload.songs) ? load.payload.songs : [];
const selectedSong = songs.find((song) => song.id === songId) || songs[0];
const lines = songLines(selectedSong);
const activeLine = lines.find((line) => line.id === activeLineId) || lines[0];
const cardStates = window.LangStore && window.LangStore.cards ? window.LangStore.cards.all() : {};
useEffect(() => {
if (!songId && songs[0]) setSongId(songs[0].id);
}, [load.status, songs.length, songId]);
useEffect(() => {
if (selectedSong && lines[0] && !lines.some((line) => line.id === activeLineId)) setActiveLineId(lines[0].id);
}, [selectedSong && selectedSong.id, activeLineId]);
function pauseSongAudio() {
if (!audioRef.current) return;
try { audioRef.current.pause(); } catch (e) {}
}
function speakSpoken(text, rate) {
pauseSongAudio();
if (window.LangAudio) window.LangAudio.speak(text, { ref: text, rate: rate || 0.92 });
}
function markShadowed(lineId) {
setShadowed((state) => ({ ...state, [lineId]: (state[lineId] || 0) + 1 }));
}
if (load.status === "loading") return
;
if (load.status === "error") return location.reload()} />;
if (!selectedSong) return ;
return (
Atelier musical
Chansons originales
Morceaux Suno, paroles cliquables, voix parlée et substitutions guidées par le vocabulaire solide.
Morceau 1
{selectedSong.title}
{selectedSong.titleFr}
{(selectedSong.focus || []).slice(0, 4).map((tag) => {tag})}
{songSections(selectedSong).map((section) => (
{section.label}
{(section.lines || []).map((line) => {
const lineIndex = lines.findIndex((entry) => entry.id === line.id);
return (
);
})}
))}
);
}
Object.assign(window, { SongsWorkshop });