function MainComponent() { const videoRef1 = React.useRef(null); const videoRef2 = React.useRef(null); const overlayRef1 = React.useRef(null); const overlayRef2 = React.useRef(null); const handleUpload = (e, ref, overlayRef)=>{ const file = e.target.files[0]; if (file) { const url = URL.createObjectURL(file); ref.current.src = url; overlayRef.current.src = url; } }; const playBothVideos = ()=>{ if (videoRef1.current && videoRef2.current) { videoRef1.current.play(); videoRef2.current.play(); } }; const playOverlayVideos = ()=>{ if (overlayRef1.current && overlayRef2.current) { overlayRef1.current.play(); overlayRef2.current.play(); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#004399] p-4 min-h-screen", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 px-2", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef1, id: "video1", className: "w-full", controls: true, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "", type: "video/mp4", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), "選択されていません。"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", name: "uploadVideo1", className: "mt-2", onChange: (e)=>handleUpload(e, videoRef1, overlayRef1), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-1/2 px-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef2, id: "video2", className: "w-full", controls: true, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "", type: "video/mp4", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), "選択されていません。"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "video/*", name: "uploadVideo2", className: "mt-2", onChange: (e)=>handleUpload(e, videoRef2, overlayRef2), __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-white text-[#004399] font-bold py-2 px-4 rounded", onClick: playBothVideos, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Play Both Videos")), /*#__PURE__*/ React.createElement("div", { className: "relative my-4 h-[300px]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex justify-center items-center", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: overlayRef1, id: "overlayVideo1", className: "opacity-50", style: { width: '90%' }, muted: true, loop: true, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "", type: "video/mp4", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }), "選択されていません。"), /*#__PURE__*/ React.createElement("video", { ref: overlayRef2, id: "overlayVideo2", className: "opacity-50 absolute left-0 top-0", style: { width: '90%' }, muted: true, loop: true, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "", type: "video/mp4", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }), "選択されていません。")), /*#__PURE__*/ React.createElement("button", { className: "absolute inset-x-0 bottom-0 bg-white text-[#004399] font-bold py-2 px-4 rounded", onClick: playOverlayVideos, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Play Overlaid Videos")))); }