Skip to content

Redesign the base components and adopt the design system icons #1805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andremion wants to merge 3 commits into
base: andrerego/and-1419-introduce-streamdesign-in-the-compose-video-sdk
Choose a base branch
from
Open

Redesign the base components and adopt the design system icons #1805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a098b6f
Redesign the base components and adopt the design system icons
andremion Sep 3, 2026
daba33e
Keep the text field as the root node and the dialog above the keyboard
andremion Sep 3, 2026
de78bcc
Cover the untested action and avatar branches in the snapshot suite
andremion Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
30 changes: 4 additions & 26 deletions demo-app/src/main/kotlin/io/getstream/video/android/DemoAudioCallContent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,14 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.base.styling.StreamFixedSizeButtonStyle
import io.getstream.video.android.compose.ui.components.base.StreamButtonSize
import io.getstream.video.android.compose.ui.components.call.activecall.AudioOnlyCallContent
import io.getstream.video.android.compose.ui.components.call.controls.actions.LeaveCallAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleMicrophoneAction
Expand Down Expand Up @@ -81,43 +79,23 @@ fun AudioOnlyCallControls(
"Stream_MicrophoneToggle_Enabled_$isMicrophoneEnabled",
),
isMicrophoneEnabled = isMicrophoneEnabled,
size = StreamButtonSize.Large,
onCallAction = onCallAction,
offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle().fillCircle(
1.5f,
),
onStyle = VideoTheme.styles.buttonStyles.tertiaryIconButtonStyle().fillCircle(
1.5f,
),
)

ToggleSpeakerphoneAction(
modifier = Modifier.testTag(
"Stream_SpeakerToggle_Enabled_$isSpeakerEnabled",
),
isSpeakerphoneEnabled = isSpeakerEnabled,
offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle().fillCircle(
1.5f,
),
onStyle = VideoTheme.styles.buttonStyles.tertiaryIconButtonStyle().fillCircle(
1.5f,
),
size = StreamButtonSize.Large,
onCallAction = onCallAction,
)

LeaveCallAction(
modifier = Modifier.testTag("Stream_HangUpButton"),
onCallAction = onCallAction,
style = VideoTheme.styles.buttonStyles.primaryIconButtonStyle().fillCircle(
1.5f,
),
size = StreamButtonSize.Large,
)
}
}

internal fun StreamFixedSizeButtonStyle.fillCircle(fraction: Float): StreamFixedSizeButtonStyle {
return this.copyFixed(
width * fraction,
height * fraction,
shape = CircleShape,
)
}
27 changes: 5 additions & 22 deletions demo-app/src/main/kotlin/io/getstream/video/android/DemoOutgoingCallContent.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.base.StreamButtonSize
import io.getstream.video.android.compose.ui.components.call.controls.actions.CancelCallAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleCameraAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleMicrophoneAction
Expand Down Expand Up @@ -97,50 +97,33 @@ private fun OutgoingCallControls(
modifier = Modifier
.testTag("Stream_MicrophoneToggle_Enabled_$isMicrophoneEnabled"),
isMicrophoneEnabled = isMicrophoneEnabled,
size = StreamButtonSize.Large,
onCallAction = onCallAction,
offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle().fillCircle(
1.5f,
),
onStyle = VideoTheme.styles.buttonStyles.tertiaryIconButtonStyle().fillCircle(
1.5f,
),
)

ToggleSpeakerphoneAction(
modifier = Modifier.testTag(
"Stream_SpeakerToggle_Enabled_$isSpeakerEnabled",
),
isSpeakerphoneEnabled = isSpeakerEnabled,
offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle().fillCircle(
1.5f,
),
onStyle = VideoTheme.styles.buttonStyles.tertiaryIconButtonStyle().fillCircle(
1.5f,
),
size = StreamButtonSize.Large,
onCallAction = onCallAction,
)

if (isVideoCall) {
ToggleCameraAction(
modifier = Modifier
.testTag("Stream_CameraToggle_Enabled_$isCameraEnabled"),
offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle().fillCircle(
1.5f,
),
onStyle = VideoTheme.styles.buttonStyles.tertiaryIconButtonStyle().fillCircle(
1.5f,
),
isCameraEnabled = isCameraEnabled,
size = StreamButtonSize.Large,
onCallAction = onCallAction,
)
}

CancelCallAction(
modifier = Modifier.testTag("Stream_DeclineCallButton"),
onCallAction = onCallAction,
style = VideoTheme.styles.buttonStyles.primaryIconButtonStyle().fillCircle(
1.5f,
),
size = StreamButtonSize.Large,
)
}
}
7 changes: 4 additions & 3 deletions demo-app/src/main/kotlin/io/getstream/video/android/tooling/ui/ExceptionTraceScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.getstream.video.android.R
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.base.StreamButton
import io.getstream.video.android.compose.ui.components.base.StreamButtonStyleDefaults
import io.getstream.video.android.compose.ui.components.base.StreamTextButton
import io.getstream.video.android.tooling.extensions.toast

@Composable
Expand All @@ -62,8 +63,8 @@ internal fun ExceptionTraceScreen(packageName: String, message: String) {
.padding(16.dp),
) {
val context: Context = LocalContext.current
StreamButton(
style = VideoTheme.styles.buttonStyles.secondaryButtonStyle(),
StreamTextButton(
style = StreamButtonStyleDefaults.primarySolid,
text = stringResource(id = R.string.stream_video_tooling_restart_app),
onClick = {
val mainActivity = Class.forName(packageName)
Expand Down
7 changes: 4 additions & 3 deletions demo-app/src/main/kotlin/io/getstream/video/android/ui/Dialog.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Dialog
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.base.StreamButton
import io.getstream.video.android.compose.ui.components.base.StreamButtonStyleDefaults
import io.getstream.video.android.compose.ui.components.base.StreamTextButton

@Composable
fun SingleButtonDialog(
Expand Down Expand Up @@ -71,8 +72,8 @@ fun SingleButtonDialog(
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(24.dp))
StreamButton(
style = VideoTheme.styles.buttonStyles.secondaryButtonStyle(),
StreamTextButton(
style = StreamButtonStyleDefaults.primarySolid,
text = buttonText,
onClick = onButtonClick,
)
Expand Down
136 changes: 73 additions & 63 deletions demo-app/src/main/kotlin/io/getstream/video/android/ui/call/CallScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,21 +61,19 @@ import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
Expand All @@ -91,8 +89,11 @@ import io.getstream.video.android.R
import io.getstream.video.android.compose.pip.rememberIsInPipMode
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.base.StreamBadgeBox
import io.getstream.video.android.compose.ui.components.base.StreamDialogPositiveNegative
import io.getstream.video.android.compose.ui.components.base.StreamIconToggleButton
import io.getstream.video.android.compose.ui.components.base.StreamButtonSize
import io.getstream.video.android.compose.ui.components.base.StreamButtonStyleDefaults
import io.getstream.video.android.compose.ui.components.base.StreamDialog
import io.getstream.video.android.compose.ui.components.base.StreamIconButton
import io.getstream.video.android.compose.ui.components.base.StreamTextButton
import io.getstream.video.android.compose.ui.components.call.CallAppBar
import io.getstream.video.android.compose.ui.components.call.activecall.CallContent
import io.getstream.video.android.compose.ui.components.call.controls.actions.ChatDialogAction
Expand Down Expand Up @@ -337,13 +338,11 @@ fun CallScreen(
modifier = Modifier.padding(horizontal = 8.dp),
call = call,
leadingContent = {
val iconOnOff = ImageVector.vectorResource(
R.drawable.ic_layout_grid,
)
val iconOnOff = painterResource(R.drawable.ic_layout_grid)
Row {
ToggleAction(
modifier = Modifier.testTag("Stream_CallViewButton"),
offStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle(),
offStyle = StreamButtonStyleDefaults.primarySolid,
isActionActive = !isShowingLayoutChooseMenu,
iconOnOff = Pair(iconOnOff, iconOnOff),
) {
Expand Down Expand Up @@ -458,7 +457,9 @@ fun CallScreen(
StreamBadgeBox(
text = participantsSize.size.toString(),
) {
GenericAction(icon = Icons.Default.People) {
GenericAction(
icon = rememberVectorPainter(Icons.Default.People),
) {
showParticipants = !showParticipants
}
}
Expand Down Expand Up @@ -534,25 +535,19 @@ fun CallScreen(
},
)
if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
StreamIconToggleButton(
StreamIconButton(
onClick = { showingLandscapeControls = !showingLandscapeControls },
icon = rememberVectorPainter(Icons.Default.MoreVert),
contentDescription = null,
modifier = Modifier
.align(Alignment.TopEnd)
.padding(16.dp),
toggleState = rememberUpdatedState(
newValue = ToggleableState(
showingLandscapeControls,
),
),
onIcon = Icons.Default.MoreVert,
onStyle = VideoTheme.styles.buttonStyles.secondaryIconButtonStyle(),
offStyle = VideoTheme.styles.buttonStyles.tertiaryIconButtonStyle(),
) {
showingLandscapeControls = when (it) {
ToggleableState.On -> false
ToggleableState.Off -> true
ToggleableState.Indeterminate -> false
}
}
style = if (showingLandscapeControls) {
StreamButtonStyleDefaults.primarySolid
} else {
StreamButtonStyleDefaults.secondaryGhost
},
)
}
}
},
Expand Down Expand Up @@ -764,46 +759,61 @@ fun CallScreen(
}
// TODO: AAP, move recording and actions in separate composables.
if (isRecording && !showRecordingWarning) {
StreamDialogPositiveNegative(
StreamDialog(
onDismissRequest = {},
title = "This call is being recorded",
contentText = "By staying in the call you鈥檙e consenting to being recorded.",
positiveButton = Triple(
"Continue",
VideoTheme.styles.buttonStyles.secondaryButtonStyle(),
) {
showRecordingWarning = true
acceptedCallRecording = true
},
negativeButton = Triple(
"Leave",
VideoTheme.styles.buttonStyles.tertiaryButtonStyle(),
) {
showRecordingWarning = false
acceptedCallRecording = false
call.leave()
},
)
message = "By staying in the call you鈥檙e consenting to being recorded.",
dismissOnBackPress = false,
dismissOnClickOutside = false,
) {
StreamTextButton(
modifier = Modifier.fillMaxWidth(),
onClick = {
showRecordingWarning = true
acceptedCallRecording = true
},
text = "Continue",
size = StreamButtonSize.Large,
)
StreamTextButton(
modifier = Modifier.fillMaxWidth(),
onClick = {
showRecordingWarning = false
acceptedCallRecording = false
call.leave()
},
text = "Leave",
style = StreamButtonStyleDefaults.secondaryOutline,
size = StreamButtonSize.Large,
)
}
}
if (showEndRecordingDialog) {
StreamDialogPositiveNegative(
StreamDialog(
onDismissRequest = { showEndRecordingDialog = false },
title = "End recording",
contentText = "Are you sure you want to end the recording?",
positiveButton = Triple(
"End",
VideoTheme.styles.buttonStyles.alertButtonStyle(),
) {
scope.launch {
call.stopRecording()
}
showEndRecordingDialog = false
},
negativeButton = Triple(
"Cancel",
VideoTheme.styles.buttonStyles.tertiaryButtonStyle(),
) {
showEndRecordingDialog = false
},
)
message = "Are you sure you want to end the recording?",
) {
StreamTextButton(
modifier = Modifier.fillMaxWidth(),
onClick = {
scope.launch {
call.stopRecording()
}
showEndRecordingDialog = false
},
text = "End",
style = StreamButtonStyleDefaults.destructiveSolid,
size = StreamButtonSize.Large,
)
StreamTextButton(
modifier = Modifier.fillMaxWidth(),
onClick = { showEndRecordingDialog = false },
text = "Cancel",
style = StreamButtonStyleDefaults.secondaryOutline,
size = StreamButtonSize.Large,
)
}
}
}
}
Expand Down
4 changes: 1 addition & 3 deletions demo-app/src/main/kotlin/io/getstream/video/android/ui/call/DemoComponentFactory.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ package io.getstream.video.android.ui.call

import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.GroupRemove
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
Expand Down Expand Up @@ -66,7 +64,7 @@ object DemoComponentFactory : VideoComponentFactory {
.testTag("Stream_ParticipantActionsIcon"),
actions = params.actions + listOf(
ParticipantAction(
icon = Icons.Filled.GroupRemove,
icon = io.getstream.video.android.compose.R.drawable.stream_design_ic_user_remove_fill,
label = "Kick",
condition = { call, participantState ->
call.hasCapability(OwnCapability.KickUser) && !participantState.isLocal
Expand Down
Loading
Loading