Redesign play button (#5192)
parent
cd9c3bf498
commit
c5faa60344
|
@ -2,24 +2,47 @@ 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'
|
||||
import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
|
||||
|
||||
export function PlayButtonIcon({size = 44}: {size?: number}) {
|
||||
export function PlayButtonIcon({size = 36}: {size?: number}) {
|
||||
const t = useTheme()
|
||||
const bg = t.name === 'light' ? t.palette.contrast_25 : t.palette.contrast_975
|
||||
const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.rounded_full,
|
||||
a.overflow_hidden,
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
t.atoms.shadow_lg,
|
||||
{
|
||||
backgroundColor: t.palette.primary_500,
|
||||
width: size + 16,
|
||||
height: size + 16,
|
||||
width: size + size / 1.5,
|
||||
height: size + size / 1.5,
|
||||
},
|
||||
]}>
|
||||
<PlayIcon height={size} width={size} style={{color: 'white'}} />
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.inset_0,
|
||||
{
|
||||
backgroundColor: bg,
|
||||
opacity: 0.7,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<PlayIcon
|
||||
width={size}
|
||||
fill={fg}
|
||||
style={[
|
||||
a.relative,
|
||||
a.z_10,
|
||||
{
|
||||
left: size / 50,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -60,7 +60,7 @@ export function VideoPreview({
|
|||
<ExternalEmbedRemoveBtn onRemove={clear} />
|
||||
{autoplayDisabled && (
|
||||
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
||||
<PlayButtonIcon size={48} />
|
||||
<PlayButtonIcon />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
|
|
@ -83,7 +83,7 @@ export function VideoPreview({
|
|||
/>
|
||||
{autoplayDisabled && (
|
||||
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
||||
<PlayButtonIcon size={48} />
|
||||
<PlayButtonIcon />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
|
Loading…
Reference in New Issue