add youtube sample

samples/catalog-app-shared/src/commonMain/kotlin/com/metacto/catalogapp/di/ViewModelsModule.kt

@@ -1,6 +1,7 @@
 package com.metacto.catalogapp.di
 
 // MARK: Add imports
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleViewModel
 import com.metacto.catalogapp.presentation.app.app.AppViewModel
 import com.metacto.catalogapp.presentation.files.FilesSamplesViewModel
 import com.metacto.catalogapp.presentation.imagePicker.ImagePickerSamplesViewModel
@@ -14,6 +15,7 @@ import org.koin.dsl.module
 
 val viewModelsModule = module {
     // MARK: Add view model definitions
+    commonViewModel { YoutubeSampleViewModel() }
     commonViewModel { ImagePreloaderViewModel() }
     commonViewModel { MediaManagerViewModel() }
     commonViewModel { PhoneNumberViewModel() }

samples/catalog-app-shared/src/commonMain/kotlin/com/metacto/catalogapp/presentation/main/components/MainContent.kt

@@ -16,6 +16,7 @@ import com.metacto.catalogapp.presentation.mediaManager.MediaManagerScreen
 import com.metacto.catalogapp.presentation.notifications.NotificationsSamplesScreen
 import com.metacto.catalogapp.presentation.phoneNumber.PhoneNumberScreen
 import com.metacto.catalogapp.presentation.theme.spacings
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleScreen
 import com.metacto.core.ui.components.buttons.PrimaryFilledButton
 import com.metacto.core.ui.components.containers.ScreenColumn
 import com.metacto.core.ui.navigation.NavManager
@@ -83,5 +84,14 @@ internal fun MainContent(
             },
             modifier = Modifier.fillMaxWidth()
         )
+
+        // Youtube samples
+        PrimaryFilledButton(
+            text = "Youtube samples",
+            onClick = {
+                navManage.navigate(YoutubeSampleScreen())
+            },
+            modifier = Modifier.fillMaxWidth()
+        )
     }
 }

samples/catalog-app-shared/src/commonMain/kotlin/com/metacto/catalogapp/presentation/youtube/youtubesample/YoutubeSampleContract.kt

@@ -0,0 +1,18 @@
+package com.metacto.catalogapp.presentation.youtube.youtubesample
+
+import com.metacto.core.ui.base.ViewEvent
+import com.metacto.core.ui.base.ViewSideEffect
+import com.metacto.core.ui.base.ViewState
+
+class YoutubeSampleContract {
+
+    data class State(
+        val isInitialized: Boolean = false
+    ) : ViewState
+
+    sealed class Event : ViewEvent {
+        data object Init : Event()
+    }
+
+    sealed class Effect : ViewSideEffect
+}

samples/catalog-app-shared/src/commonMain/kotlin/com/metacto/catalogapp/presentation/youtube/youtubesample/YoutubeSampleScreen.kt

@@ -0,0 +1,28 @@
+package com.metacto.catalogapp.presentation.youtube.youtubesample
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleContract.Event
+import com.metacto.catalogapp.presentation.youtube.youtubesample.components.YoutubeSampleContent
+import com.metacto.core.ui.base.BaseScreen
+import com.metacto.core.ui.base.SIDE_EFFECTS_KEY
+import com.metacto.core.ui.base.rememberViewModel
+
+internal class YoutubeSampleScreen : BaseScreen<YoutubeSampleViewModel>() {
+    @Composable
+    override fun Content() {
+        // Get the view model
+        val viewModel = rememberViewModel<YoutubeSampleViewModel>()
+
+        // Init view model
+        LaunchedEffect(SIDE_EFFECTS_KEY) {
+            viewModel.setEvent(Event.Init)
+        }
+
+        // Render content
+        YoutubeSampleContent(
+            state = viewModel.viewState.value,
+            onEvent = viewModel::setEvent
+        )
+    }
+}

samples/catalog-app-shared/src/commonMain/kotlin/com/metacto/catalogapp/presentation/youtube/youtubesample/YoutubeSampleViewModel.kt

@@ -0,0 +1,25 @@
+package com.metacto.catalogapp.presentation.youtube.youtubesample
+
+import com.metacto.catalogapp.presentation.base.BaseViewModel
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleContract.Effect
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleContract.Event
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleContract.State
+
+class YoutubeSampleViewModel : BaseViewModel<State, Event, Effect>() {
+
+    override fun setInitialState() = State()
+
+    override fun handleEvents(event: Event): Any = when (event) {
+        Event.Init -> init()
+    }
+
+    private fun init() {
+        // Validate if already initialized
+        if (currentState.isInitialized) return
+
+        // Init
+
+        // Update the flag
+        setState { copy(isInitialized = true) }
+    }
+}

samples/catalog-app-shared/src/commonMain/kotlin/com/metacto/catalogapp/presentation/youtube/youtubesample/components/YoutubeSampleContent.kt

@@ -0,0 +1,121 @@
+package com.metacto.catalogapp.presentation.youtube.youtubesample.components
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.metacto.core.ui.navigation.NavManager
+import com.metacto.catalogapp.presentation.components.containers.AppScreenColumn
+import org.koin.compose.koinInject
+import com.metacto.catalogapp.presentation.theme.colors
+import com.metacto.catalogapp.presentation.theme.typography
+import com.metacto.catalogapp.presentation.theme.shapes
+import com.metacto.catalogapp.presentation.theme.spacings
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleContract.State
+import com.metacto.catalogapp.presentation.youtube.youtubesample.YoutubeSampleContract.Event
+import com.metacto.core.ui.components.buttons.PrimaryCheckableButton
+import com.metacto.core.ui.components.buttons.PrimaryFilledButton
+import com.metacto.core.ui.components.buttons.SwitchButton
+import com.metacto.core.ui.components.inputFields.PrimaryTextInputField
+import com.metacto.core.ui.youtube.screen.YoutubeScreen
+
+@Composable
+internal fun YoutubeSampleContent(
+    state: State,
+    onEvent: (Event) -> Unit
+) {
+    // Di
+    val navManager = koinInject<NavManager>()
+
+    // states
+    var videoId by remember { mutableStateOf("") }
+    var shouldAutoPlay by remember { mutableStateOf(true) }
+    var showControls by remember { mutableStateOf(true) }
+    var showFullScreenButton by remember { mutableStateOf(true) }
+
+    // Container column
+    AppScreenColumn(
+        title = "Youtube Sample",
+        isScrollable = true,
+        showToolbar = true,
+        showBack = true,
+        onBackClick = {
+            navManager.goBack()
+        },
+    ) {
+
+        // Video ID input field
+        PrimaryTextInputField(
+            text = videoId,
+            label = "Video ID",
+            onValueChange = {
+                videoId = it
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = spacings.spacing16)
+        )
+
+        // Should auto play Checkbox
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(top = spacings.spacing16)
+        ) {
+            Checkbox(
+                checked = shouldAutoPlay,
+                onCheckedChange = { shouldAutoPlay = it }
+            )
+            Text(text = "shouldAutoPlay")
+        }
+
+        // Show controls Checkbox
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(top = spacings.spacing16)
+        ) {
+            Checkbox(
+                checked = showControls,
+                onCheckedChange = { showControls = it }
+            )
+            Text(text = "showControls")
+        }
+
+        // Show Full Screen Checkbox
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(top = spacings.spacing16)
+        ) {
+            Checkbox(
+                checked = showFullScreenButton,
+                onCheckedChange = { showFullScreenButton = it }
+            )
+            Text(text = "showFullScreenButton")
+        }
+
+        // Open youtube video Button
+        PrimaryFilledButton(
+            text = "Open youtube video",
+            onClick = {
+                navManager.navigate(
+                    YoutubeScreen(
+                        videoId = videoId,
+                        shouldAutoPlay = shouldAutoPlay,
+                        showControls = showControls,
+                        showFullScreenButton = showFullScreenButton
+                    )
+                )
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = spacings.spacing16)
+        )
+    }
+}