1 line
7.4 KiB
JavaScript
1 line
7.4 KiB
JavaScript
import{a as x,j as e}from"./vendor-react-YMhRUmcb.js";import{m as f,B as m,k as C,C as Q}from"./index-D2uzyr9g.js";import{I as T}from"./input-DL1WY4HG.js";import{X as g,az as $,aE as A,ax as D,T as I,V as E,Y as j,J as _,$ as M}from"./vendor-icons-DINCNwpk.js";import"./vendor-fFnFILYR.js";import"./vendor-router-DX94Iu-2.js";import"./vendor-tanstack-CoFNL2zy.js";import"./vendor-utils-4BWoYre8.js";const U=({onClose:o,onSave:i})=>{const{addToast:u}=f(),[n,h]=x.useState(""),[a,d]=x.useState(!1),b=()=>{if(!n){u("Please name your playlist","error");return}i(n,a),o()};return e.jsxs("div",{className:"fixed inset-0 z-[100] flex items-center justify-center p-4",children:[e.jsx("div",{className:"absolute inset-0 bg-kodo-void/90 backdrop-blur-sm",onClick:o}),e.jsxs("div",{className:"relative w-full max-w-md bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn",children:[e.jsxs("div",{className:"p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center",children:[e.jsx("h3",{className:"font-bold text-white",children:"Save Queue as Playlist"}),e.jsx("button",{onClick:o,children:e.jsx(g,{className:"w-5 h-5 text-kodo-content-dim hover:text-white"})})]}),e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsx(T,{label:"Playlist Name",value:n,onChange:r=>h(r.target.value),autoFocus:!0,placeholder:"My Queue Session"}),e.jsxs("div",{className:"flex items-center justify-between p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-kodo-steel",onClick:()=>d(!a),children:[e.jsxs("div",{className:"flex items-center gap-4",children:[a?e.jsx($,{className:"w-5 h-5 text-kodo-steel"}):e.jsx(A,{className:"w-5 h-5 text-kodo-gold"}),e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-bold text-white",children:a?"Public Playlist":"Private Playlist"}),e.jsx("div",{className:"text-xs text-kodo-content-dim",children:a?"Visible on your profile":"Only visible to you"})]})]}),e.jsx("div",{className:`w-10 h-5 rounded-full relative transition-colors ${a?"bg-kodo-cyan":"bg-kodo-steel"}`,children:e.jsx("div",{className:`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${a?"left-6":"left-1"}`})})]})]}),e.jsxs("div",{className:"p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4",children:[e.jsx(m,{variant:"ghost",onClick:o,children:"Cancel"}),e.jsx(m,{variant:"primary",onClick:b,children:"Save Playlist"})]})]})]})},q=()=>{const{queue:o,currentTrack:i,reorderQueue:u,removeFromQueue:n,clearQueue:h,playTrack:a,isPlaying:d,togglePlay:b,autoplay:r,toggleAutoplay:k}=C(),{addToast:N}=f(),[y,p]=x.useState(!1),[c,v]=x.useState(null),w=(s,t)=>{v(t),s.dataTransfer.effectAllowed="move";const l=document.createElement("div");l.style.opacity="0",document.body.appendChild(l),s.dataTransfer.setDragImage(l,0,0),setTimeout(()=>document.body.removeChild(l),0)},P=(s,t)=>{s.preventDefault(),!(c===null||c===t)&&(u(c,t),v(t))},S=(s,t)=>{N(`Queue saved as "${s}"`,"success")};return e.jsxs("div",{className:"max-w-4xl mx-auto space-y-6 animate-fadeIn pb-20",children:[e.jsxs("div",{className:"flex flex-col md:flex-row justify-between items-end border-b border-kodo-steel/50 pb-6 gap-4",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-display font-bold text-white mb-2",children:"PLAY QUEUE"}),e.jsxs("p",{className:"text-kodo-content-dim font-mono text-sm",children:[o.length," tracks upcoming"]})]}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(m,{variant:"ghost",onClick:()=>p(!0),icon:e.jsx(D,{className:"w-4 h-4"}),children:"Save Queue"}),e.jsx(m,{variant:"ghost",className:"text-kodo-red hover:bg-kodo-red/10",onClick:h,icon:e.jsx(I,{className:"w-4 h-4"}),children:"Clear"})]})]}),i&&e.jsxs("div",{children:[e.jsx("h3",{className:"text-xs font-bold text-kodo-content-dim uppercase tracking-widest mb-3",children:"Now Playing"}),e.jsxs(Q,{variant:"glass",className:"flex items-center gap-4 p-4 border-l-4 border-l-kodo-cyan",children:[e.jsxs("div",{className:"relative w-16 h-16 rounded overflow-hidden flex-shrink-0 group cursor-pointer",onClick:b,children:[e.jsx("img",{src:i.coverUrl,className:"w-full h-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",children:d?e.jsx(E,{className:"w-6 h-6 text-white"}):e.jsx(j,{className:"w-6 h-6 text-white fill-current ml-1"})}),d&&e.jsxs("div",{className:"absolute bottom-1 right-1 flex gap-0.5 items-end h-3",children:[e.jsx("div",{className:"w-1 bg-kodo-cyan animate-[bounce_1s_infinite] h-full"}),e.jsx("div",{className:"w-1 bg-kodo-cyan animate-[bounce_1.2s_infinite] h-2/3"}),e.jsx("div",{className:"w-1 bg-kodo-cyan animate-[bounce_0.8s_infinite] h-full"})]})]}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h2",{className:"text-xl font-bold text-white",children:i.title}),e.jsx("p",{className:"text-kodo-steel",children:i.artist})]}),e.jsx("div",{className:"text-kodo-content-dim font-mono text-sm hidden md:block",children:i.duration})]})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex justify-between items-center mb-3",children:[e.jsx("h3",{className:"text-xs font-bold text-kodo-content-dim uppercase tracking-widest",children:"Up Next"}),e.jsxs("div",{className:"flex items-center gap-2 cursor-pointer group",onClick:k,children:[e.jsx("span",{className:`text-xs font-bold ${r?"text-kodo-lime":"text-kodo-content-dim"}`,children:"Autoplay"}),e.jsx("div",{className:`w-8 h-4 rounded-full relative transition-colors ${r?"bg-kodo-lime":"bg-kodo-steel"}`,children:e.jsx("div",{className:`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${r?"left-4.5":"left-0.5"}`})})]})]}),e.jsx("div",{className:"space-y-2",children:o.length===0?e.jsxs("div",{className:"text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-kodo-content-dim",children:[e.jsx(_,{className:"w-12 h-12 mx-auto mb-4 opacity-50"}),e.jsx("p",{className:"text-sm",children:"Queue is empty. Add tracks to keep the vibe going."}),r&&e.jsx("p",{className:"text-xs text-kodo-lime mt-2",children:"Autoplay is on. We'll pick a song for you."})]}):o.map((s,t)=>e.jsxs("div",{draggable:!0,onDragStart:l=>w(l,t),onDragOver:l=>P(l,t),onDragEnd:()=>v(null),className:`flex items-center gap-4 p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group ${c===t?"opacity-50 border-kodo-cyan":""}`,children:[e.jsx("div",{className:"text-kodo-content-dim cursor-grab active:cursor-grabbing hover:text-white p-1",children:e.jsx(M,{className:"w-5 h-5"})}),e.jsxs("div",{className:"w-10 h-10 rounded overflow-hidden flex-shrink-0 relative",children:[e.jsx("img",{src:s.coverUrl,className:"w-full h-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center cursor-pointer",onClick:()=>a(s),children:e.jsx(j,{className:"w-4 h-4 text-white fill-current"})})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"text-sm font-bold text-white truncate",children:s.title}),e.jsx("div",{className:"text-xs text-kodo-content-dim truncate",children:s.artist})]}),e.jsx("div",{className:"text-kodo-content-dim font-mono text-xs hidden sm:block",children:s.duration}),e.jsx("button",{className:"p-2 text-kodo-content-dim hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity",onClick:()=>n(s.id),children:e.jsx(g,{className:"w-4 h-4"})})]},`${s.id}-${t}`))})]}),y&&e.jsx(U,{onClose:()=>p(!1),onSave:S})]})};export{q as QueueView};
|