fix global player mobile
This commit is contained in:
@@ -106,11 +106,6 @@ const MusicDetails = ({ route }) => {
|
|||||||
seekBy: seekTrackBy,
|
seekBy: seekTrackBy,
|
||||||
} = useTrackController(trackDescriptor);
|
} = useTrackController(trackDescriptor);
|
||||||
|
|
||||||
const progressInfo = useMemo(
|
|
||||||
() => ({ pos: positionMs, dur: durationMs }),
|
|
||||||
[positionMs, durationMs]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Karaoke aligned words (from timestamps)
|
// Karaoke aligned words (from timestamps)
|
||||||
const alignedWords = useMemo(() => {
|
const alignedWords = useMemo(() => {
|
||||||
try {
|
try {
|
||||||
@@ -176,11 +171,11 @@ const MusicDetails = ({ route }) => {
|
|||||||
return `${m}:${s}`;
|
return `${m}:${s}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTogglePlay = useCallback(async () => {
|
const togglePlay = useCallback(async () => {
|
||||||
if (!trackDescriptor) return;
|
if (!trackDescriptor) return;
|
||||||
try {
|
try {
|
||||||
if (!isCurrentTrack) {
|
if (!isCurrentTrack) {
|
||||||
await ensureLoaded({ startPositionMs: progressInfo.pos, autoPlay: true });
|
await ensureLoaded({ startPositionMs: positionMs, autoPlay: true });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (isTrackPlaying) {
|
if (isTrackPlaying) {
|
||||||
@@ -195,7 +190,7 @@ const MusicDetails = ({ route }) => {
|
|||||||
trackDescriptor,
|
trackDescriptor,
|
||||||
isCurrentTrack,
|
isCurrentTrack,
|
||||||
ensureLoaded,
|
ensureLoaded,
|
||||||
progressInfo.pos,
|
positionMs,
|
||||||
isTrackPlaying,
|
isTrackPlaying,
|
||||||
pauseTrack,
|
pauseTrack,
|
||||||
resumeTrack,
|
resumeTrack,
|
||||||
@@ -206,10 +201,7 @@ const MusicDetails = ({ route }) => {
|
|||||||
try {
|
try {
|
||||||
wasPlayingBeforeSeek.current = isTrackPlaying;
|
wasPlayingBeforeSeek.current = isTrackPlaying;
|
||||||
if (!isCurrentTrack) {
|
if (!isCurrentTrack) {
|
||||||
await ensureLoaded({
|
await ensureLoaded({ startPositionMs: positionMs, autoPlay: false });
|
||||||
startPositionMs: progressInfo.pos,
|
|
||||||
autoPlay: false,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
if (isTrackPlaying) {
|
if (isTrackPlaying) {
|
||||||
await pauseTrack();
|
await pauseTrack();
|
||||||
@@ -222,13 +214,13 @@ const MusicDetails = ({ route }) => {
|
|||||||
isTrackPlaying,
|
isTrackPlaying,
|
||||||
isCurrentTrack,
|
isCurrentTrack,
|
||||||
ensureLoaded,
|
ensureLoaded,
|
||||||
progressInfo.pos,
|
positionMs,
|
||||||
pauseTrack,
|
pauseTrack,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const handleSliderSeek = useCallback(
|
const handleSliderSeek = useCallback(
|
||||||
async (ratio) => {
|
async (ratio) => {
|
||||||
const dur = progressInfo.dur || 0;
|
const dur = durationMs || 0;
|
||||||
if (!trackDescriptor || dur <= 0) return;
|
if (!trackDescriptor || dur <= 0) return;
|
||||||
const targetMs = Math.max(0, Math.floor(dur * ratio));
|
const targetMs = Math.max(0, Math.floor(dur * ratio));
|
||||||
try {
|
try {
|
||||||
@@ -241,14 +233,14 @@ const MusicDetails = ({ route }) => {
|
|||||||
console.log("MusicDetails seek error", e?.message);
|
console.log("MusicDetails seek error", e?.message);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[progressInfo.dur, trackDescriptor, isCurrentTrack, ensureLoaded, seekTrackTo]
|
[durationMs, trackDescriptor, isCurrentTrack, ensureLoaded, seekTrackTo]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleSliderSeekEnd = useCallback(async () => {
|
const handleSliderSeekEnd = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
if (wasPlayingBeforeSeek.current) {
|
if (wasPlayingBeforeSeek.current) {
|
||||||
if (!isCurrentTrack) {
|
if (!isCurrentTrack) {
|
||||||
await ensureLoaded({ startPositionMs: progressInfo.pos, autoPlay: true });
|
await ensureLoaded({ startPositionMs: positionMs, autoPlay: true });
|
||||||
} else {
|
} else {
|
||||||
await resumeTrack();
|
await resumeTrack();
|
||||||
}
|
}
|
||||||
@@ -258,13 +250,13 @@ const MusicDetails = ({ route }) => {
|
|||||||
} finally {
|
} finally {
|
||||||
wasPlayingBeforeSeek.current = false;
|
wasPlayingBeforeSeek.current = false;
|
||||||
}
|
}
|
||||||
}, [ensureLoaded, isCurrentTrack, progressInfo.pos, resumeTrack]);
|
}, [ensureLoaded, isCurrentTrack, positionMs, resumeTrack]);
|
||||||
|
|
||||||
const handleSeekBySeconds = useCallback(
|
const handleSeekBySeconds = useCallback(
|
||||||
async (deltaSeconds) => {
|
async (deltaSeconds) => {
|
||||||
if (!trackDescriptor) return;
|
if (!trackDescriptor) return;
|
||||||
const deltaMs = Number(deltaSeconds || 0) * 1000;
|
const deltaMs = Number(deltaSeconds || 0) * 1000;
|
||||||
const target = Math.max(0, (progressInfo.pos || 0) + deltaMs);
|
const target = Math.max(0, (positionMs || 0) + deltaMs);
|
||||||
try {
|
try {
|
||||||
if (!isCurrentTrack) {
|
if (!isCurrentTrack) {
|
||||||
await ensureLoaded({ startPositionMs: target, autoPlay: true });
|
await ensureLoaded({ startPositionMs: target, autoPlay: true });
|
||||||
@@ -277,7 +269,7 @@ const MusicDetails = ({ route }) => {
|
|||||||
},
|
},
|
||||||
[
|
[
|
||||||
trackDescriptor,
|
trackDescriptor,
|
||||||
progressInfo.pos,
|
positionMs,
|
||||||
isCurrentTrack,
|
isCurrentTrack,
|
||||||
ensureLoaded,
|
ensureLoaded,
|
||||||
seekTrackBy,
|
seekTrackBy,
|
||||||
@@ -341,8 +333,8 @@ const MusicDetails = ({ route }) => {
|
|||||||
|
|
||||||
// Current time in seconds for highlighting
|
// Current time in seconds for highlighting
|
||||||
const currentTimeS = useMemo(
|
const currentTimeS = useMemo(
|
||||||
() => Math.max(0, (progressInfo.pos || 0) / 1000),
|
() => Math.max(0, (positionMs || 0) / 1000),
|
||||||
[progressInfo.pos]
|
[positionMs]
|
||||||
);
|
);
|
||||||
// Preview lead: show words 0.5s earlier
|
// Preview lead: show words 0.5s earlier
|
||||||
const visibleTimeS = useMemo(
|
const visibleTimeS = useMemo(
|
||||||
@@ -657,11 +649,11 @@ const MusicDetails = ({ route }) => {
|
|||||||
{songUrl && (
|
{songUrl && (
|
||||||
<View style={{ paddingTop: 22 }}>
|
<View style={{ paddingTop: 22 }}>
|
||||||
<Slider
|
<Slider
|
||||||
value={fmt(progressInfo.pos)}
|
value={fmt(positionMs)}
|
||||||
maxValue={fmt(progressInfo.dur)}
|
maxValue={fmt(durationMs)}
|
||||||
progress={
|
progress={
|
||||||
progressInfo.dur
|
durationMs
|
||||||
? Math.min(1, Math.max(0, (progressInfo.pos || 0) / progressInfo.dur))
|
? Math.min(1, Math.max(0, (positionMs || 0) / durationMs))
|
||||||
: 0
|
: 0
|
||||||
}
|
}
|
||||||
seekEnabled={!!songUrl}
|
seekEnabled={!!songUrl}
|
||||||
@@ -688,7 +680,7 @@ const MusicDetails = ({ route }) => {
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
}}
|
}}
|
||||||
onPress={handleTogglePlay}
|
onPress={togglePlay}
|
||||||
>
|
>
|
||||||
<RNImage
|
<RNImage
|
||||||
resizeMode={"contain"}
|
resizeMode={"contain"}
|
||||||
|
|||||||
Reference in New Issue
Block a user