function MainComponent() { const [output, setOutput] = React.useState(''); const [files, setFiles] = React.useState([]); React.useEffect(()=>{ const loadFFmpeg = async ()=>{ const { createFFmpeg, fetchFile } = FFmpeg; const ffmpeg = createFFmpeg({ log: true }); await ffmpeg.load(); window.ffmpeg = ffmpeg; window.fetchFile = fetchFile; }; loadFFmpeg(); }, []); const handleSubmit = async (event)=>{ event.preventDefault(); const command = event.target.ffmpegCommand.value.split(' '); if (window.ffmpeg && command.length > 0) { await window.ffmpeg.run(...command); const log = window.ffmpeg.ffmpeg.EXECUTIONS[0].stdout; setOutput(log); } }; const handleFileUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const fileData = await window.fetchFile(file); window.ffmpeg.FS('writeFile', file.name, fileData); setFiles([ ...files, file.name ]); } }; const handleReset = ()=>{ setOutput(''); setFiles([]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center bg-[#008080]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full bg-[#000080] text-white p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Tue, 11 Oct"))), /*#__PURE__*/ React.createElement("div", { className: "w-[600px] bg-[#C0C0C0] shadow-md p-4 mt-16", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between bg-[#000080] text-white p-1", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "WebAssembly FFmpeg Commander"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "X")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#C0C0C0] p-6 rounded-b-md", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-black font-medium font-crimson-text", htmlFor: "ffmpegCommand", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "FFmpeg Command"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 p-2 w-full border border-gray-300", type: "text", id: "ffmpegCommand", name: "ffmpegCommand", placeholder: "Enter FFmpeg command", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#000080] text-white py-2 px-4 font-crimson-text", type: "submit", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Run Command"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#800000] text-white py-2 px-4 font-crimson-text", type: "button", onClick: handleReset, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "一回リセット"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-black font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Output:"), /*#__PURE__*/ React.createElement("pre", { className: "mt-1 p-2 bg-white h-[200px] overflow-auto font-crimson-text", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, output)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-black font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Upload File:"), /*#__PURE__*/ React.createElement("input", { className: "mt-1 p-2 w-full border border-gray-300", type: "file", onChange: handleFileUpload, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, files.map((file, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-black font-medium font-crimson-text", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, file))))))); }