Thomas Demirdjian
1347 lines
40 KiB
JavaScript
1347 lines
40 KiB
JavaScript
import { BlurView } from "expo-blur";
|
|
import { Image as ExpoImage } from "expo-image";
|
|
import { Feather } from "@expo/vector-icons";
|
|
import React, {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import {
|
|
Pressable,
|
|
Image as RNImage,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
useWindowDimensions,
|
|
} from "react-native";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import {
|
|
responsiveHeight,
|
|
responsiveWidth,
|
|
} from "react-native-responsive-dimensions";
|
|
import { useGlobal } from "reactn";
|
|
import { background, icons } from "../../assets";
|
|
import PressableScale from "../../components/PressableScale";
|
|
import Slider from "../../components/Slider";
|
|
import {
|
|
arrayRemove,
|
|
arrayUnion,
|
|
increment,
|
|
projectsRef,
|
|
usersRef,
|
|
} from "../../config/firebase";
|
|
import { ensureAuthenticated } from "../../utils/authRedirect";
|
|
import useDataFromRef from "../../hooks/useDataFromRef";
|
|
import useTrackController from "../../hooks/useTrackController";
|
|
import usePlayer from "../../hooks/usePlayer";
|
|
import Page from "../../layouts/Page";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import Style, { gutters, size } from "../../styles/Style";
|
|
import { getArtistDisplayName } from "../../utils/artistName";
|
|
import {
|
|
formatStructureLabel,
|
|
getPromptLabelForStructure,
|
|
getSegmentMeta,
|
|
normalizeStructureType,
|
|
segmentRequiresLyrics,
|
|
} from "../../utils/songStructure";
|
|
import {
|
|
createMusicSharePayload,
|
|
openShareSheet,
|
|
} from "../../utils/shareSheet";
|
|
import { goBack } from "../../navigation/NavigationService";
|
|
|
|
// 20 secondes
|
|
const timeBeforeIncrement = 20000;
|
|
|
|
const MusicDetails = ({ route }) => {
|
|
const { params } = route || {};
|
|
const action = params?.action;
|
|
const autoPlayRequested = params?.autoPlay;
|
|
const projectId = params?.projectId || null;
|
|
const [fav, setFav] = useState(false);
|
|
const [currentUID] = useGlobal("currentUID");
|
|
const [, setTooltip] = useGlobal("_tooltip");
|
|
const wasPlayingBeforeSeek = React.useRef(false);
|
|
const lastSeekTargetMs = React.useRef(null);
|
|
const listenedMsRef = React.useRef(0);
|
|
const incrementDoneRef = React.useRef(false);
|
|
const timerRef = React.useRef(null);
|
|
const hasAutoPlayedRef = React.useRef(false);
|
|
const { isLooping, setLooping } = usePlayer() || {};
|
|
const isWeb = Platform.OS === "web";
|
|
const { width: windowWidth = 0 } = useWindowDimensions();
|
|
const isCompactLayout = (windowWidth || 0) < 1200;
|
|
const handleBackPress = useCallback(() => {
|
|
goBack();
|
|
}, []);
|
|
const renderWebBackButton = useCallback(() => {
|
|
if (!isWeb) return null;
|
|
return (
|
|
<View style={styles.webBackContainer}>
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
onPress={handleBackPress}
|
|
style={styles.webBackButton}
|
|
>
|
|
<RNImage
|
|
source={icons.chevronDown}
|
|
style={styles.webBackIcon}
|
|
resizeMode="contain"
|
|
/>
|
|
<Text style={styles.webBackText}>Retour</Text>
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}, [handleBackPress, isWeb]);
|
|
|
|
const { data: project } = useDataFromRef({
|
|
ref: projectId ? projectsRef.doc(projectId) : null,
|
|
simpleRef: true,
|
|
listener: true,
|
|
condition: !!projectId,
|
|
});
|
|
|
|
console.log("project is : ", project);
|
|
|
|
const { data: owner } = useDataFromRef({
|
|
ref: project?.userId ? usersRef.doc(project.userId) : null,
|
|
simpleRef: true,
|
|
listener: true,
|
|
condition: !!project?.userId,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (project && currentUID) {
|
|
const liked = Array.isArray(project?.likedBy)
|
|
? project.likedBy.includes(currentUID)
|
|
: false;
|
|
setFav(liked);
|
|
}
|
|
}, [project?.likedBy, currentUID]);
|
|
|
|
const title = project?.title || "Sans titre";
|
|
const artist = useMemo(() => {
|
|
const ownerName = getArtistDisplayName(owner, "");
|
|
if (ownerName) return ownerName;
|
|
return getArtistDisplayName(project, "MusicLand");
|
|
}, [owner, project]);
|
|
const coverUrl = project?.coverUrl || null;
|
|
const songUrl = project?.songUrl || null;
|
|
|
|
const trackId = useMemo(() => {
|
|
if (projectId) return `project-${projectId}`;
|
|
if (songUrl) return `song-${songUrl}`;
|
|
return null;
|
|
}, [projectId, songUrl]);
|
|
|
|
const trackDescriptor = useMemo(() => {
|
|
if (!trackId || !songUrl) return null;
|
|
return {
|
|
id: trackId,
|
|
uri: songUrl,
|
|
songUrl,
|
|
title,
|
|
artist,
|
|
artwork: coverUrl,
|
|
coverUrl,
|
|
metadata: { projectId, screen: "MusicDetails" },
|
|
context: { projectId, screen: "MusicDetails" },
|
|
};
|
|
}, [trackId, songUrl, title, artist, coverUrl, projectId]);
|
|
|
|
const sharePayload = useMemo(
|
|
() =>
|
|
createMusicSharePayload({
|
|
projectId,
|
|
title,
|
|
artist,
|
|
}),
|
|
[projectId, title, artist],
|
|
);
|
|
|
|
const handleShare = useCallback(() => {
|
|
if (!sharePayload) return;
|
|
openShareSheet(sharePayload);
|
|
}, [sharePayload]);
|
|
|
|
const [isDownloading, setIsDownloading] = useState(false);
|
|
const [downloadProgress, setDownloadProgress] = useState(0);
|
|
|
|
const handleDownload = useCallback(async () => {
|
|
if (!songUrl || isDownloading) return;
|
|
try {
|
|
setIsDownloading(true);
|
|
setDownloadProgress(0);
|
|
|
|
const response = await fetch(songUrl);
|
|
if (!response.ok) {
|
|
throw new Error(`download_failed_${response.status}`);
|
|
}
|
|
|
|
const contentType = response.headers.get("content-type") || "audio/mpeg";
|
|
const total = Number(response.headers.get("content-length")) || 0;
|
|
const sanitizedTitle = String(title || "musicland-track")
|
|
.replace(/[\\/:*?"<>|]+/g, "-")
|
|
.trim()
|
|
.slice(0, 80);
|
|
const fileName = `${sanitizedTitle || "musicland-track"}.mp3`;
|
|
|
|
if (response.body && typeof response.body.getReader === "function") {
|
|
const reader = response.body.getReader();
|
|
const chunks = [];
|
|
let received = 0;
|
|
let pseudoProgress = 0;
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
if (value) {
|
|
chunks.push(value);
|
|
received += value.length;
|
|
if (total > 0) {
|
|
setDownloadProgress(Math.min(1, received / total));
|
|
} else {
|
|
pseudoProgress = Math.min(0.95, pseudoProgress + 0.05);
|
|
setDownloadProgress(pseudoProgress);
|
|
}
|
|
}
|
|
}
|
|
const blob = new Blob(chunks, { type: contentType });
|
|
setDownloadProgress(1);
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = fileName;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
} else {
|
|
const blob = await response.blob();
|
|
setDownloadProgress(1);
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = fileName;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
} catch (error) {
|
|
console.error("MusicDetails.download", error);
|
|
setTooltip({
|
|
type: "error",
|
|
text: "Téléchargement impossible",
|
|
});
|
|
} finally {
|
|
setIsDownloading(false);
|
|
setTimeout(() => setDownloadProgress(0), 400);
|
|
}
|
|
}, [isDownloading, setTooltip, songUrl, title]);
|
|
|
|
const handleReport = useCallback(() => {
|
|
if (!projectId) return;
|
|
SheetManager.show("Report", {
|
|
payload: {
|
|
targetType: "music",
|
|
projectId,
|
|
title,
|
|
ownerId: project?.userId || owner?.id || null,
|
|
},
|
|
});
|
|
}, [owner?.id, project?.userId, projectId, title]);
|
|
|
|
const handleAddToPlaylist = useCallback(() => {
|
|
if (projectId) {
|
|
SheetManager.show("Playlist", { payload: { projectId } });
|
|
} else {
|
|
SheetManager.show("Playlist");
|
|
}
|
|
}, [projectId]);
|
|
|
|
const handleOpenOptions = useCallback(() => {
|
|
SheetManager.show("MusicOptions", {
|
|
payload: {
|
|
projectId,
|
|
title,
|
|
ownerId: project?.userId || owner?.id || null,
|
|
onReport: handleReport,
|
|
onAddToPlaylist: handleAddToPlaylist,
|
|
onDownload: handleDownload,
|
|
downloadDisabled: isDownloading || !songUrl,
|
|
onShare: sharePayload ? handleShare : null,
|
|
sharePayload,
|
|
shareDisabled: !sharePayload,
|
|
},
|
|
});
|
|
}, [
|
|
handleAddToPlaylist,
|
|
handleDownload,
|
|
handleReport,
|
|
handleShare,
|
|
isDownloading,
|
|
owner?.id,
|
|
project?.userId,
|
|
projectId,
|
|
sharePayload,
|
|
songUrl,
|
|
title,
|
|
]);
|
|
|
|
const {
|
|
isCurrent: isCurrentTrack,
|
|
isPlaying: isTrackPlaying,
|
|
positionMs,
|
|
durationMs,
|
|
ensureLoaded,
|
|
pause: pauseTrack,
|
|
resume: resumeTrack,
|
|
seekTo: seekTrackTo,
|
|
seekBy: seekTrackBy,
|
|
} = useTrackController(trackDescriptor);
|
|
|
|
const isPlaying = isTrackPlaying;
|
|
const loopEnabled = isCurrentTrack && !!isLooping;
|
|
|
|
// Karaoke aligned words (from timestamps)
|
|
const alignedWords = useMemo(() => {
|
|
try {
|
|
const idx = Number(project?.songIndex) || 0;
|
|
const ts = project?.musicTimestamps?.[idx];
|
|
const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
|
|
return arr.map((w) => ({
|
|
word: String(w?.word ?? ""),
|
|
startS: Number(w?.startS ?? 0),
|
|
endS: Number(w?.endS ?? 0),
|
|
}));
|
|
} catch (e) {
|
|
return [];
|
|
}
|
|
}, [project?.musicTimestamps, project?.songIndex]);
|
|
|
|
const estimatedDurationMs = useMemo(() => {
|
|
const toMs = (value) => {
|
|
const num = Number(value);
|
|
if (!Number.isFinite(num) || num <= 0) return 0;
|
|
return num > 1000 ? Math.round(num) : Math.round(num * 1000);
|
|
};
|
|
const idx = Number(project?.songIndex);
|
|
const normalizedIdx = Number.isFinite(idx) && idx >= 0 ? idx : 0;
|
|
const tsEntry = project?.musicTimestamps?.[normalizedIdx];
|
|
if (tsEntry && typeof tsEntry === "object") {
|
|
const fromMetadata =
|
|
toMs(tsEntry.durationMs) ||
|
|
toMs(tsEntry.duration) ||
|
|
toMs(tsEntry.durationS) ||
|
|
toMs(tsEntry.durationSeconds) ||
|
|
toMs(tsEntry.audioDuration) ||
|
|
toMs(tsEntry.audioLength);
|
|
if (fromMetadata > 0) return fromMetadata;
|
|
}
|
|
let maxEndS = 0;
|
|
for (let i = 0; i < alignedWords.length; i++) {
|
|
const word = alignedWords[i];
|
|
const end = Number(word?.endS ?? word?.startS ?? 0);
|
|
if (Number.isFinite(end) && end > maxEndS) {
|
|
maxEndS = end;
|
|
}
|
|
}
|
|
return maxEndS > 0 ? Math.round(maxEndS * 1000) : 0;
|
|
}, [alignedWords, project?.musicTimestamps, project?.songIndex]);
|
|
|
|
const sliderDurationMs = durationMs > 0 ? durationMs : estimatedDurationMs;
|
|
|
|
// Reset counters when the track changes
|
|
useEffect(() => {
|
|
listenedMsRef.current = 0;
|
|
incrementDoneRef.current = false;
|
|
hasAutoPlayedRef.current = false;
|
|
}, [trackId]);
|
|
|
|
// Start/stop a timer to accumulate listened milliseconds while playing
|
|
useEffect(() => {
|
|
const clearTimer = () => {
|
|
if (timerRef.current) {
|
|
global.clearInterval(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
};
|
|
if (isPlaying && projectId) {
|
|
if (!timerRef.current) {
|
|
timerRef.current = global.setInterval(async () => {
|
|
try {
|
|
listenedMsRef.current += 500;
|
|
if (
|
|
!incrementDoneRef.current &&
|
|
listenedMsRef.current >= timeBeforeIncrement &&
|
|
projectId
|
|
) {
|
|
incrementDoneRef.current = true;
|
|
await projectsRef
|
|
.doc(projectId)
|
|
.set({ views: increment(1) }, { merge: true });
|
|
}
|
|
} catch (e) {
|
|
// Silent fail for counter
|
|
}
|
|
}, 500);
|
|
}
|
|
} else {
|
|
clearTimer();
|
|
}
|
|
return clearTimer;
|
|
}, [isPlaying, projectId]);
|
|
|
|
const fmt = (ms) => {
|
|
const total = Math.max(0, Math.floor((ms || 0) / 1000));
|
|
const m = Math.floor(total / 60)
|
|
.toString()
|
|
.padStart(1, "0");
|
|
const s = (total % 60).toString().padStart(2, "0");
|
|
return `${m}:${s}`;
|
|
};
|
|
|
|
const togglePlay = useCallback(async () => {
|
|
if (!trackDescriptor) return;
|
|
try {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({
|
|
startPositionMs: positionMs,
|
|
autoPlay: true,
|
|
});
|
|
return;
|
|
}
|
|
if (isTrackPlaying) {
|
|
await pauseTrack();
|
|
} else {
|
|
await resumeTrack();
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails audio error", e?.message);
|
|
}
|
|
}, [
|
|
trackDescriptor,
|
|
isCurrentTrack,
|
|
ensureLoaded,
|
|
positionMs,
|
|
isTrackPlaying,
|
|
pauseTrack,
|
|
resumeTrack,
|
|
]);
|
|
|
|
const handleSliderSeekStart = useCallback(async () => {
|
|
if (!trackDescriptor) return;
|
|
try {
|
|
console.log("[MusicDetails.web] handleSliderSeekStart", {
|
|
isCurrentTrack,
|
|
isTrackPlaying,
|
|
positionMs,
|
|
durationMs,
|
|
});
|
|
lastSeekTargetMs.current = null;
|
|
wasPlayingBeforeSeek.current = isTrackPlaying;
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({
|
|
startPositionMs: positionMs,
|
|
autoPlay: false,
|
|
});
|
|
}
|
|
if (isTrackPlaying) {
|
|
await pauseTrack();
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails seek start error", e?.message);
|
|
}
|
|
}, [
|
|
trackDescriptor,
|
|
isTrackPlaying,
|
|
isCurrentTrack,
|
|
ensureLoaded,
|
|
positionMs,
|
|
pauseTrack,
|
|
lastSeekTargetMs,
|
|
durationMs,
|
|
]);
|
|
|
|
const handleSliderSeek = useCallback(
|
|
async (ratio) => {
|
|
const dur = sliderDurationMs || 0;
|
|
if (!trackDescriptor || dur <= 0) return;
|
|
const targetMs = Math.max(0, Math.floor(dur * ratio));
|
|
lastSeekTargetMs.current = targetMs;
|
|
console.log("[MusicDetails.web] handleSliderSeek", {
|
|
ratio,
|
|
durationMs: dur,
|
|
targetMs,
|
|
isCurrentTrack,
|
|
});
|
|
try {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({ startPositionMs: targetMs, autoPlay: false });
|
|
} else {
|
|
await seekTrackTo(targetMs);
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails seek error", e?.message);
|
|
}
|
|
},
|
|
[
|
|
trackDescriptor,
|
|
sliderDurationMs,
|
|
isCurrentTrack,
|
|
ensureLoaded,
|
|
seekTrackTo,
|
|
],
|
|
);
|
|
|
|
const handleToggleLoop = useCallback(async () => {
|
|
if (!isCurrentTrack) return;
|
|
const next = !loopEnabled;
|
|
if (typeof setLooping === "function") {
|
|
setLooping(next);
|
|
}
|
|
if (next) {
|
|
try {
|
|
await seekTrackTo(0);
|
|
if (!isPlaying) {
|
|
await resumeTrack();
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails.web loop toggle error", e?.message);
|
|
}
|
|
}
|
|
}, [
|
|
isCurrentTrack,
|
|
loopEnabled,
|
|
setLooping,
|
|
seekTrackTo,
|
|
isPlaying,
|
|
resumeTrack,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (!autoPlayRequested || hasAutoPlayedRef.current) {
|
|
return;
|
|
}
|
|
if (!trackDescriptor || !songUrl) {
|
|
return;
|
|
}
|
|
|
|
const run = async () => {
|
|
try {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({ startPositionMs: 0, autoPlay: true });
|
|
} else if (!isPlaying) {
|
|
await resumeTrack();
|
|
}
|
|
hasAutoPlayedRef.current = true;
|
|
} catch (e) {
|
|
console.log("MusicDetails autoplay error", e?.message);
|
|
}
|
|
};
|
|
|
|
run();
|
|
}, [
|
|
autoPlayRequested,
|
|
ensureLoaded,
|
|
isCurrentTrack,
|
|
isPlaying,
|
|
resumeTrack,
|
|
songUrl,
|
|
trackDescriptor,
|
|
]);
|
|
|
|
const handleSliderSeekEnd = useCallback(async () => {
|
|
const targetMs =
|
|
typeof lastSeekTargetMs.current === "number"
|
|
? Math.max(0, lastSeekTargetMs.current)
|
|
: null;
|
|
console.log("[MusicDetails.web] handleSliderSeekEnd", {
|
|
targetMs,
|
|
wasPlayingBeforeSeek: wasPlayingBeforeSeek.current,
|
|
isCurrentTrack,
|
|
positionMs,
|
|
});
|
|
try {
|
|
if (wasPlayingBeforeSeek.current) {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({
|
|
startPositionMs:
|
|
targetMs !== null && Number.isFinite(targetMs)
|
|
? targetMs
|
|
: positionMs,
|
|
autoPlay: true,
|
|
});
|
|
} else {
|
|
if (targetMs !== null && Number.isFinite(targetMs)) {
|
|
await seekTrackTo(targetMs);
|
|
}
|
|
await resumeTrack();
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails seek end error", e?.message);
|
|
} finally {
|
|
wasPlayingBeforeSeek.current = false;
|
|
lastSeekTargetMs.current = null;
|
|
}
|
|
}, [ensureLoaded, isCurrentTrack, positionMs, resumeTrack, seekTrackTo]);
|
|
|
|
const handleSeekBySeconds = useCallback(
|
|
async (deltaSeconds) => {
|
|
if (!trackDescriptor) return;
|
|
const deltaMs = Number(deltaSeconds || 0) * 1000;
|
|
const target = Math.max(0, (positionMs || 0) + deltaMs);
|
|
try {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({ startPositionMs: target, autoPlay: true });
|
|
} else {
|
|
await seekTrackBy(deltaMs);
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails seekBy error", e?.message);
|
|
}
|
|
},
|
|
[trackDescriptor, positionMs, isCurrentTrack, ensureLoaded, seekTrackBy],
|
|
);
|
|
|
|
const handleLyricsSeek = useCallback(
|
|
async (timestampS) => {
|
|
if (
|
|
!trackDescriptor ||
|
|
typeof timestampS !== "number" ||
|
|
Number.isNaN(timestampS)
|
|
)
|
|
return;
|
|
const targetMs = Math.max(0, Number(timestampS) * 1000);
|
|
|
|
try {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({ startPositionMs: targetMs, autoPlay: true });
|
|
return;
|
|
}
|
|
await seekTrackTo(targetMs);
|
|
if (!isTrackPlaying) {
|
|
await resumeTrack();
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails lyrics seek error", e?.message);
|
|
}
|
|
},
|
|
[
|
|
trackDescriptor,
|
|
isCurrentTrack,
|
|
ensureLoaded,
|
|
seekTrackTo,
|
|
isTrackPlaying,
|
|
resumeTrack,
|
|
],
|
|
);
|
|
const description = useMemo(() => {
|
|
// Build a readable text from lyrics with section labels
|
|
if (Array.isArray(project?.lyrics)) {
|
|
const counts = {};
|
|
return project.lyrics
|
|
.map((s) => {
|
|
const type = normalizeStructureType(s?.type);
|
|
const requiresLyrics = segmentRequiresLyrics(type);
|
|
const body = (s?.lyrics || "").trim();
|
|
if (requiresLyrics && !body) return null;
|
|
counts[type] = (counts[type] || 0) + 1;
|
|
const label = formatStructureLabel(type, counts[type]);
|
|
const displayLabel =
|
|
typeof label === "string" && label.length > 0
|
|
? label
|
|
: getPromptLabelForStructure(type);
|
|
if (!requiresLyrics) {
|
|
return `[${displayLabel}] — section instrumentale`;
|
|
}
|
|
return `[${displayLabel}]\n${body}`;
|
|
})
|
|
.filter(Boolean)
|
|
.join("\n\n");
|
|
}
|
|
const c = project?.lyrics?.couplet;
|
|
const r = project?.lyrics?.refrain;
|
|
const parts = [
|
|
c ? `[Couplet]\n${c}` : null,
|
|
r ? `[Refrain]\n${r}` : null,
|
|
].filter(Boolean);
|
|
return parts.length ? parts.join("\n\n") : "";
|
|
}, [project]);
|
|
|
|
// Current time in seconds for highlighting
|
|
const currentTimeS = useMemo(
|
|
() => Math.max(0, (positionMs || 0) / 1000),
|
|
[positionMs],
|
|
);
|
|
// Preview lead: show words 0.5s earlier
|
|
const visibleTimeS = useMemo(
|
|
() => Math.max(0, currentTimeS + 0.5),
|
|
[currentTimeS],
|
|
);
|
|
// Helpers to group aligned words into sections and timed lines
|
|
const SECTION_TAG_REGEX = /^\s*\[([^\]]+)\]\s*$/i;
|
|
const SECTION_TAG_LEADING_REGEX = /^\s*\[([^\]]+)\]\s*/i;
|
|
const cleanText = (txt) =>
|
|
String(txt || "")
|
|
.replace(/\s+/g, " ")
|
|
.trim();
|
|
const isSentenceEnd = (txt) => /[.!?]$/.test((txt || "").trim());
|
|
const stripSectionTag = (txt) =>
|
|
String(txt || "").replace(SECTION_TAG_REGEX, "");
|
|
const parseSectionTag = (txt) => {
|
|
const match = String(txt || "").match(SECTION_TAG_REGEX);
|
|
if (!match) return null;
|
|
const label = match[1]?.trim() || "";
|
|
const lower = label.toLowerCase();
|
|
|
|
let type = "section";
|
|
if (lower.includes("refrain") || lower.includes("chorus")) type = "refrain";
|
|
else if (lower.includes("couplet") || lower.includes("verse"))
|
|
type = "couplet";
|
|
else if (
|
|
lower.includes("pré") ||
|
|
lower.includes("prechorus") ||
|
|
lower.includes("pre-chorus") ||
|
|
lower.includes("pre chorus") ||
|
|
lower.includes("pre-refrain")
|
|
)
|
|
type = "pre_refrain_instrumental";
|
|
else if (lower.includes("pont") || lower.includes("bridge")) type = "pont";
|
|
else if (lower.includes("intro")) {
|
|
if (lower.includes("long")) type = "long_intro";
|
|
else type = "short_intro";
|
|
}
|
|
const indexMatch = label.match(/(\d+)/);
|
|
const index = indexMatch ? Number(indexMatch[1]) : undefined;
|
|
return { label, type, index };
|
|
};
|
|
const formatSectionLabel = (type, index, fallback) => {
|
|
if (fallback) return fallback;
|
|
const normalized = normalizeStructureType(type);
|
|
const meta = getSegmentMeta(normalized);
|
|
if (meta) {
|
|
const label = formatStructureLabel(normalized, index);
|
|
if (label) return label;
|
|
}
|
|
const prompt = getPromptLabelForStructure(normalized);
|
|
if (prompt) return prompt;
|
|
return index > 1 ? `Section ${index}` : "Section";
|
|
};
|
|
|
|
const groupAlignedWordsToLines = (words = [], { removeTags = true } = {}) => {
|
|
const out = [];
|
|
let buf = [];
|
|
let start = null;
|
|
|
|
for (let i = 0; i < words.length; i++) {
|
|
const w = words[i] || {};
|
|
const original = String(w.word || "");
|
|
const textNoNewline = original.replace(/\n/g, " ");
|
|
let working = textNoNewline;
|
|
|
|
if (removeTags) {
|
|
while (true) {
|
|
const match = working.match(SECTION_TAG_LEADING_REGEX);
|
|
if (!match) break;
|
|
working = working.slice(match[0].length);
|
|
}
|
|
working = stripSectionTag(working);
|
|
} else if (SECTION_TAG_REGEX.test(textNoNewline)) {
|
|
const joined = cleanText(textNoNewline);
|
|
if (joined)
|
|
out.push({
|
|
text: joined,
|
|
startS: start ?? Number(w.startS || 0),
|
|
endS: Number(w.endS || 0),
|
|
});
|
|
buf = [];
|
|
start = null;
|
|
continue;
|
|
}
|
|
|
|
const cleaned = cleanText(removeTags ? working : textNoNewline);
|
|
if (!cleaned) continue;
|
|
|
|
if (buf.length === 0) start = Number(w.startS || 0);
|
|
|
|
buf.push({
|
|
text: cleaned,
|
|
startS: Number(w.startS || 0),
|
|
endS: Number(w.endS || 0),
|
|
});
|
|
|
|
const next = words[i + 1] || null;
|
|
const gapToNext = next
|
|
? Math.max(0, Number(next.startS || 0) - Number(w.endS || 0))
|
|
: 0;
|
|
const eolByNewline = /\n/.test(original);
|
|
const eolByPause = gapToNext >= 0.6; // logical break
|
|
const eolByPunct = isSentenceEnd(cleaned);
|
|
const isLast = i === words.length - 1;
|
|
|
|
if (eolByNewline || eolByPause || eolByPunct || isLast) {
|
|
const joined = cleanText(buf.map((b) => b.text).join(" "));
|
|
if (joined)
|
|
out.push({
|
|
text: joined,
|
|
startS: start ?? Number(w.startS || 0),
|
|
endS: Number(w.endS || 0),
|
|
words: buf,
|
|
});
|
|
buf = [];
|
|
start = null;
|
|
}
|
|
}
|
|
return out;
|
|
};
|
|
|
|
const sections = useMemo(() => {
|
|
const counts = {};
|
|
const grouped = [];
|
|
let current = null;
|
|
|
|
const startSection = (tagMeta) => {
|
|
const type = tagMeta?.type || "section";
|
|
let index;
|
|
if (
|
|
tagMeta?.index !== undefined &&
|
|
Number.isFinite(tagMeta.index) &&
|
|
tagMeta.index > 0
|
|
) {
|
|
index = tagMeta.index;
|
|
counts[type] = Math.max(counts[type] || 0, index);
|
|
} else {
|
|
counts[type] = (counts[type] || 0) + 1;
|
|
index = counts[type];
|
|
}
|
|
const label = formatSectionLabel(type, index, tagMeta?.label);
|
|
current = {
|
|
key: `${type}-${index}-${grouped.length}`,
|
|
type,
|
|
index,
|
|
label,
|
|
words: [],
|
|
};
|
|
};
|
|
|
|
const pushCurrent = () => {
|
|
if (!current || current.words.length === 0) {
|
|
current = null;
|
|
return;
|
|
}
|
|
const lines = groupAlignedWordsToLines(current.words, {
|
|
removeTags: true,
|
|
});
|
|
if (!lines.length) {
|
|
current = null;
|
|
return;
|
|
}
|
|
const startS = lines.reduce(
|
|
(acc, line) =>
|
|
Math.min(acc, Number.isFinite(line.startS) ? line.startS : acc),
|
|
Number.POSITIVE_INFINITY,
|
|
);
|
|
const endS = lines.reduce(
|
|
(acc, line) => Math.max(acc, Number(line.endS || 0)),
|
|
0,
|
|
);
|
|
grouped.push({
|
|
key: current.key,
|
|
type: current.type,
|
|
index: current.index,
|
|
label: current.label,
|
|
startS: Number.isFinite(startS) ? startS : 0,
|
|
endS,
|
|
lines,
|
|
});
|
|
current = null;
|
|
};
|
|
|
|
for (let i = 0; i < alignedWords.length; i++) {
|
|
const word = alignedWords[i] || {};
|
|
const raw = String(word.word || "");
|
|
let working = raw.replace(/\n/g, " ");
|
|
let consumedTag = false;
|
|
|
|
while (true) {
|
|
const match = working.match(SECTION_TAG_LEADING_REGEX);
|
|
if (!match) break;
|
|
const tagMeta = parseSectionTag(`[${match[1]}]`);
|
|
if (tagMeta) {
|
|
pushCurrent();
|
|
startSection(tagMeta);
|
|
}
|
|
working = working.slice(match[0].length);
|
|
consumedTag = true;
|
|
}
|
|
|
|
if (consumedTag && !working.trim()) {
|
|
continue;
|
|
}
|
|
|
|
const cleanedWord = cleanText(working);
|
|
if (!cleanedWord) continue;
|
|
|
|
if (!current) startSection(null);
|
|
current.words.push({
|
|
...word,
|
|
word: cleanedWord,
|
|
startS: Number(word.startS || 0),
|
|
endS: Number(word.endS || 0),
|
|
});
|
|
}
|
|
|
|
pushCurrent();
|
|
|
|
let lineIdx = 0;
|
|
return grouped.map((section) => ({
|
|
...section,
|
|
lines: section.lines.map((line) => ({
|
|
...line,
|
|
globalIdx: lineIdx++,
|
|
})),
|
|
}));
|
|
}, [alignedWords]);
|
|
|
|
const flatLines = useMemo(
|
|
() => sections.flatMap((section) => section.lines),
|
|
[sections],
|
|
);
|
|
const currentLineIdx = useMemo(() => {
|
|
if (!flatLines || flatLines.length === 0) return -1;
|
|
for (let i = 0; i < flatLines.length; i++) {
|
|
const L = flatLines[i];
|
|
if (visibleTimeS >= (L.startS || 0) && visibleTimeS <= (L.endS || 0))
|
|
return i;
|
|
}
|
|
if (visibleTimeS > (flatLines[flatLines.length - 1]?.endS || 0))
|
|
return flatLines.length - 1;
|
|
return -1;
|
|
}, [flatLines, visibleTimeS]);
|
|
|
|
// Auto-scroll lyrics to keep the current line visible
|
|
const lyricsRef = useRef(null);
|
|
const sectionYRef = useRef({});
|
|
const lineRelativeYRef = useRef({});
|
|
const lineYRef = useRef({});
|
|
const updateLineAbsoluteOffset = useCallback((lineIdx) => {
|
|
const entry = lineRelativeYRef.current?.[lineIdx];
|
|
if (!entry) return;
|
|
const sectionY = sectionYRef.current?.[entry.sectionKey];
|
|
if (typeof sectionY !== "number") return;
|
|
lineYRef.current[lineIdx] = sectionY + entry.relativeY;
|
|
}, []);
|
|
const registerLineRelativeOffset = useCallback(
|
|
(lineIdx, sectionKey, relativeY) => {
|
|
lineRelativeYRef.current[lineIdx] = { sectionKey, relativeY };
|
|
updateLineAbsoluteOffset(lineIdx);
|
|
},
|
|
[updateLineAbsoluteOffset],
|
|
);
|
|
const registerSectionOffset = useCallback(
|
|
(sectionKey, y, lines = []) => {
|
|
sectionYRef.current[sectionKey] = y;
|
|
lines.forEach((line) => updateLineAbsoluteOffset(line.globalIdx));
|
|
},
|
|
[updateLineAbsoluteOffset],
|
|
);
|
|
useEffect(() => {
|
|
const y = lineYRef.current?.[currentLineIdx];
|
|
if (lyricsRef.current && typeof y === "number") {
|
|
try {
|
|
lyricsRef.current.scrollTo({ y: Math.max(0, y - 80), animated: true });
|
|
} catch (e) {}
|
|
}
|
|
}, [currentLineIdx]);
|
|
|
|
return (
|
|
<Page
|
|
headerType="NAVIGATION"
|
|
hideBackButton={isWeb}
|
|
topStickyContent={renderWebBackButton}
|
|
width={isCompactLayout ? "100%" : undefined}
|
|
title={action === "userProfile" ? "Mon profil" : "Détail musique"}
|
|
backgroundImg={
|
|
action === "userProfile"
|
|
? background.profileBG
|
|
: background.libraryBG2Web
|
|
}
|
|
shareBtn={
|
|
sharePayload
|
|
? {
|
|
label: "Partager le morceau",
|
|
onPress: handleShare,
|
|
}
|
|
: false
|
|
}
|
|
{...(action === "userProfile" && {
|
|
containerStyle: {
|
|
backgroundColor: "#0000004D",
|
|
},
|
|
rightComponent: () => (
|
|
<Pressable onPress={() => SheetManager.show("DeleteAudio")}>
|
|
<RNImage source={icons.trash} />
|
|
</Pressable>
|
|
),
|
|
})}
|
|
>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
paddingBottom: gutters * 2,
|
|
flexDirection: isCompactLayout ? "column" : "row",
|
|
justifyContent: "center",
|
|
alignItems: isCompactLayout ? "stretch" : "center",
|
|
height: "auto",
|
|
gap: isCompactLayout ? 16 : 24,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{/* Left column: player */}
|
|
<BlurView
|
|
intensity={40}
|
|
style={{
|
|
flex: 1,
|
|
paddingRight: isCompactLayout ? 0 : 8,
|
|
height: isCompactLayout ? undefined : 400,
|
|
borderRadius: 12,
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: Palette.transparentWhite,
|
|
maxWidth: isCompactLayout ? "100%" : "50%",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<View>
|
|
<View style={{ gap: 28 }}>
|
|
{coverUrl ? (
|
|
<ExpoImage
|
|
source={{ uri: coverUrl }}
|
|
cachePolicy="memory-disk"
|
|
priority="high"
|
|
contentFit="cover"
|
|
transition={150}
|
|
style={styles.img}
|
|
/>
|
|
) : (
|
|
// empty container
|
|
<View
|
|
style={{
|
|
...styles.img,
|
|
backgroundColor: Palette.transparentWhite,
|
|
}}
|
|
/>
|
|
)}
|
|
<View style={{ ...Style.containerSpaceBetween }}>
|
|
<View style={{ flex: 1, minWidth: 0 }}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.name}>{artist}</Text>
|
|
</View>
|
|
<View style={{ ...Style.containerRow, gap: 12 }}>
|
|
<PressableScale
|
|
onPress={handleToggleLoop}
|
|
disabled={!isCurrentTrack}
|
|
hitSlop={10}
|
|
style={{
|
|
...size({ size: 32 }),
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
opacity: isCurrentTrack ? 1 : 0.4,
|
|
}}
|
|
contentStyle={{
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Feather
|
|
name="repeat"
|
|
size={24}
|
|
color={loopEnabled ? Palette.primary : Palette.white}
|
|
/>
|
|
</PressableScale>
|
|
<Pressable
|
|
onPress={async () => {
|
|
if (!projectId) return;
|
|
if (!ensureAuthenticated(currentUID)) return;
|
|
const next = !fav;
|
|
setFav(next);
|
|
try {
|
|
await projectsRef.doc(projectId).update({
|
|
likedBy: next
|
|
? arrayUnion(currentUID)
|
|
: arrayRemove(currentUID),
|
|
});
|
|
} catch (e) {
|
|
setFav(!next);
|
|
}
|
|
}}
|
|
>
|
|
<RNImage
|
|
source={fav ? icons.heart : icons.heartOutline}
|
|
style={{ ...size({ size: 24 }) }}
|
|
resizeMode="contain"
|
|
/>
|
|
</Pressable>
|
|
<PressableScale onPress={handleOpenOptions}>
|
|
<RNImage
|
|
source={icons.more}
|
|
style={{ ...size({ size: 24 }) }}
|
|
resizeMode="contain"
|
|
/>
|
|
</PressableScale>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{songUrl && (
|
|
<View style={{ paddingTop: 22 }}>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 24,
|
|
alignSelf: "center",
|
|
}}
|
|
>
|
|
{/* Previous (rewind 10s) */}
|
|
<Pressable onPress={() => handleSeekBySeconds(-10)}>
|
|
<RNImage
|
|
source={icons.forward}
|
|
style={{ ...size({ size: 30 }) }}
|
|
/>
|
|
</Pressable>
|
|
{/* Play / Pause */}
|
|
<PressableScale
|
|
style={{
|
|
...size({ size: 40 }),
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
onPress={togglePlay}
|
|
>
|
|
<RNImage
|
|
resizeMode="contain"
|
|
source={isPlaying ? icons.pause : icons.play}
|
|
style={size({ size: 34 })}
|
|
/>
|
|
</PressableScale>
|
|
{/* Next (forward 10s) */}
|
|
<PressableScale onPress={() => handleSeekBySeconds(10)}>
|
|
<RNImage
|
|
source={icons.forward}
|
|
style={{
|
|
...size({ size: 30 }),
|
|
transform: [{ rotate: "180deg" }],
|
|
}}
|
|
/>
|
|
</PressableScale>
|
|
</View>
|
|
<Slider
|
|
value={fmt(positionMs)}
|
|
maxValue={fmt(sliderDurationMs)}
|
|
progress={
|
|
sliderDurationMs ? (positionMs || 0) / sliderDurationMs : 0
|
|
}
|
|
seekEnabled={!!songUrl}
|
|
onSeekStart={handleSliderSeekStart}
|
|
onSeek={handleSliderSeek}
|
|
onSeekEnd={handleSliderSeekEnd}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</BlurView>
|
|
{/* Right column: lyrics */}
|
|
|
|
{(sections.length > 0 || description?.length > 0) && (
|
|
<BlurView
|
|
intensity={40}
|
|
style={{
|
|
flex: 1,
|
|
paddingLeft: isCompactLayout ? 0 : 8,
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: Palette.transparentWhite,
|
|
borderRadius: 12,
|
|
height: isCompactLayout ? undefined : 400,
|
|
maxWidth: isCompactLayout ? "100%" : "50%",
|
|
width: "100%",
|
|
marginTop: isCompactLayout ? 12 : 0,
|
|
}}
|
|
>
|
|
{sections.length ? (
|
|
<ScrollView
|
|
ref={lyricsRef}
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{
|
|
paddingBottom: 40,
|
|
...(isCompactLayout ? {} : { height: 400 }),
|
|
}}
|
|
>
|
|
{sections.map((section, sectionIdx) => (
|
|
<View
|
|
key={section.key}
|
|
onLayout={(e) =>
|
|
registerSectionOffset(
|
|
section.key,
|
|
e.nativeEvent?.layout?.y,
|
|
section.lines,
|
|
)
|
|
}
|
|
style={[
|
|
styles.sectionContainer,
|
|
sectionIdx > 0 ? styles.sectionSpacing : null,
|
|
]}
|
|
>
|
|
<Text style={styles.sectionTitle}>
|
|
{section.label}
|
|
{"\n"}
|
|
</Text>
|
|
{section.lines.map((line) => (
|
|
<View
|
|
key={`line-${line.globalIdx}`}
|
|
onLayout={(e) => {
|
|
registerLineRelativeOffset(
|
|
line.globalIdx,
|
|
section.key,
|
|
e.nativeEvent?.layout?.y ?? 0,
|
|
);
|
|
}}
|
|
style={{
|
|
marginBottom: 8,
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
}}
|
|
>
|
|
{(line.words || []).map((w, j) => (
|
|
<Text
|
|
key={`w-${line.globalIdx}-${j}`}
|
|
style={
|
|
visibleTimeS >= (w.startS || 0)
|
|
? styles.karaokeWordActive
|
|
: styles.karaokeWord
|
|
}
|
|
onPress={() => handleLyricsSeek(w.startS)}
|
|
>
|
|
{w.text}
|
|
{j < (line.words?.length || 1) - 1 ? " " : ""}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
))}
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
) : description?.length > 0 ? (
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{
|
|
paddingBottom: 40,
|
|
...(isCompactLayout ? {} : { height: 400 }),
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
}}
|
|
>
|
|
{description}
|
|
</Text>
|
|
</ScrollView>
|
|
) : null}
|
|
</BlurView>
|
|
)}
|
|
</View>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default MusicDetails;
|
|
|
|
const styles = StyleSheet.create({
|
|
webBackContainer: {
|
|
alignSelf: "flex-start",
|
|
marginBottom: 12,
|
|
},
|
|
webBackButton: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
alignSelf: "flex-start",
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 7,
|
|
borderRadius: 999,
|
|
borderWidth: 1,
|
|
borderColor: Palette.ultraLightWhite,
|
|
backgroundColor: Palette.ultraLightWhite,
|
|
},
|
|
webBackIcon: {
|
|
width: 16,
|
|
height: 16,
|
|
transform: [{ rotate: "90deg" }],
|
|
},
|
|
webBackText: {
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
},
|
|
img: {
|
|
width: 200,
|
|
height: 200,
|
|
borderRadius: 24,
|
|
alignSelf: "center",
|
|
},
|
|
title: {
|
|
fontSize: 20,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
|
maxWidth: responsiveWidth(70),
|
|
flexShrink: 1,
|
|
marginBottom: responsiveHeight(1),
|
|
},
|
|
name: {
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
|
},
|
|
karaokeContainer: {
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
lineHeight: 24,
|
|
},
|
|
karaokeWord: {
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
cursor: "pointer",
|
|
},
|
|
karaokeWordActive: {
|
|
color: Palette.primary,
|
|
fontFamily: FONT_FAMILY.InterBold,
|
|
cursor: "pointer",
|
|
},
|
|
sectionContainer: {
|
|
marginBottom: 16,
|
|
},
|
|
sectionSpacing: {
|
|
marginTop: 12,
|
|
},
|
|
sectionTitle: {
|
|
color: Palette.transparentWhite,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
fontSize: 12,
|
|
letterSpacing: 0.4,
|
|
textTransform: "uppercase",
|
|
marginBottom: 6,
|
|
},
|
|
});
|