diff --git a/assets/styles/framework/ui.less b/assets/styles/framework/ui.less
index ef10721836..59c989145d 100644
--- a/assets/styles/framework/ui.less
+++ b/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
diff --git a/components/ui/BackgroundCall/BackgroundCall.html b/components/ui/BackgroundCall/BackgroundCall.html
index 8c48ccecd9..63f0bc8eeb 100644
--- a/components/ui/BackgroundCall/BackgroundCall.html
+++ b/components/ui/BackgroundCall/BackgroundCall.html
@@ -1,7 +1,10 @@
- {{$t('ui.background_call')}}
- {{remoteParticipant.name}}
- - {{elapsedTime}}
+
+ {{ $t('ui.background_call') }} -
+
+ {{ remoteParticipant.name }}
+
+ -
+ {{ elapsedTime }}
+
diff --git a/components/ui/BackgroundCall/BackgroundCall.less b/components/ui/BackgroundCall/BackgroundCall.less
index 309cc5c278..4f35192118 100644
--- a/components/ui/BackgroundCall/BackgroundCall.less
+++ b/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;
}
}
diff --git a/components/ui/BackgroundCall/BackgroundCall.vue b/components/ui/BackgroundCall/BackgroundCall.vue
index 739a31b8d9..1784e097a8 100644
--- a/components/ui/BackgroundCall/BackgroundCall.vue
+++ b/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}`)
},
},
})
diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
index 06bfdc603c..4050f05e88 100644
--- a/components/ui/Global/Global.html
+++ b/components/ui/Global/Global.html
@@ -82,7 +82,7 @@
-
+
diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
index fe7e4ba277..05c8264ea6 100644
--- a/components/ui/Global/Global.vue
+++ b/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) {
diff --git a/layouts/mobile.vue b/layouts/mobile.vue
index 5a267fcfa8..b993b86cdd 100644
--- a/layouts/mobile.vue
+++ b/layouts/mobile.vue
@@ -3,6 +3,7 @@
id="app"
:class="[`theme-${settings.theme}`, { 'hidden-nav': !isMobileNavVisible }]"
>
+
@@ -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: {
diff --git a/locales/en-US.js b/locales/en-US.js
index f2a54b1559..02268412cd 100644
--- a/locales/en-US.js
+++ b/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',
diff --git a/pages/mobile/friends/index.vue b/pages/mobile/friends/index.vue
index 750f4bdcb0..dc29a31cc2 100644
--- a/pages/mobile/friends/index.vue
+++ b/pages/mobile/friends/index.vue
@@ -16,7 +16,7 @@
-
+