function MainComponent() { const [videoFile, setVideoFile] = React.useState(null); const [videoUrl, setVideoUrl] = React.useState(""); const [currentTime, setCurrentTime] = React.useState(0); const [duration, setDuration] = React.useState(0); const [isPlaying, setIsPlaying] = React.useState(false); const [volume, setVolume] = React.useState(1); const [playbackSpeed, setPlaybackSpeed] = React.useState(1); const [trimStart, setTrimStart] = React.useState(0); const [trimEnd, setTrimEnd] = React.useState(0); const [error, setError] = React.useState(null); const [loading, setLoading] = React.useState(false); const videoRef = React.useRef(null); const [upload, { loading: uploading }] = useUpload(); const handleFileUpload = React.useCallback(async (event)=>{ const file = event.target.files[0]; if (!file) return; if (!file.type.startsWith("video/")) { setError("Please select a video file"); return; } setLoading(true); setError(null); try { const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError(uploadError); return; } setVideoUrl(url); setVideoFile(file); } catch (err) { setError("Failed to upload video"); console.error(err); } finally{ setLoading(false); } }, [ upload ]); const handleUrlUpload = React.useCallback(async ()=>{ if (!videoUrl.trim()) return; setLoading(true); setError(null); try { const { url, error: uploadError } = await upload({ url: videoUrl }); if (uploadError) { setError(uploadError); return; } setVideoUrl(url); } catch (err) { setError("Failed to load video from URL"); console.error(err); } finally{ setLoading(false); } }, [ videoUrl, upload ]); const togglePlayPause = React.useCallback(()=>{ if (!videoRef.current) return; if (isPlaying) { videoRef.current.pause(); } else { videoRef.current.play(); } setIsPlaying(!isPlaying); }, [ isPlaying ]); const handleTimeUpdate = React.useCallback(()=>{ if (videoRef.current) { setCurrentTime(videoRef.current.currentTime); } }, []); const handleLoadedMetadata = React.useCallback(()=>{ if (videoRef.current) { setDuration(videoRef.current.duration); setTrimEnd(videoRef.current.duration); } }, []); const seekTo = React.useCallback((time)=>{ if (videoRef.current) { videoRef.current.currentTime = time; setCurrentTime(time); } }, []); const handleVolumeChange = React.useCallback((newVolume)=>{ setVolume(newVolume); if (videoRef.current) { videoRef.current.volume = newVolume; } }, []); const handleSpeedChange = React.useCallback((speed)=>{ setPlaybackSpeed(speed); if (videoRef.current) { videoRef.current.playbackRate = speed; } }, []); const formatTime = React.useCallback((time)=>{ const minutes = Math.floor(time / 60); const seconds = Math.floor(time % 60); return `${minutes}:${seconds.toString().padStart(2, "0")}`; }, []); const exportVideo = React.useCallback(()=>{ if (!videoUrl) return; // Create a download link for the trimmed video const link = document.createElement("a"); link.href = videoUrl; link.download = `edited_video_${Date.now()}.mp4`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }, [ videoUrl ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-900 text-white", __source: { fileName: "", lineNumber: 135, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 border-b border-gray-700", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-red-500", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-youtube mr-2", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }), "YouTube Editor")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row h-[calc(100vh-80px)]", __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, !videoUrl ? /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col items-center justify-center bg-gray-800 rounded-lg border-2 border-dashed border-gray-600", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-8", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-6xl text-gray-500 mb-4", __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, "Upload Your Video"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", onChange: handleFileUpload, className: "hidden", id: "video-upload", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "video-upload", className: "bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg cursor-pointer inline-block transition-colors", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, "Choose Video File")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2 max-w-md mx-auto", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", placeholder: "Or paste video URL", value: videoUrl, onChange: (e)=>setVideoUrl(e.target.value), className: "flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white", __source: { fileName: "", lineNumber: 172, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleUrlUpload, disabled: !videoUrl.trim() || loading, className: "bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, "Load")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-blue-400", __source: { fileName: "", lineNumber: 189, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 190, columnNumber: 21 }, __self: this }), uploading ? "Uploading..." : "Loading..."), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-400", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle mr-2", __source: { fileName: "", lineNumber: 197, columnNumber: 21 }, __self: this }), error))) : /*#__PURE__*/ React.createElement("div", { className: "h-full flex flex-col", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-black rounded-lg overflow-hidden mb-4", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, src: videoUrl, className: "w-full h-full object-contain", onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onPlay: ()=>setIsPlaying(true), onPause: ()=>setIsPlaying(false), __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 rounded-lg", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: duration || 0, value: currentTime, onChange: (e)=>seekTo(parseFloat(e.target.value)), className: "w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer", style: { background: `linear-gradient(to right, #ef4444 0%, #ef4444 ${currentTime / duration * 100}%, #4b5563 ${currentTime / duration * 100}%, #4b5563 100%)` }, __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 w-1 h-2 bg-yellow-400", style: { left: `${trimStart / duration * 100}%` }, __source: { fileName: "", lineNumber: 235, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 w-1 h-2 bg-yellow-400", style: { left: `${trimEnd / duration * 100}%` }, __source: { fileName: "", lineNumber: 239, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-gray-400 mt-1", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 245, columnNumber: 21 }, __self: this }, formatTime(currentTime)), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 246, columnNumber: 21 }, __self: this }, formatTime(duration)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-4 mb-4", __source: { fileName: "", lineNumber: 251, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>seekTo(Math.max(0, currentTime - 10)), className: "bg-gray-700 hover:bg-gray-600 p-2 rounded-lg", __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-backward", __source: { fileName: "", lineNumber: 256, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: togglePlayPause, className: "bg-red-600 hover:bg-red-700 p-3 rounded-lg text-xl", __source: { fileName: "", lineNumber: 259, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${isPlaying ? "pause" : "play"}`, __source: { fileName: "", lineNumber: 263, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>seekTo(Math.min(duration, currentTime + 10)), className: "bg-gray-700 hover:bg-gray-600 p-2 rounded-lg", __source: { fileName: "", lineNumber: 266, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-forward", __source: { fileName: "", lineNumber: 270, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4 items-center", __source: { fileName: "", lineNumber: 275, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-gray-400", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: (e)=>handleVolumeChange(parseFloat(e.target.value)), className: "w-20", __source: { fileName: "", lineNumber: 278, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400 w-8", __source: { fileName: "", lineNumber: 289, columnNumber: 21 }, __self: this }, Math.round(volume * 100), "%")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tachometer-alt text-gray-400", __source: { fileName: "", lineNumber: 295, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: playbackSpeed, onChange: (e)=>handleSpeedChange(parseFloat(e.target.value)), className: "bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm", __source: { fileName: "", lineNumber: 296, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "0.5", __source: { fileName: "", lineNumber: 303, columnNumber: 23 }, __self: this }, "0.5x"), /*#__PURE__*/ React.createElement("option", { value: "0.75", __source: { fileName: "", lineNumber: 304, columnNumber: 23 }, __self: this }, "0.75x"), /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 305, columnNumber: 23 }, __self: this }, "1x"), /*#__PURE__*/ React.createElement("option", { value: "1.25", __source: { fileName: "", lineNumber: 306, columnNumber: 23 }, __self: this }, "1.25x"), /*#__PURE__*/ React.createElement("option", { value: "1.5", __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this }, "1.5x"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 308, columnNumber: 23 }, __self: this }, "2x"))))))), videoUrl && /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-80 bg-gray-800 p-4 border-l border-gray-700", __source: { fileName: "", lineNumber: 319, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cut mr-2", __source: { fileName: "", lineNumber: 321, columnNumber: 15 }, __self: this }), "Editing Tools"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-3", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, "Trim Video"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-400 mb-1", __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, "Start Time"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: duration || 0, value: trimStart, onChange: (e)=>setTrimStart(parseFloat(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 334, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, formatTime(trimStart))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-gray-400 mb-1", __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, "End Time"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: duration || 0, value: trimEnd, onChange: (e)=>setTrimEnd(parseFloat(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 351, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 359, columnNumber: 19 }, __self: this }, formatTime(trimEnd))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTrimStart(currentTime); }, className: "w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg text-sm", __source: { fileName: "", lineNumber: 364, columnNumber: 17 }, __self: this }, "Set Start to Current Time"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTrimEnd(currentTime); }, className: "w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg text-sm", __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }, "Set End to Current Time"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 385, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-3", __source: { fileName: "", lineNumber: 386, columnNumber: 15 }, __self: this }, "Quick Actions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>seekTo(trimStart), className: "w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm", __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-backward mr-2", __source: { fileName: "", lineNumber: 393, columnNumber: 19 }, __self: this }), "Go to Start"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>seekTo(trimEnd), className: "w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm", __source: { fileName: "", lineNumber: 397, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-forward mr-2", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }), "Go to End"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setTrimStart(0); setTrimEnd(duration); }, className: "w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm", __source: { fileName: "", lineNumber: 405, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }), "Reset Trim"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 419, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-3", __source: { fileName: "", lineNumber: 420, columnNumber: 15 }, __self: this }, "Export"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-700 p-3 rounded-lg mb-3 text-sm", __source: { fileName: "", lineNumber: 422, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 423, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 424, columnNumber: 19 }, __self: this }, "Duration:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 425, columnNumber: 19 }, __self: this }, formatTime(trimEnd - trimStart))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 427, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 428, columnNumber: 19 }, __self: this }, "Start:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 429, columnNumber: 19 }, __self: this }, formatTime(trimStart))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 431, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 432, columnNumber: 19 }, __self: this }, "End:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 433, columnNumber: 19 }, __self: this }, formatTime(trimEnd)))), /*#__PURE__*/ React.createElement("button", { onClick: exportVideo, className: "w-full bg-green-600 hover:bg-green-700 py-3 rounded-lg font-medium", __source: { fileName: "", lineNumber: 437, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 441, columnNumber: 17 }, __self: this }), "Download Video"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-2 text-center", __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, "Note: This downloads the original video. For actual trimming, you'll need video processing software."))))); }