import "@babel/polyfill";
import React, { useEffect, useRef, useLayoutEffect } from "react";
import ReactDOM from "react-dom";
import "firebase/storage";
import firebase from "firebase/app";

firebase.initializeApp({/* your firebase config */});

declare var MediaRecorder: any;

function Recorder() {
  const audioRef = useRef<HTMLAudioElement>(null);

  useLayoutEffect(() => {
    (async () => {
      if (audioRef.current) {
        const audio = audioRef.current;

        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: false
        });
        const recorder = new MediaRecorder(stream);
        let chunks: Array<any> = [];
        recorder.addEventListener("dataavailable", (e: any) => {
          chunks.push(e.data);
          console.log("on data", e.data);
        });

        recorder.addEventListener("stop", async () => {
          const blob = new Blob(chunks, { type: "audio/webm" });
          audio.src = window.URL.createObjectURL(blob);
          audio.play();

          // firebase uploading
          const storageRef = firebase.storage().ref();
          const tempRef = storageRef.child("temp.webm");
          const snapshot = await tempRef.put(blob);
          console.log("uploaded!", snapshot);
        });

        recorder.start();
        await new Promise(r => setTimeout(r, 5 * 1000));
        recorder.stop();
      }
    })();
  }, []);

  return (
    <div>
      recorder
      <audio controls ref={audioRef} />
    </div>
  );
}

ReactDOM.render(<Recorder />, document.querySelector(".root"));