function MainComponent() { const [mediaFile, setMediaFile] = React.useState(null); const [isPlaying, setIsPlaying] = React.useState(false); const [duration, setDuration] = React.useState(0); const [currentTime, setCurrentTime] = React.useState(0); const [volume, setVolume] = React.useState(1); const mediaRef = React.useRef(null); const dragOverRef = React.useRef(false); const handleMediaChange = (file)=>{ if (file) { setMediaFile(URL.createObjectURL(file)); setIsPlaying(false); } }; const handleDrop = (event)=>{ event.preventDefault(); event.stopPropagation(); const file = event.dataTransfer.files[0]; const fileType = file.type.split('/')[0]; if (fileType === 'video' || fileType === 'image') { handleMediaChange(file); } }; const handleDragOver = (event)=>{ event.preventDefault(); event.stopPropagation(); if (!dragOverRef.current) { dragOverRef.current = true; } }; const handleDragLeave = (event)=>{ event.preventDefault(); event.stopPropagation(); if (dragOverRef.current) { dragOverRef.current = false; } }; const handleFileChange = (event)=>{ const file = event.target.files[0]; handleMediaChange(file); }; const handleMetadata = (event)=>{ setDuration(event.target.duration); }; const handleTimeUpdate = (event)=>{ setCurrentTime(event.target.currentTime); }; const handlePlayPause = ()=>{ if (isPlaying) { mediaRef.current.pause(); } else { mediaRef.current.play(); } setIsPlaying(!isPlaying); }; const handleStop = ()=>{ mediaRef.current.pause(); mediaRef.current.currentTime = 0; setIsPlaying(false); }; const handleFullScreen = ()=>{ if (mediaRef.current.requestFullscreen) { mediaRef.current.requestFullscreen(); } }; const handleVolumeChange = (event)=>{ const newVolume = parseFloat(event.target.value); mediaRef.current.volume = newVolume; setVolume(newVolume); }; const formattedTime = (time)=>{ const pad = (num, size)=>num.toString().padStart(size, '0'); const hours = pad(Math.floor(time / 3600), 2); const minutes = pad(Math.floor(time % 3600 / 60), 2); const seconds = pad(Math.floor(time % 60), 2); return `${hours}:${minutes}:${seconds}`; }; const currentTimePercentage = currentTime / duration * 100; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f3f4f6]", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 w-full p-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*,image/*", name: "media-upload", onChange: handleFileChange, className: "file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#22d3ee] file:text-white hover:file:bg-[#06b6d4] w-full", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-[800px] aspect-video bg-black", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, mediaFile && /*#__PURE__*/ React.createElement("video", { ref: mediaRef, src: mediaFile, onLoadedMetadata: handleMetadata, onTimeUpdate: handleTimeUpdate, className: "w-full h-auto", onClick: handlePlayPause, controls: true, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }), !mediaFile && /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-[#4B5563]", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Drag and drop a video or image here or click to upload"), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-0 right-0 flex justify-between p-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayPause, className: "p-2 text-white bg-[#1f2937] rounded-full", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, isPlaying ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-pause", __source: { fileName: "", lineNumber: 121, columnNumber: 26 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fa fa-play", __source: { fileName: "", lineNumber: 121, columnNumber: 60 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleStop, className: "p-2 text-white bg-[#1f2937] rounded-full", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-stop", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleFullScreen, className: "p-2 text-white bg-[#1f2937] rounded-full", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-expand", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.1", value: volume, onChange: handleVolumeChange, className: "w-24", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this })), mediaFile && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-16 left-0 right-0 flex justify-center p-4", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: duration, value: currentTime, onChange: (e)=>setCurrentTime(e.target.value), onMouseUp: (e)=>mediaRef.current.currentTime = e.target.value, onTouchEnd: (e)=>mediaRef.current.currentTime = e.target.value, className: "w-full", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 text-white font-roboto", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, formattedTime(currentTime), " / ", formattedTime(duration)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this }, ` .MainComponent__drag-over { border: 2px dashed #94a3b8; } `)); }