function MainComponent() { const [tracks, setTracks] = React.useState([]); const [isPlaying, setIsPlaying] = React.useState(false); const [recording, setRecording] = React.useState(false); const audioContextRef = React.useRef(); const [currentTime, setCurrentTime] = React.useState(0); React.useEffect(()=>{ audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); return ()=>{ if (audioContextRef.current) { audioContextRef.current.close(); } }; }, []); const handleUpload = async (event)=>{ const files = Array.from(event.target.files); const [upload] = useUpload(); const newTracks = await Promise.all(files.map(async (file)=>{ const { url } = await upload({ file }); const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContextRef.current.decodeAudioData(arrayBuffer); return { name: file.name, url, buffer: audioBuffer, playing: isPlaying, volume: 1, pan: 0, solo: false, mute: false, source: null, gainNode: audioContextRef.current.createGain(), panNode: audioContextRef.current.createStereoPanner() }; })); setTracks((prevTracks)=>[ ...prevTracks, ...newTracks ]); }; const playAllTracks = ()=>{ const newIsPlaying = !isPlaying; setIsPlaying(newIsPlaying); tracks.forEach((track)=>{ if (track.source) { track.source.stop(); track.source = null; } if (newIsPlaying && !track.mute) { const source = audioContextRef.current.createBufferSource(); source.buffer = track.buffer; source.connect(track.gainNode); track.gainNode.connect(track.panNode); track.panNode.connect(audioContextRef.current.destination); source.start(0, currentTime); track.source = source; } }); setTracks(tracks.map((track)=>({ ...track, playing: newIsPlaying }))); }; const toggleSolo = (index)=>{ setTracks((prevTracks)=>prevTracks.map((track, i)=>({ ...track, solo: i === index ? !track.solo : track.solo }))); }; const toggleMute = (index)=>{ setTracks((prevTracks)=>prevTracks.map((track, i)=>{ const newTrack = { ...track, mute: i === index ? !track.mute : track.mute }; if (i === index) { if (newTrack.mute) { track.gainNode.gain.value = 0; } else { track.gainNode.gain.value = track.volume; } } return newTrack; })); }; const adjustVolume = (index, event)=>{ const volume = Number(event.target.value); setTracks((prevTracks)=>prevTracks.map((track, i)=>{ if (i === index) { track.gainNode.gain.value = volume; return { ...track, volume }; } return track; })); }; const adjustPan = (index, event)=>{ const pan = Number(event.target.value); setTracks((prevTracks)=>prevTracks.map((track, i)=>{ if (i === index) { track.panNode.pan.value = pan; return { ...track, pan }; } return track; })); }; const closeTrack = (index)=>{ const track = tracks[index]; if (track.source) { track.source.stop(); } setTracks((prevTracks)=>prevTracks.filter((_, i)=>i !== index)); }; const toggleRecording = ()=>{ setRecording(!recording); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gradient-to-br from-[#400D51] to-[#8C0032] px-8 py-4 font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white tracking-wider", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "Multitrack Studio"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: playAllTracks, className: `rounded-full p-3 ${isPlaying ? "bg-[#8C0032]" : "bg-[#400D51]"} text-white hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? "fa-pause" : "fa-play"} text-xl`, __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: toggleRecording, className: `rounded-full p-3 ${recording ? "bg-red-600" : "bg-[#400D51]"} text-white hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-circle text-xl", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "rounded-full p-2 cursor-pointer bg-white", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-xl text-[#D22688]", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, onChange: handleUpload, className: "hidden", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1E1E1E] bg-opacity-50 p-4 rounded-lg mb-4 overflow-x-auto", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-16", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-8 inset-x-0 flex", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 32 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "flex-1 border-l border-[#8C0032] relative", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, i % 4 === 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "absolute -top-6 left-1 text-white text-xs", __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, i / 4 + 1), /*#__PURE__*/ React.createElement("div", { className: "absolute -top-2 left-1/2 -translate-x-1/2 text-[#8C0032] text-xs", __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, i + 1))))))), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto space-y-4", __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, tracks.map((track, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between p-4 bg-[#1E1E1E] bg-opacity-50 rounded-lg backdrop-blur-sm", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 flex-grow", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-white", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow h-16 bg-[#2A2A2A] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "waveform-container", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { className: "waveform-canvas", ref: (canvas)=>{ if (canvas && track.buffer) { const ctx = canvas.getContext("2d"); const data = track.buffer.getChannelData(0); const step = Math.ceil(data.length / canvas.width); const amp = canvas.height / 2; ctx.fillStyle = "#8C0032"; ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < canvas.width; i++){ let min = 1.0; let max = -1.0; for(let j = 0; j < step; j++){ const datum = data[i * step + j]; if (datum < min) min = datum; if (datum > max) max = datum; } ctx.fillRect(i, (1 + min) * amp, 1, Math.max(1, (max - min) * amp)); } } }, __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "playhead absolute top-0 h-full w-px bg-white opacity-50", style: { "--playing": isPlaying ? "running" : "paused" }, __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, track.name)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleSolo(index), className: `h-8 w-8 rounded-full ${track.solo ? "bg-[#8C0032]" : "bg-[#400D51]"} text-white hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this }, "S"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleMute(index), className: `h-8 w-8 rounded-full ${track.mute ? "bg-[#8C0032]" : "bg-[#400D51]"} text-white hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, "M"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-white", __source: { fileName: "", lineNumber: 260, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "1", step: "0.01", value: track.volume, onChange: (e)=>adjustVolume(index, e), className: "w-24 accent-[#8C0032]", name: `volume-${index}`, __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-random text-white", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "-1", max: "1", step: "0.01", value: track.pan, onChange: (e)=>adjustPan(index, e), className: "w-24 accent-[#8C0032]", name: `pan-${index}`, __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>closeTrack(index), className: "text-white hover:text-red-500 transition-colors", __source: { fileName: "", lineNumber: 285, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 296, columnNumber: 7 }, __self: this }, ` @keyframes playhead { from { transform: translateX(0); } to { transform: translateX(100%); } } .playhead { animation: playhead 60s linear infinite; animation-play-state: var(--playing); } .waveform-container { position: relative; width: 100%; height: 100%; } .waveform-canvas { width: 100%; height: 100%; } `)); }