function MainComponent({ vpnEnabled, setVpnEnabled, youtubeUrls, setYoutubeUrls }) { const handleVpnToggle = ()=>{ setVpnEnabled(!vpnEnabled); }; const handleUrlSubmit = (e)=>{ e.preventDefault(); const newUrl = e.target.elements.urlInput.value; if (newUrl) { const videoId = extractVideoId(newUrl); if (videoId) { const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`; setYoutubeUrls([ ...youtubeUrls, embedUrl ]); e.target.elements.urlInput.value = ''; window.open(`${window.location.origin}/video/${videoId}`, '_blank'); } } }; const extractVideoId = (url)=>{ const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; const match = url.match(regExp); return match && match[2].length === 11 ? match[2] : null; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-blue-600 p-4 md:p-8", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto bg-white rounded-lg shadow-lg p-4 md:p-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold mb-6 md:mb-8 text-blue-700 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Multi-Video YouTube Viewer"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 md:mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleVpnToggle, className: `px-6 py-3 rounded-full font-semibold text-lg ${vpnEnabled ? 'bg-green-500 text-white' : 'bg-red-500 text-white'}`, __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "VPN: ", vpnEnabled ? 'ON' : 'OFF'), vpnEnabled && /*#__PURE__*/ React.createElement("span", { className: "ml-4 text-green-600 font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Your location has been changed")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleUrlSubmit, className: "mb-6 md:mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "urlInput", placeholder: "Paste YouTube URL here", className: "w-full px-4 py-3 text-lg border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-3 px-6 py-3 bg-blue-600 text-white text-lg rounded-md hover:bg-blue-700 transition duration-300", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Add Video")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, youtubeUrls.map((url, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "aspect-w-16 aspect-h-9", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: url, title: `YouTube video player ${index + 1}`, frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, className: "w-full h-full rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this })))))); } function StoryComponent() { const [vpnEnabled, setVpnEnabled] = React.useState(false); const [youtubeUrls, setYoutubeUrls] = React.useState([]); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { vpnEnabled: vpnEnabled, setVpnEnabled: setVpnEnabled, youtubeUrls: youtubeUrls, setYoutubeUrls: setYoutubeUrls, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this })); }