function BottomNav() { const [activeTab, setActiveTab] = useState("home"); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-black flex justify-around items-center h-[60px]", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("home"), className: `flex flex-col items-center ${activeTab === "home" ? "text-white" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xl", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "For You")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("discover"), className: `flex flex-col items-center ${activeTab === "discover" ? "text-white" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Discover")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("upload"), className: "flex flex-col items-center relative", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-7 bg-gradient-to-r from-[#00f2ea] to-[#ff0050] flex items-center justify-center rounded-md relative", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black absolute inset-[1px] rounded-[3px] flex items-center justify-center", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-white text-xl", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("inbox"), className: `flex flex-col items-center ${activeTab === "inbox" ? "text-white" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-inbox text-xl", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Inbox")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("profile"), className: `flex flex-col items-center ${activeTab === "profile" ? "text-white" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-xl", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Profile")))); } function BottomNavStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BottomNav, { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this })); } function ChatMessage({ message, timestamp, isRead, isSent, isOwn }) { return /*#__PURE__*/ React.createElement("div", { className: `flex ${isOwn ? "justify-end" : "justify-start"} items-end max-w-[80%] ${isOwn ? "ml-auto" : "mr-auto"}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-2xl px-4 py-2 ${isOwn ? "bg-[#FF3366] rounded-br-none" : "bg-[#2A2A2A] rounded-bl-none"}`, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm font-roboto break-words", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, message), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-end gap-1 mt-1", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[10px] text-gray-300", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, timestamp), isSent && /*#__PURE__*/ React.createElement("i", { className: `fas fa-check-double text-[10px] ${isRead ? "text-blue-400" : "text-gray-300"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this })))); } function ChatMessageStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-black p-8 space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMessage, { message: "Hey, how are you?", timestamp: "10:30 AM", isRead: true, isSent: true, isOwn: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { message: "I'm good, thanks! How about you?", timestamp: "10:31 AM", isRead: false, isSent: false, isOwn: false, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatMessage, { message: "This is a longer message that should wrap properly when it exceeds the maximum width of the container. Testing text wrapping functionality.", timestamp: "10:32 AM", isRead: true, isSent: true, isOwn: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function VideoPlayer({ videoUrl = "/sample-video.mp4", username = "creator123", profilePic = "/profile.jpg", likes = "1.2M", comments = "4,218", shares = "1,832", description = "Check out this awesome video! #trending" }) { const [isPlaying, setIsPlaying] = useState(false); const videoRef = useRef(null); const togglePlay = ()=>{ if (videoRef.current.paused) { videoRef.current.play(); setIsPlaying(true); } else { videoRef.current.pause(); setIsPlaying(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "relative h-screen w-full bg-black", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "h-full w-full object-cover", onClick: togglePlay, loop: true, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoUrl, type: "video/mp4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-end justify-between", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 mr-16", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3 mb-3", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profilePic, alt: "Profile", className: "w-12 h-12 rounded-full border-2 border-white", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, username), /*#__PURE__*/ React.createElement("button", { className: "border border-white text-white px-4 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Follow")), /*#__PURE__*/ React.createElement("p", { className: "text-white mb-4 line-clamp-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, description)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "group flex flex-col items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-2xl text-white", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, likes)), /*#__PURE__*/ React.createElement("button", { className: "group flex flex-col items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment text-2xl text-white", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, comments)), /*#__PURE__*/ React.createElement("button", { className: "group flex flex-col items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share text-2xl text-white", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-white text-xs mt-1", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, shares)), /*#__PURE__*/ React.createElement("button", { className: "group", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 flex items-center justify-center rounded-full bg-black/40 group-hover:bg-black/60", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profilePic, alt: "Music", className: "w-8 h-8 rounded-full animate-spin", style: { animationDuration: "4s" }, __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }))))))); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoUrl: "/sample-video.mp4", username: "JaneSmith", profilePic: "/profile.jpg", likes: "1.2M", comments: "4,218", shares: "1,832", description: "Having the best day ever! 🌞 #sunshine #goodvibes", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); } function MainComponent() { const [videos, setVideos] = useState([]); const [loading, setLoading] = useState(true); const [streamingMessage, setStreamingMessage] = useState(""); const [likedVideos, setLikedVideos] = useState(new Set()); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (content)=>{ setVideos((prev)=>[ ...prev, { description: content, id: Date.now(), videoUrl: "/sample-video.mp4", username: "user" + Date.now(), profilePic: "/profile.jpg", likes: Math.floor(Math.random() * 1000), shares: Math.floor(Math.random() * 100) } ]); setLoading(false); setHasNotifications(true); } }); const handleLike = async (videoId)=>{ try { await fetch("/api/likes", { method: "POST", body: JSON.stringify({ videoId }) }); setLikedVideos((prev)=>{ const newSet = new Set(prev); newSet.has(videoId) ? newSet.delete(videoId) : newSet.add(videoId); return newSet; }); setVideos((prev)=>prev.map((v)=>v.id === videoId ? { ...v, likes: v.likes + (likedVideos.has(videoId) ? -1 : 1) } : v)); } catch (error) { console.error("Failed to like video:", error); } }; const [notificationPermission, setNotificationPermission] = useState("default"); const [hasNotifications, setHasNotifications] = useState(false); const handleShare = async (videoId)=>{ try { await fetch("/api/shares", { method: "POST", body: JSON.stringify({ videoId }) }); setVideos((prev)=>prev.map((v)=>v.id === videoId ? { ...v, shares: v.shares + 1 } : v)); } catch (error) { console.error("Failed to share video:", error); } }; const [comments] = useState([ { author: "Jane", authorPic: "/profile1.jpg", text: "Amazing content!", likes: 12, time: "2h ago" }, { author: "Alex", authorPic: "/profile2.jpg", text: "Great video!", likes: 8, time: "5h ago" } ]); const generateDescription = async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: "Write an engaging 2-sentence video description for a social media post" } ], stream: true }) }); handleStreamResponse(response); }; const requestNotificationPermission = async ()=>{ try { const permission = await Notification.requestPermission(); setNotificationPermission(permission); } catch (error) { console.error("Failed to request notification permission:", error); } }; useEffect(()=>{ const checkAuthAndLoad = async ()=>{ setLoading(true); try { const user = await fetch("/auth/me").then((r)=>r.json()); if (!user) { window.location.href = "/login"; return; } const loadInitialVideos = async ()=>{ for(let i = 0; i < 5; i++){ await generateDescription(); } }; loadInitialVideos(); } catch (error) { console.error("Auth check failed:", error); setLoading(true); } }; if ("Notification" in window) { setNotificationPermission(Notification.permission); if (Notification.permission === "default") { requestNotificationPermission(); } } checkAuthAndLoad(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black", __source: { fileName: "", lineNumber: 138, columnNumber: 5 }, __self: this }, loading && !videos.length ? /*#__PURE__*/ React.createElement("div", { className: "h-screen flex items-center justify-center", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-center", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 border-4 border-[#FF3366] border-t-transparent rounded-full animate-spin mx-auto mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, streamingMessage || "Loading your feed..."))) : /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full overflow-y-auto snap-y snap-mandatory", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "h-screen snap-start flex items-center justify-center", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-full w-full max-w-[500px] mx-auto", __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/profile/${video.username}`, className: "z-10", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoUrl: video.videoUrl, username: video.username, profilePic: video.profilePic, likes: video.likes, shares: video.shares, isLiked: likedVideos.has(video.id), onLike: ()=>handleLike(video.id), onShare: ()=>handleShare(video.id), description: video.description, __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement(React.Fragment, null)))), loading && /*#__PURE__*/ React.createElement("div", { className: "h-screen snap-start flex items-center justify-center", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, streamingMessage || "Loading..."))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 z-50", __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, hasNotifications && /*#__PURE__*/ React.createElement("div", { className: "absolute -top-2 right-[42%] w-3 h-3 bg-[#FF3366] rounded-full", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-black flex justify-around items-center h-[60px]", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex flex-col items-center text-white", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-xl", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, "For You")), /*#__PURE__*/ React.createElement("a", { href: "/discover", className: "flex flex-col items-center text-gray-400", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-xl", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, "Discover")), /*#__PURE__*/ React.createElement("a", { href: "/upload", className: "flex flex-col items-center relative", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-7 bg-gradient-to-r from-[#00f2ea] to-[#ff0050] flex items-center justify-center rounded-md relative", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black absolute inset-[1px] rounded-[3px] flex items-center justify-center", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-white text-xl", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("a", { href: "/messages", className: "flex flex-col items-center text-gray-400", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-inbox text-xl", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "Inbox")), /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "flex flex-col items-center text-gray-400", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-xl", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[10px] mt-1", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, "Profile"))))))); }