🎧 Jukebox — Antrian Musik Bersama

Pemutar musik dari YouTube dengan antrian playlist bersama. Diputar di satu laptop/komputer yang tersambung ke speaker, sementara rekan kerja bisa menambah lagu dan mengantrekannya dari perangkat masing-masing. Kontrol bersifat kolaboratif — semua orang bisa play/pause/skip.

pemutar musik untuk semua

✨ Fitur

• Antrian bersama real-time — semua orang menambah lagu ke satu antrian yang sama.
• Tambah lagu 2 cara: cari via YouTube (butuh API key) atau tempel tautan YouTube (tanpa API key — judul & thumbnail otomatis via oEmbed).
• Mode Speaker — satu perangkat dijadikan pemutar (output suara); perangkat lain jadi remote. Kalau perangkat lain mengambil alih, yang lama otomatis berhenti (tidak dobel suara).
• Kontrol kolaboratif — play, pause, skip, geser urutan, hapus, seek.
• Nama panggilan — tiap lagu menampilkan "oleh <nama>" (disimpan lokal, tanpa login).
• PWA — installable, ada offline shell (service worker).
• Desain modern — dark glassmorphism, responsif, ramah dipakai di laptop.

🧱 Tech Stack

• Next.js 16 (App Router, Turbopack) + React 19 + TypeScript
• Tailwind CSS v4
• @vercel/blob untuk penyimpanan antrian (dengan compare-and-swap / ETag agar bebas race saat banyak orang menambah lagu bersamaan)
• SWR untuk polling state, lucide-react untuk ikon
• YouTube IFrame Player API untuk pemutaran

🚀 Menjalankan secara lokal

npm install
npm run dev            # http://localhost:3000
# atau dengan HTTPS lokal (sertifikat self-signed otomatis):
npm run dev:https

Tanpa konfigurasi apa pun, aplikasi memakai penyimpanan file lokal (.data/state.json) sehingga langsung bisa dites. Fitur tempel tautan YouTube sudah berfungsi penuh tanpa API key.

Variabel lingkungan (opsional)

Salin .env.example menjadi .env.local lalu isi bila perlu:

Variabel	Wajib?	Kegunaan
BLOB_READ_WRITE_TOKEN	Produksi	Token Vercel Blob (penyimpanan antrian). Kosong = fallback file lokal.
YOUTUBE_API_KEY	Opsional	Mengaktifkan fitur search. Tanpa ini, tempel-URL tetap jalan.

YouTube API key (untuk search): buat di Google Cloud Console → aktifkan YouTube Data API v3 → buat API key → tempel ke YOUTUBE_API_KEY.

☁️ Deploy ke Vercel (gratis)

1. Push repo ini ke GitHub, lalu Import di vercel.com.
2. Buka tab Storage proyek → Create → Blob. Vercel otomatis mengisi BLOB_READ_WRITE_TOKEN ke Environment Variables.
3. (Opsional) tambahkan YOUTUBE_API_KEY di Settings → Environment Variables.
4. Deploy. HTTPS aktif otomatis.

Untuk dev lokal memakai Blob yang sama seperti produksi: vercel link lalu vercel env pull .env.local.

Kenapa Blob aman untuk antrian?

Antrian disimpan sebagai satu state.json. Setiap perubahan memakai compare-and-swap berbasis ETag (ifMatch): jika dua orang menambah lagu bersamaan, penulisan yang kalah akan otomatis retry membaca versi terbaru — sehingga tidak ada lagu yang hilang.

🎛️ Cara pakai

1. Buka aplikasi di laptop yang tersambung speaker, klik "Jadikan perangkat ini speaker" lalu putar (klik pertama = izin autoplay).
2. Rekan kerja buka URL yang sama di perangkat mereka, isi nama, lalu cari / tempel tautan untuk menambah lagu.
3. Antrian jalan otomatis; siapa pun bisa play/pause/skip/geser/hapus.

📜 Scripts

Perintah	Fungsi
npm run dev	Dev server (Turbopack)
npm run dev:https	Dev server dengan HTTPS lokal
npm run build	Build produksi
npm run start	Menjalankan hasil build
npm run gen:icons	Regenerate ikon PWA dari SVG
npm run lint	ESLint