zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[Video] Use same play button for gifs and videos (#5144)

Browse source
This commit is contained in:
Hailey 2024-09-04 10:59:06 -07:00 • committed by GitHub
parent 5f5c14d044
commit 6382a91fb0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 36 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/MediaPreview.tsx
View file

@ -11,8 +11,8 @@ import {Trans} from '@lingui/macro'
import {parseTenorGif} from '#/lib/strings/embed-player'
import {atoms as a} from '#/alf'
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
import {Text} from '#/components/Typography'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
/**
* Streamlined MediaPreview component which just handles images, gifs, and videos
@ -111,6 +111,9 @@ export function ImageItem({
export function GifItem({thumbnail, alt}: {thumbnail: string; alt?: string}) {
return (
<ImageItem thumbnail={thumbnail} alt={alt}>
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
<PlayButtonIcon size={24} />
</View>
<View style={styles.altContainer}>
<Text style={styles.alt}>
<Trans>GIF</Trans>
@ -137,14 +140,14 @@ export function VideoItem({
a.justify_center,
a.align_center,
]}>
<PlayIcon size="xl" fill="white" />
<PlayButtonIcon size={24} />
</View>
)
}
return (
<ImageItem thumbnail={thumbnail} alt={alt}>
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
<PlayIcon size="xl" fill="white" />
<PlayButtonIcon size={24} />
</View>
</ImageItem>
)

25
src/components/video/PlayButtonIcon.tsx Normal file
View file

@ -0,0 +1,25 @@
import React from 'react'
import {View} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
export function PlayButtonIcon({size = 44}: {size?: number}) {
const t = useTheme()
return (
<View
style={[
a.rounded_full,
a.align_center,
a.justify_center,
{
backgroundColor: t.palette.primary_500,
width: size + 16,
height: size + 16,
},
]}>
<PlayIcon height={size} width={size} style={{color: 'white'}} />
</View>
)
}