Feat - Navigation added to Channel Screen

app/src/main/java/io/codecrow/mage/ui/MainActivity.kt

@@ -71,3 +71,8 @@ class MainActivity : ComponentActivity() {
     }
 }
 
+//
+//composable("channel/{channelId}") { backStackEntry ->
+//    val channelId = backStackEntry.arguments?.getString("channelId")
+//    ChannelScreen(channelId)
+//}

app/src/main/java/io/codecrow/mage/ui/Navigation.kt

@@ -24,6 +24,7 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import io.codecrow.mage.ui.browse.BrowseScreen
+import io.codecrow.mage.ui.channel.ChannelScreen
 
 @Composable
 fun MainNavigation() {

app/src/main/java/io/codecrow/mage/ui/channel/ChannelDetail.kt

@@ -0,0 +1,109 @@
+package io.codecrow.mage.ui.channel
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.codecrow.mage.model.Channel
+import io.codecrow.mage.ui.components.ChannelViewersItem
+
+@Composable
+fun ChannelDetail(channel: Channel, onClick: () -> Unit) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(400.dp) //TODO: set min height
+            .padding(10.dp)
+            .clip(RoundedCornerShape(4.dp))
+//            .clickable { onClick(it) }
+    ) {
+        Card(
+            elevation = CardDefaults.cardElevation(),
+            shape = RoundedCornerShape(8.dp),
+            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
+        ) {
+            Box {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .fillMaxHeight()
+                ) {
+                    //TODO: add video thumbnail here
+                }
+                Column(
+                    modifier = Modifier.padding(
+                        start = 10.dp,
+                        end = 10.dp,
+                        bottom = 10.dp
+                    )
+                ) {
+                    Row(
+                        modifier = Modifier
+                            .weight(1F)
+                            .fillMaxWidth(),
+                        verticalAlignment = Alignment.Top,
+                        horizontalArrangement = Arrangement.Start
+                    ) {
+                        ChannelViewersItem()
+                    }
+                    Row(
+                        modifier = Modifier
+                            .weight(1F)
+                            .fillMaxWidth(),
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.Center
+                    ) {}
+                    Row(
+                        modifier = Modifier
+                            .weight(1F)
+                            .fillMaxWidth(),
+                        verticalAlignment = Alignment.Top,
+                        horizontalArrangement = Arrangement.Start
+                    ) {
+                        repeat(5) {
+                            Column(
+                                Modifier
+                                    .fillMaxWidth()
+                                    .padding(
+                                        top = 25.dp,
+                                        bottom = 25.dp
+                                    )
+                            ) {
+                                Text(
+                                    text = "@" + channel.createdByUsername,
+                                    color = MaterialTheme.colorScheme.onPrimary,
+                                    style = TextStyle(
+                                        //  fontFamily = FontFamily("Montserrat"),
+                                        fontSize = 17.sp,
+                                        fontWeight = FontWeight.W500,
+                                        lineHeight = 22.sp,
+                                        letterSpacing = 0.sp,
+                                        textAlign = TextAlign.Left
+                                    )
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/io/codecrow/mage/ui/channel/ChannelScreen.kt

@@ -0,0 +1,143 @@
+package io.codecrow.mage.ui.channel
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.gestures.snapping.SnapLayoutInfoProvider
+import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.repeatOnLifecycle
+import androidx.navigation.NavController
+import io.codecrow.mage.model.Channel
+import io.codecrow.mage.ui.browse.ChannelItem
+import io.codecrow.mage.ui.browse.LoadingView
+import io.codecrow.mage.ui.theme.MyApplicationTheme
+
+@Composable
+fun ChannelScreen(modifier: Modifier = Modifier, navController: NavController, viewModel: ChannelViewModel = hiltViewModel()) {
+    val lifecycle = LocalLifecycleOwner.current.lifecycle
+    val context = LocalContext.current
+    val items by produceState<ChannelUiState>(
+        initialValue = ChannelUiState.Loading,
+        key1 = lifecycle,
+        key2 = viewModel
+    ) {
+        lifecycle.repeatOnLifecycle(state = Lifecycle.State.STARTED) {
+            viewModel.uiState.collect {
+                value = it
+            }
+
+        }
+    }
+    if (items is ChannelUiState.Success) {
+        ChannelScreen(
+            items = (items as ChannelUiState.Success).data,
+            modifier = modifier,
+            onClick = {
+                navController.navigate("channel/$it")
+            }
+        )
+    } else if (items is ChannelUiState.Loading) {
+        LoadingView()
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+internal fun ChannelScreen(
+    items: List<Channel>,
+    modifier: Modifier = Modifier,
+    onClick: (String) -> Unit = {}
+) {
+    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
+    val state = rememberLazyListState()
+    val snappingLayout = remember(state) { SnapLayoutInfoProvider(state, positionInLayout = {_,_ -> 0f}) }
+    val flingBehavior = rememberSnapFlingBehavior(snappingLayout)
+
+    Scaffold(
+
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        content = {
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(it),
+                state = state,
+                flingBehavior = flingBehavior,
+
+                ) {
+                items(items) { it: Channel ->
+                    ChannelItem(it) {
+                        onClick(it._id)
+                    }
+                }
+            }
+        })
+}
+
+// Previews
+
+@Preview(showBackground = true)
+@Composable
+private fun PortraitPreview() {
+    var channels =
+        listOf(
+            Channel(
+                "",
+                "VideoTitle",
+                "des",
+                "",
+                listOf(""),
+                listOf(""),
+                "",
+                "User",
+                "DisplayName",
+                "",
+                "channel"
+            )
+        )
+    MyApplicationTheme {
+        ChannelScreen(channels)
+    }
+}
+
+@Preview(showBackground = true, widthDp = 480)
+@Composable
+private fun LandscapePreview() {
+    var channels =
+        listOf(
+            Channel(
+                "",
+                "VideoTitle",
+                "des",
+                "",
+                listOf(""),
+                listOf(""),
+                "",
+                "User",
+                "DisplayName",
+                "",
+                "channel"
+            )
+        )
+    MyApplicationTheme {
+        ChannelScreen(channels)
+    }
+}

app/src/main/java/io/codecrow/mage/ui/channel/ChannelViewModel.kt

@@ -0,0 +1,44 @@
+package io.codecrow.mage.ui.channel
+
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import dagger.hilt.android.lifecycle.HiltViewModel
+import io.codecrow.mage.data.datasource.ChannelRemote
+import io.codecrow.mage.model.Channel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class ChannelViewModel @Inject constructor(
+    private val channelRemote: ChannelRemote
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow<ChannelUiState>(ChannelUiState.Loading)
+    val uiState: StateFlow<ChannelUiState> = _uiState
+
+
+    init {
+        getChannels("", 0, 100)
+    }
+
+    private fun getChannels(searchQuery: String, skip: Int, limit: Int) {
+        viewModelScope.launch {
+            channelRemote.getChannels(searchQuery, skip, limit).either({
+                _uiState.value = ChannelUiState.Error(it)
+            }, {
+                Log.d("HERE", it.toString())
+                _uiState.value = ChannelUiState.Success(it)
+            })
+        }
+
+    }
+}
+
+sealed interface ChannelUiState {
+    object Loading : ChannelUiState
+    data class Error(val throwable: Throwable) : ChannelUiState
+    data class Success(val data: List<Channel>) : ChannelUiState
+}