feat(webrtc): restored with iridium

components/ui/BackgroundCall/BackgroundCall.html

@@ -2,4 +2,11 @@
   {{$t('ui.background_call')}} 
   <span v-if="caller" class="background-call-name">{{caller.name}}</span>&nbsp;
   <span v-if="elapsedTime">- {{elapsedTime}}</span>
+  <div v-if="!audio.deafened && audioStream" class="audio-stream-container">
+    <audio
+      :id="`audio-stream-${audioStream.id}`"
+      :src-object.prop="audioStream"
+      autoplay
+    />
+  </div>
 </div>

components/ui/BackgroundCall/BackgroundCall.vue

@@ -3,24 +3,88 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { Friend } from '~/types/ui/friends'
+import dayjs from 'dayjs'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { Call, CallPeerStreams } from '~/libraries/WebRTC/Call'
+import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
 
 export default Vue.extend({
+  data() {
+    return {
+      caller: null,
+      webrtc: iridium.webRTC.state,
+      interval: null,
+      elapsedTime: '',
+    }
+  },
   computed: {
     ...mapState({
       friends: (state) => (state as RootState).friends.all,
-      elapsedTime: (state) => (state as RootState).webrtc.elapsedTime,
-      activeCall: (state) => (state as RootState).webrtc.activeCall,
+      audio: (state) => (state as RootState).audio,
     }),
-    caller(): Friend | undefined {
-      return this.friends.find(
-        (f: Friend) => f.peerId === this.activeCall?.peerId,
+    activeCall() {
+      return this.webrtc.activeCall
+    },
+    createdAt() {
+      return this.webrtc.createdAt
+    },
+    audioMuted() {
+      return (
+        (iridium.connector?.id &&
+          this.webrtc.streamMuted[iridium.connector?.id]?.audio) ??
+        false
+      )
+    },
+    call() {
+      return (
+        iridium.connector?.id &&
+        this.webrtc.activeCall?.callId &&
+        $WebRTC.getCall(this.webrtc.activeCall.callId)
+      )
+    },
+    streams() {
+      return (
+        this.call &&
+        iridium.connector?.id &&
+        (this.call as Call).streams[iridium.connector?.id]
+      )
+    },
+    audioStream() {
+      return (
+        this.call &&
+        !this.audioMuted &&
+        (this.streams as CallPeerStreams)?.audio
       )
     },
   },
+  watch: {
+    createdAt() {
+      this.startInterval()
+    },
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
+  mounted() {
+    this.startInterval()
+
+    const id = this.activeCall?.callId
+
+    if (!id || !iridium.chat?.hasConversation(id)) {
+      return
+    }
+
+    const conversation = iridium.chat?.getConversation(id)
+
+    this.caller = conversation?.participants.find((participant) => {
+      return participant.did !== iridium.connector?.id
+    })
+  },
   methods: {
-    navigateToActiveConversation() {
+    async navigateToActiveConversation() {
       if (!this.caller) {
         return
       }
@@ -30,14 +94,27 @@ export default Vue.extend({
         this.$store.commit('ui/showSidebar', false)
       }
 
-      this.$store.dispatch('conversation/setConversation', {
-        id: this.caller.peerId,
-        type: 'friend',
-        participants: [this.caller],
-        calling: false,
-      })
+      const id = await iridium.chat?.directConversationIdFromDid(
+        this.caller.did,
+      )
+
+      if (!id || !(await iridium.chat?.hasConversation(id))) {
+        return
+      }
 
-      this.$router.push(`/chat/direct/${this.caller.address}`)
+      this.$router.push(`/chat/${id}`)
+    },
+    startInterval() {
+      if (!this.interval && this.createdAt && this.activeCall) {
+        this.interval = setInterval(this.updateElapsedTime, 1000)
+      }
+    },
+    updateElapsedTime() {
+      const duration = dayjs.duration(Date.now() - this.createdAt)
+      const hours = duration.hours()
+      this.elapsedTime = `${hours > 0 ? hours + ':' : ''}${duration.format(
+        'mm:ss',
+      )}`
     },
   },
 })

components/ui/Chat/TypingIndicator/TypingIndicator.vue

@@ -2,12 +2,27 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters } from 'vuex'
-import { ConversationParticipant } from '~/store/conversation/types'
+import { ConversationParticipant } from '~/libraries/Iridium/chat/types'
+import iridium from '~/libraries/Iridium/IridiumManager'
+
 export default Vue.extend({
+  data() {
+    return {
+      chat: iridium.chat,
+    }
+  },
   computed: {
-    ...mapGetters('conversation', ['typingParticipants']),
+    typingParticipants() {
+      const conversationId = this.$route.params.id
+      if (!conversationId) {
+        return
+      }
+      return this.chat.getTypingParticipants(conversationId)
+    },
     text(): string {
+      if (!this.typingParticipants.length) {
+        return ''
+      }
       return this.$tc('messaging.typing', this.typingParticipants.length, {
         user: this.typingParticipants
           .map((p: ConversationParticipant) => p.name)

components/ui/Global/Global.html

@@ -26,7 +26,7 @@
         :set-close-timeout="5000"
       />
     </UiModal> -->
-    <UiModal v-if="webrtc.incomingCall">
+    <UiModal v-if="incomingCall">
       <MediaIncomingCall :accept-call="acceptCall" :deny-call="denyCall" />
     </UiModal>
     <UiModal
@@ -82,4 +82,7 @@
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>
   <UiBackgroundCall v-if="showBackgroundCall" />
+  <UiPip v-if="showBackgroundCall" v-slot="{ dragging }">
+    <PreviewCall :dragging="dragging" />
+  </UiPip>
 </div>

components/ui/Global/Global.vue

@@ -1,12 +1,11 @@
 <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 { $WebRTC } from '~/libraries/WebRTC/WebRTC'
-import { Friend } from '~/types/ui/friends'
 import iridium from '~/libraries/Iridium/IridiumManager'
+import PreviewCall from '~/components/views/media/previewCall/PreviewCall.vue'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -16,15 +15,28 @@ declare module 'vue/types/vue' {
 
 export default Vue.extend({
   name: 'Global',
+  components: {
+    PreviewCall,
+  },
+  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() {
@@ -76,37 +88,22 @@ export default Vue.extend({
      * @example
      */
     async acceptCall(kinds: TrackKind[]) {
-      this.$store.commit('webrtc/setStreamMuted', {
-        did: iridium.connector?.peerId,
-        audio: true,
-        video: true,
-        screen: true,
-      })
-      const { callId, peerId } = this.webrtc.incomingCall
-      const call = $WebRTC.getCall(callId)
-      if (!call) {
-        return
-      }
-
-      const redirectId =
-        this.webrtc.incomingCall.type === 'group'
-          ? `groups/${callId}`
-          : `direct/${
-              this.$store.state.friends.all.find(
-                (f: Friend) => f.peerId === peerId,
-              )?.address || 'error'
-            }`
-
       try {
-        await call.createLocalTracks(kinds)
-        await call.answer(peerId)
+        await this.webrtc.acceptCall(kinds)
       } catch (error) {
         if (error instanceof Error) {
           this.$toast.error(this.$t(error.message) as string)
         }
       }
 
-      const callingPath = `/chat/${redirectId}`
+      const callId = this.webrtc.state.activeCall?.callId
+
+      if (!callId) {
+        return
+      }
+
+      const callingPath = `/chat/${callId}`
+
       if (this.$route.path !== callingPath) {
         this.$router.push(callingPath)
       }
@@ -118,17 +115,16 @@ export default Vue.extend({
      */
     denyCall() {
       this.$store.commit('ui/fullscreen', false)
-      this.$store.dispatch('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)
-      this.$store.dispatch('webrtc/hangUp')
+      this.webrtc.hangUp()
     },
   },
 })

components/ui/Loaders/ScaleLoader/ScaleLoader.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="scale-loader">
+    <span />
+    <span />
+    <span />
+    <span />
+    <span />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'ScaleLoader',
+})
+</script>
+
+<style scoped lang="less">
+.scale-loader {
+  display: flex;
+  span {
+    background-color: @white;
+    width: 4px;
+    height: 20px;
+    margin: 2px;
+    border-radius: 2px;
+    display: inline-block;
+    animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.1s infinite normal both
+      running scale-loader;
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+    &:nth-child(4) {
+      animation-delay: 0.4s;
+    }
+    &:nth-child(5) {
+      animation-delay: 0.5s;
+    }
+  }
+}
+@keyframes scale-loader {
+  0% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.4);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+</style>