Merge pull request #1226 from joreilly/speakers_compose

compose for desktop speakers UI
joreilly · Mar 30, 2024 · 03bee39 · 03bee39
2 parents d1d7ab0 + f5b26e1
commit 03bee39
Show file tree

Hide file tree

Showing 10 changed files with 365 additions and 78 deletions.
diff --git a/androidApp/src/main/java/dev/johnoreilly/confetti/settings/SettingsRoute.kt b/androidApp/src/main/java/dev/johnoreilly/confetti/settings/SettingsRoute.kt
@@ -21,6 +21,7 @@ import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.RadioButton
 import androidx.compose.material3.Scaffold
@@ -161,7 +162,7 @@ fun SettingsScreen(
                 }
             }
 
-            Divider()
+            HorizontalDivider()
 
             var developerModeCount by remember { mutableStateOf(0) }
             Box(modifier = Modifier.run {

diff --git a/androidApp/src/main/java/dev/johnoreilly/confetti/speakerdetails/SpeakerDetailsView.kt b/androidApp/src/main/java/dev/johnoreilly/confetti/speakerdetails/SpeakerDetailsView.kt
@@ -65,7 +65,6 @@ internal fun SpeakerDetailsRoute(
             component::onCloseClicked,
         )
     }
-
 }
 
 @Composable

diff --git a/androidApp/src/main/java/dev/johnoreilly/confetti/speakers/SpeakerView.kt b/androidApp/src/main/java/dev/johnoreilly/confetti/speakers/SpeakerView.kt
@@ -1,32 +1,21 @@
 package dev.johnoreilly.confetti.speakers
 
+import SpeakerGridView
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.only
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.grid.GridCells
-import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ListItem
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.runtime.Composable
@@ -39,9 +28,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import coil.compose.SubcomposeAsyncImage
 import com.arkivanov.decompose.extensions.compose.jetpack.subscribeAsState
 import dev.johnoreilly.confetti.R
@@ -52,7 +39,6 @@ import dev.johnoreilly.confetti.ui.ErrorView
 import dev.johnoreilly.confetti.ui.HomeScaffold
 import dev.johnoreilly.confetti.ui.LoadingView
 import dev.johnoreilly.confetti.ui.isExpanded
-import dev.johnoreilly.confetti.utils.plus
 
 @Composable
 fun SpeakersRoute(
@@ -67,12 +53,12 @@ fun SpeakersRoute(
         windowSizeClass = windowSizeClass,
         topBarActions = topBarActions,
     ) {
-        when (val uiState1 = uiState) {
+        when (val state = uiState) {
             is SpeakersUiState.Success -> {
                 if (windowSizeClass.isExpanded) {
-                    SpeakerGridView(uiState1.speakers, component::onSpeakerClicked)
+                    SpeakerGridView(state.speakers, component::onSpeakerClicked)
                 } else {
-                    SpeakerListView(uiState1.speakers, component::onSpeakerClicked)
+                    SpeakerListView(state.speakers, component::onSpeakerClicked)
                 }
             }
             is SpeakersUiState.Loading -> LoadingView()
@@ -82,59 +68,6 @@ fun SpeakersRoute(
 }
 
 
-@Composable
-fun SpeakerGridView(
-    speakers: List<SpeakerDetails>,
-    navigateToSpeaker: (id: String) -> Unit
-) {
-    LazyVerticalGrid(
-        columns = GridCells.Adaptive(200.dp),
-        contentPadding = PaddingValues(16.dp).plus(
-            WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom).asPaddingValues()
-        ),
-        content = {
-            items(speakers) { speaker ->
-                Column(
-                    modifier = Modifier
-                        .clickable { navigateToSpeaker(speaker.id) }
-                        .padding(12.dp),
-                    horizontalAlignment = Alignment.CenterHorizontally
-                ) {
-                    SubcomposeAsyncImage(
-                        model = speaker.photoUrl,
-                        contentDescription = speaker.name,
-                        loading = {
-                            CircularProgressIndicator()
-                        },
-                        error = {
-                            Image(
-                                painter = painterResource(dev.johnoreilly.confetti.shared.R.drawable.ic_person_black_24dp),
-                                contentDescription = speaker.name,
-                                contentScale = ContentScale.Fit,
-                                modifier = Modifier
-                                    .size(150.dp)
-                                    .clip(RoundedCornerShape(16.dp)),
-                                colorFilter = ColorFilter.tint(color = if (isSystemInDarkTheme()) Color.White else Color.Black)
-                            )
-                        },
-                        contentScale = ContentScale.Fit,
-                        modifier = Modifier
-                            .size(150.dp)
-                            .clip(RoundedCornerShape(16.dp)),
-                    )
-
-                    Text(
-                        text = speaker.name,
-                        fontSize = 12.sp,
-                        color = MaterialTheme.colorScheme.onSecondaryContainer,
-                        textAlign = TextAlign.Center,
-                        modifier = Modifier.padding(16.dp)
-                    )
-                }
-            }
-        }
-    )
-}
 
 @Composable
 fun SpeakerListView(

diff --git a/...y/confetti/ui/component/ConfettiHeader.kt → ...tti/ui/component/ConfettiHeaderAndroid.kt b/...y/confetti/ui/component/ConfettiHeader.kt → ...tti/ui/component/ConfettiHeaderAndroid.kt
diff --git a/compose-desktop/src/main/kotlin/HomeUI.kt b/compose-desktop/src/main/kotlin/HomeUI.kt
@@ -30,7 +30,7 @@ fun ConferenceView(component: ConferenceComponent) {
             when (val child = it.instance) {
                 is ConferenceComponent.Child.Home -> HomeView(child.component)
                 is ConferenceComponent.Child.SessionDetails -> SessionDetailsUI(child.component)
-                is ConferenceComponent.Child.SpeakerDetails -> {} //SpeakerDetailsRoute(child.component)
+                is ConferenceComponent.Child.SpeakerDetails -> SpeakerDetailsUI(child.component)
                 is ConferenceComponent.Child.Settings -> {} //SettingsRoute(child.component)
             }
         }
@@ -91,9 +91,7 @@ fun HomeView(component: HomeComponent) {
                     )
                 }
                 is HomeComponent.Child.MultiPane -> Text(text = "Multi-pane mode is not yet supported")
-                is HomeComponent.Child.Speakers -> {
-
-                }
+                is HomeComponent.Child.Speakers -> SpeakersUI(child.component)
                 is HomeComponent.Child.Bookmarks -> {}
                 is HomeComponent.Child.Venue -> {}
                 is HomeComponent.Child.Search -> {}

diff --git a/compose-desktop/src/main/kotlin/SpeakersUI.kt b/compose-desktop/src/main/kotlin/SpeakersUI.kt
@@ -0,0 +1,50 @@
+import androidx.compose.material.Scaffold
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import com.arkivanov.decompose.extensions.compose.jetbrains.subscribeAsState
+import dev.johnoreilly.confetti.decompose.SpeakerDetailsComponent
+import dev.johnoreilly.confetti.decompose.SpeakerDetailsUiState
+import dev.johnoreilly.confetti.decompose.SpeakersComponent
+import dev.johnoreilly.confetti.decompose.SpeakersUiState
+import dev.johnoreilly.confetti.ui.ErrorView
+import dev.johnoreilly.confetti.ui.LoadingView
+import dev.johnoreilly.confetti.ui.SpeakerDetailsView
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SpeakersUI(component: SpeakersComponent) {
+    val uiState by component.uiState.subscribeAsState()
+
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(title = { Text("Speakers")})
+        }
+    ) {
+        when (val state = uiState) {
+            is SpeakersUiState.Success -> {
+                SpeakerGridView(state.speakers, component::onSpeakerClicked)
+            }
+            is SpeakersUiState.Loading -> LoadingView()
+            is SpeakersUiState.Error -> ErrorView {}
+        }
+    }
+}
+
+@Composable
+fun SpeakerDetailsUI(component: SpeakerDetailsComponent) {
+    val uiState by component.uiState.subscribeAsState()
+
+    when (val state = uiState) {
+        is SpeakerDetailsUiState.Loading -> LoadingView()
+        is SpeakerDetailsUiState.Error -> ErrorView()
+        is SpeakerDetailsUiState.Success -> SpeakerDetailsView(
+            state.details,
+            component::onSessionClicked,
+            component::onCloseClicked,
+        )
+    }
+
+}
diff --git a/shared/src/commonMain/kotlin/dev/johnoreilly/confetti/ui/SessionListGridView.kt b/shared/src/commonMain/kotlin/dev/johnoreilly/confetti/ui/SessionListGridView.kt
@@ -72,7 +72,7 @@ fun SessionListGridView(
 ) {
     println(uiState)
     when (uiState) {
-        SessionsUiState.Error -> {} //ErrorView(onRefresh)
+        SessionsUiState.Error -> ErrorView(onRefresh)
         SessionsUiState.Loading -> LoadingView()
 
         is SessionsUiState.Success -> {
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,7 +65,6 @@ internal fun SpeakerDetailsRoute( @@
                 component::onCloseClicked,
             )
         }
     }
     @Composable
@@ Expand Down @@