function MainComponent() { const [videoStreamError, setVideoStreamError] = React.useState(''); const [inbound, setInbound] = React.useState(0); const [outbound, setOutbound] = React.useState(0); const [hasStreamStarted, setHasStreamStarted] = React.useState(false); const [videoLinkType, setVideoLinkType] = React.useState(''); const [videoLink, setVideoLink] = React.useState(''); const determineVideoType = (link)=>{ if (link.includes("rtsp://")) { return "application/x-rtsp"; } else if (link.includes("youtube.com") || link.includes("youtu.be")) { return "video/youtube"; } else { return "video/mp4"; } }; const handleSubmit = (event)=>{ event.preventDefault(); const inputLink = event.target.videoLink.value; if (!inputLink) { setVideoStreamError('Invalid URL: Empty URL provided.'); setHasStreamStarted(false); } else { setVideoLink(inputLink); setVideoStreamError(''); setHasStreamStarted(true); setVideoLinkType(determineVideoType(inputLink)); } }; const renderVideoPlayer = ()=>{ if (!videoLink) { return /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 14 }, __self: this }, "Error: No video stream connected."); } switch(videoLinkType){ case "video/youtube": const videoId = videoLink.split('v=')[1]?.split('&')[0]; if (videoId) { return /*#__PURE__*/ React.createElement("iframe", { className: "w-full max-w-lg mx-auto", src: `https://www.youtube.com/embed/${videoId}`, frameBorder: "0", allowFullScreen: true, __source: { fileName: "", lineNumber: 42, columnNumber: 18 }, __self: this }); } else { return /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 18 }, __self: this }, "Invalid YouTube link."); } case "application/x-rtsp": case "video/mp4": default: return /*#__PURE__*/ React.createElement("video", { className: "w-full max-w-lg mx-auto", controls: true, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: videoLink, type: videoLinkType, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), "Your browser does not support the video tag."); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8 mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Visitor Statistics"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-center text-[#121212] mb-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "A computer application that connects to the video stream via a RTSP link, standard link or YouTube video player, displays the connected video in an interface, analyses the video stream, defines people as an object, records incoming and outgoing visitors into statistics, shows the statistics..."), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4 mb-8", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoLink", className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Stream Link (RTSP, Standard or YouTube):"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "videoLink", id: "videoLink", className: "border-2 border-[#d1d5db] rounded-md p-2 font-roboto text-[#121212]", placeholder: "Enter stream link", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] hover:bg-[#0056b3] text-white font-bold py-2 px-4 rounded-md transition-colors duration-150", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Analyze Stream")), videoStreamError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 30 }, __self: this }, videoStreamError), /*#__PURE__*/ React.createElement("div", { className: hasStreamStarted ? "overflow-auto" : "hidden", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, renderVideoPlayer(), /*#__PURE__*/ React.createElement("table", { className: "w-full mt-8", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border-2 border-[#d1d5db] p-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, "Incoming"), /*#__PURE__*/ React.createElement("th", { className: "border-2 border-[#d1d5db] p-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, "Outgoing"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-2 border-[#d1d5db] p-2 text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, inbound), /*#__PURE__*/ React.createElement("td", { className: "border-2 border-[#d1d5db] p-2 text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, outbound)))))))); }