feat: integrate musik desa page with API and improve audio player

- Fetch musik data from /api/desa/musik/find-many endpoint
- Filter only active musik (isActive: true)
- Add search functionality by title, artist, and genre
- Implement real audio playback with HTML5 audio element
- Add play/pause, next/previous, shuffle, repeat controls
- Add progress bar with seek functionality
- Add volume control with mute toggle
- Auto-play next song when current song ends
- Add loading and empty states
- Use cover image and audio file from database
- Fix skip back/forward button handlers

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

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

@@ -1,45 +1,116 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-import { ActionIcon, Avatar, Badge, Box, Card, Flex, Grid, Group, Paper, Slider, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Avatar, Badge, Box, Card, Flex, Grid, Group, Paper, ScrollArea, Slider, Stack, Text, TextInput } from '@mantine/core';
 import { IconArrowsShuffle, IconPlayerPauseFilled, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerSkipForwardFilled, IconRepeat, IconRepeatOff, IconSearch, IconVolume, IconVolumeOff, IconX } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
+interface MusicFile {
+  id: string;
+  name: string;
+  realName: string;
+  path: string;
+  mimeType: string;
+  link: string;
+}
+
+interface Musik {
+  id: string;
+  judul: string;
+  artis: string;
+  deskripsi: string | null;
+  durasi: string;
+  genre: string | null;
+  tahunRilis: number | null;
+  audioFile: MusicFile | null;
+  coverImage: MusicFile | null;
+  isActive: boolean;
+}
+
 const MusicPlayer = () => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(245);
+  const [duration, setDuration] = useState(0);
   const [volume, setVolume] = useState(70);
   const [isMuted, setIsMuted] = useState(false);
   const [isRepeat, setIsRepeat] = useState(false);
   const [isShuffle, setIsShuffle] = useState(false);
+  const [search, setSearch] = useState('');
+  const [musikData, setMusikData] = useState<Musik[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentSongIndex, setCurrentSongIndex] = useState(-1);
 
-  const songs = [
+  const audioRef = useRef<HTMLAudioElement | null>(null);
-    { id: 1, title: 'Midnight Dreams', artist: 'The Wanderers', duration: '4:05', cover: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop' },
+  const progressInterval = useRef<number | null>(null);
-    { id: 2, title: 'Summer Breeze', artist: 'Coastal Vibes', duration: '3:42', cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=400&fit=crop' },
-    { id: 3, title: 'City Lights', artist: 'Urban Echo', duration: '4:18', cover: 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=400&h=400&fit=crop' },
-    { id: 4, title: 'Ocean Waves', artist: 'Serenity Sound', duration: '5:20', cover: 'https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=400&h=400&fit=crop' },
-    { id: 5, title: 'Neon Nights', artist: 'Electric Dreams', duration: '3:55', cover: 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=400&h=400&fit=crop' },
-    { id: 6, title: 'Mountain High', artist: 'Peak Performers', duration: '4:32', cover: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=400&h=400&fit=crop' }
-  ];
-
-  const [currentSong, setCurrentSong] = useState(songs[0]);
 
+  // Fetch musik data from API
   useEffect(() => {
-    let interval: any;
+    const fetchMusik = async () => {
-    if (isPlaying) {
+      try {
-      interval = setInterval(() => {
+        setLoading(true);
-        setCurrentTime(prev => {
+        const res = await fetch('/api/desa/musik/find-many?page=1&limit=50');
-          if (prev >= duration) {
+        const data = await res.json();
-            setIsPlaying(false);
+        if (data.success && data.data) {
-            return 0;
+          const activeMusik = data.data.filter((m: Musik) => m.isActive);
-          }
+          setMusikData(activeMusik);
-          return prev + 1;
+        }
-        });
+      } catch (error) {
+        console.error('Error fetching musik:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMusik();
+  }, []);
+
+  // Filter musik based on search
+  const filteredMusik = musikData.filter(musik =>
+    musik.judul.toLowerCase().includes(search.toLowerCase()) ||
+    musik.artis.toLowerCase().includes(search.toLowerCase()) ||
+    (musik.genre && musik.genre.toLowerCase().includes(search.toLowerCase()))
+  );
+
+  const currentSong = currentSongIndex >= 0 && currentSongIndex < filteredMusik.length 
+    ? filteredMusik[currentSongIndex] 
+    : null;
+
+  // Update progress bar
+  useEffect(() => {
+    if (isPlaying && audioRef.current) {
+      progressInterval.current = window.setInterval(() => {
+        if (audioRef.current) {
+          setCurrentTime(Math.floor(audioRef.current.currentTime));
+        }
       }, 1000);
+    } else {
+      if (progressInterval.current) {
+        clearInterval(progressInterval.current);
+      }
     }
-    return () => clearInterval(interval);
+
-  }, [isPlaying, duration]);
+    return () => {
+      if (progressInterval.current) {
+        clearInterval(progressInterval.current);
+      }
+    };
+  }, [isPlaying]);
+
+  // Update duration when song changes
+  useEffect(() => {
+    if (currentSong && audioRef.current) {
+      const durationParts = currentSong.durasi.split(':');
+      const durationInSeconds = parseInt(durationParts[0]) * 60 + parseInt(durationParts[1]);
+      setDuration(durationInSeconds);
+      setCurrentTime(0);
+      if (isPlaying) {
+        audioRef.current.play().catch(err => {
+          console.error('Error playing audio:', err);
+          setIsPlaying(false);
+        });
+      }
+    }
+  }, [currentSongIndex]);
 
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
@@ -47,20 +118,115 @@ const MusicPlayer = () => {
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   };
 
-  const playSong = (song: any) => {
+  const playSong = (index: number) => {
-    setCurrentSong(song);
+    if (index < 0 || index >= filteredMusik.length) return;
-    setCurrentTime(0);
+    
+    setCurrentSongIndex(index);
     setIsPlaying(true);
-    const durationInSeconds = parseInt(song.duration.split(':')[0]) * 60 + parseInt(song.duration.split(':')[1]);
+  };
-    setDuration(durationInSeconds);
+
+  const handleSongEnd = () => {
+    if (isRepeat) {
+      if (audioRef.current) {
+        audioRef.current.currentTime = 0;
+        audioRef.current.play();
+      }
+    } else {
+      // Play next song
+      let nextIndex: number;
+      if (isShuffle) {
+        nextIndex = Math.floor(Math.random() * filteredMusik.length);
+      } else {
+        nextIndex = (currentSongIndex + 1) % filteredMusik.length;
+      }
+      
+      if (filteredMusik.length > 1) {
+        playSong(nextIndex);
+      } else {
+        setIsPlaying(false);
+        setCurrentTime(0);
+      }
+    }
+  };
+
+  const handleSeek = (value: number) => {
+    setCurrentTime(value);
+    if (audioRef.current) {
+      audioRef.current.currentTime = value;
+    }
   };
 
   const toggleMute = () => {
-    setIsMuted(!isMuted);
+    const newMuted = !isMuted;
+    setIsMuted(newMuted);
+    if (audioRef.current) {
+      audioRef.current.muted = newMuted;
+    }
   };
 
+  const handleVolumeChange = (val: number) => {
+    setVolume(val);
+    if (audioRef.current) {
+      audioRef.current.volume = val / 100;
+    }
+    if (val > 0 && isMuted) {
+      setIsMuted(false);
+    }
+  };
+
+  const skipBack = () => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = Math.max(0, audioRef.current.currentTime - 10);
+    }
+  };
+
+  const skipForward = () => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = Math.min(duration, audioRef.current.currentTime + 10);
+    }
+  };
+
+  const togglePlayPause = () => {
+    if (!currentSong) return;
+    
+    if (isPlaying) {
+      audioRef.current?.pause();
+      setIsPlaying(false);
+    } else {
+      audioRef.current?.play().catch(err => {
+        console.error('Error playing audio:', err);
+      });
+      setIsPlaying(true);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box px={{ base: 'md', md: 100 }} py="xl">
+        <Paper mx="auto" p="xl" radius="lg" shadow="sm" bg="white">
+          <Text ta="center">Memuat data musik...</Text>
+        </Paper>
+      </Box>
+    );
+  }
+
   return (
     <Box px={{ base: 'md', md: 100 }} py="xl">
+      {/* Hidden audio element */}
+      {currentSong?.audioFile && (
+        <audio
+          ref={audioRef}
+          src={currentSong.audioFile.link}
+          onEnded={handleSongEnd}
+          onLoadedMetadata={() => {
+            if (audioRef.current) {
+              setDuration(Math.floor(audioRef.current.duration));
+            }
+          }}
+          muted={isMuted}
+        />
+      )}
+
       <Paper
         mx="auto"
         p="xl"
@@ -84,6 +250,8 @@ const MusicPlayer = () => {
                 leftSection={<IconSearch size={18} />}
                 radius="xl"
                 w={280}
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
                 styles={{ input: { backgroundColor: '#fff' } }}
               />
             </Group>
@@ -91,63 +259,86 @@ const MusicPlayer = () => {
           <Stack gap="xl">
             <div>
               <Text size="xl" fw={700} c="#0B4F78" mb="md">Sedang Diputar</Text>
-              <Card radius="md" p="xl" shadow="md">
+              {currentSong ? (
-                <Group align="center" gap="xl">
+                <Card radius="md" p="xl" shadow="md">
-                  <Avatar src={currentSong.cover} size={180} radius="md" />
+                  <Group align="center" gap="xl">
-                  <Stack gap="md" style={{ flex: 1 }}>
+                    <Avatar 
-                    <div>
+                      src={currentSong.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'} 
-                      <Text size="28px" fw={700} c="#0B4F78">{currentSong.title}</Text>
+                      size={180} 
-                      <Text size="lg" c="#5A6C7D">{currentSong.artist}</Text>
+                      radius="md" 
-                    </div>
+                    />
-                    <Group gap="xs" align="center">
+                    <Stack gap="md" style={{ flex: 1 }}>
-                      <Text size="xs" c="#5A6C7D" w={42}>{formatTime(currentTime)}</Text>
+                      <div>
-                      <Slider
+                        <Text size="28px" fw={700} c="#0B4F78">{currentSong.judul}</Text>
-                        value={currentTime}
+                        <Text size="lg" c="#5A6C7D">{currentSong.artis}</Text>
-                        max={duration}
+                        {currentSong.genre && (
-                        onChange={setCurrentTime}
+                          <Badge mt="xs" color="#0B4F78" variant="light">{currentSong.genre}</Badge>
-                        color="#0B4F78"
+                        )}
-                        size="sm"
+                      </div>
-                        style={{ flex: 1 }}
+                      <Group gap="xs" align="center">
-                        styles={{ thumb: { borderWidth: 2 } }}
+                        <Text size="xs" c="#5A6C7D" w={42}>{formatTime(currentTime)}</Text>
-                      />
+                        <Slider
-                      <Text size="xs" c="#5A6C7D" w={42}>{formatTime(duration)}</Text>
+                          value={currentTime}
-                    </Group>
+                          max={duration}
-                  </Stack>
+                          onChange={handleSeek}
-                </Group>
+                          color="#0B4F78"
-              </Card>
+                          size="sm"
+                          style={{ flex: 1 }}
+                          styles={{ thumb: { borderWidth: 2 } }}
+                        />
+                        <Text size="xs" c="#5A6C7D" w={42}>{formatTime(duration)}</Text>
+                      </Group>
+                    </Stack>
+                  </Group>
+                </Card>
+              ) : (
+                <Card radius="md" p="xl" shadow="md">
+                  <Text ta="center" c="dimmed">Pilih lagu untuk diputar</Text>
+                </Card>
+              )}
             </div>
 
             <div>
               <Text size="xl" fw={700} c="#0B4F78" mb="md">Daftar Putar</Text>
-              <Grid gutter="md">
+              {filteredMusik.length === 0 ? (
-                {songs.map(song => (
+                <Text ta="center" c="dimmed">Tidak ada musik yang ditemukan</Text>
-                  <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={song.id}>
+              ) : (
-                    <Card
+                <ScrollArea.Autosize mah={400}>
-                      radius="md"
+                  <Grid gutter="md">
-                      p="md"
+                    {filteredMusik.map((song, index) => (
-                      shadow="sm"
+                      <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={song.id}>
-                      style={{
+                        <Card
-                        cursor: 'pointer',
+                          radius="md"
-                        border: currentSong.id === song.id ? '2px solid #0B4F78' : '2px solid transparent',
+                          p="md"
-                        transition: 'all 0.2s'
+                          shadow="sm"
-                      }}
+                          style={{
-                      onClick={() => playSong(song)}
+                            cursor: 'pointer',
-                    >
+                            border: currentSong?.id === song.id ? '2px solid #0B4F78' : '2px solid transparent',
-                      <Group gap="md" align="center">
+                            transition: 'all 0.2s'
-                        <Avatar src={song.cover} size={64} radius="md" />
+                          }}
-                        <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
+                          onClick={() => playSong(index)}
-                          <Text size="sm" fw={600} c="#0B4F78" truncate>{song.title}</Text>
+                        >
-                          <Text size="xs" c="#5A6C7D">{song.artist}</Text>
+                          <Group gap="md" align="center">
-                          <Text size="xs" c="#8A9BA8">{song.duration}</Text>
+                            <Avatar 
-                        </Stack>
+                              src={song.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'} 
-                        {currentSong.id === song.id && isPlaying && (
+                              size={64} 
-                          <Badge color="#0B4F78" variant="filled">Memutar</Badge>
+                              radius="md" 
-                        )}
+                            />
-                      </Group>
+                            <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
-                    </Card>
+                              <Text size="sm" fw={600} c="#0B4F78" truncate>{song.judul}</Text>
-                  </Grid.Col>
+                              <Text size="xs" c="#5A6C7D">{song.artis}</Text>
-                ))}
+                              <Text size="xs" c="#8A9BA8">{song.durasi}</Text>
-              </Grid>
+                            </Stack>
+                            {currentSong?.id === song.id && isPlaying && (
+                              <Badge color="#0B4F78" variant="filled">Memutar</Badge>
+                            )}
+                          </Group>
+                        </Card>
+                      </Grid.Col>
+                    ))}
+                  </Grid>
+                </ScrollArea.Autosize>
+              )}
             </div>
           </Stack>
 
@@ -168,10 +359,20 @@ const MusicPlayer = () => {
       >
         <Flex align="center" justify="space-between" gap="xl" h="100%">
           <Group gap="md" style={{ flex: 1 }}>
-            <Avatar src={currentSong.cover} size={56} radius="md" />
+            <Avatar 
+              src={currentSong?.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'} 
+              size={56} 
+              radius="md" 
+            />
             <div style={{ flex: 1, minWidth: 0 }}>
-              <Text size="sm" fw={600} c="#0B4F78" truncate>{currentSong.title}</Text>
+              {currentSong ? (
-              <Text size="xs" c="#5A6C7D">{currentSong.artist}</Text>
+                <>
+                  <Text size="sm" fw={600} c="#0B4F78" truncate>{currentSong.judul}</Text>
+                  <Text size="xs" c="#5A6C7D">{currentSong.artis}</Text>
+                </>
+              ) : (
+                <Text size="sm" c="dimmed">Tidak ada lagu</Text>
+              )}
             </div>
           </Group>
 
@@ -185,7 +386,7 @@ const MusicPlayer = () => {
               >
                 {isShuffle ? <IconArrowsShuffle size={18} /> : <IconX size={18} />}
               </ActionIcon>
-              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl">
+              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl" onClick={skipBack}>
                 <IconPlayerSkipBackFilled size={20} />
               </ActionIcon>
               <ActionIcon
@@ -193,11 +394,11 @@ const MusicPlayer = () => {
                 color="#0B4F78"
                 size={56}
                 radius="xl"
-                onClick={() => setIsPlaying(!isPlaying)}
+                onClick={togglePlayPause}
               >
                 {isPlaying ? <IconPlayerPauseFilled size={26} /> : <IconPlayerPlayFilled size={26} />}
               </ActionIcon>
-              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl">
+              <ActionIcon variant="light" color="#0B4F78" size={40} radius="xl" onClick={skipForward}>
                 <IconPlayerSkipForwardFilled size={20} />
               </ActionIcon>
               <ActionIcon
@@ -214,7 +415,7 @@ const MusicPlayer = () => {
               <Slider
                 value={currentTime}
                 max={duration}
-                onChange={setCurrentTime}
+                onChange={handleSeek}
                 color="#0B4F78"
                 size="xs"
                 style={{ flex: 1 }}
@@ -229,10 +430,7 @@ const MusicPlayer = () => {
             </ActionIcon>
             <Slider
               value={isMuted ? 0 : volume}
-              onChange={(val) => {
+              onChange={handleVolumeChange}
-                setVolume(val);
-                if (val > 0) setIsMuted(false);
-              }}
               color="#0B4F78"
               size="xs"
               w={100}