From 1d1ab6096e32db6d5cffec16996798ca7c569e15 Mon Sep 17 00:00:00 2001
From: "Glitch (peerjs-video)" <none>
Date: Tue, 8 Sep 2020 20:59:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=92=F0=9F=92=A1=20Checkpoint=20./publi?=
 =?UTF-8?q?c/index.html:5975361/179=20./public/main.js:5975361/670?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  6 +++---
 public/main.js    | 21 ++++++++++-----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index 42fe989..acedcf9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,12 +84,12 @@
                 <input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled>
               </div>
               <hr> 
-              <input type="text" id="connect-to-peer" class="form-control" placeholder="paste-peer-id-here">
+              <input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
               <br>
-              <button class="btn btn-sm btn-success" v-on:click="connectToPeer(document.querySelector('connect-to-peer').value)">
+              <button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
                 Connect
               </button>
-              <button class="btn btn-sm btn-danger" v-on:click="disconnectFromPeer()">
+              <button class="btn btn-sm btn-danger" v-on:click="disconnectCall()">
                 Disconnect
               </button>
               <div class="messages"></div>
diff --git a/public/main.js b/public/main.js
index daa43fe..71105b6 100644
--- a/public/main.js
+++ b/public/main.js
@@ -8,6 +8,7 @@ var app = new Vue({
       path: '/peerjs/myapp'
     }),
     stream: null,
+    calls: [],
   },
   methods: {
     logMessage: function(message) {
@@ -18,14 +19,6 @@ var app = new Vue({
     renderVideo:function(stream, selector = '#remoteVideo') {
       document.querySelector(selector).srcObject = stream;
     },
-    // createPeer: function() {
-    //   const peer = new Peer(localStorage.getItem('yaswvc-peerId'), {
-    //     host: '/',
-    //     path: '/peerjs/myapp'
-    //   });
-    //   localStorage.setItem('yaswvc-peerId', peer.id);
-    //   return peer;
-    // },
     connectToPeer: function(peerId) {
       this.logMessage(`Connecting to ${peerId}...`);
 
@@ -37,8 +30,14 @@ var app = new Vue({
         conn.send('hi!');
       });
 
-      let call = this.peer.call(this.peerId, this.stream);
+      let call = this.peer.call(peerId, this.stream);
       call.on('stream', this.renderVideo);
+      this.calls.push(call);
+    },
+    disconnectCall: function(call) {
+      // if (!call) return;
+      console.log('CALLS', this.calls);
+      console.log('CALL', call);
     },
     listenForPeerEvents: function () {
       this.peer.on('open', (id) => {
@@ -71,8 +70,8 @@ var app = new Vue({
       // Handle incoming voice/video connection
       this.peer.on('call', (call) => {
         console.log('INCOMING CALL', call);
-        call.answer(window.stream); // Answer the call with an A/V stream.
-        this.renderVideo(window.stream, '#localVideo');
+        call.answer(this.stream); // Answer the call with an A/V stream.
+        // this.renderVideo(this.stream, '#localVideo');
         call.on('stream', this.renderVideo);
       });
     },