diff options
| author | Caidan <me@caidan.dev> | 2025-07-22 17:16:07 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-07-22 19:16:07 -0500 |
| commit | bbc39806fe96d15ffe10919108a44f0adb0e2b7e (patch) | |
| tree | a7eb97c3d74420b3a797a4a761b9c320a51225c8 | |
| parent | 9e2b99e86035784eadb237a9af884a9bfcedcce8 (diff) | |
| download | voidsky-bbc39806fe96d15ffe10919108a44f0adb0e2b7e.tar.zst | |
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
| -rw-r--r-- | src/components/VideoPostCard.tsx | 63 |
1 files changed, 34 insertions, 29 deletions
diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index c28adad8b..191c7b82a 100644 --- a/src/components/VideoPostCard.tsx +++ b/src/components/VideoPostCard.tsx @@ -390,6 +390,7 @@ export function CompactVideoPostCard({ if (!AppBskyEmbedVideo.isView(embed)) return null const likeCount = post?.likeCount ?? 0 + const showLikeCount = false const {thumbnail} = embed const black = getBlackColor(t) @@ -475,47 +476,51 @@ export function CompactVideoPostCard({ /> <MediaInsetBorder /> - <View style={[a.absolute, a.inset_0]}> + <View style={[a.absolute, a.inset_0, t.atoms.shadow_sm]}> <View style={[a.absolute, a.inset_0, a.p_sm, {bottom: 'auto'}]}> <View - style={[a.relative, a.rounded_full, {width: 20, height: 20}]}> + style={[a.relative, a.rounded_full, {width: 24, height: 24}]}> <UserAvatar type="user" - size={20} + size={24} avatar={post.author.avatar} /> <MediaInsetBorder /> </View> </View> - <View - style={[ - a.absolute, - a.inset_0, - a.pt_2xl, - { - top: 'auto', - }, - ]}> - <LinearGradient - colors={[black, 'rgba(0, 0, 0, 0)']} - locations={[0.02, 1]} - start={{x: 0, y: 1}} - end={{x: 0, y: 0}} - style={[a.absolute, a.inset_0, {opacity: 0.9}]} - /> + {showLikeCount && ( <View - style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}> - {likeCount > 0 && ( - <View style={[a.flex_row, a.align_center, a.gap_xs]}> - <Heart size="sm" fill="white" /> - <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}> - {formatCount(i18n, likeCount)} - </Text> - </View> - )} + style={[ + a.absolute, + a.inset_0, + a.pt_2xl, + { + top: 'auto', + }, + ]}> + <LinearGradient + colors={[black, 'rgba(0, 0, 0, 0)']} + locations={[0.02, 1]} + start={{x: 0, y: 1}} + end={{x: 0, y: 0}} + style={[a.absolute, a.inset_0, {opacity: 0.9}]} + /> + + <View + style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}> + {likeCount > 0 && ( + <View style={[a.flex_row, a.align_center, a.gap_xs]}> + <Heart size="sm" fill="white" /> + <Text + style={[a.text_sm, a.font_bold, {color: 'white'}]}> + {formatCount(i18n, likeCount)} + </Text> + </View> + )} + </View> </View> - </View> + )} </View> </View> </Hider.Content> |