function MainComponent() { const [videoUrl, setVideoUrl] = React.useState(''); const [subtitles, setSubtitles] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleInputChange = (e)=>{ setVideoUrl(e.target.value); }; const loadSubtitles = async ()=>{ setLoading(true); const videoId = new URLSearchParams(new URL(videoUrl).search).get('v'); try { const response = await fetch(`https://video.google.com/timedtext?lang=en&v=${videoId}`); const data = await response.text(); const parser = new DOMParser(); const xml = parser.parseFromString(data, "text/xml"); const textElements = xml.getElementsByTagName("text"); let parsedSubtitles = ""; for(let i = 0; i < textElements.length; i++){ const text = textElements[i].textContent; const start = parseFloat(textElements[i].getAttribute("start")); const dur = parseFloat(textElements[i].getAttribute("dur")); parsedSubtitles += `${convertTime(start)} - ${convertTime(start + dur)}: ${text}\n`; } setSubtitles(parsedSubtitles); } catch (error) { console.error("Error loading subtitles: ", error); setSubtitles("Failed to load subtitles."); } setLoading(false); }; const convertTime = (timeInSeconds)=>{ const pad = (num, size)=>('000' + num).slice(size * -1); const time = parseFloat(timeInSeconds).toFixed(3); const hours = Math.floor(time / 3600); const minutes = Math.floor(time / 60) % 60; const seconds = Math.floor(time - minutes * 60); const milliseconds = time.slice(-3); return pad(hours, 2) + ':' + pad(minutes, 2) + ':' + pad(seconds, 2) + ',' + pad(milliseconds, 3); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-[#333] mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "YouTube Video Subtitles Viewer"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "youtubeLink", placeholder: "Enter YouTube video link here", value: videoUrl, onChange: handleInputChange, className: "font-roboto text-[#333] p-2 border border-[#ccc] rounded-lg w-full md:w-[500px] mb-4 md:mb-0 md:mr-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: loadSubtitles, className: `w-full md:w-auto px-6 py-2 font-roboto text-white bg-[#ff0000] ${loading ? 'bg-[#aaa]' : 'hover:bg-[#cc0000]'} rounded-lg transition duration-300 ease-in-out`, disabled: loading, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, loading ? 'Loading...' : 'Load Subtitles')), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[800px] bg-white border border-[#ccc] rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { title: "YouTube video player", className: "w-full h-[450px]", src: videoUrl ? `https://www.youtube.com/embed/${new URLSearchParams(new URL(videoUrl).search).get('v')}` : '', __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Subtitles:"), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] overflow-auto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, subtitles)))); }