diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml index 87aa9fe..4c676bc 100644 --- a/app/src/main/AndroidManifest.xml +++ b/app/src/main/AndroidManifest.xml @@ -21,6 +21,7 @@ android:name=".MainActivity" android:banner="@drawable/ic_app" android:exported="true" + android:windowSoftInputMode="adjustResize" android:icon="@drawable/ic_app" android:logo="@drawable/ic_app" android:screenOrientation="landscape"> diff --git a/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt b/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt index 77b08f0..1f600e1 100644 --- a/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt +++ b/app/src/main/java/com/techlads/composetv/CustomDialogUI.kt @@ -8,7 +8,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource @@ -18,9 +17,6 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog -import com.techlads.composetv.theme.Gray20 -import com.techlads.composetv.theme.Gray700 -import com.techlads.composetv.theme.LightBlue @Composable fun CustomDialog(openDialogCustom: MutableState, onExitClick: () -> Unit) { @@ -42,7 +38,7 @@ fun CustomDialogUI( shape = RoundedCornerShape(10.dp), modifier = Modifier.padding(10.dp, 5.dp, 10.dp, 10.dp), ) { - Column(modifier.background(Color.White)) { + Column(modifier.background(MaterialTheme.colorScheme.surface)) { //....................................................................... Image( @@ -50,7 +46,7 @@ fun CustomDialogUI( contentDescription = null, // decorative contentScale = ContentScale.Fit, colorFilter = ColorFilter.tint( - color = LightBlue + color = MaterialTheme.colorScheme.onSurface ), modifier = Modifier .padding(top = 35.dp) @@ -84,15 +80,14 @@ fun CustomDialogUI( Modifier .fillMaxWidth() .padding(top = 10.dp) - .background(Gray20.copy(0.2F)), + .background(MaterialTheme.colorScheme.background.copy(0.2F)), ) { TextButton(onClick = { openDialogCustom.value = false - }, modifier = Modifier.weight(1F)) { + }, modifier = Modifier.weight(1F), shape = RoundedCornerShape(0.dp)) { Text( "No", fontWeight = FontWeight.Bold, - color = Gray700, modifier = Modifier.padding(top = 5.dp, bottom = 5.dp) ) } @@ -106,11 +101,10 @@ fun CustomDialogUI( TextButton(onClick = { openDialogCustom.value = false onExitClick() - }, modifier = Modifier.weight(1F)) { + }, modifier = Modifier.weight(1F), shape = RoundedCornerShape(0.dp)) { Text( "Yes", fontWeight = FontWeight.ExtraBold, - color = Color.Black, modifier = Modifier.padding(top = 5.dp, bottom = 5.dp) ) } diff --git a/app/src/main/java/com/techlads/composetv/MainActivity.kt b/app/src/main/java/com/techlads/composetv/MainActivity.kt index c6f62ca..dbd8d70 100644 --- a/app/src/main/java/com/techlads/composetv/MainActivity.kt +++ b/app/src/main/java/com/techlads/composetv/MainActivity.kt @@ -12,7 +12,7 @@ import androidx.navigation.NavHostController import com.google.accompanist.navigation.animation.rememberAnimatedNavController import com.techlads.composetv.features.home.HomeViewModel import com.techlads.composetv.navigation.AppNavigation -import com.techlads.composetv.theme.Material3Theme +import com.techlads.composetv.theme.ComposeTvTheme import dagger.hilt.android.AndroidEntryPoint @AndroidEntryPoint @@ -20,7 +20,6 @@ class MainActivity : ComponentActivity() { @OptIn(ExperimentalAnimationApi::class) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - val viewModel: HomeViewModel by viewModels() setContent { @@ -44,7 +43,7 @@ class MainActivity : ComponentActivity() { @Composable fun App(navController: NavHostController, viewModel: HomeViewModel) { - Material3Theme { + ComposeTvTheme { AppNavigation(navController, viewModel) } } diff --git a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt index c7810f3..1ed5a6a 100644 --- a/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/details/ProductDetailsScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.details import androidx.activity.compose.BackHandler @@ -21,13 +23,13 @@ import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex +import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.LocalContentColor import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text import com.techlads.composetv.R -import com.techlads.composetv.theme.AppTheme -import com.techlads.composetv.theme.Material3Theme -import com.techlads.composetv.widgets.Button +import com.techlads.composetv.theme.ComposeTvTheme +import com.techlads.composetv.widgets.TvButton import com.techlads.composetv.widgets.ThumbnailImageCard import kotlinx.coroutines.delay @@ -127,18 +129,19 @@ fun ButtonSection(onPlayClick: () -> Unit) { modifier = Modifier .fillMaxWidth() .height(60.dp) - .background(color = AppTheme.surface.copy(alpha = 0.5f)), + .background(color = MaterialTheme.colorScheme.surface.copy(alpha = 0.5f)), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Start ) { Spacer(modifier = Modifier.width(280.dp)) - Button( - text = "Play", + TvButton( modifier = Modifier .padding(horizontal = 16.dp, vertical = 4.dp) .focusRequester(focusRequester), onClick = onPlayClick - ) + ) { + Text("Play") + } Spacer(modifier = Modifier.size(16.dp)) Text( color = LocalContentColor.current, @@ -241,7 +244,7 @@ fun Rating(rating: String) { @Preview(device = Devices.TV_1080p) @Composable fun DetailsScreenPrev() { - Material3Theme { + ComposeTvTheme { ProductDetailsScreen(onPlayClick = {}, onBackPressed = {}) } } diff --git a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt index a2a280c..28370d3 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/hero/HeroItem.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.home.hero import androidx.compose.foundation.Image @@ -8,14 +10,15 @@ import androidx.compose.material3.CardDefaults import androidx.tv.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.MaterialTheme import com.techlads.composetv.R +import com.techlads.composetv.theme.ComposeTvTheme @Composable fun HeroItem(modifier: Modifier = Modifier) { @@ -36,14 +39,19 @@ fun HeroItem(modifier: Modifier = Modifier) { Column( Modifier .fillMaxSize() - .background(Color.Black.copy(alpha = 0.7f)) + .background(MaterialTheme.colorScheme.background.copy(alpha = 0.7f)) .padding(32.dp) ) { Spacer(modifier = Modifier.weight(1f)) - Text(text = "Heading", style = MaterialTheme.typography.titleLarge) + Text( + text = "Heading", + style = MaterialTheme.typography.titleLarge, + color = MaterialTheme.colorScheme.onSurface + ) Text( text = "Description", - style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.ExtraLight) + style = MaterialTheme.typography.titleSmall.copy(fontWeight = FontWeight.ExtraLight), + color = MaterialTheme.colorScheme.onSurface ) } } @@ -53,5 +61,7 @@ fun HeroItem(modifier: Modifier = Modifier) { @Preview @Composable fun HeroItemPrev() { - HeroItem() + ComposeTvTheme { + HeroItem() + } } \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt index e02354b..4ee4273 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/LeftMenu.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.home.leftmenu import androidx.compose.animation.core.animateDpAsState @@ -10,9 +12,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.focus.FocusRequester import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.MaterialTheme import com.techlads.composetv.features.home.navigation.NestedScreens import com.techlads.composetv.features.home.leftmenu.model.MenuItem -import com.techlads.composetv.theme.AppTheme import compose.icons.LineAwesomeIcons import compose.icons.lineawesomeicons.CogSolid import compose.icons.lineawesomeicons.Comment @@ -43,7 +46,7 @@ fun LeftMenu( Box( modifier = modifier - .background(AppTheme.surface.copy(alpha = 0.5f)) + .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.5f)) .wrapContentWidth() ) { Column( diff --git a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt index 931041e..f5ec810 100644 --- a/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt +++ b/app/src/main/java/com/techlads/composetv/features/home/leftmenu/MenuHeader.kt @@ -15,6 +15,7 @@ import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.techlads.composetv.theme.ComposeTvTheme import compose.icons.LineAwesomeIcons import compose.icons.lineawesomeicons.TvSolid @@ -51,5 +52,7 @@ fun MenuHeader(expanded: Boolean = true) { @Preview @Composable fun MenuHeaderPrev() { - MenuHeader(true) + ComposeTvTheme { + MenuHeader() + } } \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt index 6b30250..e69de29 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginButton.kt @@ -1,43 +0,0 @@ -@file:OptIn(ExperimentalTvMaterial3Api::class) - -package com.techlads.composetv.features.login.withEmailPassword - -import androidx.compose.foundation.layout.* -import androidx.tv.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import androidx.tv.material3.Button -import androidx.tv.material3.ExperimentalTvMaterial3Api - -@Composable -fun LoginButton(modifier: Modifier = Modifier, onClick: () -> Unit) { - Button( - onClick = onClick, - contentPadding = PaddingValues(16.dp), - modifier = modifier - ) { - Text( - modifier = Modifier.fillMaxWidth(), - text = "LOGIN", style = TextStyle( - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Light, - textAlign = TextAlign.Center, - ) - ) - } -} - - -@Preview -@Composable -fun LoginButtonPrev() { - LoginButton(Modifier.wrapContentSize()) { - - } -} \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt index 5cc5919..e85d39c 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreen.kt @@ -1,16 +1,23 @@ package com.techlads.composetv.features.login.withEmailPassword import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Devices +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.techlads.composetv.theme.ComposeTvTheme @Composable fun LoginScreen( modifier: Modifier = Modifier, goToHomeScreen: () -> Unit ) { - Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + Box(modifier = modifier + .fillMaxSize() + .padding(bottom = 68.dp), contentAlignment = Alignment.Center) { LoginPage { _, _ -> goToHomeScreen() } @@ -18,3 +25,12 @@ fun LoginScreen( } +@Preview(device = Devices.TV_1080p) +@Composable +fun LoginScreenPrev() { + ComposeTvTheme { + LoginScreen(Modifier.fillMaxSize()) { + + } + } +} diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt index 054f109..551830f 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/LoginScreenContent.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withEmailPassword import androidx.compose.foundation.layout.* @@ -6,17 +8,27 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Devices import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.Text +import com.techlads.composetv.theme.ComposeTvTheme +import com.techlads.composetv.widgets.TvButton + @Composable fun LoginPage( onLoginClick: (user: String, psw: String) -> Unit ) { Column( - modifier = Modifier.padding(20.dp).width(320.dp), + modifier = Modifier + .width(320.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { @@ -38,8 +50,15 @@ fun LoginPage( ) { password.value = it } Spacer(modifier = Modifier.height(40.dp)) - LoginButton(modifier = Modifier.padding(start = 20.dp, end = 20.dp)) { - onLoginClick(username.value, password.value) + TvButton(modifier = Modifier.padding(start = 20.dp, end = 20.dp), onClick = {onLoginClick(username.value, password.value)}) { + Text( + modifier = Modifier.fillMaxWidth(), + text = "LOGIN", style = TextStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Light, + textAlign = TextAlign.Center, + ) + ) } } } @@ -47,7 +66,9 @@ fun LoginPage( @Preview(device = Devices.TV_1080p) @Composable fun LoginPagePrev() { - LoginPage { u, p -> + ComposeTvTheme { + LoginPage { u, p -> + } } } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt index a019c0b..b35a776 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/ScreenHeading.kt @@ -1,21 +1,14 @@ package com.techlads.composetv.features.login.withEmailPassword +import androidx.compose.material3.MaterialTheme import androidx.tv.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.sp @Composable fun ScreenHeading(heading: String) { Text( - text = heading, style = TextStyle( - fontSize = 55.sp, - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Thin - ) + text = heading, style = MaterialTheme.typography.headlineLarge ) } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt index a38071d..679ef42 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withEmailPassword/TvTextField.kt @@ -1,65 +1,42 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withEmailPassword -import androidx.compose.foundation.focusable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.TextFieldDefaults import androidx.tv.material3.* import androidx.compose.runtime.Composable -import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier -import androidx.compose.ui.focus.onFocusChanged -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.TextStyle -import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.tooling.preview.Preview -import com.techlads.composetv.theme.LightBlue @OptIn(ExperimentalMaterial3Api::class) @Composable fun TvTextField( value: String, label: String, + mutableInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardType: KeyboardType = KeyboardType.Text, onValueChange: (String) -> Unit ) { - val defaultColor = remember { - Color.White.copy(0.6F) - } - val selectedColor = remember { - LightBlue - } - val selectionColor = remember { mutableStateOf(defaultColor) } OutlinedTextField( - textStyle = TextStyle( - fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Thin - ), + textStyle = MaterialTheme.typography.bodyLarge, colors = TextFieldDefaults.outlinedTextFieldColors( - unfocusedBorderColor = selectionColor.value, - unfocusedLabelColor = selectionColor.value + focusedBorderColor = MaterialTheme.colorScheme.onSurface, + cursorColor = MaterialTheme.colorScheme.onSurface, ), + interactionSource = mutableInteractionSource, label = { Text(text = label) }, value = value, visualTransformation = visualTransformation, keyboardOptions = KeyboardOptions(keyboardType = keyboardType), onValueChange = onValueChange, - modifier = Modifier - .onFocusChanged { state -> - selectionColor.value = if (state.isFocused) { - selectedColor - } else { - defaultColor - } - } - .focusable(true) ) } diff --git a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt index 240351d..db7503c 100644 --- a/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt +++ b/app/src/main/java/com/techlads/composetv/features/login/withToken/DeviceTokenAuthenticationContent.kt @@ -1,18 +1,16 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.login.withToken import androidx.compose.foundation.Image -import androidx.compose.foundation.focusable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.* -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Divider import androidx.tv.material3.* import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.platform.LocalContext @@ -21,6 +19,7 @@ import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily 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.core.graphics.drawable.toBitmap @@ -28,7 +27,7 @@ import com.github.alexzhirkevich.customqrgenerator.QrData import com.github.alexzhirkevich.customqrgenerator.vector.QrCodeDrawable import com.github.alexzhirkevich.customqrgenerator.vector.QrVectorOptions import com.github.alexzhirkevich.customqrgenerator.vector.style.* -import com.techlads.composetv.theme.AppTheme +import com.techlads.composetv.widgets.TvButton @Composable fun DeviceTokenAuthenticationContent( @@ -50,8 +49,10 @@ fun DeviceTokenAuthenticationContent( val start = globalText.indexOf(url) val spanStyles = listOf( AnnotatedString.Range( - SpanStyle(fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Normal), + SpanStyle( + fontFamily = FontFamily.SansSerif, + fontWeight = FontWeight.Normal + ), start = start, end = start + url.length ) @@ -142,28 +143,19 @@ fun DeviceTokenAuthenticationContent( .width(300.dp) .padding(40.dp, 0.dp, 40.dp, 0.dp) ) { - Button( - onClick = { onLoginClick(token) }, - shape = AppTheme.midShape, - colors = ButtonDefaults.buttonColors(Color.White), - modifier = Modifier - .fillMaxWidth() - .height(50.dp) - .onFocusChanged { state -> - if (state.isFocused) { - println("login") - } - } - .focusable(true, interactionSource) - ) { + TvButton( + modifier = Modifier.padding(start = 20.dp, end = 20.dp), + interactionSource = interactionSource, + onClick = { onLoginClick(token) }) { Text( - text = "WITH KEYBOARD", style = TextStyle( - color = Color.Black, + modifier = Modifier.fillMaxWidth(), + text = "Login with Email", style = TextStyle( fontFamily = FontFamily.SansSerif, - fontWeight = FontWeight.Light + fontWeight = FontWeight.Light, + textAlign = TextAlign.Center, ) ) } } } -} \ No newline at end of file +} diff --git a/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt b/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt index 68de95c..e29b2d4 100644 --- a/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/settings/SettingsScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.settings import androidx.compose.animation.ExperimentalAnimationApi @@ -8,9 +10,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavHostController +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.MaterialTheme import com.google.accompanist.navigation.animation.rememberAnimatedNavController import com.techlads.composetv.features.settings.navigation.NestedSettingsScreenNavigation -import com.techlads.composetv.theme.AppTheme @OptIn(ExperimentalAnimationApi::class) @Composable @@ -23,7 +26,7 @@ fun SettingsScreen() { SettingsMenu( Modifier .fillMaxHeight() - .background(AppTheme.surface.copy(alpha = 0.2f)) + .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.2f)) .padding(vertical = 32.dp, horizontal = 16.dp) ) { navController.navigate(it.navigation) diff --git a/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt b/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt index 9f2daa5..1f33277 100644 --- a/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt +++ b/app/src/main/java/com/techlads/composetv/features/settings/screens/profile/ProfileScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalTvMaterial3Api::class) + package com.techlads.composetv.features.settings.screens.profile import androidx.compose.foundation.Image @@ -10,14 +12,16 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp +import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.LocalContentColor import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text import com.techlads.composetv.R import com.techlads.composetv.features.settings.data.SettingsMenuModel import com.techlads.composetv.features.settings.screens.PreferencesContainer -import com.techlads.composetv.widgets.Button +import com.techlads.composetv.widgets.TvButton @Composable fun ProfileScreen() { @@ -37,9 +41,21 @@ fun ProfilesContent() { Spacer(modifier = Modifier.size(5.dp)) Row { Spacer(modifier = Modifier.size(120.dp)) - Button(text = "Save") {} - Spacer(modifier = Modifier.size(8.dp)) - Button(text = "Cancel") {} + TvButton(onClick = {}, modifier = Modifier.width(120.dp)) { + Text( + text = "Save", + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center + ) + } + Spacer(modifier = Modifier.size(16.dp)) + TvButton(onClick = {}, modifier = Modifier.width(120.dp)) { + Text( + text = "Cancel", + modifier = Modifier.fillMaxWidth(), + textAlign = TextAlign.Center + ) + } } } } diff --git a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt index 8898487..6153c1e 100644 --- a/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt +++ b/app/src/main/java/com/techlads/composetv/navigation/AppNavigation.kt @@ -20,7 +20,7 @@ import com.techlads.composetv.features.player.PlayerScreen @OptIn(ExperimentalAnimationApi::class) @Composable fun AppNavigation(navController: NavHostController, viewModel: HomeViewModel) { - AnimatedNavHost(navController = navController, startDestination = Screens.Login.title) { + AnimatedNavHost(navController = navController, startDestination = Screens.LoginToken.title) { // e.g will add auth routes here if when we will extend project composable( Screens.Login.title, diff --git a/app/src/main/java/com/techlads/composetv/theme/Color.kt b/app/src/main/java/com/techlads/composetv/theme/Color.kt index 050fcda..6d85b2f 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Color.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Color.kt @@ -1,26 +1,66 @@ -/* - * Copyright 2022 The Android Open Source Project - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * 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. - */ -package com.techlads.composetv.theme - import androidx.compose.ui.graphics.Color -val Purple80 = Color(0xFFD0BCFF) -val PurpleGrey80 = Color(0xFFCCC2DC) -val Pink80 = Color(0xFFEFB8C8) -val Neutral10 = Color(0xFF000000) -val LightBlue = Color(0xFF8FD3FE) -val Gray20 = Color(0xFF222222) -val Gray700 = Color(0xFF616161) +val md_theme_light_primary = Color(0xFF166D33) +val md_theme_light_onPrimary = Color(0xFFFFFFFF) +val md_theme_light_primaryContainer = Color(0xFFA1F6AC) +val md_theme_light_onPrimaryContainer = Color(0xFF002109) +val md_theme_light_secondary = Color(0xFF396A1E) +val md_theme_light_onSecondary = Color(0xFFFFFFFF) +val md_theme_light_secondaryContainer = Color(0xFFB9F295) +val md_theme_light_onSecondaryContainer = Color(0xFF082100) +val md_theme_light_tertiary = Color(0xFF39656D) +val md_theme_light_onTertiary = Color(0xFFFFFFFF) +val md_theme_light_tertiaryContainer = Color(0xFFBDEAF3) +val md_theme_light_onTertiaryContainer = Color(0xFF001F24) +val md_theme_light_error = Color(0xFFBA1A1A) +val md_theme_light_errorContainer = Color(0xFFFFDAD6) +val md_theme_light_onError = Color(0xFFFFFFFF) +val md_theme_light_onErrorContainer = Color(0xFF410002) +val md_theme_light_background = Color(0xFFFCFDF7) +val md_theme_light_onBackground = Color(0xFF1A1C19) +val md_theme_light_surface = Color(0xFFFCFDF7) +val md_theme_light_onSurface = Color(0xFF1A1C19) +val md_theme_light_surfaceVariant = Color(0xFFDDE5DA) +val md_theme_light_onSurfaceVariant = Color(0xFF414941) +val md_theme_light_outline = Color(0xFF727970) +val md_theme_light_inverseOnSurface = Color(0xFFF0F1EC) +val md_theme_light_inverseSurface = Color(0xFF2E312E) +val md_theme_light_inversePrimary = Color(0xFF86D992) +val md_theme_light_shadow = Color(0xFF000000) +val md_theme_light_surfaceTint = Color(0xFF166D33) +val md_theme_light_outlineVariant = Color(0xFFC1C9BE) +val md_theme_light_scrim = Color(0xFF000000) + +val md_theme_dark_primary = Color(0xFF86D992) +val md_theme_dark_onPrimary = Color(0xFF003915) +val md_theme_dark_primaryContainer = Color(0xFF005321) +val md_theme_dark_onPrimaryContainer = Color(0xFFA1F6AC) +val md_theme_dark_secondary = Color(0xFF9ED67C) +val md_theme_dark_onSecondary = Color(0xFF133800) +val md_theme_dark_secondaryContainer = Color(0xFF225105) +val md_theme_dark_onSecondaryContainer = Color(0xFFB9F295) +val md_theme_dark_tertiary = Color(0xFFA1CED7) +val md_theme_dark_onTertiary = Color(0xFF00363D) +val md_theme_dark_tertiaryContainer = Color(0xFF1F4D55) +val md_theme_dark_onTertiaryContainer = Color(0xFFBDEAF3) +val md_theme_dark_error = Color(0xFFFFB4AB) +val md_theme_dark_errorContainer = Color(0xFF93000A) +val md_theme_dark_onError = Color(0xFF690005) +val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) +val md_theme_dark_background = Color(0xFF1A1C19) +val md_theme_dark_onBackground = Color(0xFFE2E3DD) +val md_theme_dark_surface = Color(0xFF1A1C19) +val md_theme_dark_onSurface = Color(0xFFE2E3DD) +val md_theme_dark_surfaceVariant = Color(0xFF414941) +val md_theme_dark_onSurfaceVariant = Color(0xFFC1C9BE) +val md_theme_dark_outline = Color(0xFF8B9389) +val md_theme_dark_inverseOnSurface = Color(0xFF1A1C19) +val md_theme_dark_inverseSurface = Color(0xFFE2E3DD) +val md_theme_dark_inversePrimary = Color(0xFF166D33) +val md_theme_dark_shadow = Color(0xFF000000) +val md_theme_dark_surfaceTint = Color(0xFF86D992) +val md_theme_dark_outlineVariant = Color(0xFF414941) +val md_theme_dark_scrim = Color(0xFF000000) + + +val seed = Color(0xFF006028) diff --git a/app/src/main/java/com/techlads/composetv/theme/Shape.kt b/app/src/main/java/com/techlads/composetv/theme/Shape.kt new file mode 100644 index 0000000..e01b820 --- /dev/null +++ b/app/src/main/java/com/techlads/composetv/theme/Shape.kt @@ -0,0 +1,13 @@ +package com.techlads.composetv.theme + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.ui.unit.dp +import androidx.tv.material3.Shapes + +val Shapes = Shapes( + extraSmall = RoundedCornerShape(4.dp), + small = RoundedCornerShape(8.dp), + medium = RoundedCornerShape(12.dp), + large = RoundedCornerShape(16.dp), + extraLarge = RoundedCornerShape(24.dp) +) \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/theme/Theme.kt b/app/src/main/java/com/techlads/composetv/theme/Theme.kt index 702dce5..4c8f124 100644 --- a/app/src/main/java/com/techlads/composetv/theme/Theme.kt +++ b/app/src/main/java/com/techlads/composetv/theme/Theme.kt @@ -1,67 +1,147 @@ -package com.techlads.composetv.theme +@file:OptIn(ExperimentalTvMaterial3Api::class) -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.runtime.* -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.Shape -import androidx.compose.ui.unit.dp -import androidx.tv.material3.* +package com.techlads.composetv.theme -@OptIn(ExperimentalTvMaterial3Api::class) -private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80, - background = Neutral10 -) +import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider +import androidx.tv.material3.ExperimentalTvMaterial3Api +import androidx.tv.material3.LocalContentColor +import androidx.tv.material3.MaterialTheme +import androidx.tv.material3.lightColorScheme +import androidx.tv.material3.darkColorScheme +import md_theme_dark_background +import md_theme_dark_error +import md_theme_dark_errorContainer +import md_theme_dark_inverseOnSurface +import md_theme_dark_inversePrimary +import md_theme_dark_inverseSurface +import md_theme_dark_onBackground +import md_theme_dark_onError +import md_theme_dark_onErrorContainer +import md_theme_dark_onPrimary +import md_theme_dark_onPrimaryContainer +import md_theme_dark_onSecondary +import md_theme_dark_onSecondaryContainer +import md_theme_dark_onSurface +import md_theme_dark_onSurfaceVariant +import md_theme_dark_onTertiary +import md_theme_dark_onTertiaryContainer +import md_theme_dark_primary +import md_theme_dark_primaryContainer +import md_theme_dark_scrim +import md_theme_dark_secondary +import md_theme_dark_secondaryContainer +import md_theme_dark_surface +import md_theme_dark_surfaceTint +import md_theme_dark_surfaceVariant +import md_theme_dark_tertiary +import md_theme_dark_tertiaryContainer +import md_theme_light_background +import md_theme_light_error +import md_theme_light_errorContainer +import md_theme_light_inverseOnSurface +import md_theme_light_inversePrimary +import md_theme_light_inverseSurface +import md_theme_light_onBackground +import md_theme_light_onError +import md_theme_light_onErrorContainer +import md_theme_light_onPrimary +import md_theme_light_onPrimaryContainer +import md_theme_light_onSecondary +import md_theme_light_onSecondaryContainer +import md_theme_light_onSurface +import md_theme_light_onSurfaceVariant +import md_theme_light_onTertiary +import md_theme_light_onTertiaryContainer +import md_theme_light_primary +import md_theme_light_primaryContainer +import md_theme_light_scrim +import md_theme_light_secondary +import md_theme_light_secondaryContainer +import md_theme_light_surface +import md_theme_light_surfaceTint +import md_theme_light_surfaceVariant +import md_theme_light_tertiary +import md_theme_light_tertiaryContainer -@OptIn(ExperimentalTvMaterial3Api::class) -private val LightColorScheme = lightColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80, - background = Neutral10 +private val LightColors = lightColorScheme( + primary = md_theme_light_primary, + onPrimary = md_theme_light_onPrimary, + primaryContainer = md_theme_light_primaryContainer, + onPrimaryContainer = md_theme_light_onPrimaryContainer, + secondary = md_theme_light_secondary, + onSecondary = md_theme_light_onSecondary, + secondaryContainer = md_theme_light_secondaryContainer, + onSecondaryContainer = md_theme_light_onSecondaryContainer, + tertiary = md_theme_light_tertiary, + onTertiary = md_theme_light_onTertiary, + tertiaryContainer = md_theme_light_tertiaryContainer, + onTertiaryContainer = md_theme_light_onTertiaryContainer, + error = md_theme_light_error, + errorContainer = md_theme_light_errorContainer, + onError = md_theme_light_onError, + onErrorContainer = md_theme_light_onErrorContainer, + background = md_theme_light_background, + onBackground = md_theme_light_onBackground, + surface = md_theme_light_surface, + onSurface = md_theme_light_onSurface, + surfaceVariant = md_theme_light_surfaceVariant, + onSurfaceVariant = md_theme_light_onSurfaceVariant, + inverseOnSurface = md_theme_light_inverseOnSurface, + inverseSurface = md_theme_light_inverseSurface, + inversePrimary = md_theme_light_inversePrimary, + surfaceTint = md_theme_light_surfaceTint, + scrim = md_theme_light_scrim, ) -val MidShape = staticCompositionLocalOf { RoundedCornerShape(8.dp) } - -object AppTheme { - val midShape: Shape - @Composable - @ReadOnlyComposable - get() = MidShape.current - @OptIn(ExperimentalTvMaterial3Api::class) - val MainColor: Color - @Composable - @ReadOnlyComposable - get() = DarkColorScheme.primary - - @OptIn(ExperimentalTvMaterial3Api::class) - val surface: Color - @Composable - @ReadOnlyComposable - get() = MaterialTheme.colorScheme.surface - - @OptIn(ExperimentalTvMaterial3Api::class) - val onSurface: Color - @Composable - @ReadOnlyComposable - get() = MaterialTheme.colorScheme.onSurface -} +private val DarkColors = darkColorScheme( + primary = md_theme_dark_primary, + onPrimary = md_theme_dark_onPrimary, + primaryContainer = md_theme_dark_primaryContainer, + onPrimaryContainer = md_theme_dark_onPrimaryContainer, + secondary = md_theme_dark_secondary, + onSecondary = md_theme_dark_onSecondary, + secondaryContainer = md_theme_dark_secondaryContainer, + onSecondaryContainer = md_theme_dark_onSecondaryContainer, + tertiary = md_theme_dark_tertiary, + onTertiary = md_theme_dark_onTertiary, + tertiaryContainer = md_theme_dark_tertiaryContainer, + onTertiaryContainer = md_theme_dark_onTertiaryContainer, + error = md_theme_dark_error, + errorContainer = md_theme_dark_errorContainer, + onError = md_theme_dark_onError, + onErrorContainer = md_theme_dark_onErrorContainer, + background = md_theme_dark_background, + onBackground = md_theme_dark_onBackground, + surface = md_theme_dark_surface, + onSurface = md_theme_dark_onSurface, + surfaceVariant = md_theme_dark_surfaceVariant, + onSurfaceVariant = md_theme_dark_onSurfaceVariant, + inverseOnSurface = md_theme_dark_inverseOnSurface, + inverseSurface = md_theme_dark_inverseSurface, + inversePrimary = md_theme_dark_inversePrimary, + surfaceTint = md_theme_dark_surfaceTint, + scrim = md_theme_dark_scrim, +) -@OptIn(ExperimentalTvMaterial3Api::class) @Composable -fun Material3Theme( +fun ComposeTvTheme( + useDarkTheme: Boolean = true, content: @Composable () -> Unit ) { + val colors = if (useDarkTheme) { + DarkColors + } else { + LightColors + } + MaterialTheme( - colorScheme = DarkColorScheme, + colorScheme = colors, typography = Typography, + shapes = Shapes, content = { - CompositionLocalProvider( - LocalContentColor provides AppTheme.onSurface - ){ + CompositionLocalProvider(LocalContentColor provides colors.onSurface) { content() } } diff --git a/app/src/main/java/com/techlads/composetv/widgets/Button.kt b/app/src/main/java/com/techlads/composetv/widgets/Button.kt index 393fa67..e69de29 100644 --- a/app/src/main/java/com/techlads/composetv/widgets/Button.kt +++ b/app/src/main/java/com/techlads/composetv/widgets/Button.kt @@ -1,26 +0,0 @@ -package com.techlads.composetv.widgets - -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.layout.padding -import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier -import androidx.compose.ui.focus.FocusRequester -import androidx.compose.ui.unit.dp -import androidx.tv.material3.* - -@OptIn(ExperimentalTvMaterial3Api::class) -@Composable -fun Button( - modifier: Modifier = Modifier, - text: String, - onClick: () -> Unit -) { - Surface( - onClick = onClick, - modifier = modifier, - tonalElevation = 1.dp, - ) { - Text(text = text, Modifier.padding(horizontal = 12.dp, vertical = 4.dp)) - } -} \ No newline at end of file diff --git a/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt b/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt index 8e7085d..ad52446 100644 --- a/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt +++ b/app/src/main/java/com/techlads/composetv/widgets/ThumbnailImageCard.kt @@ -15,7 +15,7 @@ import androidx.compose.ui.unit.dp import androidx.tv.material3.ExperimentalTvMaterial3Api import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text -import com.techlads.composetv.theme.Material3Theme +import com.techlads.composetv.theme.ComposeTvTheme @Composable fun ThumbnailImageCard( @@ -34,7 +34,7 @@ fun ThumbnailImageCard( @Preview @Composable fun ThumbnailImageCardPreview() { - Material3Theme { + ComposeTvTheme { ThumbnailImageCard( Modifier .width(150.dp) diff --git a/app/src/main/java/com/techlads/composetv/widgets/TvButton.kt b/app/src/main/java/com/techlads/composetv/widgets/TvButton.kt new file mode 100644 index 0000000..c3a5c25 --- /dev/null +++ b/app/src/main/java/com/techlads/composetv/widgets/TvButton.kt @@ -0,0 +1,41 @@ +package com.techlads.composetv.widgets + +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.RowScope +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import androidx.tv.material3.* + +@OptIn(ExperimentalTvMaterial3Api::class) +@Composable +fun TvButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, + enabled: Boolean = true, + scale: ButtonScale = ButtonDefaults.scale(), + glow: ButtonGlow = ButtonDefaults.glow(), + shape: ButtonShape = ButtonDefaults.shape(), + colors: ButtonColors = ButtonDefaults.colors(), + tonalElevation: Dp = 0.dp, + border: ButtonBorder = ButtonDefaults.border(), + contentPadding: PaddingValues = ButtonDefaults.ContentPadding, + interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, + content: @Composable RowScope.() -> Unit +) { + Button(onClick = onClick, + modifier = modifier, + enabled = enabled, + scale = scale, + glow = glow, + shape = shape, + colors = colors, + tonalElevation = tonalElevation, + border = border, + contentPadding = contentPadding, + interactionSource = interactionSource, + content = content) +} \ No newline at end of file