Skip to content

Commit

Permalink
Merge pull request #20 from UmairKhalid786/develop
Browse files Browse the repository at this point in the history
Movies and Favorites Grid added
  • Loading branch information
UmairKhalid786 authored Mar 27, 2023
2 parents 42f36a8 + 28b27d3 commit 4ba0496
Show file tree
Hide file tree
Showing 16 changed files with 344 additions and 38 deletions.
10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
## Signin with QR code UX
![QR Code](https://user-images.githubusercontent.com/21205138/211226659-249d191c-d930-4dd7-8aa2-e9a0056539c8.png)


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

## Home
## Home - Collapsed
![Screenshot_1679864769](https://user-images.githubusercontent.com/21205138/227805696-bef7d6d9-b275-43cd-891d-d42eb687fdac.png)

## Home - Expandded
![Screenshot_1679864765](https://user-images.githubusercontent.com/21205138/227805700-c5fc5909-3fb9-4fc2-a348-382a792d15c9.png)

## Favorites
![favoritesscreen](https://user-images.githubusercontent.com/21205138/228040345-387ba9be-0792-4e8e-810d-e5ad9b63dcde.png)

## Movies
![MoviesGrid](https://user-images.githubusercontent.com/21205138/228040389-25c4f8c1-b600-411c-9d35-00fb18de8e3e.png)

## Whole Experience
<video src='https://user-images.githubusercontent.com/21205138/227805240-fe0576b8-bdbe-40c9-a623-5a47ce8b420d.mp4' width=180/>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
package com.techlads.composetv.favorites

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.tv.foundation.lazy.grid.TvGridCells
import androidx.tv.foundation.lazy.grid.TvGridItemSpan
import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
import com.techlads.composetv.home.carousel.VerticalCarouselItem

@Composable
fun FavoritesScreen() {
FavoritesGrid(Modifier)
}

@Composable
fun FavoritesGrid(modifier: Modifier) {
TvLazyVerticalGrid(
modifier = modifier,
columns = TvGridCells.Fixed(5),
contentPadding = PaddingValues(start = 24.dp, top = 24.dp, end = 24.dp, bottom = 48.dp)
) {
item(span = {
TvGridItemSpan(5)
}) {
GridHeader()
}
items(30) {
VerticalCarouselItem(parent = 0, child = 0)
}
}
}

@Composable
fun GridHeader() {
Text(
text = "Favorites",
style = MaterialTheme.typography.titleLarge,
modifier = Modifier.padding(bottom = 24.dp, start = 8.dp)
)
}

@Preview
@Composable
fun FavoritesScreenPrev() {
FavoritesScreen()
}

16 changes: 16 additions & 0 deletions app/src/main/java/com/techlads/composetv/home/HomeNestedScreen.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
package com.techlads.composetv.home

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.techlads.composetv.hero.HeroItem
import com.techlads.composetv.home.carousel.HomeCarousel

@Composable
fun HomeNestedScreen(){
Column(Modifier.fillMaxSize()) {
HeroItem()
HomeCarousel(Modifier.weight(1f))
}
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
package com.techlads.composetv.home

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.google.accompanist.navigation.animation.rememberAnimatedNavController
import com.techlads.composetv.home.navigation.NestedHomeNavigation
import com.techlads.composetv.leftmenu.LeftMenu
import com.techlads.composetv.leftmenu.data.MenuData

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun HomeScreenContent() {

val navController = rememberAnimatedNavController()

val isExpanded = remember {
mutableStateOf(false)
}
Expand All @@ -27,9 +33,10 @@ fun HomeScreenContent() {
isExpanded.value = !isExpanded.value && isSelected
}
) {

navController.navigate(it.id)
}
NestedHomeNavigation()

NestedHomeNavigation(navController)
}
}

Expand Down
15 changes: 0 additions & 15 deletions app/src/main/java/com/techlads/composetv/home/MenuData.kt

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,54 @@ fun CarouselItem(parent: Int, child: Int) {
}
}


@Composable
fun VerticalCarouselItem(parent: Int, child: Int) {

var isFocused by remember { mutableStateOf(false) }
val scale = animateFloatAsState(if (isFocused) 1.05f else 1f)


Card(
modifier = Modifier
.zIndex(if (isFocused) 20f else 1f)
.graphicsLayer(
scaleX = scale.value,
scaleY = scale.value
)
.padding(8.dp)
.fillMaxWidth()
.aspectRatio(0.6f)
.onFocusChanged {
isFocused = it.isFocused
}
.border(
border = BorderStroke(
1.dp,
if (isFocused)
Color.LightGray
else
Color.Transparent
), shape = MaterialTheme.shapes.medium
)
.clickable { }
.focusable()
) {
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
Text(text = "Item $parent x $child", textAlign = TextAlign.Center)
}
}
}

@Preview
@Composable
fun CarouselItemPrev() {
CarouselItem(1, 1)
}


@Preview
@Composable
fun VerticalCarouselItemPrev() {
VerticalCarouselItem(1, 1)
}
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
package com.techlads.composetv.home.navigation

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.techlads.composetv.hero.HeroItem
import com.techlads.composetv.home.carousel.HomeCarousel
import androidx.navigation.NavHostController
import com.google.accompanist.navigation.animation.rememberAnimatedNavController

@Composable
fun NestedHomeNavigation() {
Column(Modifier.fillMaxSize()) {
HeroItem()
HomeCarousel(Modifier.weight(1f))
}
fun NestedHomeNavigation(navController: NavHostController) {
NestedHomeScreenNavigation(navController)
}

@OptIn(ExperimentalAnimationApi::class)
@Preview
@Composable
fun NestedHomeNavigationPrev() {
NestedHomeNavigation()
NestedHomeNavigation(rememberAnimatedNavController())
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
package com.techlads.composetv.home.navigation

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import com.google.accompanist.navigation.animation.AnimatedNavHost
import com.google.accompanist.navigation.animation.composable
import com.techlads.composetv.favorites.FavoritesScreen
import com.techlads.composetv.home.HomeNestedScreen
import com.techlads.composetv.movies.MoviesScreen
import com.techlads.composetv.navigation.tabEnterTransition
import com.techlads.composetv.navigation.tabExitTransition
import com.techlads.composetv.search.SearchScreen
import com.techlads.composetv.settings.SettingsScreen
import com.techlads.composetv.songs.SongsScreen

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun NestedHomeScreenNavigation(navController: NavHostController) {
AnimatedNavHost(navController = navController, startDestination = NestedScreens.Home.title) {
// e.g will add auth routes here if when we will extend project
composable(
NestedScreens.Home.title,
enterTransition = { tabEnterTransition() },
exitTransition = { tabExitTransition() }) {
HomeNestedScreen()
}

composable(
NestedScreens.Search.title,
enterTransition = { tabEnterTransition() },
exitTransition = { tabExitTransition() }) {
SearchScreen()
}

composable(
NestedScreens.Movies.title,
enterTransition = { tabEnterTransition() },
exitTransition = { tabExitTransition() }) {
MoviesScreen()
}

composable(
NestedScreens.Songs.title,
enterTransition = { tabEnterTransition() },
exitTransition = { tabExitTransition() }) {
SongsScreen()
}

composable(
NestedScreens.Favorites.title,
enterTransition = { tabEnterTransition() },
exitTransition = { tabExitTransition() }) {
FavoritesScreen()
}

composable(
NestedScreens.Settings.title,
enterTransition = { tabEnterTransition() },
exitTransition = { tabExitTransition() }) {
SettingsScreen()
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
package com.techlads.composetv.home.navigation

sealed class NestedScreens(val title: String) {
object Home : NestedScreens("home")
object Search : NestedScreens("search")
object Movies : NestedScreens("movies")
object Songs : NestedScreens("songs")
object Favorites : NestedScreens("favourites")
object Settings : NestedScreens("settings")
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.techlads.composetv.home.navigation.NestedScreens
import com.techlads.composetv.leftmenu.model.MenuItem
import compose.icons.LineAwesomeIcons
import compose.icons.lineawesomeicons.CogSolid
Expand Down Expand Up @@ -63,7 +64,7 @@ fun LeftMenu(
)
Spacer(modifier = Modifier.weight(1f))
LeftMenuItem(
menuItem = MenuItem("", "Settings", LineAwesomeIcons.CogSolid),
menuItem = MenuItem(NestedScreens.Settings.title, "Settings", LineAwesomeIcons.CogSolid),
modifier = Modifier.fillMaxWidth(),
expanded = isExpanded,
onMenuFocused = onMenuFocused,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
package com.techlads.composetv.leftmenu.data

import com.techlads.composetv.home.navigation.NestedScreens.*
import com.techlads.composetv.leftmenu.model.MenuItem
import compose.icons.LineAwesomeIcons
import compose.icons.lineawesomeicons.*

object MenuData {
val menuItems = listOf(
MenuItem("", "Home", LineAwesomeIcons.HomeSolid),
MenuItem("", "Search", LineAwesomeIcons.SearchSolid),
MenuItem("", "Movies", LineAwesomeIcons.VideoSolid),
MenuItem("", "Songs", LineAwesomeIcons.MusicSolid),
MenuItem("", "Favorites", LineAwesomeIcons.HeartSolid),
MenuItem(Home.title, "Home", LineAwesomeIcons.HomeSolid),
MenuItem(Search.title, "Search", LineAwesomeIcons.SearchSolid),
MenuItem(Movies.title, "Movies", LineAwesomeIcons.VideoSolid),
MenuItem(Songs.title, "Songs", LineAwesomeIcons.MusicSolid),
MenuItem(Favorites.title, "Favorites", LineAwesomeIcons.HeartSolid),
)
}
Loading

0 comments on commit 4ba0496

Please sign in to comment.