fix: added counter timer while call is on

frontend/package.json

@@ -16,7 +16,7 @@
     "@vueuse/integrations": "^10.3.0",
     "autoprefixer": "^10.4.14",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.0-alpha.11",
+    "frappe-ui": "^0.1.0-alpha.12",
     "pinia": "^2.0.33",
     "postcss": "^8.4.5",
     "socket.io-client": "^4.7.2",

frontend/src/components/CallUI.vue

@@ -21,7 +21,7 @@
     </template>
   </Dialog>
   <div
-    v-if="showCallPopup"
+    v-show="showCallPopup"
     ref="callPopup"
     class="fixed select-none z-10 bg-gray-900 rounded-lg shadow-lg p-4 flex flex-col w-60"
     :style="style"
@@ -43,11 +43,14 @@
         {{ getUser().full_name }}
       </div>
       <div class="text-sm text-gray-500">+917666980887</div>
-      <div class="text-white text-base my-1">
+      <CountUpTimer ref="counterUp">
+        <div v-if="onCall" class="text-white text-base my-1">
+          {{ counterUp?.updatedTime }}
+        </div>
+      </CountUpTimer>
+      <div v-if="!onCall" class="text-white text-base my-1">
         {{
-          onCall
-            ? '0:38'
-            : callStatus == 'ringing'
+          callStatus == 'ringing'
             ? 'Ringing...'
             : callStatus == 'initiated' || callStatus == 'calling'
             ? 'Calling...'
@@ -115,7 +118,7 @@
   </div>
   <Teleport to="#call-area">
     <div
-      v-if="showSmallCallWindow"
+      v-show="showSmallCallWindow"
       class="flex items-center justify-between p-1.5 gap-2 bg-gray-900 rounded m-2 cursor-pointer select-none"
       @click="toggleCallWindow"
     >
@@ -129,7 +132,9 @@
         </div>
       </div>
       <div v-if="onCall" class="flex items-center gap-1.5">
-        <div class="text-white text-base my-1">0:38</div>
+        <div class="text-white text-base my-1">
+          {{ counterUp?.updatedTime }}
+        </div>
         <Button variant="solid" theme="red" class="rounded-full !h-6 !w-6">
           <template #icon>
             <PhoneIcon
@@ -191,6 +196,7 @@ import { useDraggable, useWindowSize } from '@vueuse/core'
 import { usersStore } from '@/stores/users'
 import { call } from 'frappe-ui'
 import { onMounted, provide, ref, watch } from 'vue'
+import CountUpTimer from './CountUpTimer.vue'
 
 const { getUser } = usersStore()
 
@@ -206,6 +212,7 @@ let muted = ref(false)
 let callPopup = ref(null)
 let callPopupHandle = ref(null)
 let calling = ref(false)
+let counterUp = ref(null)
 
 const { width, height } = useWindowSize()
 
@@ -281,11 +288,11 @@ function handleIncomingCall(call) {
   call.on('reject', handleDisconnectedIncomingCall)
 }
 
-function acceptIncomingCall() {
-  _call.value.accept()
-
+async function acceptIncomingCall() {
   log.value = 'Accepted incoming call.'
   onCall.value = true
+  await _call.value.accept()
+  counterUp.value.start()
 }
 
 function rejectIncomingCall() {
@@ -307,6 +314,7 @@ function hangUpCall() {
   onCall.value = false
   callStatus.value = ''
   muted.value = false
+  counterUp.value.stop()
 }
 
 function handleDisconnectedIncomingCall() {
@@ -319,6 +327,7 @@ function handleDisconnectedIncomingCall() {
   }
   _call.value = null
   muted.value = false
+  counterUp.value.stop()
 }
 
 let callStatus = ref('')
@@ -346,6 +355,7 @@ async function makeOutgoingCall(close) {
           showCallPopup.value = true
           calling.value = false
           onCall.value = true
+          counterUp.value.start()
         }
       })
 
@@ -365,6 +375,7 @@ async function makeOutgoingCall(close) {
         _call.value = null
         callStatus.value = ''
         muted.value = false
+        counterUp.value.stop()
       })
       _call.value.on('cancel', () => {
         log.value = `Call ended.`
@@ -375,6 +386,7 @@ async function makeOutgoingCall(close) {
         _call.value = null
         callStatus.value = ''
         muted.value = false
+        counterUp.value.stop()
       })
     } catch (error) {
       log.value = `Could not connect call: ${error.message}`

frontend/src/components/CountUpTimer.vue

@@ -0,0 +1,57 @@
+<template>
+  <slot />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const hours = ref(0)
+const minutes = ref(0)
+const seconds = ref(0)
+const timer = ref(null)
+const updatedTime = ref('0:00')
+
+function startCounter() {
+  if (seconds.value === 59) {
+    seconds.value = 0
+    minutes.value = minutes.value + 1
+    seconds.value--
+  }
+  if (minutes.value === 60) {
+    minutes.value = 0
+    hours.value = hours.value + 1
+  }
+  seconds.value++
+
+  let minutesCount = minutes.value
+  let secondsCount = seconds.value < 10 ? '0' + seconds.value : seconds.value
+  let hoursCount = hours.value > 0 ? hours.value + ':' : ''
+
+  if (hoursCount) {
+    minutesCount = minutesCount < 10 ? '0' + minutesCount : minutesCount
+    secondsCount = secondsCount < 10 ? '0' + secondsCount : secondsCount
+
+    if (minutesCount === 0) {
+      minutesCount = '00'
+    }
+  }
+
+  updatedTime.value = hoursCount + minutesCount + ':' + secondsCount
+}
+
+function start() {
+  timer.value = setInterval(() => startCounter(), 1000)
+}
+
+function stop() {
+  clearInterval(timer.value)
+  let output = updatedTime.value
+  hours.value = 0
+  minutes.value = 0
+  seconds.value = 0
+  updatedTime.value = '0:00'
+  return output
+}
+
+defineExpose({ start, stop, updatedTime })
+</script>

yarn.lock

@@ -4662,6 +4662,36 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
+frappe-ui@^0.1.0-alpha.13:
+  version "0.1.0-alpha.12"
+  dependencies:
+    "@headlessui/vue" "^1.7.14"
+    "@popperjs/core" "^2.11.2"
+    "@tailwindcss/forms" "^0.5.3"
+    "@tailwindcss/typography" "^0.5.0"
+    "@tiptap/extension-color" "^2.0.3"
+    "@tiptap/extension-highlight" "^2.0.3"
+    "@tiptap/extension-image" "^2.0.3"
+    "@tiptap/extension-link" "^2.0.3"
+    "@tiptap/extension-mention" "^2.0.3"
+    "@tiptap/extension-placeholder" "^2.0.3"
+    "@tiptap/extension-table" "^2.0.3"
+    "@tiptap/extension-table-cell" "^2.0.3"
+    "@tiptap/extension-table-header" "^2.0.3"
+    "@tiptap/extension-table-row" "^2.0.3"
+    "@tiptap/extension-text-align" "^2.0.3"
+    "@tiptap/extension-text-style" "^2.0.3"
+    "@tiptap/extension-typography" "^2.0.3"
+    "@tiptap/pm" "^2.0.3"
+    "@tiptap/starter-kit" "^2.0.3"
+    "@tiptap/suggestion" "^2.0.3"
+    "@tiptap/vue-3" "^2.0.3"
+    feather-icons "^4.28.0"
+    idb-keyval "^6.2.0"
+    showdown "^2.1.0"
+    socket.io-client "^4.5.1"
+    tippy.js "^6.3.7"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"