feat(mobile): background call indicator on mobile (#4492)

assets/styles/framework/ui.less

@@ -8,7 +8,6 @@
 @chatbar-size: 78px;
 @mobile-nav-height: 60px;
 @chatbar-input-height: 48px;
-@background-call-height: 36px;
 @indicator-size: 32px;
 
 // Popups

components/ui/BackgroundCall/BackgroundCall.html

@@ -1,7 +1,10 @@
 <div class="background-call" @click="navigateToActiveConversation">
-  {{$t('ui.background_call')}}&nbsp;
-  <span v-if="remoteParticipant" class="background-call-name"
-    >{{remoteParticipant.name}}</span
-  >&nbsp;
-  <span v-if="elapsedTime">- {{elapsedTime}}</span>
+  <TypographyText size="xs" class="text">
+    <span>{{ $t('ui.background_call') }} -&nbsp;</span>
+    <b v-if="remoteParticipant" class="ellipsis">
+      {{ remoteParticipant.name }}
+    </b>
+    &nbsp;-&nbsp;
+    <span v-if="elapsedTime">{{ elapsedTime }}</span>
+  </TypographyText>
 </div>

components/ui/BackgroundCall/BackgroundCall.less

@@ -1,24 +1,12 @@
 .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;
+  background-color: @flair-color;
+  height: 30px;
   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;
+
+  .text {
+    display: flex;
   }
 }

components/ui/BackgroundCall/BackgroundCall.vue

@@ -41,24 +41,18 @@ export default Vue.extend({
   },
   methods: {
     navigateToActiveConversation() {
-      if (!this.remoteParticipant) {
-        return
-      }
-
-      if (this.$device.isMobile) {
-        // mobile, show slide 1 which is chat slide, set showSidebar flag false as css related
-        this.$store.commit('ui/showSidebar', false)
-      }
-
       const id = iridium.chat?.directConversationIdFromDid(
         this.remoteParticipant.did,
       )
-
-      if (!id || !iridium.chat?.hasConversation(id)) {
+      if (
+        !id ||
+        !iridium.chat?.hasConversation(id) ||
+        !this.remoteParticipant
+      ) {
         return
       }
 
-      this.$router.push(`/chat/${id}`)
+      this.$router.push(`/mobile/chat/${id}`)
     },
   },
 })

components/ui/Global/Global.html

@@ -82,7 +82,7 @@
   <transition :name="$device.isMobile ? 'slide' : ''">
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>
-  <UiPip v-if="showBackgroundCall && $device.isDesktop" v-slot="{ dragging }">
+  <UiPip v-if="$device.isDesktop && isBackgroundCall" v-slot="{ dragging }">
     <MediaPreviewCall :dragging="dragging" />
   </UiPip>
 </div>

components/ui/Global/Global.vue

@@ -22,12 +22,6 @@ export default Vue.extend({
   computed: {
     ...mapState(['ui', 'media', 'conversation', 'files', 'settings']),
     ModalWindows: () => ModalWindows,
-    showBackgroundCall(): boolean {
-      if (!this.$device.isMobile) {
-        return this.isBackgroundCall
-      }
-      return this.isBackgroundCall || (this.isActiveCall && this.ui.showSidebar)
-    },
   },
   watch: {
     'settings.audioInput'(audioInput: string) {

layouts/mobile.vue

@@ -3,6 +3,7 @@
     id="app"
     :class="[`theme-${settings.theme}`, { 'hidden-nav': !isMobileNavVisible }]"
   >
+    <UiBackgroundCall v-if="isBackgroundCall" />
     <Nuxt />
     <MobileNav />
     <UiGlobal />
@@ -21,12 +22,19 @@ import { flairs, Flair } from '~/libraries/Iridium/settings/types'
 import 'swiper/css'
 import { RootState } from '~/types/store/store'
 import { Conversation } from '~/libraries/Iridium/chat/types'
+import { useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
   name: 'Mobile',
+  setup() {
+    const { isBackgroundCall } = useWebRTC()
+
+    return { isBackgroundCall }
+  },
   data() {
     return {
       settings: iridium.settings.state,
+      webrtc: iridium.webRTC.state,
     }
   },
   computed: {

locales/en-US.js

@@ -39,7 +39,7 @@ export default {
     edited: 'edited',
     online: 'All users are offline | {name} is online | {name} are online',
     offline: '{name} is not connected',
-    background_call: 'You are currently in a call with',
+    background_call: 'Current call',
   },
   time: {
     now: 'now',

pages/mobile/friends/index.vue

@@ -16,7 +16,7 @@
             </button>
           </div>
         </div>
-        <FriendsMobileList v-if="friends.length" :list="friendsList" />
+        <FriendsMobileList v-if="friendsList.length" :list="friendsList" />
         <div v-else class="empty-friends-container">
           <FriendsEmptyMessage class="empty-friends" @click="setSwiperAsTab" />
         </div>