feat(call): create background call component

assets/styles/framework/framework.less

@@ -14,6 +14,7 @@
 @third-layer-zindex: 30;
 @fourth-layer-zindex: 40;
 @fifth-layer-zindex: 50;
+@sixth-layer-zindex: 60;
 @viewport-width: 100vw;
 
 #__nuxt,
@@ -44,3 +45,6 @@
 .fifth-layer {
   z-index: @fifth-layer-zindex;
 }
+.sixth-layer {
+  z-index: @sixth-layer-zindex;
+}

assets/styles/framework/ui.less

@@ -7,6 +7,7 @@
 @mobile-nav-size: 4.5rem;
 @slimbar-size: 60px;
 @chatbar-input-height: 48px;
+@background-call-height: 36px;
 
 // Popups
 @enhancers-height: 30rem;

components/ui/BackgroundCall/BackgroundCall.html

@@ -0,0 +1,5 @@
+<div class="background-call" @click="navigateToActiveConversation">
+  {{$t('ui.background_call')}}&nbsp;
+  <span v-if="caller" class="background-call-name">{{caller.name}}</span>&nbsp;
+  <span v-if="elapsedTime">- {{elapsedTime}}</span>
+</div>

components/ui/BackgroundCall/BackgroundCall.less

@@ -0,0 +1,24 @@
+.background-call {
+  &:extend(.background-flair);
+  &:extend(.font-secondary);
+  &:extend(.absolute-coverage);
+  border-radius: 0 0 @corner-rounding @corner-rounding;
+  height: @background-call-height;
+  z-index: @fifth-layer-zindex;
+  font-size: @micro-text-size;
+  bottom: auto;
+  text-align: center;
+  box-shadow: 0px 0px 30px rgba(var(--flair-color-rgb), 0.35),
+    0px 0px 20px rgba(var(--flair-color-rgb), 0.4);
+  padding: 10px 10%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  &-name {
+    &:extend(.ellipsis);
+    &:extend(.font-primary);
+    font-weight: 700;
+  }
+}

components/ui/BackgroundCall/BackgroundCall.vue

@@ -0,0 +1,48 @@
+<template src="./BackgroundCall.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+import { Friend } from '~/types/ui/friends'
+import { RootState } from '~/types/store/store'
+
+export default Vue.extend({
+  computed: {
+    ...mapState({
+      showSettings: (state) => (state as RootState).ui.showSettings,
+      friends: (state) => (state as RootState).friends.all,
+      elapsedTime: (state) => (state as RootState).webrtc.elapsedTime,
+      activeCall: (state) => (state as RootState).webrtc.activeCall,
+    }),
+    caller(): Friend | undefined {
+      return this.friends.find(
+        (f: Friend) => f.peerId === this.activeCall?.peerId,
+      )
+    },
+  },
+  methods: {
+    navigateToActiveConversation() {
+      if (!this.caller) {
+        return
+      }
+
+      if (this.$device.isMobile) {
+        // mobile, show slide 1 which is chat slide, set showSidebar flag false as css related
+        this.$store.commit('ui/setSwiperSlideIndex', 1)
+        this.$store.commit('ui/showSidebar', false)
+      }
+
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.caller.peerId,
+        type: 'friend',
+        participants: [this.caller],
+        calling: false,
+      })
+
+      this.$router.push(`/chat/direct/${this.caller.address}`)
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./BackgroundCall.less"></style>

components/ui/Global/Global.html

@@ -91,4 +91,5 @@
   <transition :name="$device.isMobile ? 'slide' : ''">
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>
+  <UiBackgroundCall v-if="showBackgroundCall" />
 </div>

components/ui/Global/Global.vue

@@ -1,7 +1,7 @@
 <template src="./Global.html"></template>
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { ModalWindows } from '~/store/ui/types'
 import { Item } from '~/libraries/Files/abstracts/Item.abstract'
@@ -21,7 +21,14 @@ export default Vue.extend({
   name: 'Global',
   computed: {
     ...mapState(['ui', 'media', 'webrtc', 'conversation']),
+    ...mapGetters('webrtc', ['isBackgroundCall', 'isActiveCall']),
     ModalWindows: () => ModalWindows,
+    showBackgroundCall(): boolean {
+      if (!this.$device.isMobile) {
+        return this.isBackgroundCall
+      }
+      return this.isBackgroundCall || (this.isActiveCall && this.ui.showSidebar)
+    },
   },
   mounted() {
     // This determines if we should show the

components/ui/Modal/Modal.less

@@ -34,7 +34,7 @@
 }
 
 .modal {
-  &:extend(.first-layer);
+  &:extend(.sixth-layer);
   position: absolute;
 }
 .close {

components/views/friends/friend/Friend.vue

@@ -152,6 +152,12 @@ export default Vue.extend({
       }
     },
     sendMessageRequest() {
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.friend.peerId,
+        type: 'friend',
+        participants: [this.friend],
+        calling: false,
+      })
       this.$router.push(`/chat/direct/${this.friend.address}`)
     },
   },

components/views/media/Media.vue

@@ -2,7 +2,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { Friend } from '~/types/ui/friends'
 import { User } from '~/types/ui/user'
 import { Sounds } from '~/libraries/SoundManager/SoundManager'
@@ -49,12 +49,7 @@ export default Vue.extend({
       'webrtc',
       'conversation',
     ]),
-    isActiveCall() {
-      return (
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.peerId === this.conversation.id
-      )
-    },
+    ...mapGetters('webrtc', ['isActiveCall']),
     computedUsers() {
       return this.fullscreen
         ? this.users.slice(0, this.fullscreenMaxViewableUsers)

components/views/media/heading/Heading.html

@@ -1,26 +1,24 @@
-<div id="media-heading">
-  <TypographyTag
-    v-if="elapsedTimeLabel"
-    data-cy="elapsed-time"
-    :text="elapsedTimeLabel"
-  />
-  <div class="spacer"></div>
-  <transition name="media-fullscreen" mode="out-in">
-    <div
-      v-bind:key="ui.fullscreen"
-      v-tooltip.left="ui.fullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
-      @click="toggleFullscreen"
-    >
-      <minimize-icon
-        data-cy="exit-fullscreen"
-        v-if="ui.fullscreen"
-        size="1.2x"
-      />
-      <maximize-icon
-        data-cy="go-fullscreen"
-        v-else="ui.fullscreen"
-        size="1.2x"
-      />
-    </div>
-  </transition>
-</div>
+<div id="media-heading">
+  <TypographyTag
+    v-if="elapsedTime"
+    data-cy="elapsed-time"
+    :text="$t('ui.live', {
+    time: elapsedTime
+  })"
+  />
+  <div class="spacer"></div>
+  <transition name="media-fullscreen" mode="out-in">
+    <div
+      :key="ui.fullscreen"
+      v-tooltip.left="ui.fullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
+      @click="toggleFullscreen"
+    >
+      <minimize-icon
+        v-if="ui.fullscreen"
+        data-cy="exit-fullscreen"
+        size="1.2x"
+      />
+      <maximize-icon v-else data-cy="go-fullscreen" size="1.2x" />
+    </div>
+  </transition>
+</div>

components/views/media/heading/Heading.vue

@@ -10,20 +10,9 @@ export default Vue.extend({
     MaximizeIcon,
     MinimizeIcon,
   },
-  data() {
-    return {
-      elapsedTimeLabel: '',
-      timer: undefined as NodeJS.Timeout | undefined,
-    }
-  },
   computed: {
-    ...mapState(['ui', 'webrtc']),
-  },
-  mounted() {
-    this.setTimer()
-  },
-  beforeDestroy() {
-    this.clearTimer()
+    ...mapState(['ui']),
+    ...mapState('webrtc', ['elapsedTime']),
   },
   methods: {
     /**
@@ -41,25 +30,6 @@ export default Vue.extend({
         }
       }
     },
-    elapsedTime(start: number): void {
-      if (!this.webrtc.activeCall || !start) {
-        return
-      }
-      const duration = this.$dayjs.duration(Date.now() - start)
-      const hours = duration.hours()
-      this.elapsedTimeLabel = `${this.$t('ui.live')} ${
-        hours > 0 ? `${hours}:` : ''
-      }${duration.format('mm:ss')}`
-    },
-    setTimer() {
-      this.elapsedTime(this.webrtc.createdAt)
-      this.timer = setInterval(() => {
-        this.elapsedTime(this.webrtc.createdAt)
-      }, 1000)
-    },
-    clearTimer() {
-      clearInterval(this.timer)
-    },
   },
 })
 </script>

components/views/navigation/toolbar/Toolbar.html

@@ -69,7 +69,7 @@
       />
     </div>
     <!-- <div
-      :class="`control-button ${!enableRTC || webrtc.activeCall ? 'disabled' : ''}`"
+      :class="`control-button ${!enableRTC || webrtc.BackgroundCall ? 'disabled' : ''}`"
       data-cy="toolbar-enable-video"
       v-tooltip.bottom="enableRTC ? $t('controls.video') : $t('controls.not_connected')"
       v-if="recipient"

layouts/Layout.less

@@ -135,6 +135,11 @@
       }
     }
   }
+
+  &.has-background-call {
+    position: relative;
+    padding-top: @background-call-height;
+  }
 }
 
 .desktop .dynamic-content.swiper-slide-next {

layouts/chat.vue

@@ -1,18 +1,22 @@
 <template>
   <div
     id="app-wrap"
-    :class="`${$store.state.ui.theme.base.class}
-    ${showSidebar ? 'is-open' : 'is-collapsed chat-page'} ${
-      asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside'
-    } ${selectedGroup ? 'active-group' : null}`"
+    :class="[
+      $store.state.ui.theme.base.class,
+      showSidebar ? 'is-open' : 'is-collapsed chat-page',
+      asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside',
+      selectedGroup ? 'active-group' : null,
+    ]"
   >
     <div
       id="app"
-      :class="`${showSidebar ? 'is-open' : 'is-collapsed'} ${
-        asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside'
-      } ${selectedGroup ? 'group' : 'direct'} ${
-        $device.isMobile ? 'mobile-app' : 'desktop'
-      }`"
+      :class="[
+        showSidebar ? 'is-open' : 'is-collapsed',
+        asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside',
+        selectedGroup ? 'group' : 'direct',
+        $device.isMobile ? 'mobile-app' : 'desktop',
+        isBackgroundCall ? 'has-background-call' : '',
+      ]"
     >
       <UiGlobal />
       <swiper
@@ -181,6 +185,7 @@ export default Vue.extend({
     ...mapGetters('ui', ['showSidebar', 'swiperSlideIndex']),
     ...mapGetters('textile', ['getInitialized']),
     ...mapGetters('conversation', ['recipient']),
+    ...mapGetters('webrtc', ['isBackgroundCall', 'isActiveCall']),
     DataStateType: () => DataStateType,
     selectedGroup(): string {
       return this.$route.params.id // TODO: change with groupid - AP-400
@@ -197,12 +202,6 @@ export default Vue.extend({
         !this.friends.all.length
       )
     },
-    isActiveCall() {
-      return (
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.callId === this.conversation.id
-      )
-    },
   },
   watch: {
     showSidebar(newValue, oldValue) {
@@ -225,6 +224,7 @@ export default Vue.extend({
     this.$store.commit('ui/setShowOlderMessagesInfo', false)
     // reset active conversation on chat leave
     this.$store.commit('textile/setActiveConversation', '')
+    this.$store.commit('conversation/resetConversation')
   },
   mounted() {
     this.$Sounds.changeLevels(this.audio.volume / 100)

layouts/files.vue

@@ -1,15 +1,17 @@
 <template>
   <div
     id="app-wrap"
-    :class="`${showSidebar ? 'is-open' : 'is-collapsed'} ${
-      $store.state.ui.theme.base.class
-    }`"
+    :class="[
+      $store.state.ui.theme.base.class,
+      showSidebar ? 'is-open' : 'is-collapsed',
+    ]"
   >
     <div
       id="app"
       :class="[
         showSidebar ? 'is-open' : 'is-collapsed',
         $device.isMobile ? 'mobile-app' : 'desktop',
+        isBackgroundCall ? 'has-background-call' : '',
       ]"
     >
       <UiGlobal />
@@ -109,6 +111,7 @@ export default Vue.extend({
     }),
     ...mapGetters('ui', ['showSidebar', 'isFilesIndexLoading']),
     ...mapGetters('textile', ['getInitialized']),
+    ...mapGetters('webrtc', ['isBackgroundCall']),
     flairColor(): string {
       return this.$store.state.ui.theme.flair.value
     },