Redesign play button (#5192)
parent
cd9c3bf498
commit
c5faa60344
|
@ -2,24 +2,47 @@ import React from 'react'
|
||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
|
|
||||||
import {atoms as a, useTheme} from '#/alf'
|
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 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 (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={[
|
||||||
a.rounded_full,
|
a.rounded_full,
|
||||||
|
a.overflow_hidden,
|
||||||
a.align_center,
|
a.align_center,
|
||||||
a.justify_center,
|
a.justify_center,
|
||||||
|
t.atoms.shadow_lg,
|
||||||
{
|
{
|
||||||
backgroundColor: t.palette.primary_500,
|
width: size + size / 1.5,
|
||||||
width: size + 16,
|
height: size + size / 1.5,
|
||||||
height: size + 16,
|
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
<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>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,7 +60,7 @@ export function VideoPreview({
|
||||||
<ExternalEmbedRemoveBtn onRemove={clear} />
|
<ExternalEmbedRemoveBtn onRemove={clear} />
|
||||||
{autoplayDisabled && (
|
{autoplayDisabled && (
|
||||||
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
||||||
<PlayButtonIcon size={48} />
|
<PlayButtonIcon />
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -83,7 +83,7 @@ export function VideoPreview({
|
||||||
/>
|
/>
|
||||||
{autoplayDisabled && (
|
{autoplayDisabled && (
|
||||||
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
||||||
<PlayButtonIcon size={48} />
|
<PlayButtonIcon />
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
|
Loading…
Reference in New Issue