function VideoPlayer({ videoId }) { const [selectedVideoId, setSelectedVideoId] = useState(videoId || "dQw4w9WgXcQ"); const [selectedMood, setSelectedMood] = useState("happy"); const [isPlaying, setIsPlaying] = useState(true); const moodToVideos = { happy: [ { id: "ZbZSe6N_BXs", title: "Happy - Pharrell Williams" }, { id: "y6Sxv-sUYtM", title: "All About That Bass" }, { id: "ru0K8uYEZWw", title: "Can't Stop The Feeling" } ], sad: [ { id: "4N3N1MlvVc4", title: "Mad World" }, { id: "3AtDnEC4zak", title: "Someone Like You" }, { id: "YQHsXMglC9A", title: "Hello" } ], energetic: [ { id: "btPJPFnesV4", title: "Eye of the Tiger" }, { id: "VcDy8HEg1QY", title: "Stronger" }, { id: "9jK-NcRmVcw", title: "The Final Countdown" } ], relaxed: [ { id: "3YxaaGgTQYM", title: "Bring Me To Life" }, { id: "mWRsgZuwf_8", title: "Demons" }, { id: "1G4isv_Fylg", title: "Moonlight Sonata" } ], motivated: [ { id: "btPJPFnesV4", title: "Eye of the Tiger" }, { id: "04854XqcfCY", title: "We are the Champions" }, { id: "FGBhQbmPwH8", title: "Hall of Fame" } ] }; const handleMoodChange = (mood)=>{ setSelectedMood(mood.toLowerCase()); setSelectedVideoId(moodToVideos[mood.toLowerCase()][0].id); }; const handleVideoEnd = ()=>{ const currentPlaylist = moodToVideos[selectedMood]; const currentIndex = currentPlaylist.findIndex((v)=>v.id === selectedVideoId); const nextIndex = (currentIndex + 1) % currentPlaylist.length; setSelectedVideoId(currentPlaylist[nextIndex].id); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MoodSelector, { onMoodSelect: handleMoodChange, selectedMood: selectedMood, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full aspect-video mt-6 transition-opacity duration-300", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-full rounded-lg shadow-lg", src: `https://www.youtube.com/embed/${selectedVideoId}?autoplay=1&enablejsapi=1`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, onEnded: handleVideoEnd, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full mt-8 grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, moodToVideos[selectedMood].map((video)=>/*#__PURE__*/ React.createElement("button", { key: video.id, onClick: ()=>setSelectedVideoId(video.id), className: `p-4 rounded-lg transition-all duration-200 ${selectedVideoId === video.id ? "bg-[#4CAF50] text-white" : "bg-gray-800 hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-poppins text-sm truncate", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, video.title))))); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-900 min-h-screen", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoId: "dQw4w9WgXcQ", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this })); } function MoodSelector({ onMoodSelect, selectedMood }) { const moods = [ { name: "Happy", icon: "fas fa-smile", color: "#FFD700" }, { name: "Sad", icon: "fas fa-sad-tear", color: "#4169E1" }, { name: "Energetic", icon: "fas fa-bolt", color: "#FF4500" }, { name: "Relaxed", icon: "fas fa-spa", color: "#98FB98" }, { name: "Motivated", icon: "fas fa-fire", color: "#FF6B6B" }, { name: "Peaceful", icon: "fas fa-dove", color: "#87CEEB" }, { name: "Focused", icon: "fas fa-bullseye", color: "#9370DB" }, { name: "Creative", icon: "fas fa-palette", color: "#FF69B4" } ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-6 p-6", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, moods.map((mood)=>/*#__PURE__*/ React.createElement("button", { key: mood.name, onClick: ()=>onMoodSelect?.(mood.name), className: ` flex items-center gap-3 px-6 py-4 rounded-xl font-poppins text-lg transition-all duration-300 transform hover:scale-105 ${selectedMood === mood.name ? `bg-[${mood.color}] text-white shadow-lg scale-105` : "bg-white hover:bg-gray-50 shadow-md"} `, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${mood.icon} text-xl`, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), mood.name))); } function MoodSelectorStory() { const [mood, setMood] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-gray-100 p-8 rounded-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MoodSelector, { onMoodSelect: setMood, selectedMood: mood, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedMood, setSelectedMood] = useState(null); const [message, setMessage] = useState(""); const [chatMessages, setChatMessages] = useState([]); const [videoUrl, setVideoUrl] = useState("dQw4w9WgZcQ"); const [isLoading, setIsLoading] = useState(false); const [videoHistory, setVideoHistory] = useState([]); const [favoriteVideos, setFavoriteVideos] = useState([]); const [userPreferences, setUserPreferences] = useState({ autoplay: true, theme: "dark", notifications: true }); const [recommendedVideos, setRecommendedVideos] = useState([]); const moodCategories = [ { icon: "fas fa-smile", name: "Happy" }, { icon: "fas fa-sad-tear", name: "Sad" }, { icon: "fas fa-bolt", name: "Energetic" }, { icon: "fas fa-spa", name: "Relaxed" }, { icon: "fas fa-fire", name: "Motivated" } ]; const handleSendMessage = async ()=>{ if (!message.trim()) return; setIsLoading(true); const newMessages = [ ...chatMessages, { text: message, sender: "user" } ]; setChatMessages(newMessages); // Simulate AI response setTimeout(()=>{ setChatMessages((prev)=>[ ...prev, { text: "I sense that you're feeling thoughtful. Here are some videos that might match your mood...", sender: "ai" } ]); setRecommendedVideos([ { id: "dQw4w9WgZcQ", title: "Perfect for your current mood" }, { id: "dQw4w9WgZcQ", title: "You might enjoy this" }, { id: "dQw4w9WgZcQ", title: "Another great match" } ]); setIsLoading(false); }, 1500); setMessage(""); }; const handleVideoSelect = (videoId)=>{ setVideoUrl(videoId); setVideoHistory((prev)=>[ { id: videoId, title: "Video " + videoId }, ...prev ].slice(0, 5)); }; const toggleFavorite = (videoId)=>{ setFavoriteVideos((prev)=>prev.includes(videoId) ? prev.filter((id)=>id !== videoId) : [ ...prev, videoId ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900 text-white flex", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-gray-800 p-4 hidden md:block", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-6 flex items-center gap-2", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), " Mood Categories"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, moodCategories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.name, onClick: ()=>setSelectedMood(category.name), className: `w-full text-left p-3 rounded-lg flex items-center gap-3 transition-all duration-200 ${selectedMood === category.name ? "bg-gray-600" : "hover:bg-gray-700"}`, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: category.icon, __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }), category.name)))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 flex flex-col", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "MoodTube - Find Videos for Your Mood"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-4 h-full", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden md:block mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(MoodSelector, { onMoodSelect: setSelectedMood, selectedMood: selectedMood, __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full aspect-video rounded-xl overflow-hidden shadow-2xl hover:shadow-[#4CAF50]/20 transition-all duration-300", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoId: videoUrl, __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-2 sm:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, recommendedVideos.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-800 rounded-lg p-2 hover:bg-gray-700 transition-all duration-200", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `https://img.youtube.com/vi/${video.id}/mqdefault.jpg`, alt: video.title, className: "w-full rounded", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm truncate", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, video.title))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 rounded-lg p-4", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "Preferences"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, Object.entries(userPreferences).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "capitalize", __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }, key), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setUserPreferences((prev)=>({ ...prev, [key]: !value })), className: "bg-gray-700 px-3 py-1 rounded-lg hover:bg-gray-600", __source: { fileName: "", lineNumber: 132, columnNumber: 21 }, __self: this }, value ? "On" : "Off"))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, "History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 max-h-40 overflow-y-auto", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, videoHistory.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between bg-gray-700 p-2 rounded-lg", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "truncate", __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setVideoUrl(video.id), className: "text-[#4CAF50]", __source: { fileName: "", lineNumber: 157, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play", __source: { fileName: "", lineNumber: 161, columnNumber: 23 }, __self: this }))))))))), /*#__PURE__*/ React.createElement("aside", { className: "w-96 bg-gray-800 p-4 hidden lg:block", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-4 space-y-2", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg max-w-[90%] transition-all duration-200 ${msg.sender === "user" ? "bg-[#4CAF50] text-white ml-auto" : "bg-gray-700 mr-auto"}`, __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, msg.text, isLoading && index === chatMessages.length - 1 && msg.sender === "user" && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 188, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 bg-gray-700 p-2 rounded-lg", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: message, onChange: (e)=>setMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && !isLoading && handleSendMessage(), placeholder: "Tell me how you're feeling...", disabled: isLoading, className: "flex-1 px-4 py-2 rounded-lg bg-gray-600 text-white border-none focus:outline-none focus:ring-2 focus:ring-[#4CAF50] transition-all duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: isLoading, className: "bg-[#4CAF50] text-white px-6 py-2 rounded-lg hover:bg-[#45a049] transition-all duration-200 disabled:opacity-50", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this })))))); }