timtjoe · timtjoe · Mar 31, 2023 · Feb 24, 2023 · Feb 25, 2023 · Feb 25, 2023
diff --git a/Sandbox/MediaRecorder.jsx b/Sandbox/MediaRecorder.jsx
@@ -0,0 +1,32 @@
+let constraints = { audio: true };
+
+navigator.mediaDevices.getUserMedia(constraints)
+    .then(function (mediaStream) {
+
+    let mediaRecorder = new MediaRecorder(mediaStream);
+
+    mediaRecorder.onstart = function (e) { this.chunks = []; };
+    mediaRecorder.ondataavailable = function (e) { this.chunks.push(e.data); };
+
+    mediaRecorder.onstop = function (e) {
+        let blob = new Blob(this.chunks, { 'type': 'audio/ogg; codecs=opus' });
+        radio.emit('voice', blob);
+    };
+
+    // Start recording
+    mediaRecorder.start();
+
+    // Stop recording after 5 seconds and broadcast it to server
+    setInterval(function () {
+        mediaRecorder.stop()
+        mediaRecorder.start()
+    }, 5000);
+});
+
+// When the client receives a voice message it will play the sound
+radio.on('voice', function (arrayBuffer) {
+    var blob = new Blob([arrayBuffer], { 'type': 'audio/ogg; codecs=opus' });
+    var audio = document.createElement('audio');
+    audio.src = window.URL.createObjectURL(blob);
+    audio.play();
+});
diff --git a/Sandbox/Protected.jsx b/Sandbox/Protected.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useNavigate, Navigate, useLocation } from "react-router-dom";
+
+const Protected = ({ isAuth, children, ...rest }) => {
+    // const navigate = useNavigate()
+    const location = useLocation()
+    if (!isAuth) {
+        // navigate("/login")
+        return <Navigate to="/login" state={{ from: location }} replace />
+
+    } else {
+        return children
+    }
+};
+
+export default Protected;
diff --git a/Sandbox/ProvideAuth.jsx b/Sandbox/ProvideAuth.jsx
@@ -0,0 +1,30 @@
+import React, { createContext, useEffect, useState } from 'react'
+import useData from "@hooks/useData"
+
+const withAuth = createContext(null)
+
+export function ProvideAuth({children}) {
+    const user = useData();
+    const [isAuth, setIsAuth] = useState(false)
+
+    useEffect(() => {
+        if (user.uuid) {
+            setIsAuth(true)
+        } else {
+            setIsAuth(false)
+        }
+    }, [user])
+
+    const VALUES = {
+        isAuth,
+        setIsAuth
+    }
+
+    return (
+        <withAuth.Provider value={VALUES}>
+            {children}
+        </withAuth.Provider>
+    )
+}
+
+export default withAuth
diff --git a/Sandbox/ProvideUser.jsx b/Sandbox/ProvideUser.jsx
@@ -0,0 +1,32 @@
+import React, { createContext, useEffect, useState } from 'react'
+import {useLocation} from 'react-router-dom'
+import useData from '@hooks/useData';
+
+const withUser = createContext(null)
+
+export function ProvideUser({ children }) {
+    const location = useLocation();
+    const user = useData()
+
+    // const [user, setUser] = useState([])
+    // useEffect(() => {
+    //     if (data) {
+    //         setUser(data)
+    //     } else {
+    //         setUser([])
+    //   }
+    // }, [location])
+
+
+    const VALUES = {
+        user
+    }
+
+  return (
+      <withUser.Provider value={VALUES}>
+          {children}
+      </withUser.Provider>
+  )
+}
+
+export default withUser
diff --git a/Sandbox/RadioBroadcast.js b/Sandbox/RadioBroadcast.js
@@ -0,0 +1,9 @@
+const express = require("express");
+const { v4: uuidv4 } = require("uuid");
+
+const RadioBroadcast = (socket) => {
+    console.log(`User from studio conntected: ${socket.id}`)
+    socket.on("join-room", )
+};
+
+module.exports = RadioBroadcast
diff --git a/backend/auth/isAuth.js → Sandbox/auth/isAuth.js b/backend/auth/isAuth.js → Sandbox/auth/isAuth.js
diff --git a/backend/auth/isLoggedIn.js → Sandbox/auth/isLoggedIn.js b/backend/auth/isLoggedIn.js → Sandbox/auth/isLoggedIn.js
diff --git a/Sandbox/mainfunc.js b/Sandbox/mainfunc.js
@@ -0,0 +1,62 @@
+  // socket.emit("user_info", userStatus)
+
+  function mainFunction(time) {
+    let audioContext;
+    try {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    } catch (error) {
+      window.alert("Web Audio API is not supported.")
+    } 
+    const oscillator = audioContext.createOscillator();
+    oscillator.connect(audioContext.destination);
+    oscillator.start()
+
+    navigator.mediaDevices.getUserMedia({ audio: true })
+      .then(stream => {
+        let mediaRecorder = new MediaRecorder(stream);
+        mediaRecorder.start()
+
+        let audioChunks = []
+
+        mediaRecorder.addEventListener("dataavailable", (event) => {
+          audioChunks.push(event.data)
+        });
+
+        mediaRecorder.addEventListener("stop", (event) => {
+          let audioBlob = new Blob(audioChunks, { type: "audio/ogg; codecs=opus" });
+
+          audioChunks = []
+
+          let fileReader = new FileReader()
+          fileReader.readAsArrayBuffer(audioBlob);
+          fileReader.onloadend = function () {
+              let resultBlob = fileReader.result;
+              socket.emit("send", resultBlob)
+          }
+          mediaRecorder.start()
+
+          setTimeout(function () {
+            mediaRecorder.stop()
+          }, time)
+        });//stop event ends
+
+        setTimeout(function () {
+          mediaRecorder.stop()
+        }, time)
+
+      });//then callback ends
+
+    socket.on("receive", function (blobArr) {
+      let blob = new Blob([blobArr], { 'type': 'audio/ogg; codecs=opus' });
+      // console.log(blob)
+      console.log("Received!")
+    })
+
+
+      const userStatus = {
+    microphone: false,
+    mute: false,
+    username: "user#" + Math.floor(Math.random() * 999999),
+    online: false,
+  };
+  }
diff --git a/Sandbox/mediasource.html b/Sandbox/mediasource.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Web Audio API examples: MediaStreamAudioSourceNode</title>
+  </head>
+
+  <body>
+    <h1>Web Audio API examples: MediaStreamAudioSourceNode</h1>
+    <video controls></video>
+    <br />
+    <label for="gain">Volume: </label>
+    <input id="gain" type="range" min="1" max="40" />
+
+    <p>Biquad filter frequency response for:</p>
+    <ul class="freq-response"></ul>
+    <script>
+      // Store useful UI elements
+      const video = document.querySelector("video");
+      const range = document.querySelector("#gain");
+      const freqResponseOutput = document.querySelector(".freq-response");
+
+      // Create float32 arrays for getFrequencyResponse()
+      const frequencyArray = new Float32Array([1000, 2000, 3000, 4000, 5000]);
+      const magResponseOutput = new Float32Array(frequencyArray.length);
+      const phaseResponseOutput = new Float32Array(frequencyArray.length);
+
+      navigator.mediaDevices
+        .getUserMedia({ audio: true, video: true })
+        .then((stream) => {
+          video.srcObject = stream;
+          video.onloadedmetadata = (e) => {
+            video.play();
+            video.muted = true;
+          };
+
+          // Create a MediaStreamAudioSourceNode
+          // Feed the HTMLMediaElement into it
+          const audioCtx = new AudioContext();
+          const source = new MediaStreamAudioSourceNode(audioCtx, {
+            mediaStream: stream,
+          });
+
+          // Create a biquadfilter
+          const biquadFilter = new BiquadFilterNode(audioCtx, {
+            type: "lowshelf",
+            frequency: 1000,
+            gain: range.value,
+          });
+
+          // Chain the nodes so we can play the
+          // music and adjust the volume using the mouse cursor
+          source.connect(biquadFilter);
+          biquadFilter.connect(audioCtx.destination);
+
+          // Get new mouse pointer coordinates when mouse is moved
+          // then set new gain value
+          range.oninput = () => {
+            biquadFilter.gain.value = range.value;
+          };
+
+          // Read frequency response:
+
+          // Get magnitude and phase associated with a frequency
+          biquadFilter.getFrequencyResponse(
+            frequencyArray,
+            magResponseOutput,
+            phaseResponseOutput
+          );
+
+          // Populate list
+          for (let i = 0; i < frequencyArray.length; i++) {
+            const listItem = document.createElement("li");
+            listItem.textContent = `${frequencyArray[i]}Hz: Magnitude ${magResponseOutput[i]}, Phase ${phaseResponseOutput[i]}rad.`;
+            freqResponseOutput.appendChild(listItem);
+          }
+        })
+        .catch((err) => {
+          console.error(`The following error occurred: ${err}`);
+        });
+
+    </script>
+  </body>
+</html>
diff --git a/Sandbox/peer1peer1.jsx b/Sandbox/peer1peer1.jsx
@@ -0,0 +1,15 @@
+
+peer1.on('signal', data => {
+    peer2.signal(data)
+    console.log("Peer1 Signal: " + JSON.stringify(data))
+})
+peer2.on('signal', data => {
+    peer1.signal(data)
+    console.log("Peer2 Signal: " + JSON.stringify(data))
+})
+peer1.on("connect", () => {
+    peer2.send("Hey peer2, how is it going?")
+})
+peer2.on("data", (data) => {
+    console.log("go a message from peer1 " + data)
+})
diff --git a/Sandbox/reactmic.jsx b/Sandbox/reactmic.jsx
@@ -0,0 +1,39 @@
+const [record, setRecord] = useState(false)
+
+const startRecord = () => { setRecord(!record) }
+const onData = (blob) => { console.log("Realtime data : " + JSON.stringify(blob)) }
+const onStop = (blob) => { console.log("Recorded data: " + JSON.stringify(blob)) }
+
+
+<ReactMic
+    record={record}
+    onStop={onStop}
+    onData={onData}
+    strokeColor={"black"}
+    backgroundColor={"blue"}
+/>
+
+{/* <Snackbar
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        open={open}
+        onClose={handleClose}
+        autoHideDuration={6000}
+        message={`${hostName} is calling`}
+        action={
+          <>
+            <Button
+              variant='contained'
+              color='success'
+              size='small'
+              endIcon={<Phone />}
+              disableElevation>Answer</Button>
+            <IconButton
+              size="small"
+              aria-label="close"
+              color="error"
+              onClick={handleClose}>
+              <Close fontSize="small" />
+            </IconButton>
+          </>
+        }
+      /> */}
diff --git a/Sandbox/readmore.jsx b/Sandbox/readmore.jsx
@@ -0,0 +1,19 @@
+{/* {
+                  aboutShow ? (aboutShow) : show.about
+              } */}
+{/* {readMore ? `${text.slice(0, 280)}` : text}
+              {
+                text.length > 280 && (
+                    <Small onClick={handleRemore}>
+                        {readMore ? "...Read more" : "...Show less"}
+                    </Small>
+                )
+              } */}
+const [fulltext, setFulltext] = useState("")
+const [shortText, setShortText] = useState("")
+const handleText = (text) => {
+    if (text) {
+        setShortText(text.slice(0, 280));
+        setFulltext(text);
+    }
+}
diff --git a/frontend/src/components/sandbox/move.jsx → Sandbox/sandbox/move.jsx b/frontend/src/components/sandbox/move.jsx → Sandbox/sandbox/move.jsx