diff options
| -rw-r--r-- | public/index.php | 30 | ||||
| -rw-r--r-- | public/static/scripts/audiorecorder.js | 61 |
2 files changed, 54 insertions, 37 deletions
diff --git a/public/index.php b/public/index.php index 4d469b5..22189cb 100644 --- a/public/index.php +++ b/public/index.php @@ -526,6 +526,8 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); document.getElementById('form-text-upload').style.display = 'none'; const uploadedFiles = document.getElementById('uploaded-files'); + const fileUploadWrapper = document.querySelector('#form-upload-wrapper>button'); + fileUploadWrapper.style.display = 'block'; let files = []; @@ -533,20 +535,29 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); formUpload.addEventListener('submit', (event) => { event.preventDefault(); displayTab('file-tabs', 'uploaded-files'); - for (const file of files) { + if (files.length > 0) { + for (const file of files) { + const form = new FormData(formUpload); + form.set("file", file); + form.delete("paste"); + form.delete("url"); + uploadData(form); + } + files = []; + } else { const form = new FormData(formUpload); - form.set("file", file); + form.delete("file"); uploadData(form); } - files.clear(); + files = []; fileUploadWrapper.innerHTML = '<h1>Click, drop, or paste files here</h1>'; setFormDetailsVisiblity(false); + showFile(null); + fileUploadWrapper.style.display = 'block'; + fileURL.value = ''; }); - const fileUploadWrapper = document.querySelector('#form-upload-wrapper>button'); - fileUploadWrapper.style.display = 'block'; - const fileURLWrapper = document.querySelector('#form-upload-wrapper>div'); const fileURL = document.getElementById('form-url'); fileURL.addEventListener('keyup', () => { @@ -564,7 +575,10 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); const formFile = document.getElementById('form-file'); formFile.style.display = 'none'; formFile.addEventListener("change", (e) => { - files = e.target.files; + files = []; + for (const file of e.target.files) { + files.push(file); + } showFile(files); }); @@ -575,7 +589,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); // --------------------- fileUploadWrapper.addEventListener("drop", (e) => { e.preventDefault(); - files.clear(); + files = []; if (e.dataTransfer.items) { for (const item of e.dataTransfer.items) { if (item.kind === "file") { diff --git a/public/static/scripts/audiorecorder.js b/public/static/scripts/audiorecorder.js index 145b18f..c62b8f8 100644 --- a/public/static/scripts/audiorecorder.js +++ b/public/static/scripts/audiorecorder.js @@ -67,15 +67,15 @@ let audioLength = 0; async function startRecording() { // TODO: very poor sound quality - stream = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 44100, channelCount: 1 }}); + stream = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 44100, channelCount: 1 } }); const options = { mimeType: 'audio/ogg; codecs=opus', audioBitsPerSecond: 128000 }; if (!MediaRecorder.isTypeSupported(options.mimeType)) { alert("Your browser doesn't support audio/ogg recording."); return; } - + audioLength = 0; - + mediaRecorder = new MediaRecorder(stream, options); audioChunks = []; @@ -90,7 +90,7 @@ async function startRecording() { startBtn.style.display = 'none'; stopBtn.style.display = 'block'; player.style.display = 'none'; - + setFormDetailsVisiblity(false); } @@ -98,65 +98,68 @@ function stopRecording() { mediaRecorder.stop(); startBtn.style.display = 'block'; stopBtn.style.display = 'none'; - + if (playback) { form.removeChild(playback); playback = null; } - + mediaRecorder.onstop = () => { const blob = new Blob(audioChunks, { type: 'audio/ogg; codecs=opus' }); const file = new File([blob], 'recording.ogg', { type: 'audio/ogg; codecs=opus' }); - + const url = URL.createObjectURL(file); - + playback = document.createElement('audio'); playback.src = url; - + playback.addEventListener('loadedmetadata', () => { - const d = playback.duration; - slider.max = d; - slider.value = 0; - currentSecond.textContent = formatTimestamp(slider.getAttribute('value')); - duration.textContent = formatTimestamp(d); + const d = playback.duration; + slider.max = d; + slider.value = 0; + currentSecond.textContent = formatTimestamp(slider.getAttribute('value')); + duration.textContent = formatTimestamp(d); }); - + playback.addEventListener('timeupdate', () => { currentSecond.textContent = formatTimestamp(playback.currentTime); slider.value = playback.currentTime; }); - + playback.addEventListener('ended', () => { playBtn.style.display = 'flex'; pauseBtn.style.display = 'none'; currentSecond.textContent = formatTimestamp(0); slider.value = 0; }); - + form.appendChild(playback); - + playBtn.style.display = 'flex'; pauseBtn.style.display = 'none'; - + startBtn.style.display = 'none'; stopBtn.style.display = 'none'; player.style.display = 'flex'; - + setFormDetailsVisiblity(true); - + stream.getAudioTracks().forEach(track => { track.stop(); }); - + stream = null; - + // attaching the file if (formFile) { const dt = new DataTransfer(); dt.items.add(file); - formFile.files = dt.files; + files = []; + for (const file of dt.files) { + files.push(file); + } } - + formTabs.setAttribute('disabled', 'true'); }; } @@ -167,20 +170,20 @@ function removeRecording() { form.removeChild(playback); formFile.value = ''; setFormDetailsVisiblity(false); - + formTabs.removeAttribute('disabled'); } function playRecord() { if (playback) playback.play(); - + playBtn.style.display = 'none'; pauseBtn.style.display = 'flex'; } function pauseRecord() { if (playback) playback.pause(); - + playBtn.style.display = 'flex'; pauseBtn.style.display = 'none'; } @@ -196,7 +199,7 @@ function rewindRecord() { function formatTimestamp(timestamp) { const m = Math.floor(timestamp / 60); const s = Math.ceil(timestamp % 60); - + return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s } |