vitrinekast
/
random-radio-radio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

before big changes

Browse Source
main
vitrinekast 12 months ago
parent 1f25512af0
commit 084156a2c3
16 changed files with 343 additions and 65 deletions
Show Stats Download Patch File Download Diff File

3
.gitignore vendored
Unescape Escape View File

@ -1 +1,2 @@
/webinterface/uploads/*.webm *.webm
*.mp3

68
index.php
Unescape Escape View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Upload your files</title>
</head>
<body>
<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" action="/" method="POST">
<!-- MAX_FILE_SIZE must precede the file input field -->
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<!-- Name of input element determines name in $_FILES array -->
Send this file: <input name="userfile" type="file" />
<input type="submit" value="Send File" />
</form>
</body>
</html>
<?php
$uploaddir = '/opt/homebrew/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
echo '<pre>';
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 "</pre>";
?>

63
webinterface/index.php
Unescape Escape View File

@ -11,31 +11,78 @@
<body> <body>
<div class="container recorder"> <div class="container recorder">
<canvas width="800px" height="800px" style="display: none"></canvas>
<header> <header>
<h1>Signal lost archive unzipped</h1> <h1>Signal lost archive unzipped</h1>
<p>some info on what this even is</p> <p>some info on what this even <a href="#" class="fn-open-dialog-info">is</a></p>
<span class='fn-error'></span> <span class='fn-error'></span>
</header> </header>
<button class='fn-start-recording button--record'> <button class='fn-start-recording button--record'>
<span class="button__label">RECORD</span>
</button> </button>
<a href="" class="fn-file-upload">Upload a file instead</a> <a href="" class="fn-open-dialog-form">Upload a file instead</a>
<audio controls></audio> <audio controls></audio>
</div> </div>
<section class='upload'> <dialog class='fn-dialog-info'>
<form method="dialog" class='dialog__close'>
<button class="button--icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</button>
</form>
<h3>Info</h3>
<p>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?</p>
<form enctype="multipart/form-data" class="fn-upload-form" action="upload.php" method="POST">
<input name="userfile" type="file" /> <form method="dialog">
<button class="">
close
</button>
</form>
</dialog>
<dialog class='fn-dialog-form'>
<form method="dialog" class='dialog__close'>
<button class="button--icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</button>
</form>
<form enctype="multipart/form-data" class="fn-upload-form" action="upload.php" method="POST">
<label for="file">Select a file to upload</label>
<input name="userfile" id="file" type="file" />
<input type="submit" value="Send File" /> <input type="submit" value="Send File" />
</form> </form>
</section>
</dialog>
<script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="script.js"></script>
</body> </body>
</html> </html>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploaddir = getcwd() . '/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
// TODO check file type
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo json_encode("File is valid, and was successfully uploaded.\n");
} else {
echo json_encode("Possible file upload attack!\n");
}
}
?>

127
webinterface/script.js
Unescape Escape View File

@ -1,50 +1,115 @@
var micEl; var micEl, infoButEl, formButEl, canvasEl;
var formDialogEl, infoDialogEl;
let chunks = []; let chunks = [];
var cContext;
var xie = 1;
var mediaRecorder = false; var mediaRecorder = false;
var sendFile = async function (blob) { var sendFile = function (blob) {
const formData = new FormData(); const formData = new FormData();
formData.append('userfile', blob, new Date() + ".webm"); formData.append('userfile', blob, new Date() + ".webm");
const response = await fetch('upload.php', { return fetch('', {
method: 'POST', method: 'POST',
body: formData 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) { var initRecording = function (autostart) {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.info("getUserMedia supported.");
navigator.mediaDevices navigator.mediaDevices
.getUserMedia({ audio: true }) .getUserMedia({ audio: true })
.then((stream) => { .then((stream) => {
initVisual(stream);
mediaRecorder = new MediaRecorder(stream); mediaRecorder = new MediaRecorder(stream);
console.log(mediaRecorder.mimeType);
console.log("should i autostarty", autostart);
mediaRecorder.ondataavailable = (e) => { mediaRecorder.ondataavailable = (e) => {
chunks.push(e.data); chunks.push(e.data);
}; };
mediaRecorder.onstop = (e) => { mediaRecorder.onstop = (e) => {
console.log("got a call to stop");
var audioEl = document.querySelectorAll("audio")[0];
const blob = new Blob(chunks, { const blob = new Blob(chunks, {
type: mediaRecorder.mimeType type: mediaRecorder.mimeType
}); });
console.log(blob);
chunks = []; chunks = [];
const audioURL = window.URL.createObjectURL(blob);
audioEl.src = audioURL;
console.log(audioEl.src);
sendFile(blob).then((data) => { 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) { var startRecording = function (e) {
if (!mediaRecorder) { if (!mediaRecorder) {
console.log("did not initalise"); console.log("did not initalise");
initRecording(true); initRecording(true);
e.currentTarget.setAttribute("active", true); e.currentTarget.setAttribute("state", "recording");
} else { } else {
if (mediaRecorder.state === "recording") { if (mediaRecorder.state === "recording") {
console.log("recording was already happening") console.log("recording was already happening")
mediaRecorder.stop(); mediaRecorder.stop();
e.currentTarget.setAttribute("active", false); e.currentTarget.setAttribute("state", "uploading");
} else { } else {
console.log("not yet recording, about tos tart"); console.log("not yet recording, about tos tart");
mediaRecorder.start(); mediaRecorder.start();
e.currentTarget.setAttribute("active", true); e.currentTarget.setAttribute("active", "recording");
} }
} }
@ -82,8 +147,26 @@ window.onload = function () {
console.log("load app"); console.log("load app");
micEl = document.querySelector('.fn-start-recording'); 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); micEl.addEventListener('click', startRecording);
infoButEl.addEventListener("click", function (e) {
e.preventDefault();
infoDialogEl.showModal();
})
formButEl.addEventListener('click', function (e) {
e.preventDefault();
formDialogEl.showModal();
})
} }

147
webinterface/style.css
Unescape Escape View File

@ -1,6 +1,6 @@
:root { :root {
--primary: #c5ff27; --primary: #c5ff27;
--black: black; --black: #231F20;
--white: white; --white: white;
--gutter-sm: .5rem; --gutter-sm: .5rem;
--gutter-md: 1rem; --gutter-md: 1rem;
@ -12,10 +12,10 @@
@font-face { @font-face {
font-family: "WonderType"; font-family: "WonderType";
src: src:
local("WonderType"), local("WonderType"),
url("WonderType-Regular.otf") format("opentype"), url("WonderType-Regular.otf") format("opentype"),
url("trickster-outline.woff") format("woff"); url("trickster-outline.woff") format("woff");
} }
html, html,
body { body {
@ -23,7 +23,15 @@ body {
height: 100%; height: 100%;
margin: 0 0; margin: 0 0;
padding: 0 0; padding: 0 0;
}
canvas {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
} }
* { * {
@ -40,10 +48,25 @@ body {
margin: 0 auto; margin: 0 auto;
padding: var(--gutter-md); padding: var(--gutter-md);
text-align: center; 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 { .button,
input::file-selector-button,
input[type="submit"] {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -57,24 +80,15 @@ button,
font-size: var(--font-size-base); font-size: var(--font-size-base);
transition: .2s all ease-in-out; transition: .2s all ease-in-out;
font-family: "WonderType"; font-family: "WonderType";
cursor: pointer;
} }
audio { input::file-selector-button {
display: none; width: auto;
}
.button__wrapper {
display: flex;
justify-content: flex-center;
flex-direction: column;
width: 100%;
padding: var(--gutter-lg);
gap: var(--gutter-md);
text-align: center;
} }
a { input[type="submit"] {
color: var(--black); margin-top: var(--gutter-lg);
} }
.button--record { .button--record {
@ -87,6 +101,10 @@ a {
background-color: transparent; background-color: transparent;
} }
.button--record:after {
content: "record";
}
@keyframes recording { @keyframes recording {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
@ -111,32 +129,93 @@ a {
transition: transform .1s linear; transition: transform .1s linear;
} }
.button--record[state="recording"]:before,
.button--record[active="true"]:before { .button--record[state="uploading"]:before {
transform: scale(0); transform: scale(0);
} }
.button--record[state="recording"],
.button--record[active="true"] { .button--record[state="uploading"] {
color: var(--black); color: var(--black);
animation-delay: 1s; animation-delay: 1s;
border: none; border: none;
border: 1rem dashed black; border: 1rem dotted var(--black);
background-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-left-color: transparent; border-left-color: transparent;
background-color: transparent; animation: 8s linear recording infinite;
animation: 2s 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; animation: 2s linear recording infinite;
content: "...recording..";
animation-direction: reverse; animation-direction: reverse;
} }
.recorder { .button--record[state="uploading"]:after {
display: flex; 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; 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;
} }

BIN
webinterface/uploads/Mon Dec 04 2023 14:28:46 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 15:55:22 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 15:55:25 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 15:55:44 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 15:56:03 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 16:09:13 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 16:09:26 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 16:11:44 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 16:12:38 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 16:12:55 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.

BIN
webinterface/uploads/Mon Dec 04 2023 16:13:37 GMT+0100 (Central European Standard Time).webm
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save