function VideoPreview({ videoUrl = "./demo-video.mp4", thumbnailUrl = "./preview-thumbnail.jpg", watermarkUrl = "./logo.png", onTimeUpdate = ()=>{}, duration = 120, currentTime = 0, isLoading = false }) { const [isPlaying, setIsPlaying] = React.useState(false); const [isLoadingVideo, setIsLoadingVideo] = React.useState(true); const videoRef = React.useRef(null); const togglePlay = ()=>{ if (videoRef.current) { if (isPlaying) { videoRef.current.pause(); } else { videoRef.current.play(); } setIsPlaying(!isPlaying); } }; const handleTimelineChange = (e)=>{ const time = e.target.value; if (videoRef.current) { videoRef.current.currentTime = time; onTimeUpdate(time); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, (isLoading || isLoadingVideo) && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#f1f5f9] rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-[#10b981] border-t-transparent", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "w-full h-auto rounded-lg", poster: thumbnailUrl, onLoadedData: ()=>setIsLoadingVideo(false), onTimeUpdate: (e)=>onTimeUpdate(e.target.currentTime), __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoUrl, type: "video/mp4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), "Your browser does not support video playback."), /*#__PURE__*/ React.createElement("img", { src: watermarkUrl, alt: "VideoMaker watermark", className: "absolute top-4 right-4 w-12 h-12 opacity-50", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: togglePlay, className: "absolute inset-0 w-full h-full flex items-center justify-center bg-black bg-opacity-0 hover:bg-opacity-20 transition-opacity", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? "fa-pause" : "fa-play"} text-white text-4xl opacity-0 hover:opacity-100 transition-opacity`, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: togglePlay, className: "text-[#334155] text-xl", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? "fa-pause" : "fa-play"}`, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#64748b]", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, Math.floor(currentTime / 60), ":", String(Math.floor(currentTime % 60)).padStart(2, "0"), " /", Math.floor(duration / 60), ":", String(Math.floor(duration % 60)).padStart(2, "0"))), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: duration, value: currentTime, onChange: handleTimelineChange, className: "w-full", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center text-sm text-[#64748b]", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 rounded bg-[#f1f5f9] hover:bg-[#e2e8f0]", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cut mr-1", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }), "Trim"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 rounded bg-[#f1f5f9] hover:bg-[#e2e8f0]", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-1", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), "Transitions"), /*#__PURE__*/ React.createElement("button", { className: "px-3 py-1 rounded bg-[#f1f5f9] hover:bg-[#e2e8f0]", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-1", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }), "Speed")))); } function VideoPreviewStory() { const [currentTime, setCurrentTime] = React.useState(0); return /*#__PURE__*/ React.createElement("div", { className: "p-8 max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#334155] mb-6", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, "Video Preview"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(VideoPreview, { videoUrl: "./demo-video.mp4", thumbnailUrl: "./preview-thumbnail.jpg", watermarkUrl: "./logo.png", duration: 120, currentTime: currentTime, onTimeUpdate: setCurrentTime, __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(VideoPreview, { videoUrl: "./demo-video.mp4", thumbnailUrl: "./preview-thumbnail.jpg", watermarkUrl: "./logo.png", duration: 120, currentTime: 0, isLoading: true, __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(VideoPreview, { videoUrl: "./demo-video.mp4", thumbnailUrl: "./preview-thumbnail.jpg", watermarkUrl: "./logo.png", duration: 300, currentTime: 0, __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }))); } function StyleSelector({ videos = [], selectedId = null, onSelect = ()=>{} }) { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("div", { key: video.id, onClick: ()=>onSelect(video.id), className: ` relative rounded-lg overflow-hidden cursor-pointer transform transition-transform hover:scale-105 ${selectedId === video.id ? "ring-2 ring-blue-500" : ""} `, __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: video.thumbnail, alt: `Preview of ${video.title} animation style`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-3", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-lexend text-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "font-zilla-slab text-sm text-gray-200", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, video.style))))); } function StyleSelectorStory() { const [selectedId, setSelectedId] = React.useState(null); const sampleVideos = [ { id: 1, title: "Brand Story", style: "Whiteboard Animation", thumbnail: "./images/whiteboard-preview.png" }, { id: 2, title: "Product Launch", style: "Motion Graphics", thumbnail: "./images/motion-preview.png" }, { id: 3, title: "Company Values", style: "Minimal Animation", thumbnail: "./images/minimal-preview.png" }, { id: 4, title: "Service Overview", style: "Infographic Animation", thumbnail: "./images/infographic-preview.png" }, { id: 5, title: "Tutorial Series", style: "Character Animation", thumbnail: "./images/character-preview.png" }, { id: 6, title: "Statistics Report", style: "Data Visualization", thumbnail: "./images/data-preview.png" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StyleSelector, { videos: sampleVideos, selectedId: selectedId, onSelect: setSelectedId, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedStyle, setSelectedStyle] = useState("whiteboard"); const [generating, setGenerating] = useState(false); const [progress, setProgress] = useState(0); const [previewUrl, setPreviewUrl] = useState(null); const [script, setScript] = useState(""); const [upload, { loading }] = useUpload(); const [error, setError] = useState(null); const handleFileUpload = async (e)=>{ const file = e.target.files[0]; if (!file) return; const { url, error } = await upload({ file }); if (error) { setError(error); return; } const response = await fetch("/api/chatgpt", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: `Convert this document into a video script: ${url}` }) }); const data = await response.json(); setScript(data.text); }; const handleBack = ()=>{ window.history.back(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1a202c] shadow-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-xl", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-white font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "VidGenius"), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-6", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "text-gray-300 hover:text-white transition-colors font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "/projects", className: "text-gray-300 hover:text-white transition-colors font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Projects"), /*#__PURE__*/ React.createElement("a", { href: "/templates", className: "text-gray-300 hover:text-white transition-colors font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Templates"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-2 bg-white text-[#1a202c] px-4 py-2 rounded-lg hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-google", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Sign in")), /*#__PURE__*/ React.createElement("button", { className: "text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-xl", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-gray-300 hover:text-white", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-xl", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-[#334155] mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "Script"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-4 border rounded-lg shadow-sm focus:ring-2 focus:ring-[#10b981] focus:border-transparent", placeholder: "Enter your video script here...", name: "script", value: script, onChange: (e)=>setScript(e.target.value), __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".txt,.doc,.docx,.pdf", onChange: handleFileUpload, className: "hidden", id: "file-upload", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "cursor-pointer bg-white px-4 py-2 border rounded-lg hover:bg-gray-50", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 113, columnNumber: 21 }, __self: this }), "Upload File"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm", __source: { fileName: "", lineNumber: 116, columnNumber: 29 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 118, columnNumber: 21 }, __self: this }, "Processing file...")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-[#334155] mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg shadow-sm cursor-pointer border-2 ${selectedStyle === "whiteboard" ? "border-[#10b981]" : "border-transparent"}`, onClick: ()=>setSelectedStyle("whiteboard"), __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, "Whiteboard"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#64748b]", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, "Hand-drawn style with fluid animations")), /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg shadow-sm cursor-pointer border-2 ${selectedStyle === "motion" ? "border-[#10b981]" : "border-transparent"}`, onClick: ()=>setSelectedStyle("motion"), __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, "Motion Graphics"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#64748b]", __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, "Modern and dynamic visual effects")), /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg shadow-sm cursor-pointer border-2 ${selectedStyle === "minimal" ? "border-[#10b981]" : "border-transparent"}`, onClick: ()=>setSelectedStyle("minimal"), __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 161, columnNumber: 19 }, __self: this }, "Minimal"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#64748b]", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, "Clean and simple design focus")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium text-[#334155] mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "Voice Options"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-lg shadow-sm", name: "voice", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, "Male Voice"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }, "Female Voice"), /*#__PURE__*/ React.createElement("option", { value: "neutral", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, "Neutral Voice"))), generating && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#10b981] rounded transition-all duration-500", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 186, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, "Generating video: ", progress, "%")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 197, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#10b981] text-white py-3 rounded-lg hover:bg-[#059669] transition-colors font-medium text-lg", onClick: ()=>{ setGenerating(true); setProgress(0); setTimeout(()=>{ setPreviewUrl("./demo-video.mp4"); setGenerating(false); setProgress(100); }, 3000); }, __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "Generate Video"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))))); }