Fix Durasi Musik Di Tampilan User

- 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>

prisma/schema.prisma

@@ -60,7 +60,7 @@ model FileStorage {
   deletedAt                      DateTime?
   isActive                       Boolean                    @default(true)
   link                           String
-  category                       String // "image" / "document" / "other"
+  category                       String // "image" / "document" / "audio" / "other"
   Berita                         Berita[]
   PotensiDesa                    PotensiDesa[]
   Posyandu                       Posyandu[]

src/app/admin/(dashboard)/musik/[id]/edit/page.tsx

@@ -1,6 +1,6 @@
 'use client'
-import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
-import stateDashboardMusik from '@/app/admin/(dashboard)/_state/desa/musik';
+import CreateEditor from '../../../_com/createEditor';
+import stateDashboardMusik from '../../../_state/desa/musik';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import {
@@ -37,9 +37,34 @@ export default function EditMusik() {
   const [coverFile, setCoverFile] = useState<File | null>(null);
   const [previewAudio, setPreviewAudio] = useState<string | null>(null);
   const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isExtractingDuration, setIsExtractingDuration] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Fungsi untuk mendapatkan durasi dari file audio
+  const getAudioDuration = (file: File): Promise<string> => {
+    return new Promise((resolve) => {
+      const audio = new Audio();
+      const url = URL.createObjectURL(file);
+      
+      audio.addEventListener('loadedmetadata', () => {
+        const duration = audio.duration;
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration % 60);
+        const formatted = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        URL.revokeObjectURL(url);
+        resolve(formatted);
+      });
+      
+      audio.addEventListener('error', () => {
+        URL.revokeObjectURL(url);
+        resolve('0:00');
+      });
+      
+      audio.src = url;
+    });
+  };
+
   useShallowEffect(() => {
     if (id) {
       musikState.musik.edit.load(id).then(() => setIsLoading(false));
@@ -116,7 +141,7 @@ export default function EditMusik() {
       await musikState.musik.edit.update();
 
       resetForm();
-      router.push('/admin/desa/musik');
+      router.push('/admin/musik');
     } catch (error) {
       console.error('Error updating musik:', error);
       toast.error('Terjadi kesalahan saat mengupdate musik');
@@ -295,11 +320,24 @@ export default function EditMusik() {
               File Audio
             </Text>
             <Dropzone
-              onDrop={(files) => {
+              onDrop={async (files) => {
                 const selectedFile = files[0];
                 if (selectedFile) {
                   setAudioFile(selectedFile);
                   setPreviewAudio(selectedFile.name);
+                  
+                  // Extract durasi otomatis dari audio
+                  setIsExtractingDuration(true);
+                  try {
+                    const duration = await getAudioDuration(selectedFile);
+                    musikState.musik.edit.form.durasi = duration;
+                    toast.success(`Durasi audio terdeteksi: ${duration}`);
+                  } catch (error) {
+                    console.error('Error extracting audio duration:', error);
+                    toast.error('Gagal mendeteksi durasi audio, silakan isi manual');
+                  } finally {
+                    setIsExtractingDuration(false);
+                  }
                 }
               }}
               onReject={() => toast.error('File tidak valid, gunakan format audio (MP3, WAV, OGG)')}
@@ -332,6 +370,11 @@ export default function EditMusik() {
                     <Text fz="sm" truncate style={{ flex: 1 }}>
                       {previewAudio || 'File audio tersimpan'}
                     </Text>
+                    {isExtractingDuration && (
+                      <Text fz="xs" c="blue">
+                        Mendeteksi durasi...
+                      </Text>
+                    )}
                     <ActionIcon
                       variant="filled"
                       color="red"

src/app/admin/(dashboard)/musik/[id]/page.tsx

@@ -19,7 +19,7 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import stateDashboardMusik from '../../../_state/desa/musik';
+import stateDashboardMusik from '../../_state/desa/musik';
 
 export default function DetailMusik() {
   const musikState = useProxy(stateDashboardMusik);
@@ -63,7 +63,7 @@ export default function DetailMusik() {
       setIsDeleting(true);
       await musikState.musik.delete.byId(id);
       setShowDeleteModal(false);
-      router.push('/admin/desa/musik');
+      router.push('/admin/musik');
     } catch (error) {
       console.error('Error deleting musik:', error);
     } finally {
@@ -77,7 +77,7 @@ export default function DetailMusik() {
       <Group mb="md">
         <Button
           variant="subtle"
-          onClick={() => router.push('/admin/desa/musik')}
+          onClick={() => router.push('/admin/musik')}
           p="xs"
           radius="md"
         >
@@ -99,15 +99,22 @@ export default function DetailMusik() {
         <Stack gap="md">
           {/* Cover Image */}
           {data.coverImage && (
-            <Box style={{ textAlign: 'center' }}>
+            <Box
+              style={{
+                width: '100%',
+                maxWidth: 400,
+                margin: '0 auto',
+              }}
+            >
               <Image
                 src={data.coverImage.link}
                 alt={data.judul}
                 radius="md"
                 style={{
-                  maxHeight: 300,
+                  width: '100%',
+                  aspectRatio: '1/1',
                   objectFit: 'cover',
-                  margin: '0 auto',
+                  display: 'block',
                 }}
               />
             </Box>
@@ -219,7 +226,7 @@ export default function DetailMusik() {
               radius="md"
               size="md"
               leftSection={<IconEdit size={18} />}
-              onClick={() => router.push(`/admin/desa/musik/${id}/edit`)}
+              onClick={() => router.push(`/admin/musik/${id}/edit`)}
             >
               Edit
             </Button>

src/app/admin/(dashboard)/musik/create/page.tsx

@@ -1,6 +1,6 @@
 'use client'
-import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
-import stateDashboardMusik from '@/app/admin/(dashboard)/_state/desa/musik';
+import CreateEditor from '../../_com/createEditor';
+import stateDashboardMusik from '../../_state/desa/musik';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import {
@@ -32,9 +32,34 @@ export default function CreateMusik() {
   const [coverFile, setCoverFile] = useState<File | null>(null);
   const [previewAudio, setPreviewAudio] = useState<string | null>(null);
   const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [isExtractingDuration, setIsExtractingDuration] = useState(false);
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Fungsi untuk mendapatkan durasi dari file audio
+  const getAudioDuration = (file: File): Promise<string> => {
+    return new Promise((resolve) => {
+      const audio = new Audio();
+      const url = URL.createObjectURL(file);
+      
+      audio.addEventListener('loadedmetadata', () => {
+        const duration = audio.duration;
+        const minutes = Math.floor(duration / 60);
+        const seconds = Math.floor(duration % 60);
+        const formatted = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        URL.revokeObjectURL(url);
+        resolve(formatted);
+      });
+      
+      audio.addEventListener('error', () => {
+        URL.revokeObjectURL(url);
+        resolve('0:00');
+      });
+      
+      audio.src = url;
+    });
+  };
+
   const isFormValid = () => {
     return (
       musikState.musik.create.form.judul?.trim() !== '' &&
@@ -126,7 +151,7 @@ export default function CreateMusik() {
       await musikState.musik.create.create();
 
       resetForm();
-      router.push('/admin/desa/musik');
+      router.push('/admin/musik');
     } catch (error) {
       console.error('Error creating musik:', error);
       toast.error('Terjadi kesalahan saat membuat musik');
@@ -294,11 +319,24 @@ export default function CreateMusik() {
               File Audio
             </Text>
             <Dropzone
-              onDrop={(files) => {
+              onDrop={async (files) => {
                 const selectedFile = files[0];
                 if (selectedFile) {
                   setAudioFile(selectedFile);
                   setPreviewAudio(selectedFile.name);
+                  
+                  // Extract durasi otomatis dari audio
+                  setIsExtractingDuration(true);
+                  try {
+                    const duration = await getAudioDuration(selectedFile);
+                    musikState.musik.create.form.durasi = duration;
+                    toast.success(`Durasi audio terdeteksi: ${duration}`);
+                  } catch (error) {
+                    console.error('Error extracting audio duration:', error);
+                    toast.error('Gagal mendeteksi durasi audio, silakan isi manual');
+                  } finally {
+                    setIsExtractingDuration(false);
+                  }
                 }
               }}
               onReject={() => toast.error('File tidak valid, gunakan format audio (MP3, WAV, OGG)')}
@@ -331,6 +369,11 @@ export default function CreateMusik() {
                     <Text fz="sm" truncate style={{ flex: 1 }}>
                       {previewAudio}
                     </Text>
+                    {isExtractingDuration && (
+                      <Text fz="xs" c="blue">
+                        Mendeteksi durasi...
+                      </Text>
+                    )}
                     <ActionIcon
                       variant="filled"
                       color="red"

src/app/admin/(dashboard)/musik/page.tsx

@@ -23,8 +23,8 @@ import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/ico
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../_com/header';
-import stateDashboardMusik from '../../_state/desa/musik';
+import HeaderSearch from '../_com/header';
+import stateDashboardMusik from '../_state/desa/musik';
 
 
 function Musik() {
@@ -73,7 +73,7 @@ function ListMusik({ search }: { search: string }) {
             leftSection={<IconCircleDashedPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/desa/musik/create')}
+            onClick={() => router.push('/admin/musik/create')}
           >
             Tambah Baru
           </Button>
@@ -122,7 +122,7 @@ function ListMusik({ search }: { search: string }) {
                         variant="light"
                         color="blue"
                         onClick={() =>
-                          router.push(`/admin/desa/musik/${item.id}`)
+                          router.push(`/admin/musik/${item.id}`)
                         }
                         fz="sm"
                         px="sm"
@@ -189,7 +189,7 @@ function ListMusik({ search }: { search: string }) {
                     fullWidth
                     mt="sm"
                     onClick={() =>
-                      router.push(`/admin/desa/musik/${item.id}`)
+                      router.push(`/admin/musik/${item.id}`)
                     }
                     fz="sm"
                     h={36}

src/app/admin/_com/list_PageAdmin.tsx

@@ -330,7 +330,7 @@ export const devBar = [
         path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
       }
     ]
-  }, 
+  },
   {
     id: "Pendidikan",
     name: "Pendidikan",
@@ -373,6 +373,11 @@ export const devBar = [
       }
     ]
   },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
+  },
   {
     id: "User & Role",
     name: "User & Role",
@@ -729,7 +734,7 @@ export const navBar = [
         path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
       }
     ]
-  }, 
+  },
   {
     id: "Pendidikan",
     name: "Pendidikan",
@@ -772,6 +777,11 @@ export const navBar = [
       }
     ]
   },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
+  },
   {
     id: "User & Role",
     name: "User & Role",
@@ -1051,7 +1061,7 @@ export const role1 = [
       }
 
     ]
-  }, 
+  },
   {
     id: "Lingkungan",
     name: "Lingkungan",
@@ -1088,6 +1098,11 @@ export const role1 = [
         path: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
       }
     ]
+  },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
   }
 ]
 
@@ -1133,6 +1148,11 @@ export const role2 = [
         path: "/admin/kesehatan/info-wabah-penyakit"
       }
     ]
+  },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
   }
 ]
 
@@ -1178,5 +1198,10 @@ export const role3 = [
         path: "/admin/pendidikan/data-pendidikan"
       }
     ]
+  },
+  {
+    id: "Musik",
+    name: "Musik",
+    path: "/admin/musik"
   }
 ]

src/app/admin/layout.tsx

@@ -316,8 +316,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                 }}
                 variant="light"
                 active={isParentActive}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (v.path) handleNavClick(v.path);
+                }}
+                href={v.path || undefined}
               >
-                {v.children.map((child, key) => {
+                {v.children?.map((child, key) => {
                   const isChildActive = segments.includes(_.lowerCase(child.name));
                   return (
                     <NavLink

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts

@@ -22,9 +22,10 @@ const fileStorageCreate = async (context: Context) => {
   if (!UPLOAD_DIR) return { status: 500, body: "UPLOAD_DIR is not defined" };
 
   const isImage = file.type.startsWith("image/");
-  const category = isImage ? "image" : "document";
+  const isAudio = file.type.startsWith("audio/");
+  const category = isImage ? "image" : isAudio ? "audio" : "document";
 
-  const pathName = category === "image" ? "images" : "documents";
+  const pathName = category === "image" ? "images" : category === "audio" ? "audio" : "documents";
   const rootPath = path.join(UPLOAD_DIR, pathName);
   await fs.mkdir(rootPath, { recursive: true });
 
@@ -54,6 +55,11 @@ const fileStorageCreate = async (context: Context) => {
     // Simpan metadata untuk versi desktop sebagai default
     finalName = desktopName;
     finalMimeType = "image/webp";
+  } else if (isAudio) {
+    // Simpan file audio tanpa kompresi
+    const ext = file.name.split(".").pop() || "mp3";
+    finalName = `${finalName}.${ext}`;
+    await fs.writeFile(path.join(rootPath, finalName), buffer);
   } else {
     // Jika file adalah PDF, simpan tanpa kompresi
     if (file.type === "application/pdf") {

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 = [
-    { 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' },
-    { 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]);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const progressInterval = useRef<number | null>(null);
 
+  // Fetch musik data from API
   useEffect(() => {
-    let interval: any;
-    if (isPlaying) {
-      interval = setInterval(() => {
-        setCurrentTime(prev => {
-          if (prev >= duration) {
-            setIsPlaying(false);
-            return 0;
-          }
-          return prev + 1;
-        });
+    const fetchMusik = async () => {
+      try {
+        setLoading(true);
+        const res = await fetch('/api/desa/musik/find-many?page=1&limit=50');
+        const data = await res.json();
+        if (data.success && data.data) {
+          const activeMusik = data.data.filter((m: Musik) => m.isActive);
+          setMusikData(activeMusik);
+        }
+      } 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) => {
-    setCurrentSong(song);
-    setCurrentTime(0);
+  const playSong = (index: number) => {
+    if (index < 0 || index >= filteredMusik.length) return;
+    
+    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">
-                <Group align="center" gap="xl">
-                  <Avatar src={currentSong.cover} size={180} radius="md" />
-                  <Stack gap="md" style={{ flex: 1 }}>
-                    <div>
-                      <Text size="28px" fw={700} c="#0B4F78">{currentSong.title}</Text>
-                      <Text size="lg" c="#5A6C7D">{currentSong.artist}</Text>
-                    </div>
-                    <Group gap="xs" align="center">
-                      <Text size="xs" c="#5A6C7D" w={42}>{formatTime(currentTime)}</Text>
-                      <Slider
-                        value={currentTime}
-                        max={duration}
-                        onChange={setCurrentTime}
-                        color="#0B4F78"
-                        size="sm"
-                        style={{ flex: 1 }}
-                        styles={{ thumb: { borderWidth: 2 } }}
-                      />
-                      <Text size="xs" c="#5A6C7D" w={42}>{formatTime(duration)}</Text>
-                    </Group>
-                  </Stack>
-                </Group>
-              </Card>
+              {currentSong ? (
+                <Card radius="md" p="xl" shadow="md">
+                  <Group align="center" gap="xl">
+                    <Avatar 
+                      src={currentSong.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'} 
+                      size={180} 
+                      radius="md" 
+                    />
+                    <Stack gap="md" style={{ flex: 1 }}>
+                      <div>
+                        <Text size="28px" fw={700} c="#0B4F78">{currentSong.judul}</Text>
+                        <Text size="lg" c="#5A6C7D">{currentSong.artis}</Text>
+                        {currentSong.genre && (
+                          <Badge mt="xs" color="#0B4F78" variant="light">{currentSong.genre}</Badge>
+                        )}
+                      </div>
+                      <Group gap="xs" align="center">
+                        <Text size="xs" c="#5A6C7D" w={42}>{formatTime(currentTime)}</Text>
+                        <Slider
+                          value={currentTime}
+                          max={duration}
+                          onChange={handleSeek}
+                          color="#0B4F78"
+                          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">
-                {songs.map(song => (
-                  <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={song.id}>
-                    <Card
-                      radius="md"
-                      p="md"
-                      shadow="sm"
-                      style={{
-                        cursor: 'pointer',
-                        border: currentSong.id === song.id ? '2px solid #0B4F78' : '2px solid transparent',
-                        transition: 'all 0.2s'
-                      }}
-                      onClick={() => playSong(song)}
-                    >
-                      <Group gap="md" align="center">
-                        <Avatar src={song.cover} size={64} radius="md" />
-                        <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
-                          <Text size="sm" fw={600} c="#0B4F78" truncate>{song.title}</Text>
-                          <Text size="xs" c="#5A6C7D">{song.artist}</Text>
-                          <Text size="xs" c="#8A9BA8">{song.duration}</Text>
-                        </Stack>
-                        {currentSong.id === song.id && isPlaying && (
-                          <Badge color="#0B4F78" variant="filled">Memutar</Badge>
-                        )}
-                      </Group>
-                    </Card>
-                  </Grid.Col>
-                ))}
-              </Grid>
+              {filteredMusik.length === 0 ? (
+                <Text ta="center" c="dimmed">Tidak ada musik yang ditemukan</Text>
+              ) : (
+                <ScrollArea.Autosize mah={400}>
+                  <Grid gutter="md">
+                    {filteredMusik.map((song, index) => (
+                      <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={song.id}>
+                        <Card
+                          radius="md"
+                          p="md"
+                          shadow="sm"
+                          style={{
+                            cursor: 'pointer',
+                            border: currentSong?.id === song.id ? '2px solid #0B4F78' : '2px solid transparent',
+                            transition: 'all 0.2s'
+                          }}
+                          onClick={() => playSong(index)}
+                        >
+                          <Group gap="md" align="center">
+                            <Avatar 
+                              src={song.coverImage?.link || 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop'} 
+                              size={64} 
+                              radius="md" 
+                            />
+                            <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
+                              <Text size="sm" fw={600} c="#0B4F78" truncate>{song.judul}</Text>
+                              <Text size="xs" c="#5A6C7D">{song.artis}</Text>
+                              <Text size="xs" c="#8A9BA8">{song.durasi}</Text>
+                            </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>
-              <Text size="xs" c="#5A6C7D">{currentSong.artist}</Text>
+              {currentSong ? (
+                <>
+                  <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) => {
-                setVolume(val);
-                if (val > 0) setIsMuted(false);
-              }}
+              onChange={handleVolumeChange}
               color="#0B4F78"
               size="xs"
               w={100}