https://www.englishexpress.ai/_next/static/chunks/pages/room-7af0e02d74fe9e73.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4361],{70711:(e,t,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/room",function(){return r(5539)}])},5539:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>u});var a=r(74848),s=r(96540),n=r(86715),o=r(79103),l=r(13368),i=r.n(l),c=r(31354),d=r(78885),m=r(60121),x=r(11583);function u(){let[e,t]=(0,s.useState)(null),[r,l]=(0,s.useState)(null),[u,h]=(0,s.useState)(!0),[g,f]=(0,s.useState)(""),[b,p]=(0,s.useState)([]),[y,j]=(0,s.useState)([]),[v,N]=(0,s.useState)(!1),[w,k]=(0,s.useState)(""),[C,S]=(0,s.useState)(!1),[_,E]=(0,s.useState)(!1),[T,I]=(0,s.useState)(""),[A,F]=(0,s.useState)(""),P=(0,n.useRouter)(),R="https://backend.englishexpress.ai";(0,s.useEffect)(()=>{L()},[]),(0,s.useEffect)(()=>{e&&r&&(O(),z())},[e,r]),(0,s.useEffect)(()=>{""===A.trim()?j(b):j(b.filter(e=>e.name.toLowerCase().includes(A.toLowerCase())||e.created_by.name.toLowerCase().includes(A.toLowerCase())))},[A,b]);let L=async()=>{try{let e=JSON.parse(localStorage.getItem("myuser"))||JSON.parse(sessionStorage.getItem("myuser"));if(!e||!e.token){P.push("/login");return}let r=await fetch("".concat(R,"/auth/verify/"),{method:"GET",headers:{Authorization:"Bearer ".concat(e.token),"Content-Type":"application/json"}}),a=await r.json();if(a.success)t(a.user),l(e.token);else{localStorage.removeItem("myuser"),sessionStorage.removeItem("myuser"),P.push("/login");return}}catch(e){console.error("Authentication check failed:",e),I("Authentication failed. Please log in again."),P.push("/login");return}finally{h(!1)}},O=async()=>{try{let e=await fetch("".concat(R,"/config/agora/"),{method:"GET",headers:{Authorization:"Bearer ".concat(r),"Content-Type":"application/json"}}),t=await e.json();t.success?f(t.agora_app_id):(console.error("Failed to fetch Agora config:",t.error),I("Failed to load voice chat configuration. Please try again later."))}catch(e){console.error("Error fetching Agora config:",e),I("Failed to connect to the server. Please check your connection.")}},z=async()=>{try{N(!0);let e=await fetch("".concat(R,"/rooms/"),{method:"GET",headers:{Authorization:"Bearer ".concat(r),"Content-Type":"application/json"}}),t=await e.json();t.success?(p(t.rooms),j(t.rooms)):(console.error("Failed to fetch rooms:",t.error),(t.error.includes("Token")||t.error.includes("token"))&&(localStorage.removeItem("myuser"),sessionStorage.removeItem("myuser"),P.push("/login")),I("Failed to load rooms. Please try again later."))}catch(e){console.error("Error fetching rooms:",e),I("Failed to connect to the server. Please check your connection.")}finally{N(!1)}},J=async()=>{if(!w.trim()){I("Please enter a room name");return}try{E(!0),I("");let e=await fetch("".concat(R,"/rooms/create/"),{method:"POST",headers:{Authorization:"Bearer ".concat(r),"Content-Type":"application/json"},body:JSON.stringify({name:w,token:r})}),t=await e.json();t.success?(k(""),S(!1),z(),P.push("/room/".concat(t.room.channel_id))):(I("Failed to create room: "+t.error),(t.error.includes("Token")||t.error.includes("token"))&&(localStorage.removeItem("myuser"),sessionStorage.removeItem("myuser"),P.push("/login")))}catch(e){console.error("Error creating room:",e),I("Error creating room. Please try again.")}finally{E(!1)}},B=e=>{P.push("/room/".concat(e.channel_id))},G=e=>{if(!e)return"";let t=(e=>{if("string"!=typeof e)return e;let t=e.match(/^(.*T\d{2}:\d{2}:\d{2})(?:\.(\d+))?(Z|[+-]\d{2}:\d{2})?$/);if(!t)return e;let r=t[1],a=t[2]||"",s=t[3]||"";if(!a)return"".concat(r).concat(s);let n=a.slice(0,3);for(;n.length<3;)n+="0";return"".concat(r,".").concat(n).concat(s)})(e),r=new Date,a=new Date(t);if(isNaN(a))return e;let s=Math.floor((r-a)/1e3);if(s<0&&(s=0),s<60)return"".concat(s," second").concat(1!==s?"s":""," ago");if(s<3600){let e=Math.floor(s/60);return"".concat(e," minute").concat(1!==e?"s":""," ago")}if(s<86400){let e=Math.floor(s/3600);return"".concat(e," hour").concat(1!==e?"s":""," ago")}return a.toLocaleString(void 0,{month:"short",day:"numeric",year:"numeric"})};return u?(0,a.jsx)("div",{className:"flex justify-center items-center min-h-screen bg-gray-50 dark:bg-[#080c11] text-gray-900 dark:text-gray-100",children:(0,a.jsxs)("div",{className:"w-20 h-20 relative",children:[(0,a.jsx)("div",{className:"w-20 h-20 rounded-full border-4 border-blue-500 border-t-transparent animate-spin"}),(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,a.jsx)(m.IM0,{className:"text-blue-500 text-xl animate-pulse"})})]})}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(i(),{children:[(0,a.jsx)("title",{children:"Voice Rooms | EnglishExpress"}),(0,a.jsx)("meta",{name:"description",content:"Join voice chat rooms to practice English with other learners"}),(0,a.jsx)("link",{rel:"icon",href:"/logo.ico"})]}),(0,a.jsx)(o.A,{}),(0,a.jsx)("div",{className:"min-h-screen bg-gray-50 dark:bg-[#080c11] text-gray-900 dark:text-gray-100 pt-6 pb-16 px-4 sm:px-6",children:(0,a.jsxs)("div",{className:"max-w-7xl mx-auto",children:[(0,a.jsxs)("div",{className:"flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("h1",{className:"text-3xl md:text-4xl font-bold flex items-center gap-3 font-montserrat text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-500",children:[(0,a.jsx)(m.IM0,{className:"text-blue-500"})," Voice Rooms"]}),(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-400 mt-2 font-futura2 max-w-2xl",children:"Connect with other learners in real-time voice rooms to practice English conversation. Join an existing room or create your own."})]}),(0,a.jsxs)("button",{onClick:()=>S(!0),className:"flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-5 rounded-full transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50",children:[(0,a.jsx)(x.OiG,{className:"text-sm"})," Create Room"]})]}),T&&(0,a.jsx)("div",{className:"bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 rounded-lg p-4 mb-6 text-red-700 dark:text-red-400",children:T}),(0,a.jsx)("div",{className:"bg-white dark:bg-[#101419] rounded-2xl shadow-md p-4 mb-8",children:(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("div",{className:"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none",children:(0,a.jsx)(d.zfp,{className:"text-gray-400 text-xl"})}),(0,a.jsx)("input",{type:"text",placeholder:"Search rooms by name or creator...",value:A,onChange:e=>F(e.target.value),className:"w-full pl-12 pr-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-gray-900 dark:text-gray-100"})]})}),C&&(0,a.jsx)("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-70",children:(0,a.jsxs)("div",{className:"bg-white dark:bg-[#101419] rounded-2xl shadow-xl p-6 max-w-md w-full animate-fadeIn",children:[(0,a.jsxs)("div",{className:"flex justify-between items-center mb-6",children:[(0,a.jsx)("h2",{className:"text-2xl font-bold font-montserrat",children:"Create New Room"}),(0,a.jsx)("button",{onClick:()=>S(!1),className:"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",children:"✕"})]}),(0,a.jsxs)("div",{className:"mb-6",children:[(0,a.jsx)("label",{className:"block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2",children:"Room Name"}),(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("div",{className:"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none",children:(0,a.jsx)(d.I79,{className:"text-gray-400"})}),(0,a.jsx)("input",{type:"text",value:w,onChange:e=>k(e.target.value),placeholder:"Give your room a name...",className:"w-full pl-10 pr-4 py-3 rounded-xl bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-gray-900 dark:text-gray-100",onKeyPress:e=>"Enter"===e.key&&J()})]}),(0,a.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400 mt-2",children:"Choose a descriptive name so others know what to expect"})]}),(0,a.jsxs)("div",{className:"flex justify-end gap-3",children:[(0,a.jsx)("button",{onClick:()=>S(!1),className:"px-5 py-2 rounded-xl font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all",children:"Cancel"}),(0,a.jsx)("button",{onClick:J,disabled:_||!w.trim(),className:"px-5 py-2 rounded-xl font-medium transition-all ".concat(_||!w.trim()?"bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed":"bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg"),children:_?"Creating...":"Create & Join"})]})]})}),v?(0,a.jsx)("div",{className:"flex justify-center items-center py-20",children:(0,a.jsx)("div",{className:"w-16 h-16 rounded-full border-4 border-blue-500 border-t-transparent animate-spin"})}):0===y.length?(0,a.jsxs)("div",{className:"bg-white dark:bg-[#101419] rounded-2xl shadow-md p-8 text-center",children:[A?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"inline-block p-4 bg-gray-100 dark:bg-gray-800 rounded-full mb-4",children:(0,a.jsx)(d.zfp,{className:"text-gray-500 text-3xl"})}),(0,a.jsx)("h3",{className:"text-xl font-bold mb-2 font-montserrat",children:"No matching rooms found"}),(0,a.jsxs)("p",{className:"text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto",children:["We couldn't find any rooms matching \"",(0,a.jsx)("span",{className:"font-medium",children:A}),'". Try a different search or create your own room.']})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"inline-block p-4 bg-gray-100 dark:bg-gray-800 rounded-full mb-4",children:(0,a.jsx)(d.I79,{className:"text-blue-500 text-3xl"})}),(0,a.jsx)("h3",{className:"text-xl font-bold mb-2 font-montserrat",children:"No Active Rooms"}),(0,a.jsx)("p",{className:"text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto",children:"Be the first to create a voice room and start a conversation with other learners!"})]}),(0,a.jsxs)("button",{onClick:()=>S(!0),className:"inline-flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-xl transition-all duration-300 shadow-md hover:shadow-lg",children:[(0,a.jsx)(x.OiG,{})," Create New Room"]})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mb-8",children:y.map(e=>(0,a.jsx)("div",{className:"bg-white dark:bg-[#101419] rounded-2xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:translate-y-[-4px] border border-gray-100 dark:border-gray-800",children:(0,a.jsxs)("div",{className:"p-6",children:[(0,a.jsxs)("div",{className:"flex justify-between items-start mb-4",children:[(0,a.jsx)("h3",{className:"text-xl font-bold font-montserrat line-clamp-1",children:e.name}),(0,a.jsxs)("div",{className:"flex items-center gap-1 text-sm font-medium px-3 py-1 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",children:[(0,a.jsx)("span",{className:"w-2 h-2 rounded-full bg-green-500"}),(0,a.jsx)("span",{children:"Live"})]})]}),(0,a.jsxs)("div",{className:"space-y-3 mb-5",children:[(0,a.jsxs)("div",{className:"flex items-center gap-3 text-gray-600 dark:text-gray-400",children:[(0,a.jsx)("div",{className:"flex-shrink-0 w-9 h-9 rounded-full bg-blue-100 dar

1k:bg-blue-900/30 flex items-center justify-center",children:(0,a.jsx)(d.SNd,{className:"text-blue-500"})}),(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{className:"text-sm",children:"Created by"}),(0,a.jsx)("p",{className:"font-medium text-gray-900 dark:text-gray-200",children:e.created_by.name})]})]}),(0,a.jsxs)("div",{className:"flex items-center gap-3 text-gray-600 dark:text-gray-400",children:[(0,a.jsx)("div",{className:"flex-shrink-0 w-9 h-9 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center",children:(0,a.jsx)(d.YmN,{className:"text-purple-500"})}),(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{className:"text-sm",children:"Created"}),(0,a.jsx)("p",{className:"font-medium text-gray-900 dark:text-gray-200",children:G(e.created_at)})]})]})]}),(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("div",{className:"w-2 h-2 rounded-full bg-blue-500"}),(0,a.jsxs)("span",{className:"text-sm font-medium text-blue-500",children:[e.active_participants_count," active ",1===e.active_participants_count?"participant":"participants"]})]}),(0,a.jsx)("button",{onClick:()=>B(e),disabled:!g,className:"px-4 py-2 rounded-xl font-medium transition-all ".concat(g?"bg-blue-500 hover:bg-blue-600 text-white":"bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-500 cursor-not-allowed"),children:"Join Room"})]})]})},e.channel_id))}),y.length>9&&(0,a.jsx)("div",{className:"flex justify-center mt-6",children:(0,a.jsxs)("button",{onClick:()=>{z()},className:"flex items-center gap-2 text-blue-500 hover:text-blue-600 font-medium",children:[(0,a.jsx)("span",{children:"Refresh Rooms"}),(0,a.jsx)("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"})})]})})]}),!1]})}),(0,a.jsx)(c.A,{})]})}},13368:(e,t,r)=>{e.exports=r(86085)}},e=>{var t=t=>e(e.s=t);e.O(0,[7551,5354,715,1106,226,2648,636,6593,8792],()=>t(70711)),_N_E=e.O()}]);