Skip to content

Commit e6b1341

Browse files
StypoxStypox
committed
Improve Comment layout
1 parent 36ede24 commit e6b1341

1 file changed

Lines changed: 103 additions & 33 deletions

File tree

  • app/src/main/java/org/schabi/newpipe/ui/components/video/comment

‎app/src/main/java/org/schabi/newpipe/ui/components/video/comment/Comment.kt‎

Lines changed: 103 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
1515
import androidx.compose.foundation.layout.padding
1616
import androidx.compose.foundation.layout.size
1717
import androidx.compose.foundation.shape.CircleShape
18+
import androidx.compose.material3.LocalMinimumInteractiveComponentSize
1819
import androidx.compose.material3.MaterialTheme
1920
import androidx.compose.material3.Surface
2021
import androidx.compose.material3.Text
2122
import androidx.compose.material3.TextButton
2223
import androidx.compose.runtime.Composable
24+
import androidx.compose.runtime.CompositionLocalProvider
2325
import androidx.compose.runtime.getValue
2426
import androidx.compose.runtime.mutableStateOf
2527
import androidx.compose.runtime.remember
@@ -36,7 +38,7 @@ import androidx.compose.ui.res.stringResource
3638
import androidx.compose.ui.text.style.TextOverflow
3739
import androidx.compose.ui.tooling.preview.Preview
3840
import androidx.compose.ui.tooling.preview.PreviewParameter
39-
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
41+
import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
4042
import androidx.compose.ui.unit.dp
4143
import coil.compose.AsyncImage
4244
import org.schabi.newpipe.R
@@ -71,7 +73,7 @@ fun Comment(comment: CommentsInfoItem) {
7173
},
7274
onClick = { isExpanded = !isExpanded }
7375
)
74-
.padding(8.dp),
76+
.padding(start = 8.dp, top = 10.dp, end = 8.dp, bottom = 4.dp),
7577
horizontalArrangement = Arrangement.spacedBy(8.dp)
7678
) {
7779
AsyncImage(
@@ -80,19 +82,23 @@ fun Comment(comment: CommentsInfoItem) {
8082
placeholder = painterResource(R.drawable.placeholder_person),
8183
error = painterResource(R.drawable.placeholder_person),
8284
modifier = Modifier
85+
.padding(vertical = 4.dp)
8386
.size(42.dp)
8487
.clip(CircleShape)
8588
.clickable {
8689
NavigationHelper.openCommentAuthorIfPresent(context, comment)
8790
}
8891
)
8992

90-
Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
91-
Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
93+
Column {
94+
Row(verticalAlignment = Alignment.CenterVertically) {
9295
if (comment.isPinned) {
9396
Image(
9497
painter = painterResource(R.drawable.ic_pin),
95-
contentDescription = stringResource(R.string.detail_pinned_comment_view_description)
98+
contentDescription = stringResource(R.string.detail_pinned_comment_view_description),
99+
modifier = Modifier
100+
.padding(start = 1.dp, end = 4.dp)
101+
.size(20.dp)
96102
)
97103
}
98104

@@ -102,7 +108,12 @@ fun Comment(comment: CommentsInfoItem) {
102108
)
103109
Localization.concatenateStrings(comment.uploaderName, date)
104110
}
105-
Text(text = nameAndDate, color = MaterialTheme.colorScheme.secondary)
111+
Text(
112+
text = nameAndDate,
113+
style = MaterialTheme.typography.titleSmall,
114+
maxLines = 1,
115+
overflow = TextOverflow.Ellipsis,
116+
)
106117
}
107118

108119
Text(
@@ -111,35 +122,56 @@ fun Comment(comment: CommentsInfoItem) {
111122
// otherwise we only display the first two lines
112123
maxLines = if (isExpanded) Int.MAX_VALUE else 2,
113124
overflow = TextOverflow.Ellipsis,
114-
style = MaterialTheme.typography.bodyMedium
125+
style = MaterialTheme.typography.bodyMedium,
126+
modifier = Modifier.padding(top = 6.dp)
115127
)
116128

117129
Row(
118130
modifier = Modifier.fillMaxWidth(),
119131
horizontalArrangement = Arrangement.SpaceBetween,
120-
verticalAlignment = Alignment.CenterVertically
132+
verticalAlignment = Alignment.CenterVertically,
121133
) {
122-
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
134+
Row(
135+
verticalAlignment = Alignment.CenterVertically,
136+
modifier = Modifier.padding(start = 1.dp, top = 6.dp, end = 4.dp, bottom = 6.dp)
137+
) {
123138
Image(
124139
painter = painterResource(R.drawable.ic_thumb_up),
125-
contentDescription = stringResource(R.string.detail_likes_img_view_description)
140+
contentDescription = stringResource(R.string.detail_likes_img_view_description),
141+
modifier = Modifier
142+
.padding(end = 4.dp)
143+
.size(20.dp),
144+
)
145+
Text(
146+
text = Localization.likeCount(context, comment.likeCount),
147+
maxLines = 1,
148+
style = MaterialTheme.typography.labelMedium,
126149
)
127-
Text(text = Localization.likeCount(context, comment.likeCount))
128150

129151
if (comment.isHeartedByUploader) {
130152
Image(
131153
painter = painterResource(R.drawable.ic_heart),
132-
contentDescription = stringResource(R.string.detail_heart_img_view_description)
154+
contentDescription = stringResource(R.string.detail_heart_img_view_description),
155+
modifier = Modifier
156+
.padding(start = 8.dp)
157+
.size(20.dp),
133158
)
134159
}
135160
}
136161

137162
if (comment.replies != null) {
138-
TextButton(onClick = { showReplies = true }) {
139-
val text = pluralStringResource(
140-
R.plurals.replies, comment.replyCount, comment.replyCount.toString()
141-
)
142-
Text(text = text)
163+
// reduce LocalMinimumInteractiveComponentSize from 48dp to 44dp to slightly
164+
// reduce the button margin (which is still clickable but not visible)
165+
CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 44.dp) {
166+
TextButton(
167+
onClick = { showReplies = true },
168+
modifier = Modifier.padding(end = 2.dp)
169+
) {
170+
val text = pluralStringResource(
171+
R.plurals.replies, comment.replyCount, comment.replyCount.toString()
172+
)
173+
Text(text = text)
174+
}
143175
}
144176
}
145177
}
@@ -174,32 +206,70 @@ fun CommentsInfoItem(
174206
this.replyCount = replyCount
175207
}
176208

177-
private class DescriptionPreviewProvider : PreviewParameterProvider<Description> {
178-
override val values = sequenceOf(
179-
Description("Hello world!<br><br>This line should be hidden by default.", Description.HTML),
180-
Description("Hello world!\n\nThis line should be hidden by default.", Description.PLAIN_TEXT),
209+
private class CommentPreviewProvider : CollectionPreviewParameterProvider<CommentsInfoItem>(
210+
listOf(
211+
CommentsInfoItem(
212+
commentText = Description("Hello world!\n\nThis line should be hidden by default.", Description.PLAIN_TEXT),
213+
uploaderName = "Test",
214+
likeCount = 100,
215+
isPinned = false,
216+
isHeartedByUploader = true,
217+
replies = null,
218+
replyCount = 0
219+
),
220+
CommentsInfoItem(
221+
commentText = Description("Hello world, long long long text lorem ipsum dolor sit amet!<br><br>This line should be hidden by default.", Description.HTML),
222+
uploaderName = "Test",
223+
likeCount = 92847,
224+
isPinned = true,
225+
isHeartedByUploader = false,
226+
replies = Page(""),
227+
replyCount = 10
228+
),
229+
CommentsInfoItem(
230+
commentText = Description("Hello world, long long long text lorem ipsum dolor sit amet!<br><br>This line should be hidden by default.", Description.HTML),
231+
uploaderName = "Test really long long long long lorem ipsum dolor sit amet consectetur",
232+
likeCount = 92847,
233+
isPinned = true,
234+
isHeartedByUploader = true,
235+
replies = null,
236+
replyCount = 0
237+
),
238+
CommentsInfoItem(
239+
commentText = Description("Short comment", Description.HTML),
240+
uploaderName = "Test really long long long long lorem ipsum dolor sit amet consectetur",
241+
likeCount = 92847,
242+
isPinned = false,
243+
isHeartedByUploader = false,
244+
replies = Page(""),
245+
replyCount = 4283
246+
),
181247
)
182-
}
248+
)
183249

184250
@Preview(name = "Light mode", uiMode = Configuration.UI_MODE_NIGHT_NO)
185251
@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES)
186252
@Composable
187253
private fun CommentPreview(
188-
@PreviewParameter(DescriptionPreviewProvider::class) description: Description
254+
@PreviewParameter(CommentPreviewProvider::class) commentsInfoItem: CommentsInfoItem
189255
) {
190-
val comment = CommentsInfoItem(
191-
commentText = description,
192-
uploaderName = "Test",
193-
likeCount = 100,
194-
isPinned = true,
195-
isHeartedByUploader = true,
196-
replies = Page(""),
197-
replyCount = 10
198-
)
256+
AppTheme {
257+
Surface(color = MaterialTheme.colorScheme.background) {
258+
Comment(commentsInfoItem)
259+
}
260+
}
261+
}
199262

263+
@Preview
264+
@Composable
265+
private fun CommentListPreview() {
200266
AppTheme {
201267
Surface(color = MaterialTheme.colorScheme.background) {
202-
Comment(comment)
268+
Column {
269+
for (comment in CommentPreviewProvider().values) {
270+
Comment(comment)
271+
}
272+
}
203273
}
204274
}
205275
}

0 commit comments

Comments
 (0)