Resolve VOX-8276

voximplant · Jul 9, 2021 · 791d6b3 · 791d6b3
1 parent e5f4495
commit 791d6b3
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 19 deletions.
diff --git a/src/components/CheckingMic.vue b/src/components/CheckingMic.vue
@@ -1,5 +1,6 @@
 <template lang="pug">
 .checking-mic
+  Timer(:callState="callState" v-if="callState !== CallState.DISCONNECTED")
   .text {{ message }}
   Button.close(mode="flat" @click="stopChecking") {{ btnName }}
 </template>
@@ -9,29 +10,34 @@
   import { Button } from '@voximplant/spaceui';
   import * as VoxImplant from 'voximplant-websdk';
   import { Call } from 'voximplant-websdk/Call/Call';
+  import Timer from '@/components/Timer.vue';
+  import { CallState } from '@/enums/CallState';
+
   export default defineComponent({
-    components: { Button },
+    components: { Timer, Button },
     emit: ['update:checking'],
     props: ['sdk'],
     setup(props, { emit }) {
       const message = ref('Connection with service...');
+      const callState = ref('');
       const btnName = ref('Cancel');
       let totalPacketLost = 0;
       let call: Call | null = null;
       const createTestCall = () => {
         const sdk = props.sdk;
         call = sdk?.call({ number: 'testmic' });
         call?.on(VoxImplant.CallEvents.Connected, () => {
+          callState.value = CallState.CONNECTED;
           message.value = 'Say something to test your mic';
         });
         call?.on(VoxImplant.CallEvents.Disconnected, () => {
+          callState.value = CallState.DISCONNECTED;
           btnName.value = 'Close';
         });
         call?.on(VoxImplant.CallEvents.MessageReceived, (e: any) => {
           message.value = `All works! Total packet lost is ${totalPacketLost}%. Here is the record ${e.text}`;
         });
         call?.on(VoxImplant.CallEvents.CallStatsReceived, (e: any) => {
-          console.log('Stats: ', e.stats.totalPacketsLost);
           totalPacketLost = e.stats.totalPacketsLost;
         });
       };
@@ -45,19 +51,22 @@
         createTestCall,
         stopChecking,
         btnName,
+        callState,
+        CallState,
       };
     },
   });
 </script>
 
 <style scoped>
   .checking-mic {
-    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    margin: 12px 0;
+    margin: 12px auto;
+    position: absolute;
+    z-index: 1;
     min-width: 200px;
     max-width: 300px;
     min-height: 100px;

diff --git a/src/components/Connection.vue b/src/components/Connection.vue
@@ -36,6 +36,7 @@
   .state {
     display: flex;
     flex-direction: row;
+    height: 22px;
     margin-bottom: 24px;
   }
   .text {

diff --git a/src/components/DtmfKeyboard.vue b/src/components/DtmfKeyboard.vue
@@ -28,7 +28,6 @@
   .dtmf-keyboard {
     width: 168px;
     height: 208px;
-    margin: 12px auto;
   }
   .digits {
     position: relative;

diff --git a/src/components/RedialCall.vue b/src/components/RedialCall.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .redial-call
   .text Press the button to call
-  Button(icon="ic20-phone" @click="redial") Call
+  Button.call(icon="ic20-phone" @click="redial") Call
 </template>
 
 <script lang="ts">
@@ -32,6 +32,15 @@
   }
   .text {
     font-family: Roboto, sans-serif;
+    height: 22px;
     margin-bottom: 24px;
   }
+  .call {
+    & .sui-button {
+      & .only-icon {
+        --sui-icon-color: white;
+        margin-right: 4px;
+      }
+    }
+  }
 </style>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -1,6 +1,5 @@
 <template lang="pug">
 teleport(to=".call")
-  .background
   .settings
     .close(@click="closeSettings")
     .text Select microphone
@@ -54,14 +53,6 @@ teleport(to=".call")
 </script>
 
 <style scoped>
-  .background {
-    position: absolute;
-    background-color: #ffffff;
-    opacity: 0.3;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
   .settings {
     background-color: #ffffff;
     position: absolute;

diff --git a/src/components/Timer.vue b/src/components/Timer.vue
@@ -22,6 +22,7 @@
       const startTimer = () => {
         let time = 0;
         const second = 1;
+        currentTime.value = '00:00:00';
         interval = setInterval(() => {
           time = time + second;
           const hours = Math.floor(time / 3600);
@@ -46,8 +47,8 @@
 
 <style scoped>
   .timer {
-    width: 50px;
-    height: 30px;
+    width: 70px;
+    height: 20px;
     margin: 12px auto;
   }
 </style>
diff --git a/src/views/Call.vue b/src/views/Call.vue
@@ -15,6 +15,10 @@ MicPermission(v-if="!isMicAccessGranted")
     .microphone(@click="toggleMic")
       .muted(v-if="muted")
       .unmuted(v-else="!muted")
+    .connection-rate(v-if="callState===CallState.CONNECTED")
+      .stripe-high(:class="connectionRate")
+      .stripe-medium(:class="connectionRate")
+      .stripe-low(:class="connectionRate")
   .footer
     .help
       a(href="https://voximplant.com" id="help") Help
@@ -50,6 +54,7 @@ MicPermission(v-if="!isMicAccessGranted")
     setup() {
       const callState = ref('');
       const muted = ref(false);
+      const connectionRate = ref('high');
       const sdk = VoxImplant.getInstance();
       const call = ref<Call | null>(null);
       sdk
@@ -83,6 +88,19 @@ MicPermission(v-if="!isMicAccessGranted")
         call.value.on(VoxImplant.CallEvents.Failed, () => {
           callState.value = CallState.DISCONNECTED;
         });
+        call.value.on(VoxImplant.CallEvents.CallStatsReceived, (e) => {
+          console.warn('CallStatsReceived', e.stats);
+          if (e.stats.totalLoss <= 0.01) {
+            connectionRate.value = 'high';
+          } else if (e.stats.totalLoss <= 0.02) {
+            connectionRate.value = 'medium';
+          } else {
+            connectionRate.value = 'low';
+          }
+        });
+        call.value.on(VoxImplant.CallEvents.QualityIssueHighMediaLatency, (e: any) => {
+          console.warn('QualityIssueHighMediaLatency', e);
+        });
       };
 
       const isMicAccessGranted = ref(false);
@@ -126,6 +144,7 @@ MicPermission(v-if="!isMicAccessGranted")
         sendDigit,
         sdk,
         call,
+        connectionRate,
       };
     },
   });
@@ -156,13 +175,21 @@ MicPermission(v-if="!isMicAccessGranted")
     position: relative;
     height: 300px;
     width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
   }
   .controls {
     position: relative;
     height: 52px;
     width: 168px;
-    padding: 6px 16px;
     box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+  }
+  .microphone {
+    margin: 6px 8px;
+    width: 40px;
   }
   .muted {
     width: 40px;
@@ -174,6 +201,60 @@ MicPermission(v-if="!isMicAccessGranted")
     height: 40px;
     background-image: url('../assets/unmuted.svg');
   }
+  .connection-rate {
+    position: relative;
+    overflow: hidden;
+    width: 40px;
+    height: 40px;
+    margin: 6px 8px;
+    box-sizing: border-box;
+    transform: rotate(45deg);
+    top: -10px;
+  }
+  .stripe-high {
+    width: 80px;
+    height: 80px;
+    border: solid white 6px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
+  }
+  .stripe-high.medium,
+  .stripe-high.low {
+    background-color: grey;
+  }
+  .stripe-medium {
+    width: 56px;
+    height: 56px;
+    border: solid white 6px;
+    border-radius: 50%;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    box-sizing: border-box;
+  }
+  .stripe-medium.low {
+    background-color: grey;
+  }
+  .stripe-low {
+    width: 32px;
+    height: 32px;
+    border: solid white 6px;
+    border-radius: 50%;
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    box-sizing: border-box;
+  }
+  .high {
+    background-color: #2fbc4f;
+  }
+  .medium {
+    background-color: #fadb14;
+  }
+  .low {
+    background-color: #f5222d;
+  }
   .footer {
     position: relative;
     display: flex;
@@ -187,7 +268,6 @@ MicPermission(v-if="!isMicAccessGranted")
   #help {
     background-image: url('../assets/question-mark.svg');
     background-repeat: no-repeat;
-
     line-height: 20px;
     padding-left: 20px;
   }