chore(calls): webrtc state

components/ui/BackgroundCall/BackgroundCall.vue

@@ -10,6 +10,7 @@ export default Vue.extend({
   data() {
     return {
       caller: null,
+      webrtc: iridium.webRTC.state,
     }
   },
   computed: {
@@ -20,7 +21,7 @@ export default Vue.extend({
     }),
   },
   async mounted() {
-    const id = iridium.webRTC.state.activeCall?.callId
+    const id = this.webrtc.activeCall?.callId
 
     if (!id || !iridium.chat?.hasConversation(id)) {
       return

components/ui/Global/Global.html

@@ -30,7 +30,7 @@
       :set-close-timeout="5000"
     />
   </UiModal>
-  <UiModal v-if="webrtc.incomingCall" nopad>
+  <UiModal v-if="incomingCall" nopad>
     <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
   </UiModal>
   <UiModal

components/ui/Global/Global.vue

@@ -1,14 +1,10 @@
 <template src="./Global.html"></template>
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { ModalWindows } from '~/store/ui/types'
-import { Item } from '~/libraries/Files/abstracts/Item.abstract'
-import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
-import { Friend } from '~/types/ui/friends'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import { Sounds } from '~/libraries/SoundManager/SoundManager'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -18,15 +14,25 @@ declare module 'vue/types/vue' {
 
 export default Vue.extend({
   name: 'Global',
+  data() {
+    return {
+      webrtc: iridium.webRTC,
+    }
+  },
   computed: {
-    ...mapState(['ui', 'media', 'webrtc', 'conversation', 'files']),
-    ...mapGetters('webrtc', ['isBackgroundCall', 'isActiveCall']),
+    ...mapState(['ui', 'media', 'conversation', 'files']),
     ModalWindows: () => ModalWindows,
+    incomingCall() {
+      return this.webrtc.state.incomingCall
+    },
     showBackgroundCall(): boolean {
       if (!this.$device.isMobile) {
-        return this.isBackgroundCall
+        return this.webrtc.isBackgroundCall
       }
-      return this.isBackgroundCall || (this.isActiveCall && this.ui.showSidebar)
+      return (
+        this.webrtc.isBackgroundCall ||
+        (this.webrtc.isActiveCall && this.ui.showSidebar)
+      )
     },
   },
   mounted() {
@@ -79,14 +85,14 @@ export default Vue.extend({
      */
     async acceptCall(kinds: TrackKind[]) {
       try {
-        await iridium.webRTC.acceptCall(kinds)
+        await this.webrtc.acceptCall(kinds)
       } catch (error) {
         if (error instanceof Error) {
           this.$toast.error(this.$t(error.message) as string)
         }
       }
 
-      const callId = iridium.webRTC.state.activeCall?.callId
+      const callId = this.webrtc.state.activeCall?.callId
 
       if (!callId) {
         return
@@ -109,17 +115,16 @@ export default Vue.extend({
      */
     denyCall() {
       this.$store.commit('ui/fullscreen', false)
-      iridium.webRTC.denyCall()
+      this.webrtc.denyCall()
     },
     /**
      * @method hangUp
      * @description Hangs up active call
      * @example
      */
     hangUp() {
-      this.$store.commit('webrtc/setIncomingCall', undefined, { root: true })
       this.$store.commit('ui/fullscreen', false)
-      iridium.webRTC.hangUp()
+      this.webrtc.hangUp()
     },
   },
 })

components/views/media/Media.vue

@@ -2,11 +2,8 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapGetters, mapState } from 'vuex'
-import { Friend } from '~/types/ui/friends'
+import { mapState } from 'vuex'
 import { User } from '~/types/ui/user'
-import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
-import { ConversationParticipant } from '~/store/conversation/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
@@ -34,6 +31,8 @@ export default Vue.extend({
   data() {
     return {
       componentKey: this.fullscreen,
+      webrtc: iridium.webRTC.state,
+      profile: iridium.profile.state,
     }
   },
   computed: {
@@ -42,7 +41,7 @@ export default Vue.extend({
       'accounts',
       'friends',
       'groups',
-      'webrtc',
+      // 'webrtc',
       'conversation',
     ]),
     computedUsers() {
@@ -51,17 +50,19 @@ export default Vue.extend({
         : this.users.slice(0, this.maxViewableUsers)
     },
     localParticipant() {
-      return { ...this.accounts.details, peerId: iridium.connector?.peerId }
+      return { ...this.profile, peerId: iridium.connector?.peerId }
     },
     remoteParticipants() {
-      const id = iridium.webRTC.state.activeCall?.callId
+      const id = this.webrtc.activeCall?.callId
 
       if (!id || !iridium.chat?.hasConversation(id)) {
         return []
       }
 
       const conversation = iridium.chat?.getConversation(id)
 
+      console.log('remoteParticipants conversation', conversation)
+
       return conversation?.participants.filter((participant) => {
         return participant.peerId !== iridium.connector?.peerId
       })

components/views/media/actions/Actions.vue

@@ -31,13 +31,13 @@ export default Vue.extend({
   data() {
     return {
       isLoading: false,
+      webrtc: iridium.webRTC,
     }
   },
   computed: {
     ...mapState({
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
-      webrtc: (state) => (state as RootState).webrtc,
     }),
     audioMuted(): boolean {
       return this.audio.muted
@@ -46,9 +46,9 @@ export default Vue.extend({
       return this.video.disabled
     },
     screenMuted(): boolean {
-      return (
+      return Boolean(
         iridium.connector?.peerId &&
-        this.webrtc.streamMuted[iridium.connector?.peerId]?.screen
+          this.webrtc.state.streamMuted[iridium.connector?.peerId]?.screen,
       )
     },
   },
@@ -84,7 +84,7 @@ export default Vue.extend({
      * @example
      */
     hangUp() {
-      this.$store.dispatch('webrtc/hangUp', undefined, { root: true })
+      this.webrtc.hangUp()
     },
   },
 })

components/views/media/heading/Heading.vue

@@ -4,15 +4,44 @@
 import Vue from 'vue'
 import { MaximizeIcon, MinimizeIcon } from 'satellite-lucide-icons'
 import { mapState } from 'vuex'
+import dayjs from 'dayjs'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { WebRTCState } from '~/store/webrtc/types'
 
 export default Vue.extend({
   components: {
     MaximizeIcon,
     MinimizeIcon,
   },
+  data() {
+    return {
+      webrtc: iridium.webRTC.state,
+      interval: null,
+      elapsedTime: '',
+    }
+  },
   computed: {
     ...mapState(['ui']),
-    ...mapState('webrtc', ['elapsedTime']),
+    // ...mapState('webrtc', ['elapsedTime']),
+    activeCall() {
+      return this.webrtc.activeCall
+    },
+    createdAt() {
+      return this.webrtc.createdAt
+    },
+  },
+  watch: {
+    createdAt() {
+      this.startInterval()
+    },
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  mounted() {
+    this.startInterval()
   },
   methods: {
     /**
@@ -30,6 +59,18 @@ export default Vue.extend({
         }
       }
     },
+    startInterval() {
+      if (!this.interval && this.createdAt && this.activeCall) {
+        this.interval = setInterval(this.updateElapsedTime, 1000)
+      }
+    },
+    updateElapsedTime() {
+      const duration = dayjs.duration(Date.now() - this.webrtc.createdAt)
+      const hours = duration.hours()
+      this.elapsedTime = `${hours > 0 ? hours + ':' : ''}${duration.format(
+        'mm:ss',
+      )}`
+    },
   },
 })
 </script>

components/views/media/incomingCall/IncomingCall.vue

@@ -36,11 +36,19 @@ export default Vue.extend({
       required: false,
     },
   },
+  data() {
+    return {
+      webrtc: iridium.webRTC.state,
+    }
+  },
   computed: {
     ...mapState({
       groups: (state) => (state as RootState).groups.all,
-      incomingCall: (state) => (state as RootState).webrtc.incomingCall,
+      // incomingCall: (state) => (state as RootState).webrtc.incomingCall,
     }),
+    incomingCall() {
+      return this.webrtc.incomingCall
+    },
     caller(): User | undefined {
       if (!this.incomingCall?.type) {
         return

components/views/media/user/User.vue

@@ -60,13 +60,13 @@ export default Vue.extend({
   data() {
     return {
       videoSettings: iridium.settings.state.video,
+      webrtc: iridium.webRTC?.state,
     }
   },
   computed: {
     ...mapState({
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
-      webrtc: (state) => (state as RootState).webrtc,
     }),
     call() {
       return (

components/views/navigation/sidebar/controls/Controls.vue

@@ -30,13 +30,13 @@ export default Vue.extend({
   data() {
     return {
       isLoading: false,
+      webrtc: iridium.webRTC.state,
     }
   },
   computed: {
     ...mapState({
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
-      webrtc: (state) => (state as RootState).webrtc,
       accounts: (state) => (state as RootState).accounts,
     }),
     audioMuted(): boolean {
@@ -46,13 +46,13 @@ export default Vue.extend({
       return this.inCall ? this.video.disabled : false
     },
     screenMuted(): boolean {
-      return (
+      return Boolean(
         iridium.connector?.peerId &&
-        this.webrtc.streamMuted[iridium.connector?.peerId]?.screen
+          this.webrtc.streamMuted[iridium.connector?.peerId]?.screen,
       )
     },
     inCall(): boolean {
-      return this.webrtc.activeCall !== undefined
+      return this.webrtc.activeCall !== null
     },
   },
   methods: {

components/views/navigation/toolbar/Toolbar.vue

@@ -46,14 +46,14 @@ export default Vue.extend({
       friends: iridium.friends.state.list,
       groups: iridium.groups.state,
       isGroupInviteVisible: false,
+      webrtc: iridium.webRTC,
     }
   },
   computed: {
     ...mapState({
       ui: (state) => (state as RootState).ui,
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
-      webrtc: (state) => (state as RootState).webrtc,
       modals: (state) => (state as RootState).ui.modals,
     }),
     ...mapGetters('ui', ['showSidebar', 'allUnseenNotifications']),
@@ -170,7 +170,7 @@ export default Vue.extend({
         return
       }
       try {
-        await iridium.webRTC.call(this.details, kinds)
+        await this.webrtc.call(this.details, kinds)
       } catch (e: any) {
         this.$toast.error(this.$t(e.message) as string)
       }
@@ -179,7 +179,7 @@ export default Vue.extend({
       if (this.isGroup) {
         return
       }
-      if (!this.enableRTC || this.webrtc.activeCall) {
+      if (!this.enableRTC || this.webrtc.state.activeCall) {
         return
       }
 

layouts/basic.vue

@@ -82,6 +82,7 @@ export default Vue.extend({
   },
   data() {
     return {
+      isBackgroundCall: iridium.webRTC.isBackgroundCall,
       sidebar: !this.$device.isMobile,
       settings: iridium.settings.state,
       swiperOption: {
@@ -121,7 +122,6 @@ export default Vue.extend({
       friends: (state) => (state as RootState).friends,
     }),
     ...mapGetters('ui', ['showSidebar', 'swiperSlideIndex']),
-    ...mapGetters('webrtc', ['isBackgroundCall']),
     flair(): Flair {
       return flairs[((this as any).settings as Settings).flair]
     },