function BottomNav() { const { data: user } = useUser(); const [videos, setVideos] = useState([ { id: "1", url: "/video1.mp4", title: "First Video" }, { id: "2", url: "/video2.mp4", title: "Second Video" }, { id: "3", url: "/video3.mp4", title: "Third Video" } ]); const [loading, setLoading] = useState(false); const loadMoreVideos = useCallback(()=>{ if (!loading) { setLoading(true); setTimeout(()=>{ const newVideos = [ { id: String(videos.length + 1), url: "/video1.mp4", title: "More Video" }, { id: String(videos.length + 2), url: "/video2.mp4", title: "Extra Video" } ]; setVideos((prev)=>[ ...prev, ...newVideos ]); setLoading(false); }, 1000); } }, [ videos.length, loading ]); const onScroll = useCallback((e)=>{ const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight; if (bottom) loadMoreVideos(); }, [ loadMoreVideos ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[calc(100vh-64px)] overflow-y-auto snap-y snap-mandatory", onScroll: onScroll, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "w-full h-[calc(100vh-64px)] snap-start", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoUrl: video.url, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(VideoActions, { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this })))), loading && /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-gray-500", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 w-full z-50 flex justify-around items-center p-4 bg-black", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-white", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-2xl", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/discover", className: "text-white", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-compass text-2xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/upload", className: "text-white", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus-square text-2xl", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/inbox", className: "text-white", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-inbox text-2xl", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this })), user ? /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "text-white", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-2xl", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-white", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-2xl", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this })))); } function BottomNavStory() { return /*#__PURE__*/ React.createElement(BottomNav, { __source: { fileName: "", lineNumber: 94, columnNumber: 10 }, __self: this }); } function VideoActions() { const [likes, setLikes] = useState(0); const [commented, setCommented] = useState(false); const [shared, setShared] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "fixed right-4 top-1/2 transform -translate-y-1/2 flex flex-col gap-4 bg-white p-3 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setLikes((prev)=>prev + 1), className: "text-gray-600 hover:text-pink-500 transition-colors", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-xl", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "block text-sm", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, likes)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCommented(!commented), className: "text-gray-600 hover:text-blue-500 transition-colors", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment text-xl", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShared(!shared), className: "text-gray-600 hover:text-green-500 transition-colors", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share text-xl", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }))); } function VideoActionsStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoActions, { __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this })); } function VideoPlayer({ videoUrl = "/path/to/video.mp4" }) { const [isPlaying, setIsPlaying] = useState(false); const [isLiked, setIsLiked] = useState(false); const videoRef = useRef(null); const togglePlay = ()=>{ if (videoRef.current) { if (isPlaying) { videoRef.current.pause(); } else { videoRef.current.play(); } setIsPlaying(!isPlaying); } }; const toggleLike = ()=>{ setIsLiked(!isLiked); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-screen h-screen bg-black", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "w-full h-full object-contain", src: videoUrl, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "Your browser does not support the video tag."), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-8 left-1/2 transform -translate-x-1/2 flex items-center space-x-6", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: togglePlay, className: "text-white text-3xl hover:text-gray-300", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? "fa-pause" : "fa-play"}`, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: toggleLike, className: "text-white text-3xl hover:text-gray-300", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${isLiked ? "fas" : "far"} fa-heart text-${isLiked ? "red" : "white"}-500`, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })))); } function VideoPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoUrl: "https://example.com/sample-video.mp4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function MainComponent() { const [videos, setVideos] = useState([ { id: "1", url: "/video1.mp4", title: "First Video" }, { id: "2", url: "/video2.mp4", title: "Second Video" }, { id: "3", url: "/video3.mp4", title: "Third Video" } ]); const [loading, setLoading] = useState(false); const loadMoreVideos = useCallback(()=>{ if (!loading) { setLoading(true); setTimeout(()=>{ const newVideos = [ { id: String(videos.length + 1), url: "/video1.mp4", title: "More Video" }, { id: String(videos.length + 2), url: "/video2.mp4", title: "Extra Video" } ]; setVideos((prev)=>[ ...prev, ...newVideos ]); setLoading(false); }, 1000); } }, [ videos.length, loading ]); const onScroll = useCallback((e)=>{ const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight; if (bottom) loadMoreVideos(); }, [ loadMoreVideos ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[calc(100vh-64px)] overflow-y-auto snap-y snap-mandatory", onScroll: onScroll, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, className: "w-full h-[calc(100vh-64px)] snap-start", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPlayer, { videoUrl: video.url, __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(VideoActions, { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })))), loading && /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-gray-500", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement(React.Fragment, null)); }