function StartButtonWidget({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-[#1e40af] text-white font-roboto py-[8px] px-[16px] rounded hover:bg-[#1d4ed8]", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Start"); } function StartButtonWidgetStory() { const handleStart = ()=>{ console.log("Video started"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StartButtonWidget, { onClick: handleStart, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [urls, setUrls] = React.useState([ "", "", "" ]); const [currentIndex, setCurrentIndex] = React.useState(0); const [isPlaying, setIsPlaying] = React.useState(false); const handleChange = (index, value)=>{ const newUrls = [ ...urls ]; newUrls[index] = value; setUrls(newUrls); }; const handleStart = ()=>{ setIsPlaying(true); setCurrentIndex(0); }; const handleVideoEnd = ()=>{ if (currentIndex < urls.length - 1) { setCurrentIndex((prevIndex)=>prevIndex + 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "YouTube Video Player"), !isPlaying ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "url1", placeholder: "Enter YouTube URL 1", className: "p-2 border border-gray-300 rounded w-[400px]", value: urls[0], onChange: (e)=>handleChange(0, e.target.value), __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url2", placeholder: "Enter YouTube URL 2", className: "p-2 border border-gray-300 rounded w-[400px]", value: urls[1], onChange: (e)=>handleChange(1, e.target.value), __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url3", placeholder: "Enter YouTube URL 3", className: "p-2 border border-gray-300 rounded w-[400px]", value: urls[2], onChange: (e)=>handleChange(2, e.target.value), __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(StartButtonWidget, { onClick: handleStart, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("iframe", { width: "560", height: "315", src: `https://www.youtube.com/embed/${new URL(urls[currentIndex]).searchParams.get('v')}?autoplay=1`, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, onEnded: handleVideoEnd, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this })); }