package com.owenlejeune.tvtime import android.os.Bundle import androidx.activity.compose.setContent import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material.icons.filled.ArrowForward import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource 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 androidx.lifecycle.lifecycleScope import com.google.accompanist.pager.* import com.google.accompanist.systemuicontroller.rememberSystemUiController import com.kieronquinn.monetcompat.app.MonetCompatActivity import com.owenlejeune.tvtime.extensions.launchActivity import com.owenlejeune.tvtime.preferences.AppPreferences import com.owenlejeune.tvtime.ui.screens.onboarding.OnboardingPage import com.owenlejeune.tvtime.ui.theme.TVTimeTheme import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.launch import org.koin.android.ext.android.inject @OptIn(ExperimentalPagerApi::class) class OnboardingActivity: MonetCompatActivity() { private val preferences: AppPreferences by inject() private lateinit var pagerState: PagerState private lateinit var coroutineScope: CoroutineScope override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) lifecycleScope.launchWhenCreated { monet.awaitMonetReady() setContent { TVTimeTheme(monetCompat = monet) { OnboardingUi() } } } } @Composable fun OnboardingUi() { pagerState = rememberPagerState() coroutineScope = rememberCoroutineScope() Column( modifier = Modifier.background(color = MaterialTheme.colorScheme.background) ) { val isFirstPage = pagerState.currentPage == 0 val isLastPage = pagerState.currentPage == OnboardingPage.values().size - 1 if (!isFirstPage) { IconButton( modifier = Modifier.padding(12.dp), onClick = { coroutineScope.launch { pagerState.animateScrollToPage(pagerState.currentPage - 1) } } ) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = null, tint = MaterialTheme.colorScheme.onBackground ) } } val nextButtonEnabled = remember { mutableStateOf(true) } HorizontalPager( state = pagerState, modifier = Modifier .fillMaxWidth() .weight(1f), count = OnboardingPage.values().size, userScrollEnabled = false ) { page -> Box(modifier = Modifier.padding(start = 12.dp, end = 24.dp)) { OnboardingPageUi(page = OnboardingPage[page], nextButtonEnabled) } } Box( modifier = Modifier .fillMaxWidth() .padding(all = 12.dp) ) { Button( modifier = Modifier.align(Alignment.CenterStart), enabled = true, onClick = { preferences.firstLaunch = false launchActivity(MainActivity::class.java) } ) { val skipText = if (preferences.firstLaunchTesting) stringResource(id = R.string.action_skip_testing) else stringResource(id = R.string.action_skip) Text(text = skipText) } HorizontalPagerIndicator( pagerState = pagerState, modifier = Modifier .align(Alignment.Center) .padding(16.dp), activeColor = MaterialTheme.colorScheme.secondary ) Button( modifier = Modifier.align(Alignment.CenterEnd), shape = CircleShape, enabled = nextButtonEnabled.value, onClick = { if (isLastPage) { preferences.firstLaunch = false launchActivity(MainActivity::class.java) } else { coroutineScope.launch { pagerState.animateScrollToPage(pagerState.currentPage + 1) } } } ) { if (!isLastPage) { Text(stringResource(id = R.string.get_started)) } else { Icon(imageVector = Icons.Filled.ArrowForward, contentDescription = null) } } } } } @Composable fun OnboardingPageUi(page: OnboardingPage, nextButtonEnabled: MutableState) { Column( horizontalAlignment = Alignment.CenterHorizontally ) { page.image?.let { Image( painter = painterResource(id = it), contentDescription = null, modifier = Modifier.size(100.dp), colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.primary) ) Spacer(modifier = Modifier.height(20.dp)) } Text( text = stringResource(id = page.title), fontSize = 28.sp, fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.onBackground ) Spacer(modifier = Modifier.height(8.dp)) Text( text = stringResource(id = page.description), textAlign = TextAlign.Center, fontSize = 14.sp, color = MaterialTheme.colorScheme.onBackground ) Spacer(modifier = Modifier.height(50.dp)) page.additionalContent(this@OnboardingActivity, nextButtonEnabled) } } override fun onBackPressed() { if (pagerState.currentPage == 0) { finish() } else { coroutineScope.launch { pagerState.animateScrollToPage(pagerState.currentPage - 1) } } } }