Skip to content

Commit 69b80f3

Browse files
UmairKhalid786UmairKhalid786
authored
Merge pull request #36 from UmairKhalid786/develop
Songs section added
2 parents 992ce7b + 6edbd33 commit 69b80f3

File tree

8 files changed

+219
-26
lines changed

8 files changed

+219
-26
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,9 @@
2727
## Movies
2828
![MoviesGrid](https://user-images.githubusercontent.com/21205138/228040389-25c4f8c1-b600-411c-9d35-00fb18de8e3e.png)
2929

30+
## Songs
31+
![songs](https://user-images.githubusercontent.com/21205138/232351274-d5c47060-d876-4d11-b993-d66184be44fe.png)
32+
33+
3034
## Whole Experience
3135
<video src='https://user-images.githubusercontent.com/21205138/227805240-fe0576b8-bdbe-40c9-a623-5a47ce8b420d.mp4' width=180/>

‎app/src/main/java/com/techlads/composetv/hero/HeroItem.kt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ package com.techlads.composetv.hero
33
import androidx.compose.foundation.Image
44
import androidx.compose.foundation.background
55
import androidx.compose.foundation.layout.*
6-
import androidx.compose.material3.*
6+
import androidx.compose.material3.Card
7+
import androidx.compose.material3.CardDefaults
8+
import androidx.tv.material3.Text
79
import androidx.compose.runtime.Composable
810
import androidx.compose.ui.Modifier
911
import androidx.compose.ui.graphics.Color
@@ -12,6 +14,7 @@ import androidx.compose.ui.res.painterResource
1214
import androidx.compose.ui.text.font.FontWeight
1315
import androidx.compose.ui.tooling.preview.Preview
1416
import androidx.compose.ui.unit.dp
17+
import androidx.tv.material3.MaterialTheme
1518
import com.techlads.composetv.R
1619

1720
@Composable
@@ -44,8 +47,6 @@ fun HeroItem(modifier: Modifier = Modifier) {
4447
)
4548
}
4649
}
47-
48-
4950
}
5051
}
5152

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import com.techlads.composetv.login.withEmailPassword.LoginScreen
1818
@OptIn(ExperimentalAnimationApi::class)
1919
@Composable
2020
fun AppNavigation(navController: NavHostController, viewModel: HomeViewModel) {
21-
AnimatedNavHost(navController = navController, startDestination = Screens.LoginToken.title) {
21+
AnimatedNavHost(navController = navController, startDestination = Screens.Home.title) {
2222
// e.g will add auth routes here if when we will extend project
2323
composable(
2424
Screens.Login.title,

‎app/src/main/java/com/techlads/composetv/settings/screens/profile/ProfileScreen.kt‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,34 +29,34 @@ fun ProfileScreen() {
2929
@Composable
3030
fun ProfilesContent() {
3131
Column {
32-
3332
Row(verticalAlignment = Alignment.CenterVertically) {
34-
Image(
35-
modifier = Modifier
36-
.size(100.dp)
37-
.clip(CircleShape)
38-
.shadow(elevation = 12.dp, shape = CircleShape, clip = true)
39-
.border(2.dp, LocalContentColor.current, CircleShape),
40-
painter = painterResource(id = R.drawable.profile),
41-
contentDescription = "User profile"
42-
)
33+
ProfilePicture()
4334
Spacer(modifier = Modifier.size(20.dp))
4435
UserDetails()
4536
}
4637
Spacer(modifier = Modifier.size(5.dp))
4738
Row {
4839
Spacer(modifier = Modifier.size(120.dp))
49-
Button(text = "Save") {
50-
51-
}
40+
Button(text = "Save") {}
5241
Spacer(modifier = Modifier.size(8.dp))
53-
Button(text = "Cancel") {
54-
55-
}
42+
Button(text = "Cancel") {}
5643
}
5744
}
5845
}
5946

47+
@Composable
48+
fun ProfilePicture() {
49+
Image(
50+
modifier = Modifier
51+
.size(100.dp)
52+
.clip(CircleShape)
53+
.shadow(elevation = 12.dp, shape = CircleShape, clip = true)
54+
.border(2.dp, LocalContentColor.current, CircleShape),
55+
painter = painterResource(id = R.drawable.profile),
56+
contentDescription = "User profile"
57+
)
58+
}
59+
6060
@Composable
6161
fun UserDetails() {
6262
Column {

‎app/src/main/java/com/techlads/composetv/songs/SongsScreen.kt‎

Lines changed: 124 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,141 @@
11
package com.techlads.composetv.songs
22

3-
import androidx.compose.foundation.layout.Box
4-
import androidx.compose.foundation.layout.fillMaxSize
5-
import androidx.tv.material3.Text
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.layout.*
66
import androidx.compose.runtime.Composable
77
import androidx.compose.ui.Alignment
88
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.draw.clipToBounds
10+
import androidx.compose.ui.res.painterResource
911
import androidx.compose.ui.tooling.preview.Preview
12+
import androidx.compose.ui.unit.dp
13+
import androidx.tv.foundation.lazy.grid.TvGridCells
14+
import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
15+
import androidx.tv.foundation.lazy.list.TvLazyRow
16+
import androidx.tv.material3.MaterialTheme
17+
import androidx.tv.material3.Text
18+
import com.techlads.composetv.R
19+
import com.techlads.composetv.songs.data.SongsTagsData.generateRandomColor
20+
import com.techlads.composetv.widgets.TransparentBorderedFocusableItem
1021

1122
@Composable
12-
fun SongsScreen(){
13-
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
14-
Text(text = "Songs")
23+
fun SongsScreen() {
24+
Column(Modifier.fillMaxSize()) {
25+
SongCategories(Modifier.weight(0.8f))
26+
RecentHistory(Modifier.weight(1.2f))
1527
}
1628
}
1729

30+
@Composable
31+
fun RecentHistory(modifier: Modifier = Modifier) {
32+
Column(modifier) {
33+
Text(
34+
text = "Recent Songs",
35+
style = MaterialTheme.typography.titleMedium,
36+
modifier = Modifier.padding(horizontal = 32.dp)
37+
)
38+
TvLazyRow(contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp)) {
39+
items(12) {
40+
TransparentBorderedFocusableItem(onClick = {}, Modifier.padding(4.dp)) {
41+
SongItem(it)
42+
}
43+
}
44+
}
45+
}
46+
}
47+
48+
@Composable
49+
fun SongCategories(modifier: Modifier = Modifier) {
50+
Column(
51+
modifier
52+
.fillMaxWidth()
53+
.clipToBounds()) {
54+
SongsHomeGreeting()
55+
Spacer(modifier = Modifier.height(8.dp))
56+
TagsList()
57+
}
58+
}
59+
60+
@Composable
61+
fun TagsList(modifier: Modifier = Modifier) {
62+
TvLazyVerticalGrid(
63+
contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp),
64+
columns = TvGridCells.Fixed(3),
65+
modifier = modifier
66+
.fillMaxSize()
67+
) {
68+
items(6) {
69+
TransparentBorderedFocusableItem(onClick = {}, Modifier.padding(4.dp)) {
70+
TagItem(it)
71+
}
72+
}
73+
}
74+
}
75+
76+
@Composable
77+
fun TagItem(it: Int) {
78+
Row(
79+
Modifier
80+
.fillMaxWidth()
81+
.background(generateRandomColor()),
82+
verticalAlignment = Alignment.CenterVertically
83+
) {
84+
Image(
85+
painter = painterResource(id = R.drawable.song),
86+
contentDescription = "Song image",
87+
modifier = Modifier.size(50.dp)
88+
)
89+
Text(text = "Song item $it",
90+
Modifier
91+
.weight(1f)
92+
.padding(horizontal = 16.dp)
93+
.fillMaxWidth()
94+
)
95+
}
96+
}
97+
98+
@Composable
99+
fun SongItem(it: Int) {
100+
Column(
101+
Modifier
102+
.width(150.dp)
103+
.wrapContentHeight()
104+
.background(generateRandomColor())
105+
) {
106+
Image(
107+
painter = painterResource(id = R.drawable.song),
108+
contentDescription = "Song image",
109+
Modifier.fillMaxWidth()
110+
)
111+
Text(
112+
text = "Song item $it",
113+
Modifier
114+
.padding(16.dp)
115+
)
116+
}
117+
}
118+
119+
@Composable
120+
fun SongsHomeGreeting() {
121+
Text(text = "Good Morning", style = MaterialTheme.typography.titleLarge, modifier = Modifier.padding(start = 32.dp, top = 32.dp))
122+
}
123+
18124

19125
@Preview
20126
@Composable
21127
fun SongsScreenPrev() {
22128
SongsScreen()
129+
}
130+
131+
@Preview
132+
@Composable
133+
fun SongItemPrev() {
134+
SongItem(1)
135+
}
136+
137+
@Preview
138+
@Composable
139+
fun TagItemPrev() {
140+
TagItem(1)
23141
}

‎app/src/main/java/com/techlads/composetv/songs/data/SongsTagsData.kt‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
package com.techlads.composetv.songs.data
2+
3+
import androidx.compose.ui.graphics.Color
4+
import java.util.*
5+
6+
object SongsTagsData {
7+
fun generateRandomColor() : Color {
8+
val rnd = Random()
9+
return Color(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256))
10+
}
11+
}

‎app/src/main/java/com/techlads/composetv/widgets/TransparentBorderedFocusableItem.kt‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
package com.techlads.composetv.widgets
2+
3+
import androidx.compose.foundation.BorderStroke
4+
import androidx.compose.foundation.layout.BoxScope
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.shape.RoundedCornerShape
7+
import androidx.compose.material3.MaterialTheme.colorScheme
8+
import androidx.compose.runtime.Composable
9+
import androidx.compose.ui.Modifier
10+
import androidx.compose.ui.graphics.Color
11+
import androidx.compose.ui.tooling.preview.Preview
12+
import androidx.compose.ui.unit.dp
13+
import androidx.tv.material3.*
14+
15+
@OptIn(ExperimentalTvMaterial3Api::class)
16+
@Composable
17+
fun TransparentBorderedFocusableItem(
18+
onClick: () -> Unit,
19+
modifier: Modifier = Modifier,
20+
content: @Composable (BoxScope.() -> Unit)
21+
) {
22+
Surface(
23+
onClick = { onClick() },
24+
scale = ClickableSurfaceDefaults.scale(focusedScale = 1.2f),
25+
color = ClickableSurfaceDefaults.color(
26+
color = Color.Transparent,
27+
focusedColor = Color.Transparent
28+
),
29+
contentColor = ClickableSurfaceDefaults.contentColor(
30+
color = colorScheme.surface,
31+
focusedColor = colorScheme.surface
32+
),
33+
border = ClickableSurfaceDefaults.border(
34+
focusedBorder = Border(
35+
BorderStroke(
36+
width = 2.dp,
37+
color = colorScheme.surface
38+
),
39+
shape = RoundedCornerShape(2.dp)
40+
)
41+
),
42+
shape = ClickableSurfaceDefaults.shape(
43+
shape = RoundedCornerShape(2.dp),
44+
focusedShape = RoundedCornerShape(2.dp)
45+
),
46+
modifier = modifier
47+
.fillMaxWidth()
48+
) {
49+
content()
50+
}
51+
}
52+
53+
@Preview
54+
@Composable
55+
private fun BorderedFocusableItemPrev() {
56+
TransparentBorderedFocusableItem(onClick = {}) {
57+
Text(text = "Preview Text")
58+
}
59+
}

‎app/src/main/res/drawable/song.png‎

99.6 KB
Loading

0 commit comments

Comments
 (0)