before big changes

1 year ago · 084156a2c3
parent 1f25512af0
commit 084156a2c3
16 changed files with 343 additions and 65 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
-/webinterface/uploads/*.webm
+*.webm
+*.mp3
--- a/index.php
+++ b/index.php
@ -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>";
+
+
+
+?>
--- a/webinterface/index.php
+++ b/webinterface/index.php
@ -11,31 +11,78 @@
 <body>
    <div class="container recorder">

+        <canvas width="800px" height="800px" style="display: none"></canvas>
+
        <header>
            <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>
        </header>

        <button class='fn-start-recording button--record'>
-            <span class="button__label">RECORD</span>
        </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>
    </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" />
        </form>
-    </section>

+    </dialog>

    <script type="text/javascript" src="script.js"></script>
 </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");
+    }
+}
+?>
--- 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();
+    })
+

 }
--- 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;
 }
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon
--- a/webinterface/uploads/Mon
+++ b/webinterface/uploads/Mon