function MainComponent() { const [videos, setVideos] = React.useState([]); const [currentIndex, setCurrentIndex] = React.useState(0); const [rating, setRating] = React.useState({ lyricism: 0, flow: 0, beatSelection: 0 }); const addVideo = (url)=>{ setVideos([ ...videos, { url, id: Date.now(), ratings: { lyricism: [], flow: [], beatSelection: [] } } ]); }; const rateVideo = (videoId, ratingCategory, value)=>{ setVideos(videos.map((video)=>video.id === videoId ? { ...video, ratings: { ...video.ratings, [ratingCategory]: [ ...video.ratings[ratingCategory], value ] } } : video)); }; const swipeVideo = (direction)=>{ if ((direction === 'right' || direction === 'left') && currentIndex < videos.length) { setCurrentIndex(currentIndex + 1); } }; const renderStars = (category)=>{ return [ ...Array.from({ length: 5 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("i", { key: i, className: `fas fa-star cursor-pointer p-1 ${rating[category] > i ? "text-yellow-400" : "text-gray-300"}`, onClick: ()=>setRating({ ...rating, [category]: i + 1 }), __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this })); }; const videoPlayer = videos.length > 0 && currentIndex < videos.length && /*#__PURE__*/ React.createElement("div", { className: "h-[300px] w-full bg-black my-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-full", src: `https://www.youtube.com/embed/${videos[currentIndex].url.split('=')[1]}`, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); const ratingControls = /*#__PURE__*/ React.createElement("div", { className: "space-y-4 py-2", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Lyricism:"), renderStars('lyricism')), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm mr-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Flow:"), renderStars('flow')), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Beat Selection:"), renderStars('beatSelection'))); const submitRating = ()=>{ Object.keys(rating).forEach((category)=>{ rateVideo(videos[currentIndex].id, category, rating[category]); }); setRating({ lyricism: 0, flow: 0, beatSelection: 0 }); swipeVideo('right'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white p-5 rounded shadow-lg", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, videoPlayer, ratingControls, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-500 font-bold py-2 px-4 rounded-full border-2 border-red-500 hover:bg-red-500 hover:text-white", onClick: ()=>swipeVideo('left'), __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-green-500 font-bold py-2 px-4 rounded-full border-2 border-green-500 hover:bg-green-500 hover:text-white", onClick: submitRating, __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }))))); }