"use strict";

const localMedia = document.getElementById("my-video");
localMedia.muted = true;

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
}).then((localStream) => {
  localMedia.srcObject = localStream;
  grid.localStream     = localStream;
  localMedia.addEventListener("loadedmetadata", () => localMedia.play());
}).catch((error) => {
  peer.error = error.message;
});

const callee = new Vue({
  el: "#callee",
  data: {
    calleeId: "",
  },
  methods: {
    addPeer: () => {
      if (callee.calleeId && !grid.peers.includes(callee.calleeId))
        grid.peers.push(callee.calleeId);
    },
  },
});

const grid = new Vue({
  el: "#grid",
  data: {
    localStream: undefined,
    peers:       [],
  },
  methods: {
    makeCall: (peerId) => {
      let call = peer.peer.call(peerId, grid.localStream);
      let video = document.getElementById(call.peer);
      call.on("stream", (remoteStream) => {
        video.srcObject = remoteStream;
        video.addEventListener("loadedmetadata", () => video.play());
      });
    },
  },
});

const peer = new Vue({
  el: "#peer",
  data: {
    clientId: "",
    error:    "",
    peer:     new Peer(undefined, {
      host: "localhost",
      key:  "testingkey",
      path: "/peerjs/conference",
      port: 3000,
    }),
  },
});

peer.peer.on("close", ()      => peer.clientId = "");
peer.peer.on("error", (error) => peer.error    = error.message);
peer.peer.on("open",  ()      => peer.clientId = peer.peer.id);

peer.peer.on("call", (call) => {
  call.answer(grid.localStream);
  let video = document.getElementById(call.peer);
  call.on("stream", (remoteStream) => {
    video.srcObject = remoteStream;
    video.addEventListener("loadedmetadata", () => video.play());
  });
});