android: ability to hide active call (#3770)

* android: ability to hide active call * enhancements * fixed some problems and adapted to lock screen usage * change * reduce diff * dealing with disable PiP by user * fix back action * fix hidden information on view rotation while info collapsed * better info showing * status bar color and user icon * reorder * experiment * icon placement * enhancements * back button * invitation accepted state handling * awesome background work * better service interaction and UI * disabled call overlay when call ends and ability to accept a new call from the same contact while previous call is not ended * incomming call alert * enhancements * text * text2 * top area * faster ending call * a lot of enhancements * paddings * icon position * move icon --------- Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
2026-05-24 10:55:33 +00:00 · 2024-02-06 04:44:02 +07:00
parent 09bbaa1c94
commit 5da8aef794
33 changed files with 933 additions and 189 deletions
@@ -4,6 +4,7 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.net.LocalServerSocket
 import android.util.Log
+import androidx.activity.ComponentActivity
 import androidx.fragment.app.FragmentActivity
 import chat.simplex.common.*
 import chat.simplex.common.platform.*
@@ -25,7 +26,8 @@ val defaultLocale: Locale = Locale.getDefault()

@SuppressLint("StaticFieldLeak")
 lateinit var androidAppContext: Context
-lateinit var mainActivity: WeakReference<FragmentActivity>
+var mainActivity: WeakReference<FragmentActivity> = WeakReference(null)
+var callActivity: WeakReference<ComponentActivity> = WeakReference(null)

 fun initHaskell() {
  val socketName = "chat.simplex.app.local.socket.address.listen.native.cmd2" + Random.nextLong(100000)
@@ -28,6 +28,7 @@ import androidx.compose.ui.platform.LocalLifecycleOwner
 import dev.icerock.moko.resources.compose.painterResource
 import dev.icerock.moko.resources.compose.stringResource
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
@@ -50,20 +51,30 @@ import kotlinx.datetime.Clock
 import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.encodeToString

+// Should be destroy()'ed and set as null when call is ended. Otherwise, it will be a leak
+@SuppressLint("StaticFieldLeak")
+private var staticWebView: WebView? = null
+
+// WebView methods must be called on Main thread
+fun activeCallDestroyWebView() = withApi {
+  // Stop it when call ended
+  platform.androidCallServiceSafeStop()
+  staticWebView?.destroy()
+  staticWebView = null
+  Log.d(TAG, "CallView: webview was destroyed")
+}
+
@SuppressLint("SourceLockedOrientationActivity")
@Composable
 actual fun ActiveCallView() {
-  val chatModel = ChatModel
-  BackHandler(onBack = {
-    val call = chatModel.activeCall.value
-    if (call != null) withBGApi { chatModel.callManager.endCall(call) }
-  })
  val audioViaBluetooth = rememberSaveable { mutableStateOf(false) }
-  val ntfModeService = remember { chatModel.controller.appPrefs.notificationsMode.get() == NotificationsMode.SERVICE }
-  LaunchedEffect(Unit) {
-    // Start service when call happening since it's not already started.
-    // It's needed to prevent Android from shutting down a microphone after a minute or so when screen is off
-    if (!ntfModeService) platform.androidServiceStart()
+  val proximityLock = remember {
+    val pm = (androidAppContext.getSystemService(Context.POWER_SERVICE) as PowerManager)
+    if (pm.isWakeLockLevelSupported(PROXIMITY_SCREEN_OFF_WAKE_LOCK)) {
+      pm.newWakeLock(PROXIMITY_SCREEN_OFF_WAKE_LOCK, androidAppContext.packageName + ":proximityLock")
+    } else {
+      null
+    }
  }
  DisposableEffect(Unit) {
    val am = androidAppContext.getSystemService(Context.AUDIO_SERVICE) as AudioManager
@@ -93,22 +104,24 @@ actual fun ActiveCallView() {
      }
    }
    am.registerAudioDeviceCallback(audioCallback, null)
-    val pm = (androidAppContext.getSystemService(Context.POWER_SERVICE) as PowerManager)
-    val proximityLock = if (pm.isWakeLockLevelSupported(PROXIMITY_SCREEN_OFF_WAKE_LOCK)) {
-      pm.newWakeLock(PROXIMITY_SCREEN_OFF_WAKE_LOCK, androidAppContext.packageName + ":proximityLock")
-    } else {
-      null
-    }
-    proximityLock?.acquire()
    onDispose {
-      // Stop it when call ended
-      if (!ntfModeService) platform.androidServiceSafeStop()
      dropAudioManagerOverrides()
      am.unregisterAudioDeviceCallback(audioCallback)
-      proximityLock?.release()
+      if (proximityLock?.isHeld == true) {
+        proximityLock.release()
+      }
+    }
+  }
+  LaunchedEffect(chatModel.activeCallViewIsCollapsed.value) {
+    if (chatModel.activeCallViewIsCollapsed.value) {
+      if (proximityLock?.isHeld == true) proximityLock.release()
+    } else {
+      delay(1000)
+      if (proximityLock?.isHeld == false) proximityLock.acquire()
    }
  }
  val scope = rememberCoroutineScope()
+  val call = chatModel.activeCall.value
  Box(Modifier.fillMaxSize()) {
    WebRTCView(chatModel.callCommand) { apiMsg ->
      Log.d(TAG, "received from WebRTCView: $apiMsg")
@@ -156,7 +169,6 @@ actual fun ActiveCallView() {
          is WCallResponse.Ended -> {
            chatModel.activeCall.value = call.copy(callState = CallState.Ended)
            withBGApi { chatModel.callManager.endCall(call) }
-            chatModel.showCallView.value = false
          }
          is WCallResponse.Ok -> when (val cmd = apiMsg.command) {
            is WCallCommand.Answer ->
@@ -173,8 +185,9 @@ actual fun ActiveCallView() {
                chatModel.callCommand.add(WCallCommand.Media(CallMediaType.Audio, enable = false))
              }
            }
-            is WCallCommand.End ->
-              chatModel.showCallView.value = false
+            is WCallCommand.End -> {
+              withBGApi { chatModel.callManager.endCall(call) }
+            }
            else -> {}
          }
          is WCallResponse.Error -> {
@@ -183,8 +196,16 @@ actual fun ActiveCallView() {
        }
      }
    }
-    val call = chatModel.activeCall.value
-    if (call != null)  ActiveCallOverlay(call, chatModel, audioViaBluetooth)
+    val showOverlay = when {
+      call == null -> false
+      !platform.androidPictureInPictureAllowed() -> true
+      !call.supportsVideo() -> true
+      !chatModel.activeCallViewIsCollapsed.value -> true
+      else -> false
+    }
+    if (call != null && showOverlay) {
+      ActiveCallOverlay(call, chatModel, audioViaBluetooth)
+    }
  }

  val context = LocalContext.current
@@ -229,6 +250,20 @@ private fun ActiveCallOverlay(call: Call, chatModel: ChatModel, audioViaBluetoot
  )
 }

+@Composable
+fun ActiveCallOverlayDisabled(call: Call) {
+  ActiveCallOverlayLayout(
+    call = call,
+    speakerCanBeEnabled = false,
+    enabled = false,
+    dismiss = {},
+    toggleAudio = {},
+    toggleVideo = {},
+    toggleSound = {},
+    flipCamera = {}
+  )
+}
+
 private fun setCallSound(speaker: Boolean, audioViaBluetooth: MutableState<Boolean>) {
  val am = androidAppContext.getSystemService(Context.AUDIO_SERVICE) as AudioManager
  Log.d(TAG, "setCallSound: set audio mode, speaker enabled: $speaker")
@@ -271,59 +306,69 @@ private fun dropAudioManagerOverrides() {
 private fun ActiveCallOverlayLayout(
  call: Call,
  speakerCanBeEnabled: Boolean,
+  enabled: Boolean = true,
  dismiss: () -> Unit,
  toggleAudio: () -> Unit,
  toggleVideo: () -> Unit,
  toggleSound: () -> Unit,
  flipCamera: () -> Unit
 ) {
-  Column(Modifier.padding(DEFAULT_PADDING)) {
-    when (call.peerMedia ?: call.localMedia) {
-      CallMediaType.Video -> {
-        CallInfoView(call, alignment = Alignment.Start)
-        Box(Modifier.fillMaxWidth().fillMaxHeight().weight(1f), contentAlignment = Alignment.BottomCenter) {
-          DisabledBackgroundCallsButton()
-        }
-        Row(Modifier.fillMaxWidth().padding(horizontal = 6.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically) {
-          ToggleAudioButton(call, toggleAudio)
-          Spacer(Modifier.size(40.dp))
-          IconButton(onClick = dismiss) {
-            Icon(painterResource(MR.images.ic_call_end_filled), stringResource(MR.strings.icon_descr_hang_up), tint = Color.Red, modifier = Modifier.size(64.dp))
-          }
-          if (call.videoEnabled) {
-            ControlButton(call, painterResource(MR.images.ic_flip_camera_android_filled), MR.strings.icon_descr_flip_camera, flipCamera)
-            ControlButton(call, painterResource(MR.images.ic_videocam_filled), MR.strings.icon_descr_video_off, toggleVideo)
-          } else {
-            Spacer(Modifier.size(48.dp))
-            ControlButton(call, painterResource(MR.images.ic_videocam_off), MR.strings.icon_descr_video_on, toggleVideo)
-          }
-        }
+  Column {
+    val media = call.peerMedia ?: call.localMedia
+    CloseSheetBar({ chatModel.activeCallViewIsCollapsed.value = true }, true, tintColor = Color(0xFFFFFFD8)) {
+      if (media == CallMediaType.Video) {
+        Text(call.contact.chatViewName, Modifier.fillMaxWidth().padding(end = DEFAULT_PADDING), color = Color(0xFFFFFFD8), style = MaterialTheme.typography.h2, overflow = TextOverflow.Ellipsis, maxLines = 1)
      }
-      CallMediaType.Audio -> {
-        Spacer(Modifier.fillMaxHeight().weight(1f))
-        Column(
-          Modifier.fillMaxWidth(),
-          horizontalAlignment = Alignment.CenterHorizontally,
-          verticalArrangement = Arrangement.Center
-        ) {
-          ProfileImage(size = 192.dp, image = call.contact.profile.image)
-          CallInfoView(call, alignment = Alignment.CenterHorizontally)
-        }
-        Box(Modifier.fillMaxWidth().fillMaxHeight().weight(1f), contentAlignment = Alignment.BottomCenter) {
-          DisabledBackgroundCallsButton()
-        }
-        Box(Modifier.fillMaxWidth().padding(bottom = DEFAULT_BOTTOM_PADDING), contentAlignment = Alignment.CenterStart) {
-          Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
-            IconButton(onClick = dismiss) {
-              Icon(painterResource(MR.images.ic_call_end_filled), stringResource(MR.strings.icon_descr_hang_up), tint = Color.Red, modifier = Modifier.size(64.dp))
+    }
+    Column(Modifier.padding(horizontal = DEFAULT_PADDING)) {
+      when (media) {
+        CallMediaType.Video -> {
+          VideoCallInfoView(call)
+          Box(Modifier.fillMaxWidth().fillMaxHeight().weight(1f), contentAlignment = Alignment.BottomCenter) {
+            DisabledBackgroundCallsButton()
+          }
+          Row(Modifier.fillMaxWidth().padding(horizontal = 6.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically) {
+            ToggleAudioButton(call, enabled, toggleAudio)
+            Spacer(Modifier.size(40.dp))
+            IconButton(onClick = dismiss, enabled = enabled) {
+              Icon(painterResource(MR.images.ic_call_end_filled), stringResource(MR.strings.icon_descr_hang_up), tint = if (enabled) Color.Red else MaterialTheme.colors.secondary, modifier = Modifier.size(64.dp))
+            }
+            if (call.videoEnabled) {
+              ControlButton(call, painterResource(MR.images.ic_flip_camera_android_filled), MR.strings.icon_descr_flip_camera, enabled, flipCamera)
+              ControlButton(call, painterResource(MR.images.ic_videocam_filled), MR.strings.icon_descr_video_off, enabled, toggleVideo)
+            } else {
+              Spacer(Modifier.size(48.dp))
+              ControlButton(call, painterResource(MR.images.ic_videocam_off), MR.strings.icon_descr_video_on, enabled, toggleVideo)
            }
          }
-          Box(Modifier.padding(start = 32.dp)) {
-            ToggleAudioButton(call, toggleAudio)
+        }
+
+        CallMediaType.Audio -> {
+          Spacer(Modifier.fillMaxHeight().weight(1f))
+          Column(
+            Modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+          ) {
+            ProfileImage(size = 192.dp, image = call.contact.profile.image)
+            AudioCallInfoView(call)
          }
-          Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterEnd) {
-            Box(Modifier.padding(end = 32.dp)) {
-              ToggleSoundButton(call, speakerCanBeEnabled, toggleSound)
+          Box(Modifier.fillMaxWidth().fillMaxHeight().weight(1f), contentAlignment = Alignment.BottomCenter) {
+            DisabledBackgroundCallsButton()
+          }
+          Box(Modifier.fillMaxWidth().padding(bottom = DEFAULT_BOTTOM_PADDING), contentAlignment = Alignment.CenterStart) {
+            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+              IconButton(onClick = dismiss, enabled = enabled) {
+                Icon(painterResource(MR.images.ic_call_end_filled), stringResource(MR.strings.icon_descr_hang_up), tint = if (enabled) Color.Red else MaterialTheme.colors.secondary, modifier = Modifier.size(64.dp))
+              }
+            }
+            Box(Modifier.padding(start = 32.dp)) {
+              ToggleAudioButton(call, enabled, toggleAudio)
+            }
+            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterEnd) {
+              Box(Modifier.padding(end = 32.dp)) {
+                ToggleSoundButton(call, speakerCanBeEnabled && enabled, toggleSound)
+              }
            }
          }
        }
@@ -333,7 +378,7 @@ private fun ActiveCallOverlayLayout(
 }

@Composable
-private fun ControlButton(call: Call, icon: Painter, iconText: StringResource, action: () -> Unit, enabled: Boolean = true) {
+private fun ControlButton(call: Call, icon: Painter, iconText: StringResource, enabled: Boolean = true, action: () -> Unit) {
  if (call.hasMedia) {
    IconButton(onClick = action, enabled = enabled) {
      Icon(icon, stringResource(iconText), tint = if (enabled) Color(0xFFFFFFD8) else MaterialTheme.colors.secondary, modifier = Modifier.size(40.dp))
@@ -344,28 +389,26 @@ private fun ControlButton(call: Call, icon: Painter, iconText: StringResource, a
 }

@Composable
-private fun ToggleAudioButton(call: Call, toggleAudio: () -> Unit) {
+private fun ToggleAudioButton(call: Call, enabled: Boolean = true, toggleAudio: () -> Unit) {
  if (call.audioEnabled) {
-    ControlButton(call, painterResource(MR.images.ic_mic), MR.strings.icon_descr_audio_off, toggleAudio)
+    ControlButton(call, painterResource(MR.images.ic_mic), MR.strings.icon_descr_audio_off, enabled, toggleAudio)
  } else {
-    ControlButton(call, painterResource(MR.images.ic_mic_off), MR.strings.icon_descr_audio_on, toggleAudio)
+    ControlButton(call, painterResource(MR.images.ic_mic_off), MR.strings.icon_descr_audio_on, enabled, toggleAudio)
  }
 }

@Composable
 private fun ToggleSoundButton(call: Call, enabled: Boolean, toggleSound: () -> Unit) {
  if (call.soundSpeaker) {
-    ControlButton(call, painterResource(MR.images.ic_volume_up), MR.strings.icon_descr_speaker_off, toggleSound, enabled)
+    ControlButton(call, painterResource(MR.images.ic_volume_up), MR.strings.icon_descr_speaker_off, enabled, toggleSound)
  } else {
-    ControlButton(call, painterResource(MR.images.ic_volume_down), MR.strings.icon_descr_speaker_on, toggleSound, enabled)
+    ControlButton(call, painterResource(MR.images.ic_volume_down), MR.strings.icon_descr_speaker_on, enabled, toggleSound)
  }
 }

@Composable
-fun CallInfoView(call: Call, alignment: Alignment.Horizontal) {
-  @Composable fun InfoText(text: String, style: TextStyle = MaterialTheme.typography.body2) =
-    Text(text, color = Color(0xFFFFFFD8), style = style)
-  Column(horizontalAlignment = alignment) {
+fun AudioCallInfoView(call: Call) {
+  Column(horizontalAlignment = Alignment.CenterHorizontally) {
    InfoText(call.contact.chatViewName, style = MaterialTheme.typography.h2)
    InfoText(call.callState.text)

@@ -375,6 +418,21 @@ fun CallInfoView(call: Call, alignment: Alignment.Horizontal) {
  }
 }

+@Composable
+fun VideoCallInfoView(call: Call) {
+  Column(horizontalAlignment = Alignment.Start) {
+    InfoText(call.callState.text)
+
+    val connInfo = call.connectionInfo
+    val connInfoText = if (connInfo == null) ""  else " (${connInfo.text})"
+    InfoText(call.encryptionStatus + connInfoText)
+  }
+}
+
+@Composable
+fun InfoText(text: String, modifier: Modifier = Modifier, style: TextStyle = MaterialTheme.typography.body2) =
+  Text(text, modifier, color = Color(0xFFFFFFD8), style = style)
+
@Composable
 private fun DisabledBackgroundCallsButton() {
  var show by remember { mutableStateOf(!platform.androidIsBackgroundCallAllowed()) }
@@ -452,7 +510,6 @@ private fun DisabledBackgroundCallsButton() {

@Composable
 fun WebRTCView(callCommand: SnapshotStateList<WCallCommand>, onResponse: (WVAPIMessage) -> Unit) {
-  val scope = rememberCoroutineScope()
  val webView = remember { mutableStateOf<WebView?>(null) }
  val permissionsState = rememberMultiplePermissionsState(
    permissions = listOf(
@@ -475,10 +532,10 @@ fun WebRTCView(callCommand: SnapshotStateList<WCallCommand>, onResponse: (WVAPIM
    }
    lifecycleOwner.lifecycle.addObserver(observer)
    onDispose {
-      val wv = webView.value
-      if (wv != null) processCommand(wv, WCallCommand.End)
      lifecycleOwner.lifecycle.removeObserver(observer)
-      webView.value?.destroy()
+//      val wv = webView.value
+//      if (wv != null) processCommand(wv, WCallCommand.End)
+//      webView.value?.destroy()
      webView.value = null
    }
  }
@@ -505,7 +562,7 @@ fun WebRTCView(callCommand: SnapshotStateList<WCallCommand>, onResponse: (WVAPIM
    Box(Modifier.fillMaxSize()) {
      AndroidView(
        factory = { AndroidViewContext ->
-          WebView(AndroidViewContext).apply {
+          (staticWebView ?: WebView(androidAppContext)).apply {
            layoutParams = ViewGroup.LayoutParams(
              ViewGroup.LayoutParams.MATCH_PARENT,
              ViewGroup.LayoutParams.MATCH_PARENT,
@@ -530,7 +587,11 @@ fun WebRTCView(callCommand: SnapshotStateList<WCallCommand>, onResponse: (WVAPIM
            webViewSettings.javaScriptEnabled = true
            webViewSettings.mediaPlaybackRequiresUserGesture = false
            webViewSettings.cacheMode = WebSettings.LOAD_NO_CACHE
-            this.loadUrl("file:android_asset/www/android/call.html")
+            if (staticWebView == null) {
+              this.loadUrl("file:android_asset/www/android/call.html")
+            } else {
+              webView.value = this
+            }
          }
        }
      ) { /* WebView */ }
@@ -566,6 +627,7 @@ private class LocalContentWebViewClient(val webView: MutableState<WebView?>, pri
    super.onPageFinished(view, url)
    view.evaluateJavascript("sendMessageToNative = (msg) => WebRTCInterface.postMessage(JSON.stringify(msg))", null)
    webView.value = view
+    staticWebView = view
    Log.d(TAG, "WebRTCView: webview ready")
    // for debugging
    // view.evaluateJavascript("sendMessageToNative = ({resp}) => WebRTCInterface.postMessage(JSON.stringify({command: resp}))", null)
@@ -579,6 +641,7 @@ fun PreviewActiveCallOverlayVideo() {
    ActiveCallOverlayLayout(
      call = Call(
        remoteHostId = null,
+        userProfile = Profile.sampleData,
        contact = Contact.sampleData,
        callState = CallState.Negotiated,
        localMedia = CallMediaType.Video,
@@ -605,6 +668,7 @@ fun PreviewActiveCallOverlayAudio() {
    ActiveCallOverlayLayout(
      call = Call(
        remoteHostId = null,
+        userProfile = Profile.sampleData,
        contact = Contact.sampleData,
        callState = CallState.Negotiated,
        localMedia = CallMediaType.Audio,
@@ -1,8 +1,112 @@
 package chat.simplex.common.views.chatlist

+import android.app.Activity
+import androidx.compose.foundation.*
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.*
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.*
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import chat.simplex.common.ANDROID_CALL_TOP_PADDING
+import chat.simplex.common.model.durationText
+import chat.simplex.common.platform.*
+import chat.simplex.common.ui.theme.*
+import chat.simplex.common.views.call.*
 import chat.simplex.common.views.helpers.*
+import chat.simplex.res.MR
+import dev.icerock.moko.resources.compose.painterResource
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.datetime.Clock
+
+private val CALL_INTERACTIVE_AREA_HEIGHT = 74.dp
+private val CALL_TOP_OFFSET = (-10).dp
+private val CALL_TOP_GREEN_LINE_HEIGHT = ANDROID_CALL_TOP_PADDING - CALL_TOP_OFFSET
+private val CALL_BOTTOM_ICON_OFFSET = (-15).dp
+private val CALL_BOTTOM_ICON_HEIGHT = CALL_INTERACTIVE_AREA_HEIGHT + CALL_BOTTOM_ICON_OFFSET

@Composable
-actual fun DesktopActiveCallOverlayLayout(newChatSheetState: MutableStateFlow<AnimatedViewState>) {}
+actual fun ActiveCallInteractiveArea(call: Call, newChatSheetState: MutableStateFlow<AnimatedViewState>) {
+  val onClick = { platform.androidStartCallActivity(false) }
+  Box(Modifier.offset(y = CALL_TOP_OFFSET).height(CALL_INTERACTIVE_AREA_HEIGHT)) {
+    val source = remember { MutableInteractionSource() }
+    val indication = rememberRipple(bounded = true, 3000.dp)
+    Box(Modifier.height(CALL_TOP_GREEN_LINE_HEIGHT).clickable(onClick = onClick, indication = indication, interactionSource = source)) {
+      GreenLine(call)
+    }
+    Box(
+      Modifier
+        .offset(y = CALL_BOTTOM_ICON_OFFSET)
+        .size(CALL_BOTTOM_ICON_HEIGHT)
+        .background(SimplexGreen, CircleShape)
+        .clip(CircleShape)
+        .clickable(onClick = onClick, indication = indication, interactionSource = source)
+        .align(Alignment.BottomCenter),
+      contentAlignment = Alignment.Center
+    ) {
+      val media = call.peerMedia ?: call.localMedia
+      if (media == CallMediaType.Video) {
+        Icon(painterResource(MR.images.ic_videocam_filled), null, Modifier.size(27.dp).offset(x = 2.5.dp, y = 2.dp), tint = Color.White)
+      } else {
+        Icon(painterResource(MR.images.ic_call_filled), null, Modifier.size(27.dp).offset(x = -0.5.dp, y = 2.dp), tint = Color.White)
+      }
+    }
+  }
+}
+
+@Composable
+private fun GreenLine(call: Call) {
+  Row(
+    Modifier
+      .fillMaxSize()
+      .background(SimplexGreen)
+      .padding(top = -CALL_TOP_OFFSET)
+      .padding(horizontal = DEFAULT_PADDING),
+    verticalAlignment = Alignment.CenterVertically,
+    horizontalArrangement = Arrangement.Center
+  ) {
+    ContactName(call.contact.displayName)
+    Spacer(Modifier.weight(1f))
+    CallDuration(call)
+  }
+  val window = (LocalContext.current as Activity).window
+  DisposableEffect(Unit) {
+    window.statusBarColor = SimplexGreen.toArgb()
+    onDispose {
+      window.statusBarColor = Color.Black.toArgb()
+    }
+  }
+}
+
+@Composable
+private fun ContactName(name: String) {
+  Text(name, Modifier.width(windowWidth() * 0.35f), color = Color.White, maxLines = 1, overflow = TextOverflow.Ellipsis)
+}
+
+@Composable
+private fun CallDuration(call: Call) {
+  val connectedAt = call.connectedAt
+  if (connectedAt != null) {
+    val time = remember { mutableStateOf(durationText(0)) }
+    LaunchedEffect(Unit) {
+      while (true) {
+        time.value = durationText((Clock.System.now() - connectedAt).inWholeSeconds.toInt())
+        delay(250)
+      }
+    }
+    val text = time.value
+    val sp40Or50 = with(LocalDensity.current) { if (text.length >= 6) 60.sp.toDp() else 42.sp.toDp() }
+    val offset = with(LocalDensity.current) { 7.sp.toDp() }
+    Text(text, Modifier.offset(x = offset).widthIn(min = sp40Or50), color = Color.White)
+  }
+}