Skip to content

Commit 4ba0496

Browse files
UmairKhalid786UmairKhalid786
authored
Merge pull request #20 from UmairKhalid786/develop
Movies and Favorites Grid added
2 parents 42f36a8 + 28b27d3 commit 4ba0496

File tree

16 files changed

+344
-38
lines changed

16 files changed

+344
-38
lines changed

‎README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,20 @@
33
## Signin with QR code UX
44
![QR Code](https://user-images.githubusercontent.com/21205138/211226659-249d191c-d930-4dd7-8aa2-e9a0056539c8.png)
55

6-
76
## Signin with Email UX
87
![Email Password](https://user-images.githubusercontent.com/21205138/211226691-c74f286f-52bc-4b56-a4bc-928be7660aa4.png)
98

10-
## Home
9+
## Home - Collapsed
1110
![Screenshot_1679864769](https://user-images.githubusercontent.com/21205138/227805696-bef7d6d9-b275-43cd-891d-d42eb687fdac.png)
11+
12+
## Home - Expandded
1213
![Screenshot_1679864765](https://user-images.githubusercontent.com/21205138/227805700-c5fc5909-3fb9-4fc2-a348-382a792d15c9.png)
1314

15+
## Favorites
16+
![favoritesscreen](https://user-images.githubusercontent.com/21205138/228040345-387ba9be-0792-4e8e-810d-e5ad9b63dcde.png)
17+
18+
## Movies
19+
![MoviesGrid](https://user-images.githubusercontent.com/21205138/228040389-25c4f8c1-b600-411c-9d35-00fb18de8e3e.png)
1420

1521
## Whole Experience
1622
<video src='https://user-images.githubusercontent.com/21205138/227805240-fe0576b8-bdbe-40c9-a623-5a47ce8b420d.mp4' width=180/>

‎app/src/main/java/com/techlads/composetv/favorites/FavoritesScreen.kt‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
package com.techlads.composetv.favorites
2+
3+
import androidx.compose.foundation.layout.PaddingValues
4+
import androidx.compose.foundation.layout.padding
5+
import androidx.compose.material3.MaterialTheme
6+
import androidx.compose.material3.Text
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.tooling.preview.Preview
10+
import androidx.compose.ui.unit.dp
11+
import androidx.tv.foundation.lazy.grid.TvGridCells
12+
import androidx.tv.foundation.lazy.grid.TvGridItemSpan
13+
import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
14+
import com.techlads.composetv.home.carousel.VerticalCarouselItem
15+
16+
@Composable
17+
fun FavoritesScreen() {
18+
FavoritesGrid(Modifier)
19+
}
20+
21+
@Composable
22+
fun FavoritesGrid(modifier: Modifier) {
23+
TvLazyVerticalGrid(
24+
modifier = modifier,
25+
columns = TvGridCells.Fixed(5),
26+
contentPadding = PaddingValues(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 48.dp)
27+
) {
28+
item(span = {
29+
TvGridItemSpan(5)
30+
}) {
31+
GridHeader()
32+
}
33+
items(30) {
34+
VerticalCarouselItem(parent = 0, child = 0)
35+
}
36+
}
37+
}
38+
39+
@Composable
40+
fun GridHeader() {
41+
Text(
42+
text = "Favorites",
43+
style = MaterialTheme.typography.titleLarge,
44+
modifier = Modifier.padding(bottom = 24.dp, start = 8.dp)
45+
)
46+
}
47+
48+
@Preview
49+
@Composable
50+
fun FavoritesScreenPrev() {
51+
FavoritesScreen()
52+
}
53+

‎app/src/main/java/com/techlads/composetv/home/HomeNestedScreen.kt‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
package com.techlads.composetv.home
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.fillMaxSize
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Modifier
7+
import com.techlads.composetv.hero.HeroItem
8+
import com.techlads.composetv.home.carousel.HomeCarousel
9+
10+
@Composable
11+
fun HomeNestedScreen(){
12+
Column(Modifier.fillMaxSize()) {
13+
HeroItem()
14+
HomeCarousel(Modifier.weight(1f))
15+
}
16+
}

‎app/src/main/java/com/techlads/composetv/home/HomeScreenContent.kt‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
package com.techlads.composetv.home
22

3+
import androidx.compose.animation.ExperimentalAnimationApi
34
import androidx.compose.foundation.layout.Row
45
import androidx.compose.foundation.layout.wrapContentWidth
56
import androidx.compose.runtime.Composable
67
import androidx.compose.runtime.mutableStateOf
78
import androidx.compose.runtime.remember
89
import androidx.compose.ui.Modifier
910
import androidx.compose.ui.tooling.preview.Preview
11+
import com.google.accompanist.navigation.animation.rememberAnimatedNavController
1012
import com.techlads.composetv.home.navigation.NestedHomeNavigation
1113
import com.techlads.composetv.leftmenu.LeftMenu
1214
import com.techlads.composetv.leftmenu.data.MenuData
1315

16+
@OptIn(ExperimentalAnimationApi::class)
1417
@Composable
1518
fun HomeScreenContent() {
19+
20+
val navController = rememberAnimatedNavController()
21+
1622
val isExpanded = remember {
1723
mutableStateOf(false)
1824
}
@@ -27,9 +33,10 @@ fun HomeScreenContent() {
2733
isExpanded.value = !isExpanded.value && isSelected
2834
}
2935
) {
30-
36+
navController.navigate(it.id)
3137
}
32-
NestedHomeNavigation()
38+
39+
NestedHomeNavigation(navController)
3340
}
3441
}
3542

‎app/src/main/java/com/techlads/composetv/home/MenuData.kt‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎app/src/main/java/com/techlads/composetv/home/carousel/CarouselItem.kt‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,54 @@ fun CarouselItem(parent: Int, child: Int) {
5959
}
6060
}
6161

62+
63+
@Composable
64+
fun VerticalCarouselItem(parent: Int, child: Int) {
65+
66+
var isFocused by remember { mutableStateOf(false) }
67+
val scale = animateFloatAsState(if (isFocused) 1.05f else 1f)
68+
69+
70+
Card(
71+
modifier = Modifier
72+
.zIndex(if (isFocused) 20f else 1f)
73+
.graphicsLayer(
74+
scaleX = scale.value,
75+
scaleY = scale.value
76+
)
77+
.padding(8.dp)
78+
.fillMaxWidth()
79+
.aspectRatio(0.6f)
80+
.onFocusChanged {
81+
isFocused = it.isFocused
82+
}
83+
.border(
84+
border = BorderStroke(
85+
1.dp,
86+
if (isFocused)
87+
Color.LightGray
88+
else
89+
Color.Transparent
90+
), shape = MaterialTheme.shapes.medium
91+
)
92+
.clickable { }
93+
.focusable()
94+
) {
95+
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
96+
Text(text = "Item $parent x $child", textAlign = TextAlign.Center)
97+
}
98+
}
99+
}
100+
62101
@Preview
63102
@Composable
64103
fun CarouselItemPrev() {
65104
CarouselItem(1, 1)
66105
}
106+
107+
108+
@Preview
109+
@Composable
110+
fun VerticalCarouselItemPrev() {
111+
VerticalCarouselItem(1, 1)
112+
}

‎app/src/main/java/com/techlads/composetv/home/navigation/NestedHomeNavigation.kt‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
package com.techlads.composetv.home.navigation
22

3-
import androidx.compose.foundation.layout.Column
4-
import androidx.compose.foundation.layout.fillMaxSize
3+
import androidx.compose.animation.ExperimentalAnimationApi
54
import androidx.compose.runtime.Composable
6-
import androidx.compose.ui.Modifier
75
import androidx.compose.ui.tooling.preview.Preview
8-
import com.techlads.composetv.hero.HeroItem
9-
import com.techlads.composetv.home.carousel.HomeCarousel
6+
import androidx.navigation.NavHostController
7+
import com.google.accompanist.navigation.animation.rememberAnimatedNavController
108

119
@Composable
12-
fun NestedHomeNavigation() {
13-
Column(Modifier.fillMaxSize()) {
14-
HeroItem()
15-
HomeCarousel(Modifier.weight(1f))
16-
}
10+
fun NestedHomeNavigation(navController: NavHostController) {
11+
NestedHomeScreenNavigation(navController)
1712
}
1813

14+
@OptIn(ExperimentalAnimationApi::class)
1915
@Preview
2016
@Composable
2117
fun NestedHomeNavigationPrev() {
22-
NestedHomeNavigation()
18+
NestedHomeNavigation(rememberAnimatedNavController())
2319
}

‎app/src/main/java/com/techlads/composetv/home/navigation/NestedHomeScreenNavigation.kt‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
package com.techlads.composetv.home.navigation
2+
3+
import androidx.compose.animation.ExperimentalAnimationApi
4+
import androidx.compose.runtime.Composable
5+
import androidx.navigation.NavHostController
6+
import com.google.accompanist.navigation.animation.AnimatedNavHost
7+
import com.google.accompanist.navigation.animation.composable
8+
import com.techlads.composetv.favorites.FavoritesScreen
9+
import com.techlads.composetv.home.HomeNestedScreen
10+
import com.techlads.composetv.movies.MoviesScreen
11+
import com.techlads.composetv.navigation.tabEnterTransition
12+
import com.techlads.composetv.navigation.tabExitTransition
13+
import com.techlads.composetv.search.SearchScreen
14+
import com.techlads.composetv.settings.SettingsScreen
15+
import com.techlads.composetv.songs.SongsScreen
16+
17+
@OptIn(ExperimentalAnimationApi::class)
18+
@Composable
19+
fun NestedHomeScreenNavigation(navController: NavHostController) {
20+
AnimatedNavHost(navController = navController, startDestination = NestedScreens.Home.title) {
21+
// e.g will add auth routes here if when we will extend project
22+
composable(
23+
NestedScreens.Home.title,
24+
enterTransition = { tabEnterTransition() },
25+
exitTransition = { tabExitTransition() }) {
26+
HomeNestedScreen()
27+
}
28+
29+
composable(
30+
NestedScreens.Search.title,
31+
enterTransition = { tabEnterTransition() },
32+
exitTransition = { tabExitTransition() }) {
33+
SearchScreen()
34+
}
35+
36+
composable(
37+
NestedScreens.Movies.title,
38+
enterTransition = { tabEnterTransition() },
39+
exitTransition = { tabExitTransition() }) {
40+
MoviesScreen()
41+
}
42+
43+
composable(
44+
NestedScreens.Songs.title,
45+
enterTransition = { tabEnterTransition() },
46+
exitTransition = { tabExitTransition() }) {
47+
SongsScreen()
48+
}
49+
50+
composable(
51+
NestedScreens.Favorites.title,
52+
enterTransition = { tabEnterTransition() },
53+
exitTransition = { tabExitTransition() }) {
54+
FavoritesScreen()
55+
}
56+
57+
composable(
58+
NestedScreens.Settings.title,
59+
enterTransition = { tabEnterTransition() },
60+
exitTransition = { tabExitTransition() }) {
61+
SettingsScreen()
62+
}
63+
}
64+
}

‎app/src/main/java/com/techlads/composetv/home/navigation/NestedScreens.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.techlads.composetv.home.navigation
2+
3+
sealed class NestedScreens(val title: String) {
4+
object Home : NestedScreens("home")
5+
object Search : NestedScreens("search")
6+
object Movies : NestedScreens("movies")
7+
object Songs : NestedScreens("songs")
8+
object Favorites : NestedScreens("favourites")
9+
object Settings : NestedScreens("settings")
10+
}

‎app/src/main/java/com/techlads/composetv/leftmenu/LeftMenu.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import androidx.compose.ui.focus.FocusRequester
1111
import androidx.compose.ui.graphics.Color
1212
import androidx.compose.ui.tooling.preview.Preview
1313
import androidx.compose.ui.unit.dp
14+
import com.techlads.composetv.home.navigation.NestedScreens
1415
import com.techlads.composetv.leftmenu.model.MenuItem
1516
import compose.icons.LineAwesomeIcons
1617
import compose.icons.lineawesomeicons.CogSolid
@@ -63,7 +64,7 @@ fun LeftMenu(
6364
)
6465
Spacer(modifier = Modifier.weight(1f))
6566
LeftMenuItem(
66-
menuItem = MenuItem("", "Settings", LineAwesomeIcons.CogSolid),
67+
menuItem = MenuItem(NestedScreens.Settings.title, "Settings", LineAwesomeIcons.CogSolid),
6768
modifier = Modifier.fillMaxWidth(),
6869
expanded = isExpanded,
6970
onMenuFocused = onMenuFocused,

0 commit comments

Comments
 (0)