Align incoming and outgoing call controls (#1022)

GetStream · Mar 5, 2024 · ae370bc · ae370bc
1 parent 07b0c9d
commit ae370bc
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 23 deletions.
diff --git a/stream-video-android-ui-compose/api/stream-video-android-ui-compose.api b/stream-video-android-ui-compose/api/stream-video-android-ui-compose.api
@@ -1442,7 +1442,7 @@ public final class io/getstream/video/android/compose/ui/components/call/control
 }
 
 public final class io/getstream/video/android/compose/ui/components/call/controls/actions/ToggleMicrophoneActionKt {
-	public static final fun ToggleMicrophoneAction-uMBdHk4 (Landroidx/compose/ui/Modifier;ZZLandroidx/compose/ui/graphics/Shape;Landroidx/compose/ui/graphics/Color;Landroidx/compose/ui/graphics/Color;Landroidx/compose/ui/graphics/Color;Landroidx/compose/ui/graphics/Color;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
+	public static final fun ToggleMicrophoneAction-m_EyDiA (Landroidx/compose/ui/Modifier;ZZLandroidx/compose/ui/graphics/Shape;Landroidx/compose/ui/graphics/Color;Landroidx/compose/ui/graphics/Color;Landroidx/compose/ui/graphics/Color;Landroidx/compose/ui/graphics/Color;Lio/getstream/video/android/compose/ui/components/base/styling/StreamFixedSizeButtonStyle;Lio/getstream/video/android/compose/ui/components/base/styling/StreamFixedSizeButtonStyle;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;III)V
 	public static final fun ToggleMicrophoneActionPreview (Landroidx/compose/runtime/Composer;I)V
 }
 
@@ -1916,7 +1916,7 @@ public final class io/getstream/video/android/compose/ui/components/call/ringing
 }
 
 public final class io/getstream/video/android/compose/ui/components/call/ringing/outgoingcall/OutgoingCallControlsKt {
-	public static final fun OutgoingCallControls (ZZLandroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
+	public static final fun OutgoingCallControls (Landroidx/compose/ui/Modifier;ZZZLkotlin/jvm/functions/Function1;Landroidx/compose/runtime/Composer;II)V
 }
 
 public final class io/getstream/video/android/compose/ui/components/call/ringing/outgoingcall/OutgoingCallDetailsKt {

diff --git a/...tream/video/android/compose/ui/components/call/controls/actions/ToggleMicrophoneAction.kt b/...tream/video/android/compose/ui/components/call/controls/actions/ToggleMicrophoneAction.kt
@@ -27,6 +27,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import io.getstream.video.android.compose.theme.base.VideoTheme
+import io.getstream.video.android.compose.ui.components.base.styling.StreamFixedSizeButtonStyle
 import io.getstream.video.android.core.call.state.CallAction
 import io.getstream.video.android.core.call.state.ToggleMicrophone
 
@@ -48,6 +49,8 @@ public fun ToggleMicrophoneAction(
     disabledColor: Color? = null,
     enabledIconTint: Color? = null,
     disabledIconTint: Color? = null,
+    onStyle: StreamFixedSizeButtonStyle? = null,
+    offStyle: StreamFixedSizeButtonStyle? = null,
     onCallAction: (ToggleMicrophone) -> Unit,
 ): Unit = ToggleAction(
     modifier = modifier,
@@ -58,6 +61,8 @@ public fun ToggleMicrophoneAction(
     enabledIconTint = enabledIconTint,
     disabledIconTint = disabledIconTint,
     isActionActive = isMicrophoneEnabled,
+    onStyle = onStyle,
+    offStyle = offStyle,
     iconOnOff = Pair(Icons.Default.Mic, Icons.Default.MicOff),
 ) {
     onCallAction(ToggleMicrophone(isMicrophoneEnabled.not()))

diff --git a/...ream/video/android/compose/ui/components/call/ringing/incomingcall/IncomingCallContent.kt b/...ream/video/android/compose/ui/components/call/ringing/incomingcall/IncomingCallContent.kt
@@ -126,9 +126,7 @@ public fun IncomingCallContent(
     onBackPressed: () -> Unit = {},
     onCallAction: (CallAction) -> Unit = {},
 ) {
-    CallBackground(
-        modifier = modifier.padding(VideoTheme.dimens.spacingXl),
-    ) {
+    CallBackground {
         Column {
             if (isShowingHeader) {
                 headerContent?.invoke(this)

diff --git a/...eam/video/android/compose/ui/components/call/ringing/incomingcall/IncomingCallControls.kt b/...eam/video/android/compose/ui/components/call/ringing/incomingcall/IncomingCallControls.kt
@@ -78,7 +78,7 @@ private fun IncomingCallOptionsPreview() {
     VideoTheme {
         Column {
             IncomingCallControls(
-                isVideoCall = true,
+                isVideoCall = false,
                 isCameraEnabled = true,
                 onCallAction = { },
             )

diff --git a/...eam/video/android/compose/ui/components/call/ringing/outgoingcall/OutgoingCallControls.kt b/...eam/video/android/compose/ui/components/call/ringing/outgoingcall/OutgoingCallControls.kt
@@ -19,14 +19,11 @@ package io.getstream.video.android.compose.ui.components.call.ringing.outgoingca
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import io.getstream.video.android.compose.theme.base.VideoTheme
 import io.getstream.video.android.compose.ui.components.call.controls.actions.CancelCallAction
 import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleCameraAction
@@ -43,25 +40,25 @@ import io.getstream.video.android.core.call.state.CallAction
  */
 @Composable
 public fun OutgoingCallControls(
+    modifier: Modifier = Modifier,
+    isVideoCall: Boolean = true,
     isCameraEnabled: Boolean,
     isMicrophoneEnabled: Boolean,
-    modifier: Modifier = Modifier,
     onCallAction: (CallAction) -> Unit,
 ) {
-    Column(
+    Row(
         modifier = modifier.fillMaxWidth(),
-        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceEvenly,
     ) {
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceEvenly,
-        ) {
-            ToggleMicrophoneAction(
-                isMicrophoneEnabled = isMicrophoneEnabled,
-                onCallAction = onCallAction,
-            )
+        ToggleMicrophoneAction(
+            isMicrophoneEnabled = isMicrophoneEnabled,
+            onCallAction = onCallAction,
+            offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle(),
+            onStyle = VideoTheme.styles.buttonStyles.tetriaryIconButtonStyle(),
+        )
 
+        if (isVideoCall) {
             ToggleCameraAction(
                 offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle(),
                 onStyle = VideoTheme.styles.buttonStyles.tetriaryIconButtonStyle(),
@@ -70,8 +67,6 @@ public fun OutgoingCallControls(
             )
         }
 
-        Spacer(modifier = Modifier.height(32.dp))
-
         CancelCallAction(
             onCallAction = onCallAction,
         )
@@ -94,6 +89,13 @@ private fun OutgoingCallOptionsPreview() {
                 isCameraEnabled = false,
                 onCallAction = { },
             )
+
+            OutgoingCallControls(
+                isVideoCall = false,
+                isMicrophoneEnabled = false,
+                isCameraEnabled = false,
+                onCallAction = { },
+            )
         }
     }
 }