function MainComponent() { const [players, setPlayers] = React.useState({ folder1: Array.from({ length: 5 }).fill({ src: '', playing: false, volume: 1, name: 'Player 1' }), folder2: Array.from({ length: 5 }).fill({ src: '', playing: false, volume: 1, name: 'Player 2' }), folder3: Array.from({ length: 5 }).fill({ src: '', playing: false, volume: 1, name: 'Player 3' }) }); const [editingName, setEditingName] = React.useState(null); const [newName, setNewName] = React.useState(""); const handleUpload = (folderIndex, playerIndex, event)=>{ const file = event.target.files[0]; if (file) { const updatedPlayers = { ...players }; updatedPlayers[`folder${folderIndex}`][playerIndex].src = URL.createObjectURL(file); setPlayers(updatedPlayers); } }; const togglePlay = (audioRef)=>{ if (audioRef.current) { const isPlaying = !audioRef.current.paused; if (isPlaying) { audioRef.current.pause(); } else { audioRef.current.play(); } } }; const setVolume = (audioRef, volume)=>{ if (audioRef.current) { audioRef.current.volume = volume; } }; const handleNameChange = (folderIndex, playerIndex, newName)=>{ const updatedPlayers = { ...players }; updatedPlayers[`folder${folderIndex}`][playerIndex].name = newName; setPlayers(updatedPlayers); setEditingName(null); }; const renderPlayer = (folderIndex, player, playerIndex)=>{ const audioRef = React.useRef(null); return /*#__PURE__*/ React.createElement("div", { key: playerIndex, className: "flex flex-col items-center p-4 border border-gray-300 rounded-lg m-2", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("audio", { ref: audioRef, controls: true, src: player.src, className: "mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>togglePlay(audioRef), className: "text-xl px-4 py-2 m-2 rounded bg-blue-500 text-white", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, audioRef.current && !audioRef.current.paused ? 'Pause' : 'Play'), /*#__PURE__*/ React.createElement("input", { type: "file", name: `upload-${folderIndex}-${playerIndex}`, accept: "audio/*,video/mp4", onChange: (e)=>handleUpload(folderIndex, playerIndex, e), className: "m-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", name: `volume-${folderIndex}-${playerIndex}`, min: "0", max: "1", step: "0.01", defaultValue: player.volume, onChange: (e)=>setVolume(audioRef, e.target.value), className: "m-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), editingName === `${folderIndex}-${playerIndex}` ? /*#__PURE__*/ React.createElement("input", { type: "text", value: newName, onChange: (e)=>setNewName(e.target.value), onBlur: ()=>handleNameChange(folderIndex, playerIndex, newName), className: "m-2 p-2 border border-gray-300 rounded", autoFocus: true, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setEditingName(`${folderIndex}-${playerIndex}`); setNewName(player.name); }, className: "text-lg px-2 py-1 m-2 rounded bg-green-500 text-white", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, player.name || 'Name')); }; const renderFolder = (folderIndex)=>/*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-[760px] mx-auto", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, "Folder ", folderIndex), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, players[`folder${folderIndex}`].map((player, index)=>renderPlayer(folderIndex, player, index)))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-center my-6 font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, "creat.xyz Music Players"), /*#__PURE__*/ React.createElement("p", { className: "text-center my-4 mx-4", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, 'To play music, click on "Play" button. Use the slider to adjust volume. Click on player name to rename. Upload your music files using the "Choose File" button.'), renderFolder(1), renderFolder(2), renderFolder(3)); }

creat.xyz Music Players

Folder 1

Folder 2

Folder 3