veza/apps/web/dist_verification/assets/QueueView-Bd8wdqCc.js

import{a as c,j as e}from"./vendor-react-C9dYU-TK.js";import{u as j,B as m,i as Q,C as $,E}from"./index-BMBS6scK.js";import{I as T}from"./input-DeoQfymd.js";import{X as N,G as A,s as _,t as M,i as O,q as U,r as v,u as q,v as z}from"./vendor-icons-BSV6HBy1.js";import"./vendor-CjLUfV8Y.js";import"./vendor-security-DsrNJhpn.js";import"./vendor-router-Dr0ZB7zf.js";import"./vendor-tanstack-C4XaEYj2.js";import"./vendor-http-CctT3C58.js";import"./vendor-utils-D0JLFg89.js";import"./vendor-motion-CbAtAbUE.js";import"./vendor-i18n-PN7w4axr.js";const G=({onClose:a,onSave:o})=>{const{addToast:x}=j(),[d,h]=c.useState(""),[t,u]=c.useState(!1),g=()=>{if(!d){x("Please name your playlist","error");return}o(d,t),a()};return e.jsxs("div",{className:"fixed inset-0 z-[var(--sumi-z-modal)] flex items-center justify-center p-4",children:[e.jsx("div",{className:"absolute inset-0 bg-background/90 backdrop-blur-sm",onClick:a}),e.jsxs("div",{className:"relative w-full max-w-md bg-card border border-border rounded-xl shadow-2xl animate-scaleIn",children:[e.jsxs("div",{className:"p-4 border-b border-border bg-card flex justify-between items-center",children:[e.jsx("h3",{className:"font-bold text-foreground",children:"Save Queue as Playlist"}),e.jsx("button",{onClick:a,children:e.jsx(N,{className:"w-5 h-5 text-muted-foreground hover:text-foreground"})})]}),e.jsxs("div",{className:"p-6 space-y-4",children:[e.jsx(T,{label:"Playlist Name",value:d,onChange:i=>h(i.target.value),autoFocus:!0,placeholder:"My Queue Session"}),e.jsxs("div",{className:"flex items-center justify-between p-4 bg-card rounded border border-border cursor-pointer hover:border-border",onClick:()=>u(!t),children:[e.jsxs("div",{className:"flex items-center gap-4",children:[t?e.jsx(A,{className:"w-5 h-5 text-muted-foreground"}):e.jsx(_,{className:"w-5 h-5 text-warning"}),e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-bold text-foreground",children:t?"Public Playlist":"Private Playlist"}),e.jsx("div",{className:"text-xs text-muted-foreground",children:t?"Visible on your profile":"Only visible to you"})]})]}),e.jsx("div",{className:`w-10 h-5 rounded-full relative transition-colors ${t?"bg-primary":"bg-muted"}`,children:e.jsx("div",{className:`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${t?"left-6":"left-1"}`})})]})]}),e.jsxs("div",{className:"p-4 border-t border-border bg-card flex justify-end gap-4",children:[e.jsx(m,{variant:"ghost",onClick:a,children:"Cancel"}),e.jsx(m,{variant:"primary",onClick:g,children:"Save Playlist"})]})]})]})},ee=()=>{const{queue:a,currentTrack:o,reorderQueue:x,removeFromQueue:d,clearQueue:h,playTrack:t,isPlaying:u,togglePlay:g,autoplay:i,toggleAutoplay:y}=Q(),{addToast:w}=j(),[k,b]=c.useState(!1),[n,f]=c.useState(null),[S,p]=c.useState(null),P=(s,r)=>{f(r),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)},C=(s,r)=>{s.preventDefault(),p(r),!(n===null||n===r)&&(x(n,r),f(r))},D=()=>{f(null),p(null)},I=(s,r)=>{w(`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-border/50 pb-6 gap-4",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-heading font-bold text-foreground mb-2",children:"PLAY QUEUE"}),e.jsxs("p",{className:"text-muted-foreground font-mono text-sm",children:[a.length," tracks upcoming"]})]}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(m,{variant:"ghost",onClick:()=>b(!0),icon:e.jsx(M,{className:"w-4 h-4"}),children:"Save Queue"}),e.jsx(m,{variant:"ghost",className:"text-destructive hover:bg-destructive/10",onClick:h,icon:e.jsx(O,{className:"w-4 h-4"}),children:"Clear"})]})]}),o&&e.jsxs("div",{children:[e.jsx("h3",{className:"text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3",children:"Now Playing"}),e.jsxs($,{variant:"glass",className:"flex items-center gap-4 p-4 border-l-4 border-l-primary",children:[e.jsxs("div",{className:"relative w-16 h-16 rounded overflow-hidden flex-shrink-0 group cursor-pointer",onClick:g,children:[e.jsx("img",{src:o.coverUrl,className:"w-full h-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-background/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",children:u?e.jsx(U,{className:"w-6 h-6 text-foreground"}):e.jsx(v,{className:"w-6 h-6 text-foreground fill-current ml-1"})}),u&&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-primary animate-[bounce_1s_infinite] h-full"}),e.jsx("div",{className:"w-1 bg-primary animate-[bounce_1.2s_infinite] h-2/3"}),e.jsx("div",{className:"w-1 bg-primary animate-[bounce_0.8s_infinite] h-full"})]})]}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h2",{className:"text-xl font-bold text-foreground",children:o.title}),e.jsx("p",{className:"text-muted-foreground",children:o.artist})]}),e.jsx("div",{className:"text-muted-foreground font-mono text-sm hidden md:block",children:o.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-muted-foreground uppercase tracking-widest",children:"Up Next"}),e.jsxs("div",{className:"flex items-center gap-2 cursor-pointer group",onClick:y,children:[e.jsx("span",{className:`text-xs font-bold ${i?"text-success":"text-muted-foreground"}`,children:"Autoplay"}),e.jsx("div",{className:`w-8 h-4 rounded-full relative transition-colors ${i?"bg-success":"bg-muted"}`,children:e.jsx("div",{className:`absolute top-0.5 w-3 h-3 bg-background rounded-full transition-all ${i?"left-4.5":"left-0.5"}`})})]})]}),e.jsx("div",{className:"space-y-2",children:a.length===0?e.jsx(E,{variant:"card",icon:e.jsx(q,{className:"w-full h-full"}),title:"Nothing in your queue",description:i?"Autoplay is on — we’ll pick something for you.":"Start playing music and add tracks to build your queue.",size:"md"}):a.map((s,r)=>e.jsxs("div",{draggable:!0,onDragStart:l=>P(l,r),onDragOver:l=>C(l,r),onDragEnd:D,className:`flex items-center gap-4 p-4 bg-card rounded-lg border border-transparent hover:border-border transition-all group ${n===r?"opacity-50 border-primary shadow-lg scale-[1.02] cursor-grabbing":""} ${S===r&&n!==null&&n!==r?"border-t-2 border-t-primary bg-primary/5":""}`,children:[e.jsx("div",{className:"text-muted-foreground cursor-grab active:cursor-grabbing hover:text-foreground p-1",children:e.jsx(z,{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-background/50 hidden group-hover:flex items-center justify-center cursor-pointer",onClick:()=>t(s),children:e.jsx(v,{className:"w-4 h-4 text-foreground fill-current"})})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"text-sm font-bold text-foreground truncate",children:s.title}),e.jsx("div",{className:"text-xs text-muted-foreground truncate",children:s.artist})]}),e.jsx("div",{className:"text-muted-foreground font-mono text-xs hidden sm:block",children:s.duration}),e.jsx("button",{className:"p-2 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity",onClick:()=>d(s.id),children:e.jsx(N,{className:"w-4 h-4"})})]},`${s.id}-${r}`))})]}),k&&e.jsx(G,{onClose:()=>b(!1),onSave:I})]})};export{ee as QueueView};