https://karacoro.vercel.app/_next/static/chunks/5026.022c73bf91a1162e.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5026],{75026:(e,s,a)=>{a.r(s),a.d(s,{VideoQueue:()=>K});var r=a(95155),t=a(12115),l=a(34357),o=a(97003),d=a(33789),i=a(83209),n=a(27346),c=a(90923),m=a(67812),h=a(52056),A=a(26983),x=a(93499),g=a(57828),u=a(27189),f=a(35299),p=a(43586),b=a(36168),w=a(6191),j=a(86651),v=a(71360),y=a(20508),N=a(37838),C=a(65820),k=a(15239);let K=(0,t.memo)(e=>{let{queue:s,isHost:a,onAddToQueue:K,onRemoveFromQueue:Q}=e,[B,R]=(0,t.useState)(""),[E,S]=(0,t.useState)(""),[M]=(0,l.d7)(E,500),[Y,I]=(0,t.useState)([]),[D,U]=(0,t.useState)([]),[T,F]=(0,t.useState)(!1),[G,H]=(0,t.useState)(!1),[P,L]=(0,t.useState)(!1),[q,z]=(0,t.useState)(null),[J,X]=(0,t.useState)(!1),[W,_]=(0,t.useState)(!1),[O,$]=(0,t.useState)(null);(0,t.useEffect)(()=>{(async()=>{L(!0);try{let e=await fetch("/api/youtube/popular");if(!e.ok){let s=await e.json().catch(()=>({}));throw console.error("API error:",s),Error(s.error||"HTTP ".concat(e.status,": Failed to load popular songs"))}let s=await e.json();if(!s.results||!Array.isArray(s.results))throw Error("Invalid response format from API");let a=s.results.filter(e=>{let s=(e.title||"").toLowerCase(),a=(e.channelTitle||"").toLowerCase();return!s.includes("sing king")&&!a.includes("sing king")});U(a),_(s.mock||!1),s.mock&&C.oR.info("Using sample songs - YouTube API unavailable")}catch(s){console.error("Error loading popular songs:",s);let e=s instanceof Error?s.message:"Failed to load popular songs";C.oR.error(e)}finally{L(!1)}})()},[]),(0,t.useEffect)(()=>{if(!M.trim()){I([]),$(null);return}(async()=>{F(!0),$(null);try{let e=await fetch("/api/youtube/search?q=".concat(encodeURIComponent(M),"&maxResults=15"));if(429===e.status){C.oR.error("Too many requests. Please wait a minute and try again."),F(!1);return}if(!e.ok){let s=await e.text().catch(()=>"Search failed");throw Error(s||"Search failed")}let s=await e.json(),a=s.results.filter(e=>"sing king"!==e.channelTitle.toLowerCase());I(a),X(s.isMock||!1),s.isMock&&C.oR.info("Using mock search results - YouTube API not configured",{description:"Configure your YouTube API key for real search results"})}catch(e){console.error("Search error:",e),$('YouTube search is currently unavailable. Please use "Add by YouTube URL" above.')}finally{F(!1)}})()},[M]),(0,t.useEffect)(()=>()=>{},[]);let V=async()=>{if(!B.trim())return void C.oR.error("Please enter a YouTube URL");if(!(0,N.XK)(B))return void C.oR.error("Please enter a valid YouTube URL");let e=(0,N.Q9)(B);if(!e)return void C.oR.error("Could not extract video ID from URL");H(!0);try{if(!await (0,N.zd)(e))return void C.oR.error("This video cannot be embedded and played");let s=await (0,N.e_)(e);if(!s)return void C.oR.error("Could not fetch video details");s.duration>600&&C.oR.warning("Video is longer than 10 minutes - consider shorter songs for karaoke");let a=(0,N.ed)(e,"medium");K(B,s.title,s.duration,a),R(""),C.oR.success('Added "'.concat(s.title,'" to queue!'))}catch(e){console.error("Error adding video:",e),C.oR.error("Failed to add video. Please check the URL and try again.")}finally{H(!1)}},Z=async()=>{if(!E.trim())return void C.oR.error("Please enter a search term")},ee=async e=>{z(e.id);try{if(!await (0,N.zd)(e.id))return void C.oR.error("This video cannot be embedded and played");let s="https://www.youtube.com/watch?v=".concat(e.id),a=await (0,N.e_)(e.id),r=(null==a?void 0:a.duration)||0,t=e.thumbnail||(null==a?void 0:a.thumbnail)||(0,N.ed)(e.id,"medium");K(s,e.title,r,t),C.oR.success('Added "'.concat(e.title,'" to queue!'))}catch(e){console.error("Error adding video from search:",e),C.oR.error("Failed to add video")}finally{z(null)}},es=(e,s)=>{"Enter"===e.key&&("search"===s?Z():V())},ea=e=>{window.open("https://www.youtube.com/watch?v=".concat(e),"_blank")};return(0,r.jsxs)("div",{className:"space-y-4 sm:space-y-6",children:[(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 sm:gap-3",children:[(0,r.jsx)("div",{className:"p-1.5 sm:p-2 bg-gradient-to-br from-red-500/30 to-red-600/20 rounded-lg shadow-lg shadow-red-500/20",children:(0,r.jsx)(u.A,{className:"w-5 h-5 sm:w-6 sm:h-6 text-red-400"})}),(0,r.jsxs)("div",{children:[(0,r.jsx)("h2",{className:"text-xl sm:text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent",children:"Video Queue"}),(0,r.jsx)("p",{className:"text-sm sm:text-base text-gray-400 hidden sm:block",children:"Add songs and manage the karaoke queue"})]})]}),(0,r.jsxs)(m.E,{variant:"secondary",className:"bg-gradient-to-r from-red-500/20 to-red-600/20 text-red-400 border border-red-500/30 px-2 sm:px-3 py-1 text-sm shadow-lg shadow-red-500/10",children:[s.length," in queue"]})]}),(0,r.jsx)(i.Zp,{className:"bg-gray-800/50 backdrop-blur-xl border-red-500/30 shadow-2xl shadow-red-500/10 overflow-hidden",children:(0,r.jsxs)(c.tU,{defaultValue:"add",className:"w-full",children:[(0,r.jsx)("div",{className:"border-b border-gray-700 bg-gradient-to-r from-gray-900/80 via-gray-900/70 to-gray-900/80 overflow-hidden",children:(0,r.jsxs)(c.j7,{className:"grid w-full grid-cols-3 bg-transparent border-none h-12 sm:h-14 overflow-hidden",children:[(0,r.jsxs)(c.Xi,{value:"add",className:"data-[state=active]:bg-gradient-to-r data-[state=active]:from-red-500/20 data-[state=active]:to-red-600/20 data-[state=active]:text-red-400 data-[state=active]:border-b-2 data-[state=active]:border-red-500 rounded-none border-b-2 border-transparent transition-all text-xs sm:text-sm overflow-hidden hover:bg-gray-800/50",children:[(0,r.jsx)(w.A,{className:"w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0"}),(0,r.jsx)("span",{className:"hidden sm:inline truncate",children:"Add Songs"}),(0,r.jsx)("span",{className:"sm:hidden truncate",children:"Add"})]}),(0,r.jsxs)(c.Xi,{value:"popular",className:"data-[state=active]:bg-gradient-to-r data-[state=active]:from-red-500/20 data-[state=active]:to-red-600/20 data-[state=active]:text-red-400 data-[state=active]:border-b-2 data-[state=active]:border-red-500 rounded-none border-b-2 border-transparent transition-all text-xs sm:text-sm overflow-hidden hover:bg-gray-800/50",children:[(0,r.jsx)(p.A,{className:"w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0"}),(0,r.jsx)("span",{className:"hidden sm:inline truncate",children:"Popular"}),(0,r.jsx)("span",{className:"sm:hidden truncate",children:"Top"}),W&&(0,r.jsx)(m.E,{variant:"secondary",className:"ml-1 text-xs bg-yellow-500/20 text-yellow-400 hidden sm:inline-flex flex-shrink-0",children:"MOCK"})]}),(0,r.jsxs)(c.Xi,{value:"queue",className:"data-[state=active]:bg-gradient-to-r data-[state=active]:from-red-500/20 data-[state=active]:to-red-600/20 data-[state=active]:text-red-400 data-[state=active]:border-b-2 data-[state=active]:border-red-500 rounded-none border-b-2 border-transparent transition-all text-xs sm:text-sm overflow-hidden hover:bg-gray-800/50",children:[(0,r.jsx)(b.A,{className:"w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0"}),(0,r.jsxs)("span",{className:"hidden sm:inline truncate",children:["Queue (",s.length,")"]}),(0,r.jsxs)("span",{className:"sm:hidden truncate",children:["Q (",s.length,")"]})]})]})}),(0,r.jsxs)("div",{className:"p-4 sm:p-6 overflow-hidden",children:[(0,r.jsxs)(c.av,{value:"add",className:"space-y-4 sm:sp

1ace-y-6 mt-0",children:[(0,r.jsxs)("div",{className:"space-y-3 sm:space-y-4",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 mb-2 sm:mb-3",children:[(0,r.jsx)("div",{className:"w-2 h-2 bg-red-500 rounded-full animate-pulse"}),(0,r.jsx)("h3",{className:"text-base sm:text-lg font-semibold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent",children:"Add by YouTube URL"})]}),(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row gap-2 sm:gap-3",children:[(0,r.jsx)(d.p,{placeholder:"Paste YouTube URL here...",value:B,onChange:e=>R(e.target.value),className:"flex-1 bg-gray-700/50 border-gray-600 text-white placeholder-gray-400 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 h-10 sm:h-12 text-sm sm:text-base rounded-xl transition-all",onKeyPress:e=>es(e,"url"),disabled:G}),(0,r.jsx)(o.$,{onClick:V,disabled:G||!B.trim(),className:"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-lg shadow-red-500/30 px-4 sm:px-6 h-10 sm:h-12 text-sm sm:text-base w-full sm:w-auto transition-all hover:scale-105",children:G?(0,r.jsx)(f.A,{className:"w-4 h-4 animate-spin"}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(w.A,{className:"w-4 h-4 mr-1 sm:mr-0"}),(0,r.jsx)("span",{className:"sm:hidden",children:"Add Video"})]})})]}),(0,r.jsx)("p",{className:"text-xs text-gray-400",children:"Supports youtube.com and youtu.be URLs. Non-embeddable videos will be automatically filtered out."})]}),(0,r.jsxs)("div",{className:"space-y-3 sm:space-y-4",children:[(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row sm:items-center gap-2 mb-2 sm:mb-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)("div",{className:"w-2 h-2 bg-red-500 rounded-full animate-pulse"}),(0,r.jsx)("h3",{className:"text-base sm:text-lg font-semibold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent",children:"Search YouTube"})]}),J&&(0,r.jsxs)(m.E,{variant:"secondary",className:"bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 text-xs self-start sm:self-auto",children:[(0,r.jsx)(h.A,{className:"w-3 h-3 mr-1"}),"MOCK DATA"]})]}),(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row gap-2 sm:gap-3",children:[(0,r.jsx)(d.p,{placeholder:"Search for karaoke songs...",value:E,onChange:e=>{S(e.target.value)},className:"flex-1 bg-gray-700/50 border-gray-600 text-white placeholder-gray-400 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 h-10 sm:h-12 text-sm sm:text-base rounded-xl transition-all",onKeyPress:e=>es(e,"search"),disabled:T}),(0,r.jsx)(o.$,{onClick:Z,disabled:T||!E.trim(),className:"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-lg shadow-red-500/30 px-4 sm:px-6 h-10 sm:h-12 text-sm sm:text-base w-full sm:w-auto transition-all hover:scale-105",children:T?(0,r.jsx)(f.A,{className:"w-4 h-4 animate-spin"}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(j.A,{className:"w-4 h-4 mr-1 sm:mr-0"}),(0,r.jsx)("span",{className:"sm:hidden",children:"Search"})]})})]}),O&&(0,r.jsxs)("div",{className:"text-sm text-yellow-300 bg-yellow-900/10 border border-yellow-800/20 rounded-md p-3 text-right",children:[(0,r.jsx)("strong",{children:"Search unavailable:"})," ",O]}),J&&(0,r.jsxs)("div",{className:"bg-yellow-900/30 border border-yellow-500/30 rounded-lg p-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 text-yellow-300 text-sm",children:[(0,r.jsx)(h.A,{className:"w-4 h-4"}),(0,r.jsx)("span",{className:"font-medium",children:"Mock Search Results"})]}),(0,r.jsx)("p",{className:"text-yellow-200 text-xs mt-1",children:"Configure your YouTube API key in environment variables for real search results"})]}),Y.length>0&&(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsx)("div",{className:"flex items-center justify-between",children:(0,r.jsxs)("h4",{className:"text-base sm:text-lg font-semibold text-white",children:["Search Results ",J?"(Mock Data)":"(Live Results)"]})}),(0,r.jsx)("div",{className:"max-h-64 sm:max-h-80 overflow-y-auto border border-gray-700/50 rounded-lg scrollbar-hide",children:(0,r.jsx)("div",{className:"space-y-2 sm:space-y-3 p-2 sm:p-4",children:Y.map(e=>(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-gray-700/30 to-gray-800/30 rounded-lg hover:from-gray-700/50 hover:to-gray-800/50 transition-all group border border-gray-600/30 hover:border-red-500/30",children:[(0,r.jsx)(k.default,{src:e.thumbnail,alt:e.title,width:96,height:72,className:"w-full sm:w-20 md:w-24 h-auto sm:h-15 md:h-18 object-cover rounded-md flex-shrink-0",style:{width:"auto",height:"auto"},loading:"lazy",placeholder:"blur",blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="}

1),(0,r.jsxs)("div",{className:"flex-1 min-w-0 w-full sm:w-auto",children:[(0,r.jsx)("h4",{className:"text-sm font-medium text-white group-hover:text-red-400 transition-colors line-clamp-2",children:e.title}),(0,r.jsx)("p",{className:"text-xs text-gray-400 truncate mt-1",children:e.channelTitle}),(0,r.jsxs)("div",{className:"flex flex-wrap items-center gap-2 sm:gap-3 mt-2",children:[(0,r.jsx)(m.E,{variant:"secondary",className:"text-xs bg-gray-600 text-gray-300",children:e.duration}),J&&(0,r.jsx)(m.E,{variant:"secondary",className:"text-xs bg-yellow-500/20 text-yellow-400",children:"Mock"}),(0,r.jsxs)("button",{onClick:()=>ea(e.id),className:"text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1 transition-colors",children:[(0,r.jsx)(x.A,{className:"w-3 h-3"}),"Preview"]})]})]}),(0,r.jsx)(o.$,{onClick:()=>ee(e),size:"sm",disabled:q===e.id,className:"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-lg shadow-red-500/20 flex-shrink-0 w-full sm:w-auto transition-all hover:scale-105",children:q===e.id?(0,r.jsx)(f.A,{className:"w-4 h-4 animate-spin"}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(w.A,{className:"w-4 h-4 mr-1 sm:mr-0"}),(0,r.jsx)("span",{className:"sm:hidden",children:"Add to Queue"})]})})]},e.id))})})]})]})]}),(0,r.jsx)(c.av,{value:"popular",className:"mt-0",children:(0,r.jsxs)("div",{className:"space-y-3 sm:space-y-4",children:[(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row sm:items-center gap-2",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)("div",{className:"w-2 h-2 bg-red-500 rounded-full animate-pulse"}),(0,r.jsx)("h3",{className:"text-base sm:text-lg font-semibold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent",children:"Popular Karaoke Songs"})]}),W&&(0,r.jsxs)(m.E,{variant:"secondary",className:"bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 text-xs self-start sm:self-auto",children:[(0,r.jsx)(h.A,{className:"w-3 h-3 mr-1"}),"MOCK DATA"]})]}),W&&(0,r.jsxs)("div",{className:"bg-yellow-900/30 border border-yellow-500/30 rounded-lg p-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2 text-yellow-300 text-sm",children:[(0,r.jsx)(h.A,{className:"w-4 h-4"}),(0,r.jsx)("span",{className:"font-medium",children:"Mock Popular Songs"})]}),(0,r.jsx)("p",{className:"text-yellow-200 text-xs mt-1",children:"Configure your YouTube API key in environment variables for real popular songs"})]}),P?(0,r.jsx)("div",{className:"flex items-center justify-center py-12",children:(0,r.jsxs)("div",{className:"text-center",children:[(0,r.jsx)(f.A,{className:"w-8 h-8 animate-spin text-red-500 mx-auto mb-3"}),(0,r.jsx)("span",{className:"text-gray-400",children:"Loading popular songs..."})]})}):D.length>0?(0,r.jsx)("div",{className:"max-h-64 sm:max-h-96 overflow-y-auto border border-gray-700/50 rounded-lg scrollbar-hide",children:(0,r.jsx)("div",{className:"space-y-2 sm:space-y-3 p-2 sm:p-4",children:D.map(e=>(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-gray-700/30 to-gray-800/30 rounded-lg hover:from-gray-700/50 hover:to-gray-800/50 transition-all group border border-gray-600/30 hover:border-red-500/30",children:[(0,r.jsx)(k.default,{src:e.thumbnail,alt:e.title,width:96,height:72,className:"w-full sm:w-20 md:w-24 h-auto sm:h-15 md:h-18 object-cover rounded-md flex-shrink-0",style:{width:"auto",height:"auto"},loading:"lazy",placeholder:"blur",blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="}

1),(0,r.jsxs)("div",{className:"flex-1 min-w-0 w-full sm:w-auto",children:[(0,r.jsx)("h4",{className:"text-sm font-medium text-white group-hover:text-red-400 transition-colors line-clamp-2",children:e.title}),(0,r.jsx)("p",{className:"text-xs text-gray-400 truncate mt-1",children:e.channelTitle}),(0,r.jsxs)("div",{className:"flex flex-wrap items-center gap-2 sm:gap-3 mt-2",children:[(0,r.jsx)(m.E,{variant:"secondary",className:"text-xs bg-gray-600 text-gray-300",children:e.duration}),W&&(0,r.jsx)(m.E,{variant:"secondary",className:"text-xs bg-yellow-500/20 text-yellow-400",children:"Mock"}),(0,r.jsxs)("button",{onClick:()=>ea(e.id),className:"text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1 transition-colors",children:[(0,r.jsx)(x.A,{className:"w-3 h-3"}),"Preview"]})]})]}),(0,r.jsx)(o.$,{onClick:()=>ee(e),size:"sm",disabled:q===e.id,className:"bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-lg shadow-red-500/20 flex-shrink-0 w-full sm:w-auto transition-all hover:scale-105",children:q===e.id?(0,r.jsx)(f.A,{className:"w-4 h-4 animate-spin"}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(w.A,{className:"w-4 h-4 mr-1 sm:mr-0"}),(0,r.jsx)("span",{className:"sm:hidden",children:"Add to Queue"})]})})]},e.id))})}):(0,r.jsxs)("div",{className:"text-center py-12 text-gray-400",children:[(0,r.jsx)(p.A,{className:"w-12 h-12 mx-auto mb-3 opacity-50"}),(0,r.jsx)("p",{className:"text-lg font-medium",children:"No popular songs available"}),(0,r.jsx)("p",{className:"text-sm",children:"Try searching for specific songs instead"})]})]})}),(0,r.jsx)(c.av,{value:"queue",className:"mt-0",children:(0,r.jsxs)("div",{className:"space-y-3 sm:space-y-4",children:[(0,r.jsxs)("div",{className:"flex items-center gap-2",children:[(0,r.jsx)("div",{className:"w-2 h-2 bg-red-500 rounded-full animate-pulse"}),(0,r.jsx)("h3",{className:"text-base sm:text-lg font-semibold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent",children:"Current Queue"})]}),0===s.length?(0,r.jsxs)("div",{className:"text-center py-12 text-gray-400",children:[(0,r.jsx)(b.A,{className:"w-16 h-16 mx-auto mb-4 opacity-50"}),(0,r.jsx)("p",{className:"text-xl font-medium mb-2",children:"Queue is empty"}),(0,r.jsx)("p",{className:"text-sm",children:"Add some videos to get the party started!"})]}):(0,r.jsx)(n.F,{className:"max-h-80 sm:max-h-[28rem]",children:(0,r.jsx)("div",{className:"space-y-2 sm:space-y-3 pr-2 sm:pr-4",children:s.map((e,s)=>(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-gray-700/30 to-gray-800/30 rounded-lg hover:from-gray-700/50 hover:to-gray-800/50 transition-all group border border-gray-600/30 hover:border-red-500/30",children:[(0,r.jsxs)("div",{className:"flex items-center gap-3 w-full sm:w-auto",children:[(0,r.jsx)("div",{className:"flex-shrink-0 w-6 h-6 sm:w-8 sm:h-8 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-xs sm:text-sm font-bold text-white shadow-lg shadow-red-500/30",children:s+1}),(0,r.jsx)(k.default,{src:e.thumbnail,alt:e.title,width:80,height:60,className:"w-16 h-12 sm:w-20 sm:h-15 object-cover rounded-md flex-shrink-0",style:{width:"auto",height:"auto"},loading:"lazy",placeholder:"blur",blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="}),(0,r.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,r.jsx)("h4",{className:"text-sm font-medium text-white group-hover:text-red-400 transition-colors line-clamp-2",children:e.title}),(0,r.jsxs)("div",{className:"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 text-xs text-gray-400 mt-1",children:[(0,r.jsxs)("div",{className:"flex items-center gap-1",children:[(0,r.jsx)(y.A,{className:"w-3 h-3"}),(0,r.jsx)("span",{children:e.addedBy})]}),e.duration>0&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"hidden sm:inline",children:"•"}),(0,r.jsxs)("div",{className:"flex items-center gap-1",children:[(0,r.jsx)(A.A,{className:"w-3 h-3"}),(0,r.jsx)("span",{children:(e=>{if(0===e)return"Unknown";let s=Math.floor(e/60);return"".concat(s,":").concat((e%60).toString().padStart(2,"0"))})(e.duration)})]})]})]})]})]}),(0,r.jsxs)("div",{className:"flex items-center gap-2 flex-shrink-0 w-full sm:w-auto justify-end sm:justify-start",children:[(0,r.jsx)(o.$,{onClick:()=>ea(e.videoId),size:"sm",variant:"ghost",className:"text-gray-400 hover:text-white h-8 w-8 p-0",children:(0,r.jsx)(g.A,{className:"w-4 h-4"})}),a&&(0,r.jsx)(o.$,{onClick:()=>Q(e.id),size:"sm",variant:"ghost",className:"text-red-400 hover:text-red-300 hover:bg-red-500/20 h-8 w-8 p-0",children:(0,r.jsx)(v.A,{className:"w-4 h-4"})})]})]},e.id))})})]})})]})]})})]})},(e,s)=>

1e.queue===s.queue&&e.isHost===s.isHost&&e.onAddToQueue===s.onAddToQueue&&e.onRemoveFromQueue===s.onRemoveFromQueue)}}]);