android, desktop: calls switching from audio to video and back (#4814)

* android, desktop: calls switching from audio to video and back

* refactor

* working all 4 streams with mute handling differently

* changes

* changes

* wrong file

* changes

* padding

* android camera service type

* icons, sizes, clickable

* refactor

* Revert "android camera service type"

This reverts commit 9878ff38e9.

* late init camera permissions

* enabling camera sooner than call establishes (not fully done)

* changes

* alpha

* fixes for Safari

* enhancements

* fix Safari sound

* padding between buttons on desktop

* android default values for padding

* changes

* calls without encryption are supported and flipping camera on some devices works

* unused param

* logs

* background color

* play local video in Safari

* no line height

* removed one listener from per frame processing

* enhancements

---------

Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/model/SimpleXAPI.kt

@@ -2525,7 +2525,7 @@ object ChatController {
         // TODO askConfirmation?
         // TODO check encryption is compatible
         withCall(r, r.contact) { call ->
-          chatModel.activeCall.value = call.copy(callState = CallState.OfferReceived, peerMedia = r.callType.media, sharedKey = r.sharedKey)
+          chatModel.activeCall.value = call.copy(callState = CallState.OfferReceived, sharedKey = r.sharedKey)
           val useRelay = appPrefs.webrtcPolicyRelay.get()
           val iceServers = getIceServers()
           Log.d(TAG, ".callOffer iceServers $iceServers")

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/call/CallManager.kt

@@ -49,7 +49,7 @@ class CallManager(val chatModel: ChatModel) {
         contact = invitation.contact,
         callUUID = invitation.callUUID,
         callState = CallState.InvitationAccepted,
-        localMedia = invitation.callType.media,
+        initialCallType = invitation.callType.media,
         sharedKey = invitation.sharedKey,
       )
       showCallView.value = true

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/call/WebRTC.kt

@@ -2,6 +2,7 @@ package chat.simplex.common.views.call
 
 import chat.simplex.common.views.helpers.generalGetString
 import chat.simplex.common.model.*
+import chat.simplex.common.platform.appPlatform
 import chat.simplex.res.MR
 import kotlinx.datetime.Instant
 import kotlinx.serialization.SerialName
@@ -15,18 +16,21 @@ data class Call(
   val contact: Contact,
   val callUUID: String?,
   val callState: CallState,
-  val localMedia: CallMediaType,
+  val initialCallType: CallMediaType,
+  val localMediaSources: CallMediaSources = CallMediaSources(mic = true, camera = initialCallType == CallMediaType.Video && appPlatform.isAndroid),
   val localCapabilities: CallCapabilities? = null,
-  val peerMedia: CallMediaType? = null,
+  val peerMediaSources: CallMediaSources = CallMediaSources(),
   val sharedKey: String? = null,
-  val audioEnabled: Boolean = true,
-  val videoEnabled: Boolean = localMedia == CallMediaType.Video,
   var localCamera: VideoCamera = VideoCamera.User,
   val connectionInfo: ConnectionInfo? = null,
   var connectedAt: Instant? = null,
+
+  // When a user has audio call, and then he wants to enable camera but didn't grant permissions for using camera yet,
+  // we show permissions view without enabling camera before permissions are granted. After they are granted, enabling camera
+  val wantsToEnableCamera: Boolean = false
 ) {
   val encrypted: Boolean get() = localEncrypted && sharedKey != null
-  val localEncrypted: Boolean get() = localCapabilities?.encryption ?: false
+  private val localEncrypted: Boolean get() = localCapabilities?.encryption ?: false
 
   val encryptionStatus: String get() = when(callState) {
     CallState.WaitCapabilities -> ""
@@ -35,10 +39,8 @@ data class Call(
     else -> generalGetString(if (!localEncrypted) MR.strings.status_no_e2e_encryption else if (sharedKey == null) MR.strings.status_contact_has_no_e2e_encryption else MR.strings.status_e2e_encrypted)
   }
 
-  val hasMedia: Boolean get() = callState == CallState.OfferSent || callState == CallState.Negotiated || callState == CallState.Connected
-
-  fun supportsVideo(): Boolean = peerMedia == CallMediaType.Video || localMedia == CallMediaType.Video
-
+  val hasVideo: Boolean
+    get() = localMediaSources.hasVideo || peerMediaSources.hasVideo
 }
 
 enum class CallState {
@@ -68,6 +70,16 @@ enum class CallState {
 @Serializable data class WVAPICall(val corrId: Int? = null, val command: WCallCommand)
 @Serializable data class WVAPIMessage(val corrId: Int? = null, val resp: WCallResponse, val command: WCallCommand? = null)
 
+@Serializable data class CallMediaSources(
+  val mic: Boolean = false,
+  val camera: Boolean = false,
+  val screenAudio: Boolean = false,
+  val screenVideo: Boolean = false
+) {
+  val hasVideo: Boolean
+    get() = camera || screenVideo
+}
+
 @Serializable
 sealed class WCallCommand {
   @Serializable @SerialName("capabilities") data class Capabilities(val media: CallMediaType): WCallCommand()
@@ -75,7 +87,7 @@ sealed class WCallCommand {
   @Serializable @SerialName("offer") data class Offer(val offer: String, val iceCandidates: String, val media: CallMediaType, val aesKey: String? = null, val iceServers: List<RTCIceServer>? = null, val relay: Boolean? = null): WCallCommand()
   @Serializable @SerialName("answer") data class Answer (val answer: String, val iceCandidates: String): WCallCommand()
   @Serializable @SerialName("ice") data class Ice(val iceCandidates: String): WCallCommand()
-  @Serializable @SerialName("media") data class Media(val media: CallMediaType, val enable: Boolean): WCallCommand()
+  @Serializable @SerialName("media") data class Media(val source: CallMediaSource, val enable: Boolean): WCallCommand()
   @Serializable @SerialName("camera") data class Camera(val camera: VideoCamera): WCallCommand()
   @Serializable @SerialName("description") data class Description(val state: String, val description: String): WCallCommand()
   @Serializable @SerialName("layout") data class Layout(val layout: LayoutType): WCallCommand()
@@ -90,6 +102,7 @@ sealed class WCallResponse {
   @Serializable @SerialName("ice") data class Ice(val iceCandidates: String): WCallResponse()
   @Serializable @SerialName("connection") data class Connection(val state: ConnectionState): WCallResponse()
   @Serializable @SerialName("connected") data class Connected(val connectionInfo: ConnectionInfo): WCallResponse()
+  @Serializable @SerialName("peerMedia") data class PeerMedia(val source: CallMediaSource, val enabled: Boolean): WCallResponse()
   @Serializable @SerialName("end") object End: WCallResponse()
   @Serializable @SerialName("ended") object Ended: WCallResponse()
   @Serializable @SerialName("ok") object Ok: WCallResponse()
@@ -165,6 +178,14 @@ enum class CallMediaType {
   @SerialName("audio") Audio
 }
 
+@Serializable
+enum class CallMediaSource {
+  @SerialName("mic") Mic,
+  @SerialName("camera") Camera,
+  @SerialName("screenAudio") ScreenAudio,
+  @SerialName("screenVideo") ScreenVideo
+}
+
 @Serializable
 enum class VideoCamera {
   @SerialName("user") User,

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chat/ChatView.kt

@@ -576,7 +576,7 @@ fun startChatCall(remoteHostId: Long?, chatInfo: ChatInfo, media: CallMediaType)
     if (chatInfo is ChatInfo.Direct) {
       val contactInfo = chatModel.controller.apiContactInfo(remoteHostId, chatInfo.contact.contactId)
       val profile = contactInfo?.second ?: chatModel.currentUser.value?.profile?.toProfile() ?: return@withBGApi
-      chatModel.activeCall.value = Call(remoteHostId = remoteHostId, contact = chatInfo.contact, callUUID = null, callState = CallState.WaitCapabilities, localMedia = media, userProfile = profile)
+      chatModel.activeCall.value = Call(remoteHostId = remoteHostId, contact = chatInfo.contact, callUUID = null, callState = CallState.WaitCapabilities, initialCallType = media, userProfile = profile)
       chatModel.showCallView.value = true
       chatModel.callCommand.add(WCallCommand.Capabilities(media))
     }

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/helpers/ExposedDropDownSettingRow.kt

@@ -1,7 +1,12 @@
 package chat.simplex.common.views.helpers
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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 dev.icerock.moko.resources.compose.painterResource
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -9,6 +14,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.*
 import chat.simplex.res.MR
@@ -85,10 +91,12 @@ fun <T> ExposedDropDownSettingWithIcon(
   values: List<Triple<T, ImageResource, String>>,
   selection: State<T>,
   fontSize: TextUnit = 16.sp,
-  iconSize: Dp = 40.dp,
+  iconPaddingPercent: Float = 0.2f,
   listIconSize: Dp = 30.dp,
+  boxSize: Dp = 60.dp,
   iconColor: Color = MenuTextColor,
   enabled: State<Boolean> = mutableStateOf(true),
+  background: Color,
   minWidth: Dp = 200.dp,
   onSelected: (T) -> Unit
 ) {
@@ -99,13 +107,21 @@ fun <T> ExposedDropDownSettingWithIcon(
       expanded.value = !expanded.value && enabled.value
     }
   ) {
-    Row(
-      Modifier.padding(start = 10.dp),
-      verticalAlignment = Alignment.CenterVertically,
-      horizontalArrangement = Arrangement.End
+    Box(
+      Modifier
+        .background(background, CircleShape)
+        .size(boxSize)
+        .clickable(
+          onClick = {},
+          role = Role.Button,
+          interactionSource = remember { MutableInteractionSource() },
+          indication = rememberRipple(bounded = false, radius = boxSize / 2, color = background.lighter(0.1f)),
+          enabled = enabled.value
+        ),
+      contentAlignment = Alignment.Center
     ) {
       val choice = values.first { it.first == selection.value }
-      Icon(painterResource(choice.second), choice.third, Modifier.size(iconSize), tint = iconColor)
+      Icon(painterResource(choice.second), choice.third, Modifier.padding(boxSize * iconPaddingPercent).fillMaxSize(), tint = iconColor)
     }
     DefaultExposedDropdownMenu(
       modifier = Modifier.widthIn(min = minWidth),

apps/multiplatform/common/src/commonMain/resources/MR/base/strings.xml

@@ -1075,6 +1075,7 @@
   <string name="icon_descr_audio_on">Audio on</string>
   <string name="icon_descr_speaker_off">Speaker off</string>
   <string name="icon_descr_speaker_on">Speaker on</string>
+  <string name="icon_descr_sound_muted">Sound muted</string>
   <string name="icon_descr_flip_camera">Flip camera</string>
 
   <!-- Call items -->

apps/multiplatform/common/src/commonMain/resources/MR/images/ic_volume_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22"><path d="m809.5-61.5-133-133q-27 19-58.25 33.25T553.5-139.5V-199q21.5-6.5 42.5-14.5t39.5-22L476-396v229L280-363H122.5v-234H274L54.5-816.5 96-858l755 754-41.5 42.5ZM770-291l-41.5-41.5q20-33 29.75-70.67Q768-440.85 768-481q0-100.82-58.75-180.41T553.5-763v-59.5q120 28 196 123.25t76 218.25q0 50.5-14 98.75T770-291ZM642.5-418.5l-89-89v-132q46.5 21.5 73.75 64.75T654.5-480q0 16-3 31.5t-9 30ZM476-585 372-689l104-104v208Zm-57.5 278v-145.5l-87-87H180v119h124.5l114 113.5ZM375-496Z"/></svg>

apps/multiplatform/common/src/commonMain/resources/assets/www/android/call.html

@@ -6,6 +6,15 @@
     <script src="../lz-string.min.js"></script>
   </head>
   <body>
+    <video
+      id="remote-screen-video-stream"
+      class="inline"
+      playsinline
+      poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      style="visibility: hidden"
+      onclick="javascript:toggleRemoteScreenVideoFitFill()"
+    ></video>
+
     <video
       id="remote-video-stream"
       class="inline"
@@ -14,6 +23,7 @@
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
       onclick="javascript:toggleRemoteVideoFitFill()"
     ></video>
+
     <video
       id="local-video-stream"
       class="inline"
@@ -22,6 +32,15 @@
       playsinline
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
     ></video>
+
+    <video
+      id="local-screen-video-stream"
+      class="inline"
+      muted
+      playsinline
+      poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      style="visibility: hidden"
+    ></video>
   </body>
   <footer>
     <script src="../call.js"></script>

apps/multiplatform/common/src/commonMain/resources/assets/www/android/style.css

@@ -12,6 +12,35 @@ body {
   object-fit: cover;
 }
 
+#remote-video-stream.collapsed {
+  position: absolute;
+  max-width: 30%;
+  max-height: 30%;
+  object-fit: cover;
+  margin: 16px;
+  border-radius: 16px;
+  bottom: 80px;
+  right: 0;
+}
+
+#remote-video-stream.collapsed-pip {
+  position: absolute;
+  max-width: 50%;
+  max-height: 50%;
+  object-fit: cover;
+  margin: 8px;
+  border-radius: 8px;
+  bottom: 0;
+  right: 0;
+}
+
+#remote-screen-video-stream.inline {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 #local-video-stream.inline {
   position: absolute;
   width: 30%;
@@ -23,6 +52,17 @@ body {
   right: 0;
 }
 
+#local-screen-video-stream.inline {
+  position: absolute;
+  width: 30%;
+  max-width: 30%;
+  object-fit: cover;
+  margin: 16px;
+  border-radius: 16px;
+  top: 30%;
+  right: 0;
+}
+
 #remote-video-stream.fullscreen {
   position: absolute;
   height: 100%;
@@ -30,6 +70,13 @@ body {
   object-fit: cover;
 }
 
+#remote-screen-video-stream.fullscreen {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
 #local-video-stream.fullscreen {
   position: absolute;
   height: 100%;
@@ -37,6 +84,13 @@ body {
   object-fit: cover;
 }
 
+#local-screen-video-stream.fullscreen {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
 *::-webkit-media-controls {
   display: none !important;
   -webkit-appearance: none !important;

apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/call.html

@@ -7,6 +7,15 @@
     <script src="/lz-string.min.js"></script>
   </head>
   <body>
+    <video
+      id="remote-screen-video-stream"
+      class="inline"
+      playsinline
+      poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      style="visibility: hidden"
+      onclick="javascript:toggleRemoteScreenVideoFitFill()"
+    ></video>
+
     <video
       id="remote-video-stream"
       class="inline"
@@ -14,6 +23,7 @@
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
       onclick="javascript:toggleRemoteVideoFitFill()"
     ></video>
+
     <video
       id="local-video-stream"
       class="inline"
@@ -21,28 +31,39 @@
       playsinline
       poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
     ></video>
+
+    <video
+      id="local-screen-video-stream"
+      class="inline"
+      muted
+      playsinline
+      poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAAEUlEQVR42mNk+M+AARiHsiAAcCIKAYwFoQ8AAAAASUVORK5CYII="
+      style="visibility: hidden"
+    ></video>
+
     <div id="progress"></div>
     <div id="info-block">
       <p id="state"></p>
       <p id="description"></p>
+      <b id="media-sources" style="color: #fff"></b>
     </div>
     <div id="audio-call-icon">
       <img src="/desktop/images/ic_phone_in_talk.svg" />
     </div>
     <p id="manage-call">
-      <button id="toggle-screen" style="display: none" onclick="javascript:toggleScreenManually()">
+      <button id="toggle-screen" onclick="javascript:toggleScreenManually()">
         <img src="/desktop/images/ic_screen_share.svg" />
       </button>
-      <button id="toggle-audio" style="display: none" onclick="javascript:toggleAudioManually()">
+      <button id="toggle-mic" onclick="javascript:toggleMicManually()">
         <img src="/desktop/images/ic_mic.svg" />
       </button>
-      <button id="end-call" onclick="javascript:endCallManually()">
+      <button id="end-call" style="background: red" onclick="javascript:endCallManually()">
         <img src="/desktop/images/ic_call_end_filled.svg" />
       </button>
-      <button id="toggle-speaker" style="display: none" onclick="javascript:toggleSpeakerManually()">
+      <button id="toggle-speaker" onclick="javascript:toggleSpeakerManually()">
         <img src="/desktop/images/ic_volume_up.svg" />
       </button>
-      <button id="toggle-video" style="display: none" onclick="javascript:toggleVideoManually()">
+      <button id="toggle-camera" onclick="javascript:toggleCameraManually()">
         <img src="/desktop/images/ic_videocam_off.svg" />
       </button>
     </p>

apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_call_end_filled.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="red" d="M480 418q125 0 238.75 50.25T914 613.5q8 9.5 8.25 21t-8.25 20L821 748q-8 8-22.5 8.75t-23-5.75l-113-84.5q-6-4.5-8.75-10.25T651 643.5v-139q-42-16-85.5-22.5t-85-6.5q-42 0-85.5 6.5t-85.5 22.5v139q0 6.5-2.75 12.5T298 666.5L184.5 751q-11.5 8.5-23.5 7.5T139.5 748L46 654.5q-8.5-8.5-8.25-20t8.25-21q81.5-95 195.25-145.25T480 418Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 96 960 960" width="44"><path fill="white" d="M480 418q125 0 238.75 50.25T914 613.5q8 9.5 8.25 21t-8.25 20L821 748q-8 8-22.5 8.75t-23-5.75l-113-84.5q-6-4.5-8.75-10.25T651 643.5v-139q-42-16-85.5-22.5t-85-6.5q-42 0-85.5 6.5t-85.5 22.5v139q0 6.5-2.75 12.5T298 666.5L184.5 751q-11.5 8.5-23.5 7.5T139.5 748L46 654.5q-8.5-8.5-8.25-20t8.25-21q81.5-95 195.25-145.25T480 418Z"/></svg>

apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/images/ic_volume_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44" fill="white"><path d="m809.5-61.5-133-133q-27 19-58.25 33.25T553.5-139.5V-199q21.5-6.5 42.5-14.5t39.5-22L476-396v229L280-363H122.5v-234H274L54.5-816.5 96-858l755 754-41.5 42.5ZM770-291l-41.5-41.5q20-33 29.75-70.67Q768-440.85 768-481q0-100.82-58.75-180.41T553.5-763v-59.5q120 28 196 123.25t76 218.25q0 50.5-14 98.75T770-291ZM642.5-418.5l-89-89v-132q46.5 21.5 73.75 64.75T654.5-480q0 16-3 31.5t-9 30ZM476-585 372-689l104-104v208Zm-57.5 278v-145.5l-87-87H180v119h124.5l114 113.5ZM375-496Z"/></svg>

apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/style.css

@@ -12,7 +12,37 @@ body {
   object-fit: cover;
 }
 
+#remote-video-stream.collapsed {
+  position: absolute;
+  max-width: 20%;
+  max-height: 20%;
+  object-fit: cover;
+  margin: 16px;
+  border-radius: 16px;
+  bottom: 80px;
+  right: 0;
+}
+
+#remote-video-stream.collapsed-pip {
+  position: absolute;
+  max-width: 30%;
+  max-height: 30%;
+  object-fit: cover;
+  margin: 8px;
+  border-radius: 8px;
+  bottom: 0;
+  right: 0;
+}
+
+#remote-screen-video-stream.inline {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 #local-video-stream.inline {
+  background-color: black;
   position: absolute;
   width: 20%;
   max-width: 20%;
@@ -23,6 +53,17 @@ body {
   right: 0;
 }
 
+#local-screen-video-stream.inline {
+  position: absolute;
+  width: 20%;
+  max-width: 20%;
+  object-fit: cover;
+  margin: 16px;
+  border-radius: 16px;
+  top: 33%;
+  right: 0;
+}
+
 #remote-video-stream.fullscreen {
   position: absolute;
   height: 100%;
@@ -30,6 +71,13 @@ body {
   object-fit: cover;
 }
 
+#remote-screen-video-stream.fullscreen {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
 #local-video-stream.fullscreen {
   position: absolute;
   height: 100%;
@@ -37,6 +85,13 @@ body {
   object-fit: cover;
 }
 
+#local-screen-video-stream.fullscreen {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
 *::-webkit-media-controls {
   display: none !important;
   -webkit-appearance: none !important;
@@ -57,19 +112,32 @@ body {
 #manage-call {
   position: absolute;
   width: fit-content;
-  top: 90%;
+  bottom: 15px;
   left: 50%;
   transform: translate(-50%, 0);
   display: grid;
   grid-auto-flow: column;
-  grid-column-gap: 30px;
+  grid-column-gap: 38px;
 }
 
 #manage-call button {
   border: none;
   cursor: pointer;
   appearance: none;
-  background-color: inherit;
+  background-color: #ffffff33;
+  border-radius: 50%;
+  padding: 13px;
+  width: 61px;
+  height: 61px;
+}
+
+#manage-call img {
+  width: 35px;
+  height: 35px;
+}
+
+#manage-call button .video {
+  background: #00000033;
 }
 
 #progress {
@@ -110,7 +178,6 @@ body {
 #info-block {
   position: absolute;
   color: white;
-  line-height: 10px;
   opacity: 0.8;
   width: 200px;
   font-family: Arial, Helvetica, sans-serif;

apps/multiplatform/common/src/commonMain/resources/assets/www/desktop/ui.js

@@ -9,6 +9,7 @@ socket.addEventListener("open", (_event) => {
     sendMessageToNative = (msg) => {
         console.log("Message to server");
         socket.send(JSON.stringify(msg));
+        reactOnMessageToServer(msg);
     };
 });
 socket.addEventListener("message", (event) => {
@@ -27,71 +28,156 @@ socket.addEventListener("close", (_event) => {
 function endCallManually() {
     sendMessageToNative({ resp: { type: "end" } });
 }
-function toggleAudioManually() {
-    if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.localMedia) {
-        document.getElementById("toggle-audio").innerHTML = toggleMedia(activeCall.localStream, CallMediaType.Audio)
-            ? '<img src="/desktop/images/ic_mic.svg" />'
-            : '<img src="/desktop/images/ic_mic_off.svg" />';
-    }
+function toggleMicManually() {
+    const enable = activeCall ? !activeCall.localMediaSources.mic : !inactiveCallMediaSources.mic;
+    const apiCall = {
+        command: { type: "media", source: CallMediaSource.Mic, enable: enable },
+    };
+    processCommand(apiCall);
 }
 function toggleSpeakerManually() {
-    if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.remoteStream) {
-        document.getElementById("toggle-speaker").innerHTML = toggleMedia(activeCall.remoteStream, CallMediaType.Audio)
-            ? '<img src="/desktop/images/ic_volume_up.svg" />'
-            : '<img src="/desktop/images/ic_volume_down.svg" />';
+    if ((activeCall === null || activeCall === void 0 ? void 0 : activeCall.remoteStream) && activeCall.peerMediaSources.mic) {
+        enableSpeakerIcon(togglePeerMedia(activeCall.remoteStream, CallMediaType.Audio), !activeCall.peerMediaSources.mic);
     }
 }
-function toggleVideoManually() {
-    if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.localMedia) {
-        let res;
-        if (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled) {
-            activeCall.cameraEnabled = !activeCall.cameraEnabled;
-            res = activeCall.cameraEnabled;
-        }
-        else {
-            res = toggleMedia(activeCall.localStream, CallMediaType.Video);
-        }
-        document.getElementById("toggle-video").innerHTML = res
-            ? '<img src="/desktop/images/ic_videocam_filled.svg" />'
-            : '<img src="/desktop/images/ic_videocam_off.svg" />';
-    }
+function toggleCameraManually() {
+    const enable = activeCall ? !activeCall.localMediaSources.camera : !inactiveCallMediaSources.camera;
+    const apiCall = {
+        command: { type: "media", source: CallMediaSource.Camera, enable: enable },
+    };
+    processCommand(apiCall);
 }
 async function toggleScreenManually() {
-    const was = activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled;
     await toggleScreenShare();
-    if (was != (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled)) {
-        document.getElementById("toggle-screen").innerHTML = (activeCall === null || activeCall === void 0 ? void 0 : activeCall.screenShareEnabled)
-            ? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
-            : '<img src="/desktop/images/ic_screen_share.svg" />';
+}
+// override function in call.ts to adapt UI to enabled media sources
+localOrPeerMediaSourcesChanged = (call) => {
+    enableMicIcon(call.localMediaSources.mic);
+    enableCameraIcon(call.localMediaSources.camera);
+    enableScreenIcon(call.localMediaSources.screenVideo);
+    const className = localMedia(call) == CallMediaType.Video || peerMedia(call) == CallMediaType.Video ? CallMediaType.Video : CallMediaType.Audio;
+    document.getElementById("info-block").className = className;
+    if (call.connection.iceConnectionState == "connected") {
+        document.getElementById("audio-call-icon").style.display = className == CallMediaType.Audio ? "block" : "none";
     }
+    // document.getElementById("media-sources")!.innerText = mediaSourcesStatus(call)
+    document.getElementById("manage-call").className = localMedia(call) == CallMediaType.Video ? CallMediaType.Video : "";
+};
+// override function in call.ts to adapt UI to enabled media sources
+inactiveCallMediaSourcesChanged = (inactiveCallMediaSources) => {
+    const mic = inactiveCallMediaSources.mic;
+    const camera = inactiveCallMediaSources.camera;
+    const screenVideo = inactiveCallMediaSources.screenVideo;
+    enableMicIcon(mic);
+    enableCameraIcon(camera);
+    enableScreenIcon(screenVideo);
+    const className = camera ? CallMediaType.Video : CallMediaType.Audio;
+    document.getElementById("info-block").className = className;
+    // document.getElementById("media-sources")!.innerText = inactiveCallMediaSourcesStatus(inactiveCallMediaSources)
+};
+function enableMicIcon(enabled) {
+    document.getElementById("toggle-mic").innerHTML = enabled
+        ? '<img src="/desktop/images/ic_mic.svg" />'
+        : '<img src="/desktop/images/ic_mic_off.svg" />';
+}
+function enableCameraIcon(enabled) {
+    document.getElementById("toggle-camera").innerHTML = enabled
+        ? '<img src="/desktop/images/ic_videocam_filled.svg" />'
+        : '<img src="/desktop/images/ic_videocam_off.svg" />';
+}
+function enableScreenIcon(enabled) {
+    document.getElementById("toggle-screen").innerHTML = enabled
+        ? '<img src="/desktop/images/ic_stop_screen_share.svg" />'
+        : '<img src="/desktop/images/ic_screen_share.svg" />';
+}
+function enableSpeakerIcon(enabled, muted) {
+    document.getElementById("toggle-speaker").innerHTML = muted
+        ? '<img src="/desktop/images/ic_volume_off.svg" />'
+        : enabled
+            ? '<img src="/desktop/images/ic_volume_up.svg" />'
+            : '<img src="/desktop/images/ic_volume_down.svg" />';
+    document.getElementById("toggle-speaker").style.opacity = muted ? "0.7" : "1";
+}
+function mediaSourcesStatus(call) {
+    let status = "local";
+    if (call.localMediaSources.mic)
+        status += " mic";
+    if (call.localMediaSources.camera)
+        status += " cam";
+    if (call.localMediaSources.screenAudio)
+        status += " scrA";
+    if (call.localMediaSources.screenVideo)
+        status += " scrV";
+    status += " | peer";
+    if (call.peerMediaSources.mic)
+        status += " mic";
+    if (call.peerMediaSources.camera)
+        status += " cam";
+    if (call.peerMediaSources.screenAudio)
+        status += " scrA";
+    if (call.peerMediaSources.screenVideo)
+        status += " scrV";
+    return status;
+}
+function inactiveCallMediaSourcesStatus(inactiveCallMediaSources) {
+    let status = "local";
+    const mic = inactiveCallMediaSources.mic;
+    const camera = inactiveCallMediaSources.camera;
+    const screenAudio = inactiveCallMediaSources.screenAudio;
+    const screenVideo = inactiveCallMediaSources.screenVideo;
+    if (mic)
+        status += " mic";
+    if (camera)
+        status += " cam";
+    if (screenAudio)
+        status += " scrA";
+    if (screenVideo)
+        status += " scrV";
+    return status;
 }
 function reactOnMessageFromServer(msg) {
-    var _a;
-    switch ((_a = msg.command) === null || _a === void 0 ? void 0 : _a.type) {
+    var _a, _b, _c;
+    // screen is not allowed to be enabled before connection estabilished
+    if (((_a = msg.command) === null || _a === void 0 ? void 0 : _a.type) == "capabilities" || ((_b = msg.command) === null || _b === void 0 ? void 0 : _b.type) == "offer") {
+        document.getElementById("toggle-screen").style.opacity = "0.7";
+    }
+    else if (activeCall) {
+        document.getElementById("toggle-screen").style.opacity = "1";
+    }
+    switch ((_c = msg.command) === null || _c === void 0 ? void 0 : _c.type) {
         case "capabilities":
-            document.getElementById("info-block").className = msg.command.media;
-            break;
         case "offer":
         case "start":
-            document.getElementById("toggle-audio").style.display = "inline-block";
-            document.getElementById("toggle-speaker").style.display = "inline-block";
-            if (msg.command.media == CallMediaType.Video) {
-                document.getElementById("toggle-video").style.display = "inline-block";
-                document.getElementById("toggle-screen").style.display = "inline-block";
-            }
             document.getElementById("info-block").className = msg.command.media;
+            document.getElementById("toggle-mic").style.display = "inline-block";
+            document.getElementById("toggle-speaker").style.display = "inline-block";
+            document.getElementById("toggle-camera").style.display = "inline-block";
+            document.getElementById("toggle-screen").style.display = "inline-block";
+            enableSpeakerIcon(true, true);
             break;
         case "description":
             updateCallInfoView(msg.command.state, msg.command.description);
             if ((activeCall === null || activeCall === void 0 ? void 0 : activeCall.connection.connectionState) == "connected") {
                 document.getElementById("progress").style.display = "none";
-                if (document.getElementById("info-block").className == CallMediaType.Audio) {
-                    document.getElementById("audio-call-icon").style.display = "block";
-                }
+                document.getElementById("audio-call-icon").style.display =
+                    document.getElementById("info-block").className == CallMediaType.Audio ? "block" : "none";
             }
             break;
     }
 }
+function reactOnMessageToServer(msg) {
+    var _a;
+    if (!activeCall)
+        return;
+    switch ((_a = msg.resp) === null || _a === void 0 ? void 0 : _a.type) {
+        case "peerMedia":
+            const className = localMedia(activeCall) == CallMediaType.Video || peerMedia(activeCall) == CallMediaType.Video ? "video" : "audio";
+            document.getElementById("info-block").className = className;
+            document.getElementById("audio-call-icon").style.display = className == CallMediaType.Audio ? "block" : "none";
+            enableSpeakerIcon(activeCall.remoteStream.getAudioTracks().every((elem) => elem.enabled), !activeCall.peerMediaSources.mic);
+            break;
+    }
+}
 function updateCallInfoView(state, description) {
     document.getElementById("state").innerText = state;
     document.getElementById("description").innerText = description;