function MainComponent() { const [selectedMenu, setSelectedMenu] = useState("movies"); const [searchQuery, setSearchQuery] = useState(""); const [items, setItems] = useState([]); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [selectedMovie, setSelectedMovie] = useState(null); const [addons, setAddons] = useState([ { id: 1, name: "YouTube", description: "Watch YouTube videos", icon: "fab fa-youtube", installed: false }, { id: 2, name: "Twitch", description: "Watch Twitch streams", icon: "fab fa-twitch", installed: false }, { id: 3, name: "SoundCloud", description: "Listen to SoundCloud music", icon: "fab fa-soundcloud", installed: false } ]); const API_KEY = "194d885d6be15594b97e2d1f3b2526be"; const BASE_URL = "https://api.themoviedb.org/3"; const POSTER_BASE = "https://image.tmdb.org/t/p/w500"; const [currentBackdrop, setCurrentBackdrop] = useState(null); const [selectedAlbum, setSelectedAlbum] = useState(null); const [tracks, setTracks] = useState([]); const [previewUrl, setPreviewUrl] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const audioRef = useRef(null); useEffect(()=>{ const fetchBackdrops = async ()=>{ const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}`); const data = await response.json(); const backdrops = data.results.filter((movie)=>movie.backdrop_path).map((movie)=>({ path: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`, title: movie.title })); let index = 0; setCurrentBackdrop(backdrops[0]); setInterval(()=>{ index = (index + 1) % backdrops.length; setCurrentBackdrop(backdrops[index]); }, 5000); }; fetchBackdrops(); }, []); useEffect(()=>{ const fetchData = async ()=>{ if (selectedMenu === "addons") { return; } if (selectedMenu === "music") { try { let url; if (searchQuery) { url = `https://itunes.apple.com/search?term=${encodeURIComponent(searchQuery)}&entity=album`; } else { url = `https://itunes.apple.com/search?term=${encodeURIComponent("Midtown Road")}&entity=album`; } const response = await fetch(url); const data = await response.json(); const albums = data.results.map((item)=>({ id: item.collectionId, title: item.collectionName, poster: item.artworkUrl100.replace("100x100", "600x600"), artist: item.artistName })); setItems(albums); } catch (error) { console.error("Error fetching music data:", error); setItems([]); } return; } let endpoint; if (searchQuery) { endpoint = `/search/${selectedMenu === "movies" ? "movie" : "tv"}?api_key=${API_KEY}&query=${encodeURIComponent(searchQuery)}`; } else { endpoint = `/${selectedMenu === "movies" ? "movie" : "tv"}/popular?api_key=${API_KEY}`; } const response = await fetch(`${BASE_URL}${endpoint}&api_key=${API_KEY}`); const data = await response.json(); const formattedData = data.results.map((item)=>({ id: item.id, title: item.title || item.name, poster: item.poster_path ? `${POSTER_BASE}${item.poster_path}` : null, rating: item.vote_average })); setItems(formattedData); }; if (selectedMenu === "addons") { setItems([]); } else if (selectedMenu === "movies" || selectedMenu === "tvshows" || selectedMenu === "music") { fetchData(); } else { setItems([]); } }, [ selectedMenu, searchQuery ]); useEffect(()=>{ const fetchTracks = async ()=>{ if (!selectedAlbum) return; try { const response = await fetch(`https://itunes.apple.com/lookup?id=${selectedAlbum}&entity=song`); const data = await response.json(); setTracks(data.results.filter((item)=>item.kind === "song")); } catch (error) { console.error("Error fetching tracks:", error); setTracks([]); } }; fetchTracks(); }, [ selectedAlbum ]); const handleTrackClick = (previewUrl)=>{ if (audioRef.current) { if (previewUrl === audioRef.current.src) { if (isPlaying) { audioRef.current.pause(); } else { audioRef.current.play(); } setIsPlaying(!isPlaying); } else { audioRef.current.src = previewUrl; audioRef.current.play(); setIsPlaying(true); } } setPreviewUrl(previewUrl); }; const toggleAddon = (addonId)=>{ setAddons(addons.map((addon)=>addon.id === addonId ? { ...addon, installed: !addon.installed } : addon)); }; if (selectedAlbum) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] min-h-screen text-white font-roboto relative", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 left-4 z-50", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedAlbum(null); setTracks([]); if (audioRef.current) { audioRef.current.pause(); setIsPlaying(false); } }, className: "bg-[#1b1c1f] p-4 rounded-full hover:bg-[#2a2a2a] shadow-lg", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-[#0096ff] text-xl", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-20", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: items.find((item)=>item.id === selectedAlbum)?.poster, alt: items.find((item)=>item.id === selectedAlbum)?.title, className: "w-full rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, items.find((item)=>item.id === selectedAlbum)?.title), /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-gray-400 mb-8", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, items.find((item)=>item.id === selectedAlbum)?.artist), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, tracks.map((track, index)=>/*#__PURE__*/ React.createElement("div", { key: track.trackId, onClick: ()=>track.previewUrl && handleTrackClick(track.previewUrl), className: `flex items-center justify-between p-4 rounded-lg ${track.previewUrl ? "cursor-pointer hover:bg-[#2a2a2a]" : "opacity-50"} ${previewUrl === track.previewUrl && isPlaying ? "bg-[#2a2a2a]" : "bg-[#1b1c1f]"}`, __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-8 text-gray-400", __source: { fileName: "", lineNumber: 217, columnNumber: 23 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 218, columnNumber: 23 }, __self: this }, track.trackName)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 220, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 mr-4", __source: { fileName: "", lineNumber: 221, columnNumber: 23 }, __self: this }, Math.floor(track.trackTimeMillis / 60000), ":", String(Math.floor(track.trackTimeMillis % 60000 / 1000)).padStart(2, "0")), track.previewUrl && /*#__PURE__*/ React.createElement("i", { className: `fas ${previewUrl === track.previewUrl && isPlaying ? "fa-pause" : "fa-play"} text-[#0096ff]`, __source: { fileName: "", lineNumber: 228, columnNumber: 25 }, __self: this })))))))), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, onEnded: ()=>setIsPlaying(false), __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this })); } if (selectedMovie) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] min-h-screen text-white font-roboto relative", __source: { fileName: "", lineNumber: 246, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 left-4 z-50", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedMovie(null), className: "bg-[#1b1c1f] p-4 rounded-full hover:bg-[#2a2a2a] shadow-lg", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-[#0096ff] text-xl", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full flex items-center justify-center bg-[#1b1c1f]", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: `${selectedMenu === "tvshows" ? `https://vidsrc.me/embed/${selectedMovie}` : `https://vidlink.pro/movie/${selectedMovie}`}`, frameBorder: "0", allowFullScreen: true, className: "w-full h-full", __source: { fileName: "", lineNumber: 256, columnNumber: 11 }, __self: this }))); } return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] min-h-screen text-white font-roboto", __source: { fileName: "", lineNumber: 268, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[20vh] overflow-hidden", __source: { fileName: "", lineNumber: 269, columnNumber: 7 }, __self: this }, currentBackdrop && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentBackdrop.path, alt: currentBackdrop.title, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 273, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-black", __source: { fileName: "", lineNumber: 278, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 p-8", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mb-2", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, currentBackdrop.title)))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden p-4 bg-[#1b1c1f] flex justify-between items-center", __source: { fileName: "", lineNumber: 288, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#4285F4] text-xl font-product-sans", __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this }, "Moogle"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMobileMenuOpen(!isMobileMenuOpen), className: "text-white", __source: { fileName: "", lineNumber: 290, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 294, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 298, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isMobileMenuOpen ? "block" : "hidden"} md:block w-full md:w-[300px] bg-[#1b1c1f] md:h-screen p-6`, __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden md:block text-4xl mb-12 font-product-sans", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#4285F4]", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, "M"), /*#__PURE__*/ React.createElement("span", { className: "text-[#EA4335]", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, "o"), /*#__PURE__*/ React.createElement("span", { className: "text-[#FBBC05]", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, "o"), /*#__PURE__*/ React.createElement("span", { className: "text-[#4285F4]", __source: { fileName: "", lineNumber: 306, columnNumber: 13 }, __self: this }, "g"), /*#__PURE__*/ React.createElement("span", { className: "text-[#34A853]", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, "l"), /*#__PURE__*/ React.createElement("span", { className: "text-[#EA4335]", __source: { fileName: "", lineNumber: 308, columnNumber: 13 }, __self: this }, "e")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-6", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${selectedMenu === "movies" ? "text-[#0096ff]" : "text-gray-400"}`, onClick: ()=>setSelectedMenu("movies"), __source: { fileName: "", lineNumber: 311, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-film mr-2", __source: { fileName: "", lineNumber: 315, columnNumber: 15 }, __self: this }), "Movies"), /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${selectedMenu === "tvshows" ? "text-[#0096ff]" : "text-gray-400"}`, onClick: ()=>setSelectedMenu("tvshows"), __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tv mr-2", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this }), "TV Shows"), /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${selectedMenu === "music" ? "text-[#0096ff]" : "text-gray-400"}`, onClick: ()=>setSelectedMenu("music"), __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music mr-2", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }), "Music"), /*#__PURE__*/ React.createElement("li", { className: `cursor-pointer ${selectedMenu === "addons" ? "text-[#0096ff]" : "text-gray-400"}`, onClick: ()=>setSelectedMenu("addons"), __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-puzzle-piece mr-2", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }), "Add-ons"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 md:p-8 bg-black bg-opacity-80", __source: { fileName: "", lineNumber: 342, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }), selectedMenu !== "addons" && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 346, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "w-full max-w-md px-4 py-2 rounded-lg bg-[#1b1c1f] text-white border border-[#2a2a2a] focus:outline-none focus:border-[#0096ff]", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `grid ${selectedMenu === "addons" ? "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" : "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6"}`, __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }, selectedMenu === "addons" ? addons.map((addon)=>/*#__PURE__*/ React.createElement("div", { key: addon.id, className: "bg-[#1b1c1f] p-4 rounded-lg", __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 363, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 364, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${addon.icon} text-2xl text-[#0096ff] mr-3`, __source: { fileName: "", lineNumber: 365, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 368, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 369, columnNumber: 27 }, __self: this }, addon.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 370, columnNumber: 27 }, __self: this }, addon.description))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleAddon(addon.id), className: `px-3 py-1 rounded ${addon.installed ? "bg-red-600 hover:bg-red-700" : "bg-[#0096ff] hover:bg-[#0077cc]"}`, __source: { fileName: "", lineNumber: 375, columnNumber: 23 }, __self: this }, addon.installed ? "Remove" : "Install")))) : items.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "group relative bg-[#1b1c1f] rounded-lg p-2 hover:bg-[#2a2a2a] cursor-pointer transform transition-all duration-300 hover:scale-105", onClick: ()=>selectedMenu === "music" ? setSelectedAlbum(item.id) : setSelectedMovie(item.id), __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-[2/3] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 394, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.poster, alt: item.title, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 395, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100", __source: { fileName: "", lineNumber: 400, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${selectedMenu === "music" ? "fa-music" : "fa-play"} text-4xl text-white`, __source: { fileName: "", lineNumber: 401, columnNumber: 25 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "pt-2", __source: { fileName: "", lineNumber: 406, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium truncate", __source: { fileName: "", lineNumber: 407, columnNumber: 23 }, __self: this }, item.title), selectedMenu === "music" ? /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 411, columnNumber: 25 }, __self: this }, item.artist) : /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 415, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-yellow-400 mr-1", __source: { fileName: "", lineNumber: 416, columnNumber: 27 }, __self: this }), item.rating.toFixed(1)))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 426, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } img { animation: fadeIn 1s ease-in; } `)); }