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

duo interface

Browse Source
main
vitrinekast 12 months ago
parent 084156a2c3
commit 8f4a948ee7
3 changed files with 265 additions and 133 deletions
Show Stats Download Patch File Download Diff File

75
webinterface/index.php
Unescape Escape View File

@ -3,49 +3,56 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Upload to the archive</title> <title>Upload to the archive</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container recorder"> <canvas width="800px" height="800px"></canvas>
<section class='multi'>
<canvas width="800px" height="800px" style="display: none"></canvas> <div class="multi__top">
<header> <div class="state state--finished">
<h1>Signal lost archive unzipped</h1> <h1>Great Success!</h1>
<p>some info on what this even <a href="#" class="fn-open-dialog-info">is</a></p> <p>Your broadcast is now part of the community archive, and will be broadcasted asap.</p>
<span class='fn-error'></span> <p>Stay strong, survivor!</p>
</header> </div>
<button class='fn-start-recording button--record'>
</button>
<div class="state state--idle">
<h1>Radio Studio V0.1</h1>
<p>Start your community stream, together with another survivor</p>
<a href="" class="fn-open-dialog-form">Upload a file instead</a> <a href="" class="fn-open-dialog-form">Upload a file instead</a>
<audio controls></audio>
</div> </div>
<dialog class='fn-dialog-info'> <div class="state state--waiting">
<form method="dialog" class='dialog__close'> <h1>Making radio unzipped</h1>
<button class="button--icon"> <p>waiting for your friend</p>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"> </div>
<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" /> <button class="button--record fn-touch-record" target="top"></button>
</svg> </div>
</button>
</form>
<h3>Info</h3> <div class="multi__bottom">
<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>
<div class="state state--finished">
<h1>Great Success!</h1>
<p>Your broadcast is now part of the community archive, and will be broadcasted asap.</p>
<p>Stay strong, survivor!</p>
</div>
<form method="dialog"> <div class="state state--idle">
<button class=""> <h1>Radio Studio V0.1</h1>
close <p>Start your community stream, together with another survivor</p>
</button> <a href="" class="fn-open-dialog-form">Upload a file instead</a>
</form> </div>
</dialog>
<div class="state state--waiting">
<h1>Radio Studio V0.1</h1>
<p>waiting for your friend</p>
</div>
<button class="button--record fn-touch-record" target="bottom"></button>
</div>
</section>
<dialog class='fn-dialog-form'> <dialog class='fn-dialog-form'>
<form method="dialog" class='dialog__close'> <form method="dialog" class='dialog__close'>
@ -56,7 +63,7 @@
</button> </button>
</form> </form>
<form enctype="multipart/form-data" class="fn-upload-form" action="upload.php" method="POST"> <form enctype="multipart/form-data" class="fn-upload-form" action="" method="POST">
<label for="file">Select a file to upload</label> <label for="file">Select a file to upload</label>
<input name="userfile" id="file" type="file" /> <input name="userfile" id="file" type="file" />
<input type="submit" value="Send File" /> <input type="submit" value="Send File" />
@ -77,9 +84,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$uploaddir = getcwd() . '/uploads/'; $uploaddir = getcwd() . '/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']); $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
// TODO check file type
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
$base = pathinfo($uploadfile)['filename'];
echo shell_exec("/usr/bin/ffmpeg -i " . $uploadfile . " /var/www/html/radio/random-radio-radio/webinterface/uploads/" . $base . ".wav 2>&1");
echo json_encode("File is valid, and was successfully uploaded.\n"); echo json_encode("File is valid, and was successfully uploaded.\n");
} else { } else {
echo json_encode("Possible file upload attack!\n"); echo json_encode("Possible file upload attack!\n");

138
webinterface/script.js
Unescape Escape View File

@ -4,6 +4,8 @@ let chunks = [];
var cContext; var cContext;
var xie = 1; var xie = 1;
var mediaRecorder = false; var mediaRecorder = false;
var recordEls;
var state = "idle";
var sendFile = function (blob) { var sendFile = function (blob) {
const formData = new FormData(); const formData = new FormData();
@ -16,10 +18,13 @@ var sendFile = function (blob) {
}); });
} }
var analyser, dataArray, barW, waves;
var initVisual = function (stream) { var initVisual = function (stream) {
waves = [];
var audioContext = new AudioContext(); var audioContext = new AudioContext();
const ms = audioContext.createMediaStreamSource(stream); const ms = audioContext.createMediaStreamSource(stream);
var analyser = audioContext.createAnalyser(); analyser = audioContext.createAnalyser();
ms.connect(analyser); ms.connect(analyser);
analyser.connect(audioContext.destination); analyser.connect(audioContext.destination);
@ -27,11 +32,10 @@ var initVisual = function (stream) {
analyser.fftSize = 128; analyser.fftSize = 128;
var bufferLength = analyser.frequencyBinCount; var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength); dataArray = new Uint8Array(bufferLength);
var barW = canvasEl.width / bufferLength; barW = 29;
}
var waves = [];
var animateVisual = function () { var animateVisual = function () {
@ -41,22 +45,12 @@ var initVisual = function (stream) {
// scale from 0 to 255 // scale from 0 to 255
analyser.getByteFrequencyData(dataArray); analyser.getByteFrequencyData(dataArray);
// if height is 510 then maxscale/2;
// height is (canvasEl.height/2)/255
var hRatio = (canvasEl.height) / 255;
// analyser.getByteTimeDomainData(dataArray); // analyser.getByteTimeDomainData(dataArray);
var hRatio = (canvasEl.height) / 255;
// clear the previous shape
// cContext.fillStyle = "rgba(0, 0, 0, 1)";
cContext.beginPath(); cContext.beginPath();
// cContext.rect(0, 0, canvasEl.width, canvasEl.height);
cContext.fill();
cContext.fill(); cContext.fill();
cContext.fillStyle = "#231F20";
waves.push(dataArray[0]); waves.push(dataArray[0]);
var max = 144; var max = 144;
@ -64,27 +58,22 @@ var initVisual = function (stream) {
waves.shift(); waves.shift();
} }
cContext.fillStyle = "#231F20";
var barWidth = Math.ceil(canvasEl.width / max); var barWidth = Math.ceil(canvasEl.width / max);
// first value is oldest value // first value is oldest value
for (var i = waves.length; i > 0; i--) { for (var i = waves.length; i > 0; i--) {
var x = canvasEl.width / 2 - ((waves.length - i) * barWidth); var x = canvasEl.width - ((waves.length - i) * barWidth);
var y = canvasEl.height / 2; var y = canvasEl.height / 2;
var bHeight = waves[i] * hRatio; var bHeight = waves[i] * hRatio;
console.log(waves[i]);
cContext.fillRect(x, y - (bHeight / 2), barWidth, bHeight) cContext.fillRect(x, y - (bHeight / 2), barWidth, bHeight)
} }
if (state === "recording") {
requestAnimationFrame(animateVisual); requestAnimationFrame(animateVisual);
} } else {
cContext.clearRect(0, 0, canvasEl.width, canvasEl.height);
animateVisual(); }
} }
@ -98,7 +87,6 @@ var initRecording = function (autostart) {
initVisual(stream); initVisual(stream);
mediaRecorder = new MediaRecorder(stream); mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (e) => { mediaRecorder.ondataavailable = (e) => {
chunks.push(e.data); chunks.push(e.data);
}; };
@ -108,13 +96,30 @@ var initRecording = function (autostart) {
type: mediaRecorder.mimeType type: mediaRecorder.mimeType
}); });
chunks = []; chunks = [];
sendFile(blob).then((data) => {
micEl.setAttribute("state", "finished"); sendFile(blob).then((response) => {
if (response.status == 200) {
console.log("all went well");
} else {
alert("Ooops (" + response.status + ").... something went wrong. we are saving the file on your device instead");
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = new Date() + ".webm";
a.click();
window.URL.revokeObjectURL(url);
}
state = "finished";
updateAllStates(state);
}); });
} }
if (autostart) { if (autostart) {
mediaRecorder.start(); mediaRecorder.start();
animateVisual();
} }
}) })
} else { } else {
@ -122,51 +127,88 @@ var initRecording = function (autostart) {
} }
} }
var startRecording = function (e) {
var startRecording = function () {
if (!mediaRecorder) { if (!mediaRecorder) {
console.log("did not initalise"); console.log("did not initalise");
initRecording(true); initRecording(false);
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("state", "uploading"); state = "uploading";
updateAllStates(state);
} 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", "recording"); animateVisual();
}
}
} }
var updateAllStates = function (newState) {
document.body.setAttribute("state", newState);
recordEls.forEach((el) => {
el.setAttribute("state", newState)
})
} }
var onRecordElsClick = function (e) {
console.log(e.currentTarget)
var target = e.currentTarget.getAttribute("target");
if (state === "idle") {
state = "waiting";
initRecording(false);
e.currentTarget.setAttribute("state", state);
document.body.setAttribute("state", state + "--" + e.currentTarget.getAttribute("target"));
} else if (state === "waiting") {
if (e.currentTarget.getAttribute("state") === "waiting") {
state = "idle";
e.currentTarget.setAttribute("state", state);
document.body.setAttribute("state", state);
} else {
state = "recording";
startRecording();
updateAllStates(state);
}
} else if (state === "recording") {
state === "uploading";
updateAllStates(state);
mediaRecorder.stop();
} }
}
window.onload = function () { window.onload = function () {
console.log("load app"); console.log("load app");
micEl = document.querySelector('.fn-start-recording'); recordEls = document.querySelectorAll(".fn-touch-record");
document.body.setAttribute("state", state);
recordEls.forEach((el) => {
el.addEventListener("click", onRecordElsClick)
})
canvasEl = document.querySelector('canvas'); canvasEl = document.querySelector('canvas');
canvasEl.width = window.innerWidth; canvasEl.width = window.innerWidth;
canvasEl.height = window.innerHeight;
cContext = canvasEl.getContext("2d"); cContext = canvasEl.getContext("2d");
infoButEl = document.querySelector('.fn-open-dialog-info');
formButEl = document.querySelector('.fn-open-dialog-form');
formDialogEl = document.querySelector('.fn-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) { document.querySelectorAll('.fn-open-dialog-form').forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault(); e.preventDefault();
formDialogEl.showModal(); formDialogEl.showModal();
}) })
})
} }

123
webinterface/style.css
Unescape Escape View File

@ -5,7 +5,6 @@
--gutter-sm: .5rem; --gutter-sm: .5rem;
--gutter-md: 1rem; --gutter-md: 1rem;
--gutter-lg: 3rem; --gutter-lg: 3rem;
--font-size-base: 1rem; --font-size-base: 1rem;
} }
@ -23,7 +22,35 @@ body {
height: 100%; height: 100%;
margin: 0 0; margin: 0 0;
padding: 0 0; padding: 0 0;
overflow: hidden;
}
.state {
display: none;
}
body[state="idle"] .state--idle {
display: block;
}
body[state="waiting--bottom"] .multi__bottom .state--waiting,
body[state="waiting--bottom"] .multi__top .state--idle {
display: block;
}
body[state="waiting--top"] .multi__top .state--waiting,
body[state="waiting--top"] .multi__bottom .state--idle {
display: block;
}
body[state="recording"] .state--recording {
display: block;
color: white;
}
body[state="finished"] .state--finished {
display: block;
} }
@ -31,7 +58,12 @@ canvas {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 120px;
pointer-events: none; pointer-events: none;
z-index: -1;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 0);
} }
* { * {
@ -93,12 +125,15 @@ input[type="submit"] {
.button--record { .button--record {
border-radius: 100%; border-radius: 100%;
max-width: 500px; border: none;
max-height: 500px; max-width: 150px;
max-height: 150px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
width: calc(100% - var(--gutter-lg) - var(--gutter-lg));
position: relative; position: relative;
background-color: transparent; background-color: transparent;
font-family: sans-serif;
overflow: hidden;
font-weight: 400;
} }
.button--record:after { .button--record:after {
@ -123,32 +158,32 @@ input[type="submit"] {
top: 0; top: 0;
left: 0; left: 0;
background-color: var(--black); background-color: var(--black);
border-radius: 100%;
z-index: -1; z-index: -1;
transform: scale(1); transform: translate3d(0, 0%, 0);
transition: transform .1s linear; transition: transform .1s linear;
} }
.button--record[state="recording"]:before, .button--record[state="recording"]:before,
.button--record[state="uploading"]:before { .button--record[state="uploading"]:before {
transform: scale(0); transform: translate3d(0, 100%, 0);
} }
.button--record[state="recording"], .button--record[state="recording"],
.button--record[state="uploading"] { .button--record[state="uploading"] {
color: var(--black); color: var(--black);
animation-delay: 1s; animation-delay: 1s;
border: none;
border: 1rem dotted var(--black);
background-color: transparent; background-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
animation: 8s linear recording infinite; animation: 8s linear recording infinite;
border: .3rem dashed var(--black);
}
.multi__bottom .button--record {
animation-delay: 1s;
} }
.button--record[state="recording"] { .button--record[state="recording"] {
border-style: dashed; /* border-style: dashed; */
animation-duration: 2s; animation-duration: 4s;
} }
.button--record[state="recording"]:after, .button--record[state="recording"]:after,
@ -164,10 +199,15 @@ input[type="submit"] {
content: "...uploading.."; content: "...uploading..";
} }
.button--record[state="waiting"]:after {
animation-duration: 8s;
content: "...waiting..";
}
.button--record[state="finished"]:after { .button--record[state="finished"]:after {
animation-duration: 8s; animation-duration: 8s;
content: "File is uploaded"; content: "Upload complete";
} }
@ -179,17 +219,13 @@ input[type="submit"] {
dialog { dialog {
width: auto; width: auto;
max-width: 400px; max-width: min(90vw, 400px);
flex-direction: column; flex-direction: column;
} }
dialog::backdrop { dialog::backdrop {
background-image: linear-gradient(45deg, background: black;
magenta, opacity: 0.5;
rebeccapurple,
dodgerblue,
green);
opacity: 0.75;
} }
.dialog__close { .dialog__close {
@ -219,3 +255,48 @@ label {
dialog[open] { dialog[open] {
display: flex; display: flex;
} }
.multi {
display: flex;
width: 100%;
height: 100%;
padding: var(--gutter-md);
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.multi__top,
.multi__bottom {
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.multi h1 {
margin-top: -.5rem;
}
.multi button {
margin-top: auto;
}
.multi__top {
transform: rotate(180deg);
}
.button--multi {
aspect-ratio: 1/1;
border-radius: 100%;
max-width: 230px;
max-height: 230px;
transition: none;
}
.button--multi:first-of-type {
transform: rotate(180deg);
}
Write Preview
Loading…
Cancel
Save