https://velaflow.com/_next/static/chunks/pages/watch-live/[streamKey]-d19a51583139b239.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4612],{6964:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>h});var n=s(37876),r=s(89099),a=s(14232),l=s(77489),i=s(23004),c=s(46055),o=s(30179),d=s(12692),u=s(10553),m=s(40087),x=s(11537);function h(){var e,t,s,h;let f=(0,r.useRouter)(),{streamKey:v}=f.query,[p,g]=(0,a.useState)(null),[b,y]=(0,a.useState)(!0),[j,w]=(0,a.useState)(null),[N,k]=(0,a.useState)(0),[_,z]=(0,a.useState)(null),A=(0,a.useRef)(null),S=(0,a.useRef)(null),C=(0,a.useRef)(null),[E,I]=(0,a.useState)(!1),[D,R]=(0,a.useState)(!0);return((0,a.useEffect)(()=>{(async()=>{let e=await (0,u.getSession)();(null==e?void 0:e.user)&&z(e.user.userData||e.user)})()},[]),(0,a.useEffect)(()=>{v&&(async()=>{var e,t,s,n;try{let s=await o.A.post("/live-streams/".concat(v)),n=(null==(e=s.data)?void 0:e.content)||(null==(t=s.data)?void 0:t.data);if(!n)return void w("Stream not found or has ended");if("live"!==n.status){w("This live stream has ended."),setTimeout(()=>{f.push("/go-live")},2500);return}g(n)}catch(e){console.error("API Error:",e),w((null==e||null==(n=e.response)||null==(s=n.data)?void 0:s.message)||"Failed to load live stream")}finally{y(!1)}})()},[v,f]),(0,a.useEffect)(()=>{if(!v||!p||!_)return;let e=(0,d.io)("https://chat.velaflow.com");return S.current=e,e.on("connect",()=>{console.log("Connected",e.id),e.emit("join",_.id),console.log("\uD83D\uDCE1 Joining live stream with key:",v,"as user:",_.id),e.emit("join_live_stream",{streamKey:v,userId:_.id}),e.emit("request_stream",{streamKey:v,viewerUserId:_.id})}),e.on("live_ice_candidate",async e=>{let{candidate:t}=e;C.current&&await C.current.addIceCandidate(new RTCIceCandidate(t))}),e.on("live_offer",async t=>{let{offer:s}

1=t;console.log("Offer received"),C.current&&(C.current.close(),C.current=null);let n=new RTCPeerConnection({iceServers:[{urls:"stun:stun.l.google.com:19302"},{urls:"stun:stun1.l.google.com:19302"},{urls:"stun:stun2.l.google.com:19302"}]});C.current=n,n.onconnectionstatechange=()=>{console.log("\uD83D\uDFE2 Viewer connectionState:",n.connectionState)},n.oniceconnectionstatechange=()=>{console.log("\uD83E\uDDCA Viewer ICE connectionState:",n.iceConnectionState)},n.ontrack=e=>{if(console.log("\uD83C\uDFA5 TRACK RECEIVED",e.streams[0]),!A.current)return;let t=e.streams[0];A.current.srcObject=t,A.current.muted=!0,A.current.play().then(()=>{I(!0)}).catch(console.error);let s=()=>{A.current.play().then(()=>{console.log("✅ Video started playing"),I(!0)}).catch(e=>{console.error("Autoplay blocked:",e),I(!0)})};A.current.readyState>=1?s():A.current.onloadedmetadata=s},n.onicecandidate=t=>{t.candidate&&e.emit("live_ice_candidate",{toUserId:p.user.id,fromUserId:_.id,candidate:t.candidate})},await n.setRemoteDescription(new RTCSessionDescription(s));let r=await n.createAnswer();await n.setLocalDescription(r),e.emit("live_answer",{streamKey:v,hostUserId:p.user.id,viewerUserId:_.id,answer:r})}),e.on("viewer_count_updated",e=>{e.streamKey===v&&k(e.count)}),e.on("live_stream_ended",e=>{let{message:t}=e;alert(t||"Stream has ended"),f.push("/go-live"),C.current&&C.current.close()}),()=>{C.current&&C.current.close(),e.emit("leave_live_stream",{streamKey:v,userId:_.id}),e.disconnect()}},[v,p,_,f]),b)?(0,n.jsx)("div",{className:"min-h-screen flex items-center justify-center bg-black text-white",children:(0,n.jsxs)("div",{className:"text-center",children:[(0,n.jsx)("div",{className:"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white mx-auto mb-4"}),(0,n.jsx)("p",{children:"Joining live stream..."})]})}):j||!p?(0,n.jsx)("div",{className:"min-h-screen flex items-center justify-center bg-black text-white",children:(0,n.jsxs)("div",{className:"text-center max-w-md px-6",children:[(0,n.jsx)("div",{className:"w-16 h-16 mx-auto mb-6 rounded-full bg-red-500/20 flex items-center justify-center",children:(0,n.jsx)("span",{className:"text-3xl",children:"\uD83D\uDCFA"})}),(0,n.jsx)("p",{className:"text-xl mb-2 font-semibold text-white",children:j||"This live stream has ended"}),(0,n.jsx)("p",{className:"text-sm text-zinc-400 mb-6",children:"Redirecting you back..."}),(0,n.jsx)("button",{onClick:()=>f.push("/go-live"),className:"px-6 py-2.5 bg-white text-black rounded-xl font-semibold hover:bg-gray-200 transition",children:"Back to Live"})]})}):(0,n.jsxs)("div",{className:"min-h-screen bg-black text-white font-sans",children:[(0,n.jsxs)("div",{className:"fixed top-0 left-0 right-0 z-50 bg-zinc-900 border-b border-zinc-800 px-4 py-3 flex items-center justify-between",children:[(0,n.jsxs)("div",{className:"flex items-center gap-3",children:[(0,n.jsx)("button",{onClick:()=>f.back(),className:"p-2 hover:bg-zinc-800 rounded-full",children:(0,n.jsx)(l.A,{size:20})}),(0,n.jsxs)("div",{children:[(0,n.jsxs)("div",{className:"flex items-center gap-2",children:[(0,n.jsxs)("span",{className:"bg-red-600 text-xs font-bold px-3 py-1 rounded-full flex items-center gap-1",children:[(0,n.jsx)("div",{className:"w-2 h-2 bg-white rounded-full animate-pulse"})," LIVE"]}),(0,n.jsx)("span",{className:"font-semibold",children:p.title})]}),(0,n.jsxs)("p",{className:"text-xs text-zinc-400",children:["by @",null==(e=p.user)?void 0:e.username]})]})]}),(0,n.jsxs)("div",{className:"flex items-center gap-2 text-sm",children:[(0,n.jsxs)("div",{className:"flex items-center gap-1 bg-zinc-800 px-3 py-1 rounded-full",children:[(0,n.jsx)(i.A,{size:16})," ",(0,n.jsxs)("span",{children:[N||0," watching"]})]}),(0,n.jsx)("button",{onClick:()=>f.push("/go-live"),className:"px-4 py-1.5 bg-zinc-800 hover:bg-zinc-700 rounded-xl text-sm font-medium transition",children:"Leave"})]})]}),(0,n.jsxs)("div",{className:"pt-[61px] flex flex-col lg:flex-row max-w-9xl mx-auto",children:[(0,n.jsx)("div",{className:"lg:flex-1 p-4",children:(0,n.jsxs)("div",{className:"relative w-full bg-zinc-950 rounded-2xl overflow-hidden aspect-video border border-zinc-800",children:[(0,n.jsx)("video",{ref:A,autoPlay:!0,playsInl

1ine:!0,muted:!0,className:"w-full h-full object-cover"}),(0,n.jsx)("div",{className:"absolute bottom-4 right-4 z-20",children:(0,n.jsx)("button",{onClick:async()=>{if(A.current)if(D)try{A.current.muted=!1,await A.current.play(),R(!1)}catch(e){console.error(e)}else A.current.muted=!0,R(!0)},className:"bg-black/70 hover:bg-black/90 p-3 rounded-full transition",children:D?(0,n.jsx)(m.A,{size:22}):(0,n.jsx)(x.A,{size:22})})}),!E&&(0,n.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-zinc-900/90",children:(0,n.jsxs)("div",{className:"text-center",children:[(0,n.jsx)("div",{className:"w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center animate-pulse",children:(0,n.jsx)(i.A,{size:40})}),(0,n.jsx)("p",{className:"text-xl font-semibold mb-2",children:"Connecting to live stream..."}),(0,n.jsx)("p",{className:"text-sm text-zinc-400 mb-6",children:"Please wait"}),(0,n.jsx)("button",{onClick:()=>{A.current&&A.current.play().then(()=>{console.log("✅ Manual play succeeded"),I(!0)}).catch(console.error)},className:"px-8 py-3 bg-white text-black font-semibold rounded-full hover:bg-white/90 transition flex items-center gap-2 mx-auto",children:"▶️ Start Watching"})]})}),(0,n.jsxs)("div",{className:"absolute top-4 left-4 bg-black/60 px-3 py-1 rounded-full text-xs flex items-center gap-2",children:[(0,n.jsx)("div",{className:"w-2 h-2 bg-red-500 rounded-full animate-pulse"}),"LIVE"]})]})}),(0,n.jsx)("div",{className:"lg:w-[340px] p-4 lg:pt-4",children:(0,n.jsx)(c.A,{streamId:v,hostName:(null==(t=p.user)?void 0:t.first_name)&&(null==(s=p.user)?void 0:s.last_name)?"".concat(p.user.first_name," ").concat(p.user.last_name):(null==(h=p.user)?void 0:h.username)||"Host",fullHeight:!0,isViewer:!0})})]})]})}},11537:(e,t,s)=>{"use strict";s.d(t,{A:()=>a});var n=s(51935);let r={name:"volume-2",size:24,node:[["path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",key:"uqj9uw"}],["path",{d:"M16 9a5 5 0 0 1 0 6",key:"1q6k2b"}],["path",{d:"M19.364 18.364a9 9 0 0 0 0-12.728",key:"ijwkga"}]]};r.node;let a=(0,n.A)(r)},23004:(e,t,s)=>{"use strict";s.d(t,{A:()=>a});var n=s(51935);let r={name:"users",size:24,node:[["path",{d:"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",key:"1yyitq"}],["path",{d:"M16 3.128a4 4 0 0 1 0 7.744",key:"16gr8j"}],["path",{d:"M22 21v-2a4 4 0 0 0-3-3.87",key:"kshegd"}],["circle",{cx:"9",cy:"7",r:"4",key:"nufk8"}]]};r.node;let a=(0,n.A)(r)},40087:(e,t,s)=>{"use strict";s.d(t,{A:()=>a});var n=s(51935);let r={name:"volume-x",size:24,node:[["path",{d:"M11 4.702a.7.7 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.7.7 0 0 0 11 19.298z",key:"1p7khw"}],["path",{d:"m16.5 14.5 5-5",key:"cul3yw"}],["path",{d:"m16.5 9.5 5 5",key:"1akey5"}]]};r.node;let a=(0,n.A)(r)},46055:(e,t,s)=>{"use strict";s.d(t,{A:()=>o});var n=s(37876),r=s(14232),a=s(88327),l=s(12692),i=s(30179),c=s(10553);function o(e){let{streamId:t,hostName:s="Host",fullHeight:o=!1}=e,[d,u]=(0,r.useState)([]),[m,x]=(0,r.useState)(""),[h,f]=(0,r.useState)(null),[v,p]=(0,r.useState)(null),[g,b]=(0,r.useState)(""),y=(0,r.useRef)(null),j=(0,r.useRef)(null);(0,r.useEffect)(()=>{(async()=>{let e=await (0,c.getSession)();(null==e?void 0:e.user)&&(p(e.user.userData||e.user),b(e.user.accessToken||""))})()},[]),(0,r.useEffect)(()=>{let e=(0,l.io)("https://chat.velaflow.com",{transports:["websocket"],reconnection:!0,reconnectionAttempts:5,reconnectionDelay:1e3});return f(e),()=>{e.disconnect()}},[]),(0,r.useEffect)(()=>{if(!h||!t||!v)return;let e="live_stream_".concat(t);if(j.current===e)return;j.current=e,h.emit("join_live_stream",{streamKey:t,userId:v.id});let s=e=>{u(t=>t.some(t=>{var s,n;return t.id===e.id||t.message===e.message&&(null==(s=t.user)?void 0:s.id)===(null==(n=e.user)?void 0:n.id)})?t:[...t,e])};return h.on("receive_live_message",s),(async()=>{try{let e=await i.A.post("/live-streams/".concat(t,"/messages/list"));e.data.content&&u(e.data.content||[])}catch(e){console.error("Failed to load old messages")}})(),()=>{h.off("receive_live_message",s),j.current=null}},[h,t,v]),(0,r.useEffect)(()=>{var e;null==(e=y.current)||e.scrollIntoView({behavior:"smooth"})},[d]),(0,r.useEffect)(()=>

1{if(!h)return;let e=e=>{e.streamKey===t&&console.log("Viewer count updated:",e.count)};return h.on("viewer_count_updated",e),()=>{h.off("viewer_count_updated",e)}},[h,t]);let w=()=>{if(!m.trim()||!h||!v)return;let e={streamKey:t,sender_id:v.id,message:m.trim(),type:"text",accessToken:g};h.emit("send_live_message",e);let n={id:"temp-".concat(Date.now()),message:m.trim(),user:{id:v.id,username:v.username||v.name||s,name:v.name||v.username||s},created_at:new Date().toISOString()};u(e=>[...e,n]),x("")};return(0,n.jsxs)("div",{className:"flex flex-col bg-white border border-dividerGrey rounded-2xl overflow-hidden ".concat(o?"h-[calc(100vh-140px)]":"h-[520px]"),children:[(0,n.jsxs)("div",{className:"flex items-center justify-between px-4 py-3 border-b flex-shrink-0",children:[(0,n.jsx)("h3",{className:"text-sm font-bold",children:"Live Chat"}),(0,n.jsx)(a.A,{size:18,className:"text-grey"})]}),(0,n.jsxs)("div",{className:"flex-1 overflow-y-auto px-4 py-4 space-y-4 bg-gray-50",children:[0===d.length&&(0,n.jsx)("div",{className:"text-center text-sm text-gray-400 py-8",children:"No messages yet. Say hi!"}),d.map((e,t)=>((e,t)=>{var r,a,l;let i=(null==(r=e.user)?void 0:r.id)===(null==v?void 0:v.id),c=i?s||(null==v?void 0:v.username)||(null==v?void 0:v.name)||"You":(null==(a=e.user)?void 0:a.username)||(null==(l=e.user)?void 0:l.name)||"User";return(0,n.jsx)("div",{className:"flex ".concat(i?"justify-end":"justify-start"),children:(0,n.jsxs)("div",{className:"max-w-[75%] px-4 py-2.5 rounded-2xl text-sm ".concat(i?"bg-[#2755ff] text-white rounded-br-none":"bg-white border border-dividerGrey text-gray-900 rounded-bl-none"),children:[!i&&(0,n.jsxs)("div",{className:"text-xs font-semibold text-[#2755ff] mb-1",children:["@",c]}),(0,n.jsx)("p",{className:i?"text-white":"text-gray-900",children:e.message}),(0,n.jsx)("div",{className:"text-[10px] mt-1 text-right ".concat(i?"text-blue-200":"text-gray-500"),children:new Date(e.created_at).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})})]})},t)})(e,t)),(0,n.jsx)("div",{ref:y})]}),(0,n.jsx)("div",{className:"p-3 border-t bg-white",children:(0,n.jsxs)("div",{className:"flex gap-2",children:[(0,n.jsx)("input",{value:m,onChange:e=>x(e.target.value),onKeyDown:e=>"Enter"===e.key&&w(),placeholder:"Type a message...",className:"flex-1 bg-gray-100 border border-gray-300 rounded-full px-4 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:border-primary"}),(0,n.jsx)("button",{onClick:w,disabled:!m.trim(),className:"px-6 py-2 bg-primary text-white rounded-full text-sm font-semibold disabled:opacity-50",children:"Send"})]})})]})}},77489:(e,t,s)=>{"use strict";s.d(t,{A:()=>a});var n=s(51935);let r={name:"arrow-left",size:24,node:[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]]};r.node;let a=(0,n.A)(r)},86696:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/watch-live/[streamKey]",function(){return s(6964)}])},88327:(e,t,s)=>{"use strict";s.d(t,{A:()=>a});var n=s(51935);let r={name:"ellipsis",size:24,node:[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]],aliases:["more-horizontal"]};r.node;let a=(0,n.A)(r)}},e=>{e.O(0,[2058,636,6593,8792],()=>e(e.s=86696)),_N_E=e.O()}]);