https://velaflow.com/_next/static/chunks/pages/watch-live/[streamKey]-4532b83439a01319.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:()=>x});var r=s(37876),n=s(89099),l=s(14232),i=s(77489),a=s(23004),o=s(46055),c=s(30179),d=s(12692),u=s(10553),m=s(40087),h=s(11537);function x(){var e,t,s,x;let f=(0,n.useRouter)(),{streamKey:v}=f.query,[g,p]=(0,l.useState)(null),[b,w]=(0,l.useState)(!0),[y,j]=(0,l.useState)(null),[k,N]=(0,l.useState)(0),[_,z]=(0,l.useState)(null),A=(0,l.useRef)(null),S=(0,l.useRef)(null),C=(0,l.useRef)(null),[E,I]=(0,l.useState)(!1),[D,R]=(0,l.useState)(!0);return((0,l.useEffect)(()=>{(async()=>{let e=await (0,u.getSession)();(null==e?void 0:e.user)&&z(e.user.userData||e.user)})()},[]),(0,l.useEffect)(()=>{v&&(async()=>{var e,t,s,r;try{let s=await c.A.post("/live-streams/".concat(v)),r=(null==(e=s.data)?void 0:e.content)||(null==(t=s.data)?void 0:t.data);if(!r)return void j("Stream not found or has ended");if("live"!==r.status){j("This live stream has ended."),setTimeout(()=>{f.push("/go-live")},2500);return}p(r)}catch(e){console.error("API Error:",e),j((null==e||null==(r=e.response)||null==(s=r.data)?void 0:s.message)||"Failed to load live stream")}finally{w(!1)}})()},[v,f]),(0,l.useEffect)(()=>{if(!v||!g||!_)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 r=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=r,r.onconnectionstatechange=()=>{console.log("\uD83D\uDFE2 Viewer connectionState:",r.connectionState)},r.oniceconnectionstatechange=()=>{console.log("\uD83E\uDDCA Viewer ICE connectionState:",r.iceConnectionState)},r.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},r.onicecandidate=t=>{t.candidate&&e.emit("live_ice_candidate",{toUserId:g.user.id,fromUserId:_.id,candidate:t.candidate})},await r.setRemoteDescription(new RTCSessionDescription(s));let n=await r.createAnswer();await r.setLocalDescription(n),e.emit("live_answer",{streamKey:v,hostUserId:g.user.id,viewerUserId:_.id,answer:n})}),e.on("viewer_count_updated",e=>{e.streamKey===v&&N(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,g,_,f]),b)?(0,r.jsx)("div",{className:"min-h-screen flex items-center justify-center bg-black text-white",children:(0,r.jsxs)("div",{className:"text-center",children:[(0,r.jsx)("div",{className:"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white mx-auto mb-4"}),(0,r.jsx)("p",{children:"Joining live stream..."})]})}):y||!g?(0,r.jsx)("div",{className:"min-h-screen flex items-center justify-center bg-black text-white",children:(0,r.jsxs)("div",{className:"text-center max-w-md px-6",children:[(0,r.jsx)("div",{className:"w-16 h-16 mx-auto mb-6 rounded-full bg-red-500/20 flex items-center justify-center",children:(0,r.jsx)("span",{className:"text-3xl",children:"\uD83D\uDCFA"})}),(0,r.jsx)("p",{className:"text-xl mb-2 font-semibold text-white",children:y||"This live stream has ended"}),(0,r.jsx)("p",{className:"text-sm text-zinc-400 mb-6",children:"Redirecting you back..."}),(0,r.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,r.jsxs)("div",{className:"min-h-screen bg-black text-white font-sans",children:[(0,r.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,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("button",{onClick:()=>f.back(),className:"p-2 hover:bg-zinc-800 rounded-full",children:(0,r.jsx)(i.A,{size:20})}),(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsxs)("span",{className:"bg-red-600 text-xs font-bold px-3 py-1 rounded-full flex items-center gap-1",children:[(0,r.jsx)("div",{className:"w-2 h-2 bg-white rounded-full animate-pulse"})," LIVE"]}),(0,r.jsx)("span",{className:"font-semibold",children:g.title})]}),(0,r.jsxs)("p",{className:"text-xs text-zinc-400",children:["by @",null==(e=g.user)?void 0:e.username]})]})]}),(0,r.jsxs)("div",{className:"flex items-center gap-2 text-sm",children:[(0,r.jsxs)("div",{className:"flex items-center gap-1 bg-zinc-800 px-3 py-1 rounded-full",children:[(0,r.jsx)(a.A,{size:16})," ",(0,r.jsxs)("span",{children:[k||0," watching"]})]}),(0,r.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,r.jsxs)("div",{className:"pt-[61px] flex flex-col lg:flex-row max-w-9xl mx-auto",children:[(0,r.jsx)("div",{className:"lg:flex-1 p-4",children:(0,r.jsxs)("div",{className:"relative w-full bg-zinc-950 rounded-2xl overflow-hidden aspect-video border border-zinc-800",children:[(0,r.jsx)("video",{ref:A,autoPlay:!0,playsInl

1ine:!0,muted:!0,className:"w-full h-full object-cover"}),(0,r.jsx)("div",{className:"absolute bottom-4 right-4 z-20",children:(0,r.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,r.jsx)(m.A,{size:22}):(0,r.jsx)(h.A,{size:22})})}),!E&&(0,r.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-zinc-900/90",children:(0,r.jsxs)("div",{className:"text-center",children:[(0,r.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,r.jsx)(a.A,{size:40})}),(0,r.jsx)("p",{className:"text-xl font-semibold mb-2",children:"Connecting to live stream..."}),(0,r.jsx)("p",{className:"text-sm text-zinc-400 mb-6",children:"Please wait"}),(0,r.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,r.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,r.jsx)("div",{className:"w-2 h-2 bg-red-500 rounded-full animate-pulse"}),"LIVE"]})]})}),(0,r.jsx)("div",{className:"lg:w-[340px] p-4 lg:pt-4",children:(0,r.jsx)(o.A,{streamId:v,hostName:(null==(t=g.user)?void 0:t.first_name)&&(null==(s=g.user)?void 0:s.last_name)?"".concat(g.user.first_name," ").concat(g.user.last_name):(null==(x=g.user)?void 0:x.username)||"Host",fullHeight:!0,isViewer:!0})})]})]})}},11537:(e,t,s)=>{"use strict";s.d(t,{A:()=>l});var r=s(51935);let n={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"}]]};n.node;let l=(0,r.A)(n)},23004:(e,t,s)=>{"use strict";s.d(t,{A:()=>l});var r=s(51935);let n={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"}]]};n.node;let l=(0,r.A)(n)},40087:(e,t,s)=>{"use strict";s.d(t,{A:()=>l});var r=s(51935);let n={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"}]]};n.node;let l=(0,r.A)(n)},46055:(e,t,s)=>{"use strict";s.d(t,{A:()=>c});var r=s(37876),n=s(14232),l=s(88327),i=s(12692),a=s(30179),o=s(10553);function c(e){let{streamId:t,hostName:s="Host",fullHeight:c=!1}

1=e,[d,u]=(0,n.useState)([]),[m,h]=(0,n.useState)(""),[x,f]=(0,n.useState)(null),[v,g]=(0,n.useState)(null),[p,b]=(0,n.useState)(""),w=(0,n.useRef)(null),y=(0,n.useRef)(null);(0,n.useEffect)(()=>{(async()=>{let e=await (0,o.getSession)();(null==e?void 0:e.user)&&(g(e.user.userData||e.user),b(e.user.accessToken||""))})()},[]),(0,n.useEffect)(()=>{let e=(0,i.io)("https://chat.velaflow.com",{transports:["websocket"],reconnection:!0,reconnectionAttempts:5,reconnectionDelay:1e3});return f(e),()=>{e.disconnect()}},[]),(0,n.useEffect)(()=>{if(!x||!t||!v)return;let e="live_stream_".concat(t);if(y.current===e)return;y.current=e,x.emit("join_live_stream",{streamKey:t,userId:v.id});let s=e=>{u(t=>t.some(t=>{var s,r;return t.id===e.id||t.message===e.message&&(null==(s=t.user)?void 0:s.id)===(null==(r=e.user)?void 0:r.id)})?t:[...t,e])};return x.on("receive_live_message",s),(async()=>{try{let e=await a.A.post("/live-streams/".concat(t,"/messages/list"));e.data.content&&u(e.data.content||[])}catch(e){console.error("Failed to load old messages")}})(),()=>{x.off("receive_live_message",s),y.current=null}},[x,t,v]),(0,n.useEffect)(()=>{var e;null==(e=w.current)||e.scrollIntoView({behavior:"smooth"})},[d]),(0,n.useEffect)(()=>{if(!x)return;let e=e=>{e.streamKey===t&&console.log("Viewer count updated:",e.count)};return x.on("viewer_count_updated",e),()=>{x.off("viewer_count_updated",e)}},[x,t]);let j=()=>{if(!m.trim()||!x||!v)return;let e={streamKey:t,sender_id:v.id,message:m.trim(),type:"text",accessToken:p};x.emit("send_live_message",e);let r={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,r]),h("")};return(0,r.jsxs)("div",{className:"flex flex-col bg-white border border-dividerGrey rounded-2xl overflow-hidden ".concat(c?"h-[calc(100vh-140px)]":"h-[520px]"),children:[(0,r.jsxs)("div",{className:"flex items-center justify-between px-4 py-3 border-b flex-shrink-0",children:[(0,r.jsx)("h3",{className:"text-sm font-bold",children:"Live Chat"}),(0,r.jsx)(l.A,{size:18,className:"text-grey"})]}),(0,r.jsxs)("div",{className:"flex-1 overflow-y-auto px-4 py-4 space-y-4 bg-gray-50",children:[0===d.length&&(0,r.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 n,l,i;let a=(null==(n=e.user)?void 0:n.id)===(null==v?void 0:v.id),o=a?s||(null==v?void 0:v.username)||(null==v?void 0:v.name)||"You":(null==(l=e.user)?void 0:l.username)||(null==(i=e.user)?void 0:i.name)||"User";return(0,r.jsx)("div",{className:"flex ".concat(a?"justify-end":"justify-start"),children:(0,r.jsxs)("div",{className:"max-w-[75%] px-4 py-2.5 rounded-2xl text-sm ".concat(a?"bg-[#2755ff] text-white rounded-br-none":"bg-white border border-dividerGrey text-gray-900 rounded-bl-none"),children:[!a&&(0,r.jsxs)("div",{className:"text-xs font-semibold text-[#2755ff] mb-1",children:["@",o]}),(0,r.jsx)("p",{className:a?"text-white":"text-gray-900",children:e.message}),(0,r.jsx)("div",{className:"text-[10px] mt-1 text-right ".concat(a?"text-blue-200":"text-gray-500"),children:new Date(e.created_at).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})})]})},t)})(e,t)),(0,r.jsx)("div",{ref:w})]}),(0,r.jsx)("div",{className:"p-3 border-t bg-white",children:(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)("input",{value:m,onChange:e=>h(e.target.value),onKeyDown:e=>"Enter"===e.key&&j(),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,r.jsx)("button",{onClick:j,disabled:!m.trim(),className:"px-6 py-2 bg-primary text-white rounded-full text-sm font-semibold disabled:opacity-50",children:"Send"})]})})]})}},51935:(e,t,s)=>{"use strict";s.d(t,{A:()=>o});var r=s(14232);let n=function(){for(var e=arguments.length,t=Array(e),s=0;s<e;s++)t[s]=arguments[s];return t.filter((e,t,s)=>!!e&&""!==e.trim()&&s.indexOf(e)===t).join(" ").trim()},l={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"},i=(0,r.createContext)({}),a=(0,r.forwardRef)((e,t)=>{var s,a,o;let{color:c,size:d,width:u,height:m,strokeWidth:h,absoluteStrokeWidth:x,nonScalingStroke:f,className:v="",children:g,iconNode:p=[],icon:b={node:p,aliases:[],size:24},...w}=e,{size:y=24,strokeWidth:j=2,absoluteStrokeWidth:k=!1,nonScalingStroke:N=!1,color:_="currentColor",className:z=""}=null!=(s=(0,r.useContext)(i))?s:{},A=!!g||(e=>{for(let t in e)if(t.startsWith("aria-")||"role"===t||"title"===t)return!0;return!1})(w),[S,C,E=[]]=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return function(e){var t,s,r,i,a,o,c,d,u,m,h,x,f,v,g;let p=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},b=null!=(r=p.attributeNames)?r:{},w=e=>{var t;return null!=(t=b[e])?t:e},y=null!=(a=null!=(i=e.size)?i:e.width)?a:l.width,j=null!=(c=null!=(o=e.size)?o:e.height)?c:l.he

1ight,k=null!=(d=null==(t=e.aliases)?void 0:t.filter(e=>"string"==typeof e&&""!==e.trim()).map(e=>"lucide-".concat(e)))?d:[],N=[...e.name?["lucide-".concat(e.name)]:[],...k],_=null!=(u=null==(s=p.className)?void 0:s.split(" ").filter(Boolean))?u:[],z=!1===p.includeDefaultClasses?n(..._):n("lucide",...N,..._),A=p.absoluteStrokeWidth?Number(null!=(m=p.strokeWidth)?m:l["stroke-width"])*Number(null!=(x=null!=(h=e.size)?h:e.width)?x:l.width)/Number(null!=(v=null!=(f=p.size)?f:p.width)?v:l.width):null!=(g=p.strokeWidth)?g:l["stroke-width"];return["svg",{...Object.entries(l).reduce((e,t)=>{let[s,r]=t;return e[w(s)]=r,e},{}),..."color"in p&&p.color&&{[w("stroke")]:p.color},..."size"in p&&null!=p.size&&{[w("width")]:p.size,[w("height")]:p.size},..."width"in p&&null!=p.width&&{[w("width")]:p.width},..."height"in p&&null!=p.height&&{[w("height")]:p.height},[w("stroke-width")]:A,...z&&{[w("class")]:z},[w("viewBox")]:"0 0 ".concat(y," ").concat(j),...!1===p.hasA11yProp?{[w("aria-hidden")]:"true"}:{},..."attributes"in p&&p.attributes},e.node.map(e=>{let[t,s,r]=e,n=p.nonScalingStroke?{[w("vector-effect")]:"non-scaling-stroke",...s}:s;return r?[t,n,r]:[t,n]})]}(e,{...t,attributeNames:{...t.attributeNames,class:"className","stroke-width":"strokeWidth","stroke-linecap":"strokeLinecap","stroke-linejoin":"strokeLinejoin","vector-effect":"vectorEffect"}})}(b,{color:null!=c?c:_,width:null!=(a=null!=u?u:d)?a:y,height:null!=(o=null!=m?m:d)?o:y,strokeWidth:null!=h?h:j,absoluteStrokeWidth:null!=x?x:k,nonScalingStroke:null!=f?f:N,className:n(z,v),hasA11yProp:A,attributes:w});return(0,r.createElement)(S,{ref:t,...C},[...E.map(e=>{let[t,s]=e;return(0,r.createElement)(t,s)}),...Array.isArray(g)?g:[g]])});function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],n="string"==typeof e?function(e,t){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];if(null==t)throw Error("[lucide]: iconNode is required when icon name is used");return{name:null==e?void 0:e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),size:24,node:t,...s.length>0?{aliases:s}:{}}}(e,t,s):e,l=(0,r.forwardRef)((e,t)=>{let{className:s,...l}=e;return(0,r.createElement)(a,{ref:t,icon:n,className:s,...l})});return n.name&&(l.displayName=(e=>{let t=(e=>{let t="",s=!1;for(let r of e){if("-"===r||"_"===r||r<=" "){s=t.length>0;continue}0===t.length?t+=r.toLowerCase():t+=s?r.toUpperCase():r,s=!1}return t})(e);return t.charAt(0).toUpperCase()+t.slice(1)})(n.name)),l}},77489:(e,t,s)=>{"use strict";s.d(t,{A:()=>l});var r=s(51935);let n={name:"arrow-left",size:24,node:[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]]};n.node;let l=(0,r.A)(n)},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:()=>l});var r=s(51935);let n={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"]};n.node;let l=(0,r.A)(n)}},e=>{e.O(0,[2692,636,6593,8792],()=>e(e.s=86696)),_N_E=e.O()}]);