670282989b
- apps/web: test updates (Vitest/setup), playbackAnalyticsService, TrackGrid, serviceErrorHandler - veza-common: logging, metrics, traits, validation, random - veza-stream-server: audio pipeline, codecs, cache, monitoring, routes - apps/web/dist_verification: refresh build assets (content-hashed filenames) Co-authored-by: Cursor <cursoragent@cursor.com>
1 line
10 KiB
JavaScript
1 line
10 KiB
JavaScript
import{a as r,j as e}from"./vendor-react-C9dYU-TK.js";import{t as N}from"./trackService-Dud99AaM.js";import{i as y,l as w,C as b,B as f,S as x}from"./index-BMBS6scK.js";import{T as k,U as S,m as T,r as C,o as E,W as A,C as V,af as F,j as P,g as L,ag as R}from"./vendor-icons-BSV6HBy1.js";import{A as U}from"./avatar-DAue0w7u.js";import{m as p,A as z}from"./vendor-motion-CbAtAbUE.js";import"./vendor-CjLUfV8Y.js";import"./vendor-security-DsrNJhpn.js";import"./vendor-http-CctT3C58.js";import"./vendor-router-Dr0ZB7zf.js";import"./vendor-tanstack-C4XaEYj2.js";import"./vendor-utils-D0JLFg89.js";import"./vendor-i18n-PN7w4axr.js";function H(){const{playTrack:s}=y(),[n,t]=r.useState("feed"),[o,l]=r.useState([]),[c,i]=r.useState(!0),[u,d]=r.useState(!1),m=r.useCallback(async()=>{i(!0),d(!1);try{const a=await N.list({limit:10,sort_by:"created_at"});l(a.tracks)}catch(a){w.error("Error loading feed tracks",{error:a instanceof Error?a.message:String(a),stack:a instanceof Error?a.stack:void 0}),d(!0)}finally{i(!1)}},[]);return r.useEffect(()=>{m()},[m]),{activeTab:n,setActiveTab:t,feedTracks:o,loading:c,error:u,retry:m,playTrack:s}}function I({activeTab:s,onTabChange:n,onProfileClick:t}){return e.jsxs("div",{className:"hidden lg:block lg:col-span-3 space-y-8",children:[e.jsxs(b,{variant:"glass",className:"p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]",children:[e.jsx("div",{className:"h-20 bg-gradient-gaming"}),e.jsxs("div",{className:"px-4 pb-4",children:[e.jsx("button",{type:"button",className:"appearance-none bg-transparent border-0 p-0 block w-full text-left relative -mt-10 mb-3 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-full",onClick:t,children:e.jsx("div",{className:"w-20 h-20 rounded-full border-4 border-border overflow-hidden bg-muted",children:e.jsx("img",{src:"https://picsum.photos/id/237/200/200",alt:"",className:"w-full h-full object-cover"})})}),e.jsx("h3",{className:"font-bold text-foreground text-lg tracking-tight",children:"My Profile"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-4",children:"View your stats"})]})]}),e.jsx(b,{variant:"glass",className:"p-2 border-white/5 bg-black/20 backdrop-blur-xl",children:e.jsxs("nav",{className:"space-y-1",children:[e.jsxs(f,{variant:s==="feed"?"outline":"ghost",size:"sm",className:"w-full justify-start",onClick:()=>n("feed"),children:[e.jsx(k,{className:"w-4 h-4"})," Fresh Tracks"]}),e.jsxs(f,{variant:"ghost",size:"sm",className:"w-full justify-start",onClick:()=>n("communities"),children:[e.jsx(S,{className:"w-4 h-4"})," Communities"]})]})})]})}function M({track:s,onPlay:n}){const[t,o]=r.useState(!1),[l,c]=r.useState(s.like_count??0),[i,u]=r.useState(!1),[d,m]=r.useState(!1),a=r.useRef(null),h=r.useRef(null);r.useEffect(()=>()=>{a.current&&clearTimeout(a.current),h.current&&clearTimeout(h.current)},[]);const j=r.useCallback(()=>{o(g=>!g),c(g=>t?g-1:g+1),t||(u(!0),a.current&&clearTimeout(a.current),a.current=setTimeout(()=>u(!1),400))},[t]),v=r.useCallback(()=>{m(!0),h.current&&clearTimeout(h.current),h.current=setTimeout(()=>m(!1),1500)},[]);return e.jsx(p.div,{whileHover:{scale:1.005},transition:{duration:.2},className:"mb-4",children:e.jsxs(b,{variant:"glass",className:"p-0 overflow-hidden border-white/5 bg-black/20 backdrop-blur-xl hover:border-primary/20 transition-all duration-[var(--sumi-duration-normal)]",children:[e.jsxs("div",{className:"p-4 flex items-center gap-3",children:[e.jsx(U,{src:s.coverUrl,alt:s.artist,fallback:s.artist,size:"md",status:"online"}),e.jsxs("div",{children:[e.jsx("button",{className:"font-bold text-foreground text-sm hover:underline transition-colors text-left",children:s.artist}),e.jsx("div",{className:"text-xs text-muted-foreground",children:"uploaded a new track"})]}),e.jsx(f,{variant:"ghost",size:"sm",className:"ml-auto text-muted-foreground hover:text-foreground",children:e.jsx(T,{className:"w-4 h-4"})})]}),e.jsx("div",{className:"px-4 pb-4",children:e.jsxs("button",{type:"button",className:"appearance-none bg-transparent border-0 p-0 text-left w-full bg-card p-4 rounded-xl flex items-center gap-4 border border-border hover:border-primary/20 group cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",onClick:()=>n(s),children:[e.jsxs("div",{className:"w-16 h-16 rounded-lg overflow-hidden relative",children:[e.jsx("img",{src:s.coverUrl,alt:"",className:"w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-110"}),e.jsx("div",{className:"absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",children:e.jsx(C,{className:"w-6 h-6 text-foreground fill-current"})})]}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("h4",{className:"font-bold text-foreground tracking-tight truncate",children:s.title}),e.jsx("p",{className:"text-xs text-muted-foreground",children:s.genre||"Electronic"})]}),e.jsx("div",{className:"text-xs text-muted-foreground font-mono pr-2",children:s.duration})]})}),e.jsxs("div",{className:"px-4 py-3 border-t border-border flex gap-2 text-xs text-muted-foreground",children:[e.jsxs("button",{onClick:j,className:`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors hover:bg-destructive/10 hover:text-destructive ${t?"text-destructive":""}`,children:[e.jsx(E,{className:`w-3.5 h-3.5 ${t?"fill-current":""} ${i?"animate-like-bounce":""}`}),e.jsx("span",{className:"tabular-nums",children:l})]}),e.jsxs("button",{className:"flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors hover:bg-primary/10 hover:text-primary",children:[e.jsx(A,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Comment"})]}),e.jsx("button",{onClick:v,className:`flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors ${d?"text-success":"hover:bg-primary/10 hover:text-primary"}`,children:d?e.jsxs(e.Fragment,{children:[e.jsx(V,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Shared!"})]}):e.jsxs(e.Fragment,{children:[e.jsx(F,{className:"w-3.5 h-3.5"}),e.jsx("span",{children:"Share"})]})})]})]})})}const _={visible:{transition:{staggerChildren:.06,delayChildren:.02}}},$={hidden:{opacity:0,y:12},visible:{opacity:1,y:0,transition:{duration:.3}}};function G({tracks:s,loading:n,onPlayTrack:t}){const[o,l]=r.useState(!1);r.useEffect(()=>{const i=setTimeout(()=>{s.length>0&&l(!0)},45e3);return()=>clearTimeout(i)},[s.length]);const c=r.useCallback(()=>{l(!1),window.scrollTo({top:0,behavior:"smooth"})},[]);return e.jsxs("div",{className:"col-span-1 lg:col-span-6 space-y-6",children:[e.jsxs("div",{className:"mb-4",children:[e.jsx("h2",{className:"text-2xl font-bold text-foreground mb-1 tracking-tight",children:"Community Feed"}),e.jsx("p",{className:"text-muted-foreground text-xs",children:"New uploads from the network"})]}),e.jsx(z,{children:o&&e.jsxs(p.button,{initial:{opacity:0,y:-12},animate:{opacity:1,y:0},exit:{opacity:0,y:-12},onClick:c,className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-primary/10 text-primary text-sm font-medium border border-primary/20 hover:bg-primary/20 transition-all cursor-pointer",children:[e.jsx(P,{className:"w-4 h-4"}),"New posts available"]})}),n?null:e.jsxs(e.Fragment,{children:[s.length>0?e.jsx(p.div,{className:"space-y-4",variants:_,initial:"hidden",animate:"visible",children:s.map(i=>e.jsx(p.div,{variants:$,children:e.jsx(M,{track:i,onPlay:t})},i.id))}):e.jsx("div",{className:"text-center py-24 text-muted-foreground",children:"No recent activity."}),s.length>0&&e.jsx("div",{className:"text-center py-6",children:e.jsxs(f,{variant:"ghost",className:"gap-2 text-muted-foreground hover:text-foreground",children:[e.jsx(L,{className:"w-4 h-4"}),"Load More"]})})]})]})}const B=["#Techno","#Synthwave","#NewGear","#Tutorial"];function W(){return e.jsx("div",{className:"hidden lg:block lg:col-span-3 space-y-8",children:e.jsxs(b,{variant:"glass",className:"border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]",children:[e.jsxs("h3",{className:"font-bold text-sm text-foreground uppercase tracking-wider mb-4 flex items-center gap-2",children:[e.jsx(R,{className:"w-4 h-4 text-primary"})," Trending Tags"]}),e.jsx("div",{className:"flex flex-wrap gap-2",children:B.map(s=>e.jsx("span",{className:"text-xs bg-muted px-2 py-1 rounded text-muted-foreground cursor-pointer hover:text-foreground hover:bg-muted/80 transition-all duration-[var(--duration-fast)]",children:s},s))})]})})}function q(){return e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-8 animate-fadeIn pb-20 min-h-layout-page",children:[e.jsxs("div",{className:"hidden lg:block lg:col-span-3 space-y-8",children:[e.jsx(x,{className:"h-48 rounded-xl"}),e.jsx(x,{className:"h-32 rounded-xl"})]}),e.jsxs("div",{className:"col-span-1 lg:col-span-6 space-y-8",children:[e.jsxs("div",{className:"mb-4",children:[e.jsx(x,{className:"h-8 w-48 mb-2"}),e.jsx(x,{className:"h-4 w-64"})]}),[1,2,3].map(s=>e.jsx(x,{className:"h-44 rounded-xl"},s))]}),e.jsx("div",{className:"hidden lg:block lg:col-span-3",children:e.jsx(x,{className:"h-40 rounded-xl"})})]})}function D({onRetry:s}){return e.jsxs("div",{className:"flex flex-col items-center justify-center min-h-layout-page-sm text-center px-4",children:[e.jsx("p",{className:"text-destructive font-medium mb-2",children:"Failed to load feed"}),e.jsx("p",{className:"text-muted-foreground text-sm mb-4",children:"We couldn't load the community feed. Please try again."}),s!=null&&e.jsx(f,{variant:"outline",onClick:s,children:"Retry"})]})}function ne({onViewProfile:s}){const{activeTab:n,setActiveTab:t,feedTracks:o,loading:l,error:c,retry:i,playTrack:u}=H();return l?e.jsx(q,{}):c?e.jsx(D,{onRetry:i}):e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-8 animate-fadeIn pb-20 min-h-layout-page",children:[e.jsx(I,{activeTab:n,onTabChange:d=>t(d),onProfileClick:()=>s(null)}),e.jsx(G,{tracks:o,loading:!1,onPlayTrack:u}),e.jsx(W,{})]})}export{ne as SocialView};
|