Skip to content

Commit

Permalink
Wire layout chooser with the UI and call action to choose layout, upd…
Browse files Browse the repository at this point in the history 
…ate the layout on choice
  • Loading branch information
@aleksandar-apostolov
aleksandar-apostolov committed Oct 27, 2023
1 parent 93c8bb1 commit 94f997a
Show file tree
Hide file tree
Showing 7 changed files with 397 additions and 3 deletions.
26 changes: 26 additions & 0 deletions dogfooding/src/main/kotlin/io/getstream/video/android/ui/call/CallScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,15 @@ import io.getstream.video.android.compose.ui.components.call.activecall.CallCont
import io.getstream.video.android.compose.ui.components.call.controls.ControlActions
import io.getstream.video.android.compose.ui.components.call.controls.actions.CancelCallAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ChatDialogAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.DefaultOnCallActionHandler
import io.getstream.video.android.compose.ui.components.call.controls.actions.FlipCameraAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.SettingsAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleCameraAction
import io.getstream.video.android.compose.ui.components.call.controls.actions.ToggleMicrophoneAction
import io.getstream.video.android.compose.ui.components.call.renderer.LayoutType
import io.getstream.video.android.core.Call
import io.getstream.video.android.core.RealtimeConnection
import io.getstream.video.android.core.call.state.ChooseLayout
import io.getstream.video.android.mock.StreamMockUtils
import io.getstream.video.android.mock.mockCall
import kotlinx.coroutines.delay
Expand All @@ -77,8 +80,10 @@ fun CallScreen(
val isMicrophoneEnabled by call.microphone.isEnabled.collectAsState()
val speakingWhileMuted by call.state.speakingWhileMuted.collectAsState()
var isShowingSettingMenu by remember { mutableStateOf(false) }
var isShowingLayoutChooseMenu by remember { mutableStateOf(false) }
var isShowingReactionsMenu by remember { mutableStateOf(false) }
var isShowingAvailableDeviceMenu by remember { mutableStateOf(false) }
var layout by remember { mutableStateOf(LayoutType.DYNAMIC) }
var unreadCount by remember { mutableIntStateOf(0) }
val chatState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
Expand Down Expand Up @@ -113,8 +118,18 @@ fun CallScreen(
CallContent(
modifier = Modifier.background(color = VideoTheme.colors.appBackground),
call = call,
layout = layout,
enableInPictureInPicture = true,
enableDiagnostics = BuildConfig.DEBUG,
onCallAction = {
when (it) {
ChooseLayout -> isShowingLayoutChooseMenu = true
else -> DefaultOnCallActionHandler.onCallAction(
call,
it,
)
}
},
onBackPressed = {
if (chatState.currentValue == ModalBottomSheetValue.Expanded) {
scope.launch { chatState.hide() }
Expand Down Expand Up @@ -263,6 +278,17 @@ fun CallScreen(
)
}

if (isShowingLayoutChooseMenu) {
LayoutChooser(
onLayoutChoice = {
layout = it
isShowingLayoutChooseMenu = false
},
current = layout,
onDismiss = { isShowingLayoutChooseMenu = false },
)
}

if (isShowingAvailableDeviceMenu) {
AvailableDeviceMenu(
call = call,
Expand Down
321 changes: 321 additions & 0 deletions dogfooding/src/main/kotlin/io/getstream/video/android/ui/call/LayoutChooser.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,321 @@
/*
* Copyright (c) 2014-2023 Stream.io Inc. All rights reserved.
*
* Licensed under the Stream License;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://github.com/GetStream/stream-video-android/blob/main/LICENSE
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@file:OptIn(ExperimentalLayoutApi::class)

package io.getstream.video.android.ui.call

import android.content.res.Configuration
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.AutoAwesome
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.call.renderer.LayoutType
import io.getstream.video.android.mock.StreamMockUtils

private data class LayoutChooserDataItem(
val which: LayoutType,
val text: String = "",
)

private val layouts = arrayOf(
LayoutChooserDataItem(LayoutType.DYNAMIC, "Dynamic"),
LayoutChooserDataItem(LayoutType.SPOTLIGHT, "Spotlight"),
LayoutChooserDataItem(LayoutType.GRID, "Grid"),
)

/**
* Reactions menu. The reaction menu is a dialog displaying the list of reactions found in
* [DefaultReactionsMenuData].
* @param current
* @param onDismiss on dismiss listener.
*/
@Composable
internal fun LayoutChooser(
current: LayoutType,
onLayoutChoice: (LayoutType) -> Unit,
onDismiss: () -> Unit,
) {
Dialog(onDismiss) {
Row(Modifier.background(VideoTheme.colors.appBackground)) {
layouts.forEach {
LayoutItem(
current = current,
item = it,
onClicked = onLayoutChoice,
)
}
}
}
}

@Composable
private fun LayoutItem(
modifier: Modifier = Modifier,
current: LayoutType,
item: LayoutChooserDataItem,
onClicked: (LayoutType) -> Unit = {},
) {
val border =
if (current == item.which) BorderStroke(2.dp, VideoTheme.colors.primaryAccent) else null
Card(
modifier = modifier
.clickable { onClicked(item.which) }
.padding(12.dp),
backgroundColor = VideoTheme.colors.appBackground,
elevation = 3.dp,
border = border,
) {
Column {
Box(
modifier = Modifier
.size(84.dp, 84.dp)
.padding(2.dp),
) {
when (item.which) {
LayoutType.DYNAMIC -> {
DynamicRepresentation()
}

LayoutType.SPOTLIGHT -> {
SpotlightRepresentation()
}

LayoutType.GRID -> {
GridRepresentation()
}
}
}
Text(
modifier = Modifier
.align(CenterHorizontally)
.padding(12.dp),
textAlign = TextAlign.Center,
text = item.text,
color = VideoTheme.colors.textHighEmphasis,
)
}
}
}

@Composable
private fun DynamicRepresentation() {
Column {
Card(
modifier = Modifier
.weight(2f)
.fillMaxWidth()
.padding(2.dp),
backgroundColor = VideoTheme.colors.participantContainerBackground,
) {
}

Row(modifier = Modifier.weight(1f)) {
Card(
modifier = Modifier
.fillMaxHeight()
.weight(1f)
.padding(2.dp),
backgroundColor = VideoTheme.colors.participantContainerBackground,
) {
}
Card(
backgroundColor = VideoTheme.colors.appBackground,
modifier = Modifier
.fillMaxHeight()
.weight(1f)
.padding(2.dp),
) {
Icon(
modifier = Modifier
.fillMaxSize()
.padding(2.dp),
tint = VideoTheme.colors.participantContainerBackground,
imageVector = Icons.Rounded.AutoAwesome,
contentDescription = "dynamic",
)
}
}
}
}

@Composable
private fun GridRepresentation() {
Column {
repeat(3) {
Row {
repeat(3) {
Card(
modifier = Modifier
.aspectRatio(1f)
.weight(1f)
.padding(2.dp),
backgroundColor = VideoTheme.colors.participantContainerBackground,
) {
}
}
}
}
}
}

@Composable
private fun SpotlightRepresentation() {
Column {
Card(
modifier = Modifier
.weight(2f)
.fillMaxWidth()
.padding(2.dp),
backgroundColor = VideoTheme.colors.participantContainerBackground,
) {
}

Row(modifier = Modifier.weight(1f)) {
repeat(3) {
Card(
modifier = Modifier
.fillMaxHeight()
.weight(1f)
.padding(2.dp),
backgroundColor = VideoTheme.colors.participantContainerBackground,
) {
}
}
}
}
}

@Preview(showBackground = true)
@Composable
private fun LayoutChooserPreview() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutChooser(
current = LayoutType.GRID,
onLayoutChoice = {},
onDismiss = {},
)
}
}

@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun LayoutChooserPreviewDark() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutChooser(
current = LayoutType.GRID,
onLayoutChoice = {},
onDismiss = {},
)
}
}

@Preview(showBackground = true)
@Composable
private fun GridItemPreview() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutItem(
current = LayoutType.GRID,
item = layouts[2],
)
}
}

@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun GridItemPreviewDark() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutItem(
current = LayoutType.GRID,
item = layouts[2],
)
}
}

@Preview(showBackground = true)
@Composable
private fun SpotlightItemPreview() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutItem(
current = LayoutType.GRID,
item = layouts[1],
)
}
}

@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun SpotlightItemPreviewDark() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutItem(
current = LayoutType.GRID,
item = layouts[1],
)
}
}

@Preview(showBackground = true)
@Composable
private fun DynamicItemPreview() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutItem(
current = LayoutType.GRID,
item = layouts[0],
)
}
}

@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun DynamicItemPreviewDark() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
LayoutItem(
current = LayoutType.GRID,
item = layouts[0],
)
}
}
Loading

0 comments on commit 94f997a

Please sign in to comment.