visualizer

public/s/css/f0ck.css

@@ -1024,3 +1024,54 @@ a.id-link:hover:after {
   position: absolute;
   margin-left: 5px;
 }
+
+/* loginform */
+body[type='login'] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.login-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 20px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 10px;
+  border: 1px solid var(--accent);
+}
+.login-form button[type="submit"] {
+  width: 100%;
+  margin: 18px 0 9px 0;
+  background: var(--bg);
+  border: 1px solid var(--black);
+  color: var(--white);
+  opacity: 0.6;
+  padding: 8px 20px;
+  border-radius: 0;
+  overflow: hidden;
+}
+.login-form button[type="submit"]:hover {
+  cursor: pointer;
+  opacity: 1;
+}
+.login-form input {
+  background: var(--bg);
+  border: 1px solid var(--black);
+  padding: 5px;
+  color: #fff;
+  margin: 6px 0;
+}
+
+/* visualizer */
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+}

public/s/js/f0ck.js

@@ -116,4 +116,62 @@
     xDown = yDown = null;
   }, false);
   // </swipe>
+
+  // <testzone>
+  if(audioElement = document.querySelector("audio")) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = 1920;
+    canvas.height = 1080;
+
+    setTimeout(() => {
+      document.querySelector(".v0ck").insertAdjacentElement("afterbegin", canvas);
+    }, 400);
+
+    const audioCtx = new AudioContext();
+    const analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 2048;
+
+    const source = audioCtx.createMediaElementSource(audioElement);
+    source.connect(analyser);
+    source.connect(audioCtx.destination);
+
+    let data = new Uint8Array(analyser.frequencyBinCount);
+    requestAnimationFrame(loopingFunction);
+
+    function loopingFunction() {
+      requestAnimationFrame(loopingFunction);
+      analyser.getByteFrequencyData(data);
+      draw(data);
+    }
+    /*function draw(data) {
+      data = [ ...data ];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const space = canvas.width / data.length;
+      const sstyle = getComputedStyle(document.body).getPropertyValue("--accent");
+      data.forEach((value, i) => {
+        ctx.beginPath();
+        ctx.moveTo(space * i, canvas.height);
+        ctx.lineTo(space * i, canvas.height - value);
+        ctx.strokeStyle = sstyle;
+        ctx.stroke();
+      });
+    }*/
+    function draw(data) {
+      data = [ ...data ];
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = getComputedStyle(document.body).getPropertyValue("--accent");
+      data.forEach((value, i) => {
+        const percent = value / 256;
+        const height = (canvas.height * percent / 2) - 40;
+        const offset = canvas.height - height - 1;
+        const barWidth = canvas.width / analyser.frequencyBinCount;
+        ctx.fillRect(i * barWidth, offset, barWidth, height);
+      });
+    }
+    audioElement.onplay = () => {
+      audioCtx.resume();
+    };
+  }
+  // </testzone>
 })();