robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
feat(ui): remove like count from trending videos (#8689)
* feat(ui): add showLikeCount flag to CompactVideoPostCard
Introduced a showLikeCount flag to control the display of like count in
the CompactVideoPostCard component. The like count is now only shown if
both likeCount > 0 and showLikeCount are true. This allows for more
flexible UI configurations and easier toggling of like count visibility.
* fix(ui): hide gradient shadow when hiding like count
* fix(ui): increase trending video profile pic size from 20 -> 24
* fix(ui): add small drop shadow to trending video profile pic
* fix(ui): a.shadow_sm -> t.atoms.shadow_sm based on PR feedback
+34
-29
+34
-29
src/components/VideoPostCard.tsx
+34
-29
src/components/VideoPostCard.tsx
···
390
390
if (!AppBskyEmbedVideo.isView(embed)) return null
391
391
392
392
const likeCount = post?.likeCount ?? 0
393
+
const showLikeCount = false
393
394
const {thumbnail} = embed
394
395
const black = getBlackColor(t)
395
396
···
475
476
/>
476
477
<MediaInsetBorder />
477
478
478
-
<View style={[a.absolute, a.inset_0]}>
479
+
<View style={[a.absolute, a.inset_0, t.atoms.shadow_sm]}>
479
480
<View style={[a.absolute, a.inset_0, a.p_sm, {bottom: 'auto'}]}>
480
481
<View
481
-
style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
482
+
style={[a.relative, a.rounded_full, {width: 24, height: 24}]}>
482
483
<UserAvatar
483
484
type="user"
484
-
size={20}
485
+
size={24}
485
486
avatar={post.author.avatar}
486
487
/>
487
488
<MediaInsetBorder />
488
489
</View>
489
490
</View>
490
-
<View
491
-
style={[
492
-
a.absolute,
493
-
a.inset_0,
494
-
a.pt_2xl,
495
-
{
496
-
top: 'auto',
497
-
},
498
-
]}>
499
-
<LinearGradient
500
-
colors={[black, 'rgba(0, 0, 0, 0)']}
501
-
locations={[0.02, 1]}
502
-
start={{x: 0, y: 1}}
503
-
end={{x: 0, y: 0}}
504
-
style={[a.absolute, a.inset_0, {opacity: 0.9}]}
505
-
/>
506
491
492
+
{showLikeCount && (
507
493
<View
508
-
style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}>
509
-
{likeCount > 0 && (
510
-
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
511
-
<Heart size="sm" fill="white" />
512
-
<Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
513
-
{formatCount(i18n, likeCount)}
514
-
</Text>
515
-
</View>
516
-
)}
494
+
style={[
495
+
a.absolute,
496
+
a.inset_0,
497
+
a.pt_2xl,
498
+
{
499
+
top: 'auto',
500
+
},
501
+
]}>
502
+
<LinearGradient
503
+
colors={[black, 'rgba(0, 0, 0, 0)']}
504
+
locations={[0.02, 1]}
505
+
start={{x: 0, y: 1}}
506
+
end={{x: 0, y: 0}}
507
+
style={[a.absolute, a.inset_0, {opacity: 0.9}]}
508
+
/>
509
+
510
+
<View
511
+
style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}>
512
+
{likeCount > 0 && (
513
+
<View style={[a.flex_row, a.align_center, a.gap_xs]}>
514
+
<Heart size="sm" fill="white" />
515
+
<Text
516
+
style={[a.text_sm, a.font_bold, {color: 'white'}]}>
517
+
{formatCount(i18n, likeCount)}
518
+
</Text>
519
+
</View>
520
+
)}
521
+
</View>
517
522
</View>
518
-
</View>
523
+
)}
519
524
</View>
520
525
</View>
521
526
</Hider.Content>