dev

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <navbar />
-    <router-view />
+    <router-view  />
   </div>
 </template>
 <script>
@@ -15,33 +15,21 @@ export default {
     });
 
     this.$store.state.peer.on("call", (call) => {
-      if (
-        this.$store.state.receiveCalls.findIndex((c) => c.peer == call.peer) !=
-        -1
-      )
-        return false;
-
       call.on("close", () => {
         console.log("call closed");
-        let index = this.$store.state.receiveCalls.findIndex(
-          (r) => r.peer == call.peer
-        );
-        this.$store.state.receiveCalls[index].close();
-        this.$store.state.receiveCalls.splice(index, 1);
-
-        index = this.$store.state.remoteStreams.findIndex(
-          (r) => r.peer == call.peer
-        );
-        this.$store.state.remoteStreams.splice(index, 1);
+        this.$store.commit("delete", {
+          target: "receiveCalls",
+          peer: call.peer,
+        });
       });
 
       call.on("stream", (remoteStream) => {
         console.log("call started");
-        this.$store.state.remoteStreams.push(remoteStream);
+        this.$store.commit("add", { target: "remoteStreams", data: remoteStream });
       });
 
       call.active = false;
-      this.$store.state.receiveCalls.push(call);
+      this.$store.commit("add", { target: "receiveCalls", data: call });
     });
 
     this.$store.state.peer.on("connection", (connection) => {
@@ -54,7 +42,7 @@ export default {
       connection.on("close", () => {
         console.log("connection closed");
       });
-      this.$store.state.receiveConnections.push(connection);
+    this.$store.commit("add", { target: "receiveConnections", data: connection });
     });
   },
   mounted: async function () {
@@ -71,4 +59,5 @@ export default {
 };
 </script>
 <style>
+
 </style>

src/components/_globalComponentRegistirations.js

@@ -2,10 +2,14 @@ import navbar from './navbar'
 import peervideo from './peervideo'
 import gotoroom from './gotoroom'
 import acceptcall from './acceptcall'
+import yourpeer from './yourpeer'
+import connectpeer from './connectpeer'
 
 export default {
-    'navbar': navbar,
-    'peervideo': peervideo,
-    'gotoroom': gotoroom,
-    'acceptcall': acceptcall
+    navbar,
+    peervideo,
+    gotoroom,
+    acceptcall,
+    yourpeer,
+    connectpeer
 }

src/components/acceptcall.vue

@@ -15,6 +15,18 @@ export default {
   methods: {
     closeCall: function () {
       this.call.close();
+      this.$store.commit("delete", {
+        target: "receiveCalls",
+        peer: this.call.peer,
+      });
+      this.$store.commit("delete", {
+        target: "remoteStreams",
+        peer: this.call.peer,
+      });
+      this.$store.commit("delete", {
+        target: "receiveConnections",
+        peer: this.call.peer,
+      });
     },
     openCall: function () {
       this.call.answer(this.$store.state.myLocalVideoStream);
@@ -24,11 +36,10 @@ export default {
         this.call.peer,
         this.$store.state.myLocalVideoStream
       );
-
       let dataConnection = this.$store.state.peer.connect(this.call.peer);
 
-      this.$store.state.myConnections.push(dataConnection);
-      this.$store.state.myCalls.push(remoteCall);
+      this.$store.commit("add", { target: "myCalls", data: remoteCall });
+      this.$store.commit("add", { target: "myConnections", data: dataConnection,});
     },
   },
 };

src/components/connectpeer.vue

@@ -0,0 +1,43 @@
+<template>
+    <b-card bg-variant="warning" text-variant="white" header="Join Chat">
+        <b-card-text>
+            <b-form-input v-model="connectId" placeholder="Other Peer ID"></b-form-input>
+            <b-button block variant="dark" class="mt-3" @click="callRemote()">JOIN</b-button>
+        </b-card-text>
+    </b-card>
+</template>
+
+<script>
+export default {
+    props: ["call"],
+    data: function() {
+        return {};
+    },
+    computed: {
+        connectId: {
+            get() {
+                return this.$store.state.remoteId;
+            },
+            set(val) {
+                this.$store.state.remoteId = val;
+            }
+        }
+    },
+    methods: {
+        callRemote: function() {
+            let call = this.$store.state.peer.call(
+                this.connectId,
+                this.$store.state.myLocalVideoStream
+            );
+
+            let dataConnection = this.$store.state.peer.connect(this.connectId);
+
+            this.$store.state.myConnections.push(dataConnection);
+            this.$store.state.myCalls.push(call);
+        }
+    }
+};
+</script>
+
+<style scoped>
+</style>

src/components/gotoroom.vue

@@ -1,20 +1,13 @@
 <template>
-  <div>
-    <b-card
-      bg-variant="info"
-      text-variant="light"
-      header="Go To The Your Room"
-      class="text-center mt-5 offset-3 col-6"
-    >
-      <b-card-text>
-        <div>
-          <h3>{{ $store.state.receiveCalls.length}} Calls</h3>
-          <h3>{{ $store.state.receiveConnections.length}} Connections</h3>
-        </div>
-        <b-button block variant="secondary" class="mt-3" :to="`/chat`">GO</b-button>
-      </b-card-text>
+    <b-card bg-variant="info" text-variant="light" header="Go To The Your Room">
+        <b-card-text>
+            <div>
+                <h3>{{ $store.state.receiveCalls.length}} Calls</h3>
+                <h3>{{ $store.state.receiveConnections.length}} Connections</h3>
+            </div>
+            <b-button block variant="secondary" class="mt-3" :to="`/chat`">GO</b-button>
+        </b-card-text>
     </b-card>
-  </div>
 </template>
 
 <script>

src/components/peervideo.vue

@@ -1,27 +1,27 @@
 <template>
-  <div class="" style="float:left">
-    <video class="box" ref="video" autoplay />
-  </div>
+    <div class style="float:left">
+        <video class="box" ref="video" autoplay />
+    </div>
 </template>
 
 <script>
 export default {
-  props: ["videoStream"],
-  data: function () {
-    return {
-      video: null,
-    };
-  },
-  mounted: function () {
-    this.$refs.video.srcObject = this.videoStream;
-  },
-  beforeDestroy: function () {},
+    props: ["videoStream"],
+    data: function() {
+        return {
+            video: null
+        };
+    },
+    mounted: function() {
+        this.$refs.video.srcObject = this.videoStream;
+    },
+    beforeDestroy: function() {}
 };
 </script>
 
 <style scoped>
 .box {
-  width: 400px;
-  height: 380px;
+    width: 400px;
+    height: 380px;
 }
 </style>

src/components/yourpeer.vue

@@ -0,0 +1,21 @@
+<template>
+        <b-card bg-variant="primary" text-variant="white" header="Your Peer ID">
+            <b-card-text>
+                <h2>-{{this.$store.state.id}}-</h2>
+                <b-button block variant="danger" v-clipboard:copy="this.$store.state.id">COPY</b-button>
+            </b-card-text>
+        </b-card>
+</template>
+
+<script>
+export default {
+    props: ["call"],
+    data: function() {
+        return {};
+    },
+    methods: {}
+};
+</script>
+
+<style scoped>
+</style>

src/store/index.js

@@ -20,7 +20,33 @@ export const store = new Vuex.Store({
         myCalls: [],
 
     },
-    getters: {},
+    getters: {
+
+    },
+    mutations: {
+        delete: function(state, payload) {
+            if (payload.target == undefined | typeof payload.target != "string" | Object.values(payload).length < 2) return false
+            let keys = Object.keys(payload)
+            let targetKey = keys.splice(keys.findIndex(item => item == "target"), 1)[0]
+
+            let index = state[payload.target].findIndex(item => item[targetKey] == state[payload.target][targetKey])
+            state[payload.target].splice(index, 1)
+        },
+        add: function(state, payload) {
+            if (payload.target == undefined | typeof payload.target != "string" | payload.data == undefined) {
+                console.log("[add] invalid object");
+                return false
+            }
+            console.log(payload)
+            state[payload.target].push(payload.data)
+        },
+        hasIt(state, payload) {
+            if (state.receiveCalls.length == 0)
+                return false
+            else
+                return state[payload.target].findIndex(it => it.peer === payload.data.peer) == -1
+        }
+    },
     actions: {},
     modules: {}
 })

src/views/Home.vue

@@ -1,64 +1,24 @@
 <template>
-  <div>
-    <b-card
-      bg-variant="primary"
-      text-variant="white"
-      header="Your Peer ID"
-      class="text-center mt-5 offset-3 col-6"
-    >
-      <b-card-text>
-        <h2>{{this.$store.state.id}}</h2>
-        <b-button block variant="danger" v-clipboard:copy="this.$store.state.id">COPY</b-button>
-      </b-card-text>
-    </b-card>
+    <div class="text-center">
+        <b-card-group>
+            <yourpeer />
+            <connectpeer  />
+            <gotoroom />
+        </b-card-group>
+        <div v-for="x in $store.state.MyCalls" :key="x">Call {{ x.peer}}</div>
 
-    <b-card
-      bg-variant="warning"
-      text-variant="white"
-      header="Join Chat"
-      class="text-center mt-5 offset-3 col-6"
-    >
-      <b-card-text>
-        <b-form-input v-model="connectId" placeholder="Other Peer ID"></b-form-input>
-        <b-button block variant="dark" class="mt-3" @click="callRemote()">JOIN</b-button>
-      </b-card-text>
-    </b-card>
-    <gotoroom />
-  </div>
+        <div v-for="x in $store.state.myConnections" :key="x">Connection {{ x.peer}}</div>
+    </div>
 </template>
 
 <script>
 export default {
-  name: "Home",
-  data: function () {
-    return {
-      
-    };
-  },
-  computed: {
-    connectId: {
-      get() {
-        return this.$store.state.remoteId;
-      },
-      set(val) {
-        this.$store.state.remoteId = val;
-      },
+    name: "Home",
+    data: function() {
+        return {};
     },
-  },
-  methods: {
-    callRemote: function () {
-      let call = this.$store.state.peer.call(
-        this.connectId,
-        this.$store.state.myLocalVideoStream
-      );
-
-      let dataConnection = this.$store.state.peer.connect(this.connectId);
-
-      this.$store.state.myConnections.push(dataConnection);
-      this.$store.state.myCalls.push(call);
-    },
-  },
-  beforeCreated: function () {
-  },
+    computed: {},
+    methods: {},
+    beforeCreated: function() {}
 };
 </script>