diff --git a/.gitignore b/.gitignore index 00a295a..cc9c584 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -/webinterface/uploads/*.webm \ No newline at end of file +*.webm +*.mp3 \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..2da69a1 --- /dev/null +++ b/index.php @@ -0,0 +1,68 @@ + + + + + + + + + Upload your files + + + + + + + + + +
+ + + + + + + + Send this file: + + + +
+ + + + + + + +'; + +if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { + echo "File is valid, and was successfully uploaded.\n"; +} else { + + echo "Possible file upload attack!\n"; +} + + + +echo 'Here is some more debugging info:'; + +print_r($_FILES); + + + +print ""; + + + +?> \ No newline at end of file diff --git a/webinterface/index.php b/webinterface/index.php index ce7afa1..a4ce345 100644 --- a/webinterface/index.php +++ b/webinterface/index.php @@ -11,31 +11,78 @@
+ +

Signal lost archive unzipped

-

some info on what this even is

+

some info on what this even is

- Upload a file instead + Upload a file instead
-
+ +
+ +
+ +

Info

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla nobis eligendi earum assumenda iste ratione, blanditiis cupiditate natus non labore voluptatibus nostrum animi voluptatum ut quibusdam excepturi sit cumque molestiae?

-
- + + +
+ + + + +
+ +
+ +
+ +
-
+ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/webinterface/script.js b/webinterface/script.js index f817b22..9e139c6 100644 --- a/webinterface/script.js +++ b/webinterface/script.js @@ -1,50 +1,115 @@ -var micEl; +var micEl, infoButEl, formButEl, canvasEl; +var formDialogEl, infoDialogEl; let chunks = []; - +var cContext; +var xie = 1; var mediaRecorder = false; -var sendFile = async function (blob) { +var sendFile = function (blob) { const formData = new FormData(); formData.append('userfile', blob, new Date() + ".webm"); - const response = await fetch('upload.php', { + return fetch('', { method: 'POST', body: formData }); - - - return response.json() } +var initVisual = function (stream) { + var audioContext = new AudioContext(); + const ms = audioContext.createMediaStreamSource(stream); + var analyser = audioContext.createAnalyser(); + + ms.connect(analyser); + analyser.connect(audioContext.destination); + + analyser.fftSize = 128; + + var bufferLength = analyser.frequencyBinCount; + var dataArray = new Uint8Array(bufferLength); + var barW = canvasEl.width / bufferLength; + + + var waves = []; + + + var animateVisual = function () { + + var cHeight = canvasEl.height; + cContext.clearRect(0, 0, canvasEl.width, canvasEl.height); + + // scale from 0 to 255 + analyser.getByteFrequencyData(dataArray); + + // if height is 510 then maxscale/2; + // height is (canvasEl.height/2)/255 + var hRatio = (canvasEl.height) / 255; + + // analyser.getByteTimeDomainData(dataArray); + + // clear the previous shape + // cContext.fillStyle = "rgba(0, 0, 0, 1)"; + cContext.beginPath(); + // cContext.rect(0, 0, canvasEl.width, canvasEl.height); + cContext.fill(); + + + + cContext.fill(); + waves.push(dataArray[0]); + + var max = 144; + if (waves.length > (max + 1)) { + waves.shift(); + } + + cContext.fillStyle = "#231F20"; + + var barWidth = Math.ceil(canvasEl.width / max); + + + // first value is oldest value + for (var i = waves.length; i > 0; i--) { + var x = canvasEl.width / 2 - ((waves.length - i) * barWidth); + var y = canvasEl.height / 2; + var bHeight = waves[i] * hRatio; + console.log(waves[i]); + + cContext.fillRect(x, y - (bHeight/2), barWidth, bHeight) + } + + + + requestAnimationFrame(animateVisual); + } + + animateVisual(); +} + + + var initRecording = function (autostart) { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { - console.info("getUserMedia supported."); navigator.mediaDevices .getUserMedia({ audio: true }) .then((stream) => { + initVisual(stream); + mediaRecorder = new MediaRecorder(stream); - console.log(mediaRecorder.mimeType); - console.log("should i autostarty", autostart); mediaRecorder.ondataavailable = (e) => { chunks.push(e.data); }; mediaRecorder.onstop = (e) => { - console.log("got a call to stop"); - var audioEl = document.querySelectorAll("audio")[0]; const blob = new Blob(chunks, { type: mediaRecorder.mimeType }); - console.log(blob); chunks = []; - const audioURL = window.URL.createObjectURL(blob); - audioEl.src = audioURL; - console.log(audioEl.src); sendFile(blob).then((data) => { - document.querySelector(".fn-error").textContent = data + micEl.setAttribute("state", "finished"); }); } @@ -58,21 +123,21 @@ var initRecording = function (autostart) { } var startRecording = function (e) { - + if (!mediaRecorder) { console.log("did not initalise"); initRecording(true); - e.currentTarget.setAttribute("active", true); + e.currentTarget.setAttribute("state", "recording"); } else { if (mediaRecorder.state === "recording") { console.log("recording was already happening") mediaRecorder.stop(); - e.currentTarget.setAttribute("active", false); + e.currentTarget.setAttribute("state", "uploading"); } else { console.log("not yet recording, about tos tart"); mediaRecorder.start(); - e.currentTarget.setAttribute("active", true); + e.currentTarget.setAttribute("active", "recording"); } } @@ -82,8 +147,26 @@ window.onload = function () { console.log("load app"); micEl = document.querySelector('.fn-start-recording'); - + canvasEl = document.querySelector('canvas'); + canvasEl.width = window.innerWidth; + canvasEl.height = window.innerHeight; + cContext = canvasEl.getContext("2d"); + infoButEl = document.querySelector('.fn-open-dialog-info'); + formButEl = document.querySelector('.fn-open-dialog-form'); + formDialogEl = document.querySelector('.fn-dialog-form'); + infoDialogEl = document.querySelector(".fn-dialog-info"); + micEl.addEventListener('click', startRecording); + infoButEl.addEventListener("click", function (e) { + e.preventDefault(); + infoDialogEl.showModal(); + }) + + formButEl.addEventListener('click', function (e) { + e.preventDefault(); + formDialogEl.showModal(); + }) + } \ No newline at end of file diff --git a/webinterface/style.css b/webinterface/style.css index 7fcce91..93664b5 100644 --- a/webinterface/style.css +++ b/webinterface/style.css @@ -1,6 +1,6 @@ :root { --primary: #c5ff27; - --black: black; + --black: #231F20; --white: white; --gutter-sm: .5rem; --gutter-md: 1rem; @@ -12,10 +12,10 @@ @font-face { font-family: "WonderType"; src: - local("WonderType"), - url("WonderType-Regular.otf") format("opentype"), - url("trickster-outline.woff") format("woff"); - } + local("WonderType"), + url("WonderType-Regular.otf") format("opentype"), + url("trickster-outline.woff") format("woff"); +} html, body { @@ -23,7 +23,15 @@ body { height: 100%; margin: 0 0; padding: 0 0; - + +} + + +canvas { + position: fixed; + width: 100%; + height: 100%; + pointer-events: none; } * { @@ -40,10 +48,25 @@ body { margin: 0 auto; padding: var(--gutter-md); text-align: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + align-items: center; +} + +audio { + display: none; +} + +a { + color: var(--black); } button, -.button { +.button, +input::file-selector-button, +input[type="submit"] { width: 100%; display: inline-flex; align-items: center; @@ -57,24 +80,15 @@ button, font-size: var(--font-size-base); transition: .2s all ease-in-out; font-family: "WonderType"; + cursor: pointer; } -audio { - display: none; -} - -.button__wrapper { - display: flex; - justify-content: flex-center; - flex-direction: column; - width: 100%; - padding: var(--gutter-lg); - gap: var(--gutter-md); - text-align: center; +input::file-selector-button { + width: auto; } -a { - color: var(--black); +input[type="submit"] { + margin-top: var(--gutter-lg); } .button--record { @@ -87,6 +101,10 @@ a { background-color: transparent; } +.button--record:after { + content: "record"; +} + @keyframes recording { from { transform: rotate(0deg); @@ -111,32 +129,93 @@ a { transition: transform .1s linear; } - -.button--record[active="true"]:before { +.button--record[state="recording"]:before, +.button--record[state="uploading"]:before { transform: scale(0); } - -.button--record[active="true"] { +.button--record[state="recording"], +.button--record[state="uploading"] { color: var(--black); animation-delay: 1s; border: none; - border: 1rem dashed black; + border: 1rem dotted var(--black); + background-color: transparent; border-right-color: transparent; border-left-color: transparent; - background-color: transparent; - animation: 2s linear recording infinite; + animation: 8s linear recording infinite; +} + +.button--record[state="recording"] { + border-style: dashed; + animation-duration: 2s; } -.button--record[active="true"] .button__label { +.button--record[state="recording"]:after, +.button--record[state="finished"]:after, +.button--record[state="uploading"]:after { animation: 2s linear recording infinite; + content: "...recording.."; animation-direction: reverse; } -.recorder { - display: flex; +.button--record[state="uploading"]:after { + animation-duration: 8s; + content: "...uploading.."; +} + + +.button--record[state="finished"]:after { + animation-duration: 8s; + content: "File is uploaded"; +} + + +.button--icon { + background: transparent; +} + + + +dialog { + width: auto; + max-width: 400px; flex-direction: column; - height: 100%; - justify-content: space-between; - align-items: center; +} + +dialog::backdrop { + background-image: linear-gradient(45deg, + magenta, + rebeccapurple, + dodgerblue, + green); + opacity: 0.75; +} + +.dialog__close { + align-self: flex-end; + position: relative; +} + +.dialog__close button { + position: absolute; + z-index: 99; + top: 0; + right: 0; + display: block; + width: auto; + padding: 0 0; +} + +dialog h3 { + margin: 0 0; +} + +label { + margin: var(--gutter-sm) 0; + display: block; +} + +dialog[open] { + display: flex; } \ No newline at end of file diff --git a/webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 40fddb7..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 15:55:22 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 15:55:22 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 2e55295..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 15:55:22 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 15:55:25 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 15:55:25 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 3aa5603..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 15:55:25 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 15:55:44 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 15:55:44 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 830e61b..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 15:55:44 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 15:56:03 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 15:56:03 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index f246fea..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 15:56:03 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 16:09:13 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 16:09:13 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index e4b2070..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 16:09:13 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 16:09:26 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 16:09:26 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 530208c..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 16:09:26 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 16:11:44 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 16:11:44 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 3a95fd5..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 16:11:44 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 16:12:38 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 16:12:38 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index efb09c2..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 16:12:38 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 16:12:55 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 16:12:55 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index c0b1936..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 16:12:55 GMT+0100 (Central European Standard Time).webm and /dev/null differ diff --git a/webinterface/uploads/Mon Dec 04 2023 16:13:37 GMT+0100 (Central European Standard Time).webm b/webinterface/uploads/Mon Dec 04 2023 16:13:37 GMT+0100 (Central European Standard Time).webm deleted file mode 100644 index 311c660..0000000 Binary files a/webinterface/uploads/Mon Dec 04 2023 16:13:37 GMT+0100 (Central European Standard Time).webm and /dev/null differ