wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Notes slider musik belum berfungsi

Browse Source
This commit is contained in:
nico
2026-03-02 14:28:20 +08:00
parent 91e32f3f1c
commit ae3187804e
3 changed files with 329 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/darmasaba/(pages)/musik/lib/seek.ts
View File

@@ -1,15 +1,19 @@
export function seekTo(
audioRef: React.RefObject<HTMLAudioElement | null>,
audioRef: React.RefObject<HTMLAudioElement>,
time: number,
setCurrentTime?: (v: number) => void
) {
if (!audioRef.current) return;
// Validasi: jangan seek melebihi durasi atau negatif
const duration = audioRef.current.duration || 0;
const safeTime = Math.min(Math.max(0, time), duration);
// Set waktu audio
audioRef.current.currentTime = time;
audioRef.current.currentTime = safeTime;
// Update state jika provided
if (setCurrentTime) {
setCurrentTime(Math.round(time));
setCurrentTime(Math.floor(safeTime));
}
}

146
src/app/darmasaba/(pages)/musik/lib/useAudioProgress.ts Normal file
View File

@@ -0,0 +1,146 @@
import { useRef, useEffect, useCallback } from 'react';
/**
* Custom hook untuk smooth audio progress update menggunakan requestAnimationFrame
* Lebih smooth dan reliable dibanding onTimeUpdate event
*/
export function useAudioProgress(
audioRef: React.RefObject<HTMLAudioElement>,
isPlaying: boolean,
setCurrentTime: (time: number) => void,
isSeekingRef: React.RefObject<boolean>,
lastSeekTimeRef?: React.RefObject<number>
) {
const rafRef = useRef<number | null>(null);
const lastTimeRef = useRef<number>(0);
const updateProgress = useCallback(() => {
if (!audioRef.current || audioRef.current.paused || isSeekingRef.current) {
rafRef.current = requestAnimationFrame(updateProgress);
return;
}
const audio = audioRef.current;
const currentTime = Math.floor(audio.currentTime);
// Hanya update state jika waktu berubah
if (currentTime !== lastTimeRef.current) {
lastTimeRef.current = currentTime;
setCurrentTime(currentTime);
}
rafRef.current = requestAnimationFrame(updateProgress);
}, [audioRef, setCurrentTime, isSeekingRef]);
useEffect(() => {
if (isPlaying) {
rafRef.current = requestAnimationFrame(updateProgress);
} else if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
}
return () => {
if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
}
};
}, [isPlaying, updateProgress]);
return rafRef;
}
// 'use client'
// import { useEffect, useRef, useState, useCallback } from 'react';
// export function useAudioEngine() {
// const audioRef = useRef<HTMLAudioElement | null>(null);
// const rafRef = useRef<number | null>(null);
// const isSeekingRef = useRef(false);
// const [isPlaying, setIsPlaying] = useState(false);
// const [currentTime, setCurrentTime] = useState(0);
// const [duration, setDuration] = useState(0);
// const load = useCallback((src: string) => {
// if (!audioRef.current) return;
// audioRef.current.src = src;
// audioRef.current.load();
// setCurrentTime(0);
// }, []);
// const play = async () => {
// if (!audioRef.current) return;
// await audioRef.current.play();
// setIsPlaying(true);
// };
// const pause = () => {
// if (!audioRef.current) return;
// audioRef.current.pause();
// setIsPlaying(false);
// };
// const toggle = () => {
// if (!audioRef.current) return;
// audioRef.current.paused ? play() : pause();
// };
// const seek = (time: number) => {
// if (!audioRef.current) return;
// isSeekingRef.current = true;
// audioRef.current.currentTime = time;
// setCurrentTime(time);
// requestAnimationFrame(() => {
// isSeekingRef.current = false;
// });
// };
// useEffect(() => {
// if (!audioRef.current) return;
// const audio = audioRef.current;
// const onLoaded = () => {
// setDuration(Math.floor(audio.duration));
// };
// const onEnded = () => {
// setIsPlaying(false);
// setCurrentTime(0);
// };
// audio.addEventListener('loadedmetadata', onLoaded);
// audio.addEventListener('ended', onEnded);
// return () => {
// audio.removeEventListener('loadedmetadata', onLoaded);
// audio.removeEventListener('ended', onEnded);
// };
// }, []);
// useEffect(() => {
// const loop = () => {
// if (
// audioRef.current &&
// !audioRef.current.paused &&
// !isSeekingRef.current
// ) {
// setCurrentTime(Math.floor(audioRef.current.currentTime));
// }
// rafRef.current = requestAnimationFrame(loop);
// };
// rafRef.current = requestAnimationFrame(loop);
// return () => {
// if (rafRef.current) cancelAnimationFrame(rafRef.current);
// };
// }, []);
// return {
// audioRef,
// isPlaying,
// currentTime,
// duration,
// load,
// toggle,
// seek,
// };
// }

217
src/app/darmasaba/(pages)/musik/musik-desa/page.tsx
View File

@@ -6,9 +6,9 @@ import BackButton from '../../desa/layanan/_com/BackButto';
import { togglePlayPause } from '../lib/playPause';
import { getNextIndex, getPrevIndex } from '../lib/nextPrev';
import { handleRepeatOrNext } from '../lib/repeat';
import { seekTo } from '../lib/seek';
import { toggleShuffle } from '../lib/shuffle';
import { setAudioVolume, toggleMute as toggleMuteUtil } from '../lib/volume';
import { useAudioProgress } from '../lib/useAudioProgress';
interface MusicFile {
id: string;
@@ -44,8 +44,13 @@ const MusicPlayer = () => {
const [musikData, setMusikData] = useState<Musik[]>([]);
const [loading, setLoading] = useState(true);
const [currentSongIndex, setCurrentSongIndex] = useState(-1);
const [isSeeking, setIsSeeking] = useState(false);
const audioRef = useRef<HTMLAudioElement | null>(null);
const isSeekingRef = useRef(false);
const lastPlayedSongIdRef = useRef<string | null>(null);
const lastSeekTimeRef = useRef<number>(0); // Track last seek time
// Smooth progress update dengan requestAnimationFrame
useAudioProgress(audioRef as React.RefObject<HTMLAudioElement>, isPlaying, setCurrentTime, isSeekingRef, lastSeekTimeRef);
// Fetch musik data from API
useEffect(() => {
@@ -102,26 +107,57 @@ const MusicPlayer = () => {
// };
// }, [isPlaying]);
// Update duration when song changes
// Update duration when song changes (HANYA saat ganti lagu, bukan saat isPlaying berubah)
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
if (currentSong && audioRef.current) {
// Gunakan durasi dari database sebagai acuan utama
const durationParts = currentSong.durasi.split(':');
const durationInSeconds = parseInt(durationParts[0]) * 60 + parseInt(durationParts[1]);
setDuration(durationInSeconds);
// Reset audio currentTime ke 0 hanya untuk lagu baru
audioRef.current.currentTime = 0;
setCurrentTime(0);
if (isPlaying) {
audioRef.current.play().catch(err => {
console.error('Error playing audio:', err);
setIsPlaying(false);
});
// Cek apakah ini benar-benar lagu baru
const isNewSong = lastPlayedSongIdRef.current !== currentSong.id;
if (isNewSong) {
// Gunakan durasi dari database sebagai acuan utama
const durationParts = currentSong.durasi.split(':');
const durationInSeconds = parseInt(durationParts[0]) * 60 + parseInt(durationParts[1]);
setDuration(durationInSeconds);
// Reset audio currentTime ke 0 untuk lagu baru
audioRef.current.currentTime = 0;
setCurrentTime(0);
// Update ref
lastPlayedSongIdRef.current = currentSong.id;
if (isPlaying) {
audioRef.current.play().catch(err => {
console.error('Error playing audio:', err);
setIsPlaying(false);
});
}
}
// Jika bukan lagu baru, jangan reset currentTime (biar seek tidak kembali ke 0)
}
}, [currentSong?.id, currentSongIndex]);
}, [currentSong?.id]);
// Sync duration dari audio element jika berbeda signifikan (> 1 detik)
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
const audio = audioRef.current;
if (!audio || !currentSong) return;
const handleLoadedMetadata = () => {
const audioDuration = Math.floor(audio.duration);
const durationParts = currentSong.durasi.split(':');
const dbDuration = parseInt(durationParts[0]) * 60 + parseInt(durationParts[1]);
// Jika perbedaan > 2 detik, gunakan audio duration (lebih akurat)
if (Math.abs(audioDuration - dbDuration) > 2) {
setDuration(audioDuration);
}
};
audio.addEventListener('loadedmetadata', handleLoadedMetadata);
return () => audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
}, [currentSong?.id]);
const formatTime = (seconds: number) => {
const mins = Math.floor(seconds / 60);
@@ -202,24 +238,9 @@ const MusicPlayer = () => {
{/* Hidden audio element - gunakan key yang stabil untuk mencegah remount */}
{currentSong?.audioFile && (
<audio
key={`audio-${currentSong.id}`}
ref={audioRef}
src={currentSong.audioFile.link}
src={currentSong?.audioFile?.link}
muted={isMuted}
onLoadedMetadata={(e) => {
// Jangan override duration dari database
// Audio element duration bisa berbeda beberapa ms
if (audioRef.current) {
audioRef.current.currentTime = 0;
}
}}
onTimeUpdate={() => {
if (!audioRef.current || isSeeking) return;
// Gunakan pembulatan yang lebih smooth
const time = audioRef.current.currentTime;
const roundedTime = Math.round(time);
setCurrentTime(roundedTime);
}}
onEnded={handleSongEnd}
/>
)}
@@ -278,15 +299,29 @@ const MusicPlayer = () => {
value={currentTime}
max={duration}
onChange={(v) => {
setIsSeeking(true);
isSeekingRef.current = true;
setCurrentTime(v);
}}
onChangeEnd={(v) => {
// Validasi: jangan seek melebihi durasi
const seekTime = Math.min(Math.max(0, v), duration);
// Set seeking false DULUAN sebelum seekTo
setIsSeeking(false);
seekTo(audioRef, seekTime, setCurrentTime);
if (audioRef.current) {
// Set audio currentTime
audioRef.current.currentTime = seekTime;
setCurrentTime(seekTime);
lastSeekTimeRef.current = seekTime;
// Jika audio tidak sedang playing, mainkan
if (!audioRef.current.paused && !isPlaying) {
audioRef.current.play().catch(console.error);
}
}
// Set seeking false SETELAH semua operasi selesai
setTimeout(() => {
isSeekingRef.current = false;
}, 0);
}}
color="#0B4F78"
size="sm"
@@ -423,15 +458,29 @@ const MusicPlayer = () => {
value={currentTime}
max={duration}
onChange={(v) => {
setIsSeeking(true);
isSeekingRef.current = true;
setCurrentTime(v); // preview - update UI saja
}}
onChangeEnd={(v) => {
// Validasi: jangan seek melebihi durasi
const seekTime = Math.min(Math.max(0, v), duration);
// Set seeking false DULUAN sebelum seekTo
setIsSeeking(false);
seekTo(audioRef, seekTime, setCurrentTime);
if (audioRef.current) {
// Set audio currentTime
audioRef.current.currentTime = seekTime;
setCurrentTime(seekTime);
lastSeekTimeRef.current = seekTime;
// Jika audio tidak sedang playing, mainkan
if (!audioRef.current.paused && !isPlaying) {
audioRef.current.play().catch(console.error);
}
}
// Set seeking false SETELAH semua operasi selesai
setTimeout(() => {
isSeekingRef.current = false;
}, 0);
}}
color="#0B4F78"
size="xs"
@@ -460,4 +509,86 @@ const MusicPlayer = () => {
);
};
export default MusicPlayer;
export default MusicPlayer;
// 'use client'
// import {
// Box, Paper, Group, Stack, Text, Slider, ActionIcon
// } from '@mantine/core';
// import {
// IconPlayerPlayFilled,
// IconPlayerPauseFilled
// } from '@tabler/icons-react';
// import { useEffect, useState } from 'react';
// import { useAudioEngine } from '../lib/useAudioProgress';
// interface Musik {
// id: string;
// judul: string;
// artis: string;
// audioFile: { link: string };
// }
// export default function MusicPlayer() {
// const {
// audioRef,
// isPlaying,
// currentTime,
// duration,
// load,
// toggle,
// seek,
// } = useAudioEngine();
// const [songs, setSongs] = useState<Musik[]>([]);
// const [index, setIndex] = useState(0);
// useEffect(() => {
// fetch('/api/desa/musik/find-many?page=1&limit=50')
// .then(r => r.json())
// .then(r => setSongs(r.data ?? []));
// }, []);
// useEffect(() => {
// if (!songs[index]) return;
// load(songs[index].audioFile.link);
// }, [songs, index, load]);
// const format = (n: number) => {
// const m = Math.floor(n / 60);
// const s = Math.floor(n % 60);
// return `${m}:${s.toString().padStart(2, '0')}`;
// };
// return (
// <Box p="xl">
// <audio ref={audioRef} />
// <Paper p="lg">
// <Stack>
// <Text fw={700}>{songs[index]?.judul}</Text>
// <Text size="sm">{songs[index]?.artis}</Text>
// <Group>
// <Text size="xs">{format(currentTime)}</Text>
// <Slider
// value={currentTime}
// max={duration}
// onChange={seek}
// style={{ flex: 1 }}
// />
// <Text size="xs">{format(duration)}</Text>
// </Group>
// <ActionIcon size={56} radius="xl" onClick={toggle}>
// {isPlaying
// ? <IconPlayerPauseFilled />
// : <IconPlayerPlayFilled />}
// </ActionIcon>
// </Stack>
// </Paper>
// </Box>
// );
// }