912 lines
26 KiB
JavaScript
912 lines
26 KiB
JavaScript
import { BlurView } from "expo-blur";
|
|
import { Image as ExpoImage } from "expo-image";
|
|
import React, {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
} from "react";
|
|
import {
|
|
Pressable,
|
|
Image as RNImage,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} 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 useDataFromRef from "../../hooks/useDataFromRef";
|
|
import useTrackController from "../../hooks/useTrackController";
|
|
import Page from "../../layouts/Page";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import Style, { gutters, size } from "../../styles/Style";
|
|
|
|
// 20 secondes
|
|
const timeBeforeIncrement = 20000;
|
|
|
|
const MusicDetails = ({ route }) => {
|
|
const { params } = route || {};
|
|
const action = params?.action;
|
|
const projectId = params?.projectId || null;
|
|
const [fav, setFav] = useState(false);
|
|
const [currentUID] = useGlobal("currentUID");
|
|
const wasPlayingBeforeSeek = React.useRef(false);
|
|
const listenedMsRef = React.useRef(0);
|
|
const incrementDoneRef = React.useRef(false);
|
|
const timerRef = React.useRef(null);
|
|
|
|
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 = owner?.userName || "MusicLand";
|
|
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 {
|
|
isCurrent: isCurrentTrack,
|
|
isPlaying: isTrackPlaying,
|
|
positionMs,
|
|
durationMs,
|
|
ensureLoaded,
|
|
pause: pauseTrack,
|
|
resume: resumeTrack,
|
|
seekTo: seekTrackTo,
|
|
seekBy: seekTrackBy,
|
|
} = useTrackController(trackDescriptor);
|
|
|
|
const isPlaying = isTrackPlaying;
|
|
|
|
// 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]);
|
|
|
|
// Reset counters when the track changes
|
|
useEffect(() => {
|
|
listenedMsRef.current = 0;
|
|
incrementDoneRef.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 {
|
|
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,
|
|
]);
|
|
|
|
const handleSliderSeek = useCallback(
|
|
async (ratio) => {
|
|
const dur = durationMs || 0;
|
|
if (!trackDescriptor || dur <= 0) return;
|
|
const targetMs = Math.max(0, Math.floor(dur * ratio));
|
|
try {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({ startPositionMs: targetMs, autoPlay: false });
|
|
} else {
|
|
await seekTrackTo(targetMs);
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails seek error", e?.message);
|
|
}
|
|
},
|
|
[
|
|
trackDescriptor,
|
|
durationMs,
|
|
isCurrentTrack,
|
|
ensureLoaded,
|
|
seekTrackTo,
|
|
]
|
|
);
|
|
|
|
const handleSliderSeekEnd = useCallback(async () => {
|
|
try {
|
|
if (wasPlayingBeforeSeek.current) {
|
|
if (!isCurrentTrack) {
|
|
await ensureLoaded({
|
|
startPositionMs: positionMs,
|
|
autoPlay: true,
|
|
});
|
|
} else {
|
|
await resumeTrack();
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log("MusicDetails seek end error", e?.message);
|
|
} finally {
|
|
wasPlayingBeforeSeek.current = false;
|
|
}
|
|
}, [ensureLoaded, isCurrentTrack, positionMs, resumeTrack]);
|
|
|
|
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)) {
|
|
return project.lyrics
|
|
.map((s) => {
|
|
const body = (s?.lyrics || "").trim();
|
|
if (!body) return null;
|
|
const t = (s?.type || "").toLowerCase();
|
|
const label = t === "refrain" ? "Refrain" : "Couplet";
|
|
return `[${label}]\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("bridge")) type = "bridge";
|
|
else if (lower.includes("intro")) type = "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;
|
|
if (type === "refrain") return index > 1 ? `Refrain ${index}` : "Refrain";
|
|
if (type === "couplet") return index > 1 ? `Couplet ${index}` : "Couplet";
|
|
if (type === "bridge") return index > 1 ? `Pont ${index}` : "Pont";
|
|
if (type === "intro") return "Intro";
|
|
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 lineYRef = useRef({});
|
|
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"
|
|
title={action === "userProfile" ? "Mon profil" : "Détail musique"}
|
|
backgroundImg={
|
|
action === "userProfile" ? background.profileBG : background.libraryBG2
|
|
}
|
|
{...(action === "userProfile" && {
|
|
containerStyle: {
|
|
backgroundColor: "#0000004D",
|
|
},
|
|
rightComponent: () => (
|
|
<Pressable onPress={() => SheetManager.show("DeleteAudio")}>
|
|
<RNImage source={icons.trash} />
|
|
</Pressable>
|
|
),
|
|
})}
|
|
>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
paddingBottom: gutters * 2,
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "auto",
|
|
gap: 24,
|
|
}}
|
|
>
|
|
{/* Left column: player */}
|
|
<BlurView
|
|
intensity={40}
|
|
style={{
|
|
flex: 1,
|
|
paddingRight: 8,
|
|
height: 400,
|
|
borderRadius: 12,
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: Palette.transparentWhite,
|
|
maxWidth: "50%",
|
|
}}
|
|
>
|
|
<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 }}>
|
|
<Pressable
|
|
onPress={async () => {
|
|
if (!projectId || !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>
|
|
<Pressable
|
|
onPress={() =>
|
|
SheetManager.show("Playlist", { payload: { projectId } })
|
|
}
|
|
>
|
|
<RNImage
|
|
source={icons.more}
|
|
style={{ ...size({ size: 24 }) }}
|
|
resizeMode="contain"
|
|
/>
|
|
</Pressable>
|
|
</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(durationMs)}
|
|
progress={durationMs ? (positionMs || 0) / durationMs : 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: 8,
|
|
padding: 10,
|
|
borderWidth: 1,
|
|
borderColor: Palette.transparentWhite,
|
|
borderRadius: 12,
|
|
height: 400,
|
|
maxWidth: "50%",
|
|
}}
|
|
>
|
|
{sections.length ? (
|
|
<ScrollView
|
|
ref={lyricsRef}
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{ paddingBottom: 40, height: 400 }}
|
|
>
|
|
{sections.map((section, sectionIdx) => (
|
|
<View
|
|
key={section.key}
|
|
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) => {
|
|
lineYRef.current[line.globalIdx] =
|
|
e.nativeEvent.layout.y;
|
|
}}
|
|
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 }}
|
|
>
|
|
<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({
|
|
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,
|
|
},
|
|
});
|