|
|
|
|
@@ -22,8 +22,8 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
|
const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
|
|
|
|
|
|
|
|
|
|
const [processedSrc, setProcessedSrc] = useState(src);
|
|
|
|
|
const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState(unlockedSeconds);
|
|
|
|
|
const [processedSrc, setProcessedSrc] = useState<string | null>(null);
|
|
|
|
|
const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState<number | null>(null);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('[AudioPlayer] MOUNTED');
|
|
|
|
|
@@ -41,7 +41,7 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
let startPos = startTime;
|
|
|
|
|
|
|
|
|
|
// If same song but more time unlocked, start from where previous segment ended
|
|
|
|
|
if (src === processedSrc && unlockedSeconds > processedUnlockedSeconds) {
|
|
|
|
|
if (processedSrc !== null && src === processedSrc && processedUnlockedSeconds !== null && unlockedSeconds > processedUnlockedSeconds) {
|
|
|
|
|
startPos = startTime + processedUnlockedSeconds;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -62,8 +62,11 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
|
|
|
|
|
setProgress(Math.min(initialPercent, 100));
|
|
|
|
|
|
|
|
|
|
setHasPlayedOnce(false); // Reset for new segment
|
|
|
|
|
onHasPlayedChange?.(false); // Notify parent
|
|
|
|
|
// Only reset hasPlayedOnce if the song changed, not if just more time was unlocked
|
|
|
|
|
if (processedSrc !== null && src !== processedSrc) {
|
|
|
|
|
setHasPlayedOnce(false); // Reset for new song
|
|
|
|
|
onHasPlayedChange?.(false); // Notify parent
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Update processed state
|
|
|
|
|
setProcessedSrc(src);
|
|
|
|
|
@@ -72,22 +75,31 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
if (autoPlay) {
|
|
|
|
|
// Delay play slightly to ensure currentTime sticks
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const playPromise = audioRef.current?.play();
|
|
|
|
|
if (playPromise !== undefined) {
|
|
|
|
|
playPromise
|
|
|
|
|
.then(() => {
|
|
|
|
|
setIsPlaying(true);
|
|
|
|
|
onPlay?.();
|
|
|
|
|
setHasPlayedOnce(true);
|
|
|
|
|
onHasPlayedChange?.(true); // Notify parent
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.log("Autoplay prevented:", error);
|
|
|
|
|
setIsPlaying(false);
|
|
|
|
|
});
|
|
|
|
|
if (audioRef.current) {
|
|
|
|
|
// Use startPos (which may be startTime + processedUnlockedSeconds if more time was unlocked)
|
|
|
|
|
// instead of always using startTime
|
|
|
|
|
audioRef.current.currentTime = startPos;
|
|
|
|
|
const playPromise = audioRef.current.play();
|
|
|
|
|
if (playPromise !== undefined) {
|
|
|
|
|
playPromise
|
|
|
|
|
.then(() => {
|
|
|
|
|
setIsPlaying(true);
|
|
|
|
|
onPlay?.();
|
|
|
|
|
setHasPlayedOnce(true);
|
|
|
|
|
onHasPlayedChange?.(true); // Notify parent
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.log("Autoplay prevented:", error);
|
|
|
|
|
setIsPlaying(false);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, 150);
|
|
|
|
|
}
|
|
|
|
|
} else if (startTime !== undefined && audioRef.current.currentTime < startTime) {
|
|
|
|
|
// If startTime is set and currentTime is before it, reset to startTime
|
|
|
|
|
// This handles the case where the audio element was reset or reloaded
|
|
|
|
|
audioRef.current.currentTime = startTime;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
|
|
|
|
|
@@ -97,6 +109,16 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
play: () => {
|
|
|
|
|
if (!audioRef.current) return;
|
|
|
|
|
|
|
|
|
|
// Check if we need to reset to startTime
|
|
|
|
|
const current = audioRef.current.currentTime;
|
|
|
|
|
const elapsed = current - startTime;
|
|
|
|
|
|
|
|
|
|
// Reset if: never played before, current position is before startTime, or we've exceeded the unlocked segment
|
|
|
|
|
if (!hasPlayedOnce || current < startTime || elapsed >= unlockedSeconds) {
|
|
|
|
|
// Reset to start of segment
|
|
|
|
|
audioRef.current.currentTime = startTime;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const playPromise = audioRef.current.play();
|
|
|
|
|
if (playPromise !== undefined) {
|
|
|
|
|
playPromise
|
|
|
|
|
@@ -121,8 +143,20 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
|
|
|
|
|
if (isPlaying) {
|
|
|
|
|
audioRef.current.pause();
|
|
|
|
|
setIsPlaying(false);
|
|
|
|
|
} else {
|
|
|
|
|
// Check if we need to reset to startTime
|
|
|
|
|
const current = audioRef.current.currentTime;
|
|
|
|
|
const elapsed = current - startTime;
|
|
|
|
|
|
|
|
|
|
// Reset if: never played before, current position is before startTime, or we've exceeded the unlocked segment
|
|
|
|
|
if (!hasPlayedOnce || current < startTime || elapsed >= unlockedSeconds) {
|
|
|
|
|
// Reset to start of segment
|
|
|
|
|
audioRef.current.currentTime = startTime;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
audioRef.current.play();
|
|
|
|
|
setIsPlaying(true);
|
|
|
|
|
onPlay?.();
|
|
|
|
|
|
|
|
|
|
if (hasPlayedOnce) {
|
|
|
|
|
@@ -132,7 +166,6 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|
|
|
|
onHasPlayedChange?.(true); // Notify parent
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setIsPlaying(!isPlaying);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleTimeUpdate = () => {
|
|
|
|
|
|