https://webysocial.lovable.app/assets/music-qgHHPxgI.js

1import{c as R,r as c,j as e,M as C,b as q,f as I,k as D,$ as H,l as P,m as A,X}from"./index-Ck2k3YFA.js";import{P as E}from"./profile-song-player-CNJtVkm1.js";import{e as $}from"./contrast-D0dyp5RR.js";const U=[["path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",key:"975kel"}],["circle",{cx:"12",cy:"7",r:"4",key:"17ys0d"}]],F=R("user",U);function Q({items:a,onSelect:d}){const[f,i]=c.useState(0),g=c.useRef(null),h=c.useRef(null),x=c.useRef(0);c.useEffect(()=>{i(t=>Math.min(Math.max(t,0),Math.max(a.length-1,0)))},[a.length]);const N=t=>Math.min(Math.max(t,0),Math.max(a.length-1,0)),m=t=>i(o=>N(o+t)),_=t=>{const o=Date.now();if(o-x.current<140)return;const l=Math.abs(t.deltaX)>Math.abs(t.deltaY)?t.deltaX:t.deltaY;Math.abs(l)<4||(x.current=o,m(l>0?1:-1))},v=t=>{h.current={startX:t.clientX,startIndex:f,moved:!1},t.target.setPointerCapture?.(t.pointerId)},j=t=>{const o=h.current;if(!o)return;const l=t.clientX-o.startX;Math.abs(l)>6&&(o.moved=!0),i(N(o.startIndex-Math.round(l/90)))},w=()=>{h.current=null},r=a[f];return e.jsxs("div",{ref:g,tabIndex:0,role:"listbox","aria-label":"Cover flow",onWheel:_,onPointerDown:v,onPointerMove:j,onPointerUp:w,onPointerCancel:w,onKeyDown:t=>{t.key==="ArrowRight"&&(t.preventDefault(),m(1)),t.key==="ArrowLeft"&&(t.preventDefault(),m(-1)),t.key==="Enter"&&r&&d(r)},className:"relative select-none overflow-hidden rounded-md outline-none",style:{background:"linear-gradient(180deg, #ffffff 0%, #f6f8fa 60%, #eaeef2 100%)",boxShadow:"inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 40px rgba(0,0,0,0.05)",cursor:"grab"},children:[e.jsxs("div",{className:"relative h-[320px] md:h-[380px]",style:{perspective:"1200px"},children:[e.jsx("div",{className:"absolute inset-0",style:{transformStyle:"preserve-3d"},children:a.map((t,o)=>{const l=o-f,p=Math.abs(l);if(p>5)return null;const b=Math.sign(l),k=b*(110+Math.min(p,5)*42),S=-Math.min(p,5)*120,s=l===0?0:b*-58,n=l===0?1:.86;return e.jsxs("button",{type:"button","aria-selected":l===0,role:"option",onClick:()=>{h.current?.moved||(l===0?d(t):i(o))},className:"absolute left-1/2 top-1/2 h-[190px] w-[190px] md:h-[220px] md:w-[220px]",style:{marginLeft:"-95px",marginTop:"-130px",transform:`translate3d(${l===0?0:k}px, 0, ${S}px) rotateY(${s}deg) scale(${n})`,transition:"transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease",transformStyle:"preserve-3d",zIndex:100-p,opacity:p>4?0:1},children:[e.jsxs("span",{className:"relative block h-full w-full overflow-hidden rounded-[3px] bg-[#2a323c] shadow-[0_18px_30px_-12px_rgba(0,0,0,0.85)]",children:[t.artwork?e.jsx("img",{src:t.artwork,alt:"",className:"h-full w-full object-cover",draggable:!1}):e.jsx("span",{className:"grid h-full w-full place-items-center",children:e.jsx(C,{className:"h-8 w-8 text-white/40"})}),e.jsx("span",{className:"pointer-events-none absolute inset-0",style:{background:l===0?"linear-gradient(115deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 45%)":`linear-gradient(${b>0?"270deg":"90deg"}, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 70%)`}})]}),e.jsx("span",{className:"pointer-events-none absolute left-0 top-full block h-full w-full overflow-hidden rounded-[3px]",style:{transform:"scaleY(-1)",opacity:.32,maskImage:"linear-gradient(to top, rgba(0,0,0,0.65), transparent 58%)",WebkitMaskImage:"linear-gradient(to top, rgba(0,0,0,0.65), transparent 58%)"},children:t.artwork?e.jsx("img",{src:t.artwork,alt:"",className:"h-full w-full object-cover",draggable:!1}):e.jsx("span",{className:"block h-full w-full bg-[#2a323c]"})})]},t.id)})}),r&&e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-3 flex justify-center",children:e.jsxs("span",{className:"inline-flex items-center gap-2 rounded-full border border-black/10 bg-white/70 px-3 py-1 shadow-sm backdrop-blur-md",children:[r.avatarUrl?e.jsx("img",{src:r.avatarUrl,alt:"",className:"h-5 w-5 rounded-full object-cover"}):e.jsx("span",{className:"grid h-5 w-5 place-items-center rounded-full bg-black/10",children:e.jsx(F,{className:"h-3 w-3 text-black/60"})}),e.jsx("span",{className:"text-[11px] font-bold",style:{color:r.usernameColor??"#1f2429"},children:r.username})]})})]}),r&&e.jsxs("div",{className:"px-4 pb-4 pt-1 text-center",children:[e.jsx("p",{className:"truncate text-[15px] font-bold tracking-tight text-[#1f2429]",children:r.title}),e.jsx("p",{className:"truncate text-[12px] text-[#4a5663]",children:r.artist}),r.album&&e.jsx("p",{className:"truncate text-[11px] italic text-[#7a8590]",children:r.album}),e.jsx("p",{className:"mt-2 text-[10px] uppercase tracking-[0.2em] text-[#96a0aa]",children:a.length>1?"Drag, scroll or use ← → · click the cover to play":"Click the cover to play"})]})]})}const B={background:"linear-gradient(180deg, #eef2f6 0%, #cdd5dd 38%, #b6bec7 62%, #d2d9e0 100%)",border:"1px solid #6a7078",boxShadow:"inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25)",fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif'}

1,Y={background:"linear-gradient(180deg, #e6eaee 0%, #c1c7ce 50%, #a3aab2 100%)",borderBottom:"1px solid #7a8088",color:"#1f2429"},y={background:"linear-gradient(180deg, #ffffff, #f4f7fa)",border:"1px solid #8c95a0",boxShadow:"inset 0 1px 2px rgba(0,0,0,0.25)"};function L({icon:a,value:d,onChange:f,placeholder:i}){return e.jsxs("label",{className:"flex items-center gap-2 px-3 py-1.5 rounded-full",style:y,children:[e.jsx("span",{className:"text-[#4a5663]",children:a}),e.jsx("input",{value:d,onChange:g=>f(g.target.value),placeholder:i,className:"flex-1 bg-transparent text-[12px] outline-none text-[#1f2429] placeholder:text-[#7a8590]",style:{fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif'}})]})}function K({profile:a,size:d="w-8 h-8"}){return a.avatar_url?e.jsx("img",{src:a.avatar_url,alt:"",className:`${d} rounded-full object-cover shrink-0`}):e.jsx("span",{className:`${d} rounded-full bg-[#b6bec7] shrink-0 grid place-items-center`,children:e.jsx(F,{className:"w-3.5 h-3.5 text-[#4a5663]"})})}function G(){const{t:a}=q(),d=I(D),f=I(H),{data:i}=P({queryKey:["music-library"],queryFn:()=>d()}),[g,h]=c.useState(""),[x,N]=c.useState(""),[m,_]=c.useState(null),[v,j]=c.useState(null),w=c.useMemo(()=>(i?.profiles??[]).map(s=>({id:s.id,nickname:s.nickname,avatar_url:s.avatar_url,name_color:s.name_color})),[i]),r=w.find(s=>s.id===m)??null,{data:t,isFetching:o}=P({queryKey:["shared-songs",m],queryFn:()=>f({data:{profileId:m??""}}),enabled:!!m}),l=c.useMemo(()=>{const s=[];for(const n of i?.profiles??[]){const u=n.profile_song;!u||!u.song||!u.song_preview_url||s.push({profileId:n.id,nickname:n.nickname,avatar_url:n.avatar_url,name_color:n.name_color,song:u})}return s},[i]),p=c.useMemo(()=>{const s=x.trim().toLowerCase();return w.filter(n=>!s||n.nickname.toLowerCase().includes(s))},[x,w]),b=c.useMemo(()=>t?.songs??[],[t]),k=c.useMemo(()=>{const s=g.trim().toLowerCase();return r?b.filter(n=>!s||n.song.toLowerCase().includes(s)||n.song_artist.toLowerCase().includes(s)).map(n=>({profileId:r.id,nickname:r.nickname,avatar_url:r.avatar_url,name_color:r.name_color,song:{song:n.song,song_artist:n.song_artist,song_preview_url:n.song_preview_url??"",song_artwork_url:n.song_artwork_url??"",segment_start:n.segment_start??void 0,segment_end:n.segment_end??void 0,track_length_ms:n.track_length_ms??void 0}})):l.filter(n=>{const u=!s||n.song.song.toLowerCase().includes(s)||n.song.song_artist.toLowerCase().includes(s),M=!x.trim()||n.nickname.toLowerCase().includes(x.trim().toLowerCase());return u&&M})},[l,x,r,b,g]),S=s=>{_(s),j(null),h("")};return e.jsxs("div",{className:"min-h-screen w-full px-4 md:px-8 py-8",style:{background:"linear-gradient(180deg, #b8c8da 0%, #95aac3 40%, #7d95b0 100%)",fontFamily:'"Helvetica Neue", Helvetica, Arial, sans-serif'},children:[e.jsx("div",{className:"max-w-[1180px] mx-auto",children:e.jsxs("div",{className:"rounded-[10px] overflow-hidden",style:B,children:[e.jsx("div",{className:"relative h-7 flex items-center justify-center select-none",style:Y,children:e.jsx("span",{className:"text-[12px] font-semibold tracking-tight",children:a("music.window")})}),e.jsxs("div",{className:"p-3 space-y-4",children:[e.jsxs("div",{className:"flex flex-col md:flex-row md:items-end md:justify-between gap-4",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] uppercase tracking-[0.25em] text-[#4a5663] font-semibold",children:a("music.kicker")}),e.jsx("h1",{className:"mt-1 text-2xl md:text-3xl font-bold tracking-tight text-[#1f2429]",children:a("music.title")})]}),e.jsx("div",{className:"text-[11px] text-[#3a4753] px-2 py-1 rounded",style:y,children:r?a("music.songsFrom",{n:b.length,name:r.nickname}):a("music.tracksInRoom",{n:l.length})})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-3",children:[e.jsx(L,{icon:e.jsx(C,{className:"w-3.5 h-3.5"}),value:g,onChange:h,placeholder:a("music.songSearch")}),e.jsx(L,{icon:e.jsx(A,{className:"w-3.5 h-3.5"}),value:x,onChange:N,placeholder:a("music.userSearch")})]}),e.jsxs("section",{style:y,className:"p-2",children:[e.jsxs("div",{className:"flex items-center justify-between px-1 pb-2",children:[e.jsx("p",{className:"text-[10px] uppercase tracking-[0.18em] font-semibold text-[#4a5663]",children:a("music.libraries")}),r&&e.jsxs("button",{type:"button",onClick:()=>{_(null),j(null)},className:"flex items-center gap-1 text-[10px] text-[#3a4753] hover:text-[#1f2429]",children:[e.jsx(X,{className:"w-3 h-3"})," ",a("music.showEveryone")]})]}),e.jsx("div",{className:"flex gap-2 overflow-x-auto pb-1",children:p.length===0?e.jsx("p",{className:"px-2 py-2 text-[11px] italic text-[#4a5663]",children:a("music.noUsers")}):p.map(s=>e.jsxs("button",{type:"button",onClick:()=>S(s.id),className:`flex min-w-[132px] items-center gap-2 rounded-md px-2 py-2 text-left transition-colors ${m===s.id?"bg-[#dbe5ff]":"hover:bg-[#edf2f7]"}`,children:[e.jsx(K,{profile:s}),e.jsxs("span",{className:"min-w-0",children:[e.jsx("span",{className:"block truncate text-[12px] font-bold",style:{color:$(s.name_color??"#1f2429","#eef2f6")},children:s.nickname}),e.jsx("span",{className:"block text-[10px] text-[#5c6873]",children:a("music.openLibrary")})]})]},s.id))})]}),o&&r?e.jsx("div",{className:"px-3 py-10 text-center",style:y,children:e.jsx("p",{className:"text-[12px] italic text-[#3a4753]",children:a("music.opening",{name:r.nickname})})}):k.length===0?e.jsxs("div",{className:"px-3 py-10 text-center",style:y,children:[e.jsx(C,{className:"w-5 h-5 mx-auto mb-2 text-[#4a5663]"}),e.jsx("p",{className:"text-[12px] italic text-[#3a4753]",children:r?a("music.notShared",{name:r.nickname}):l.length===0?a("music.empty"):a("music.noMatches")})]}):e.jsxs("div",{className:"rounded-md overflow-hidden",style:y,children:[e.jsx("div",{className:"px-3 py-1.5 text-[10px] uppercase tracking-[0.18em] font-semibold text-[#4a5663]",style:{background:"linear-gradient(180deg, #e2e8ee, #c5ced7)",borderBottom:"1px solid #8c95a0"},children:"Cover Flow"}),e.jsx(Q,{items:k.map((s,n)=>({id:`${s.profileId}-${s.song.song}-${n}`,title:s.song.song,artist:s.song.song_artist,artwork:s.song.song_artwork_url||null,username:s.nickname,usernameColor:$(s.name_color??"#1f2429","#ffffff"),avatarUrl:s.avatar_url,playable:!!s.song.song_preview_url})),onSelect:s=>{const n=k.find((u,M)=>`${u.profileId}-${u.song.song}-${M}`===s.id);n?.song.song_preview_url&&j(n)}}),e.jsxs("div",{className:"px-3 py-1.5 text-[10px] text-[#4a5663] flex items-center justify-between",style:{background:"linear-gradient(180deg, #d8dfe6, #bcc4cd)",borderTop:"1px solid #8c95a0"},children:[e.jsxs("span",{children:[k.length," ",a(r?"music.sharedSongs":"music.tracksShown")]}),e.jsx("span",{className:"font-mono",children:"00:00 / —:—"})]})]})]})]})}),v&&e.jsx(E,{song:v.song,onClose:()=>j(null)},`${v.profileId}-${v.song.song}`)]})}export{G as component};