[Video] Use same play button for gifs and videos (#5144)
parent
5f5c14d044
commit
6382a91fb0
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
|
@ -8,7 +8,6 @@ import {
|
|||
ViewStyle,
|
||||
} from 'react-native'
|
||||
import {AppBskyEmbedExternal} from '@atproto/api'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
|
@ -22,6 +21,7 @@ import {atoms as a, useTheme} from '#/alf'
|
|||
import {Loader} from '#/components/Loader'
|
||||
import * as Prompt from '#/components/Prompt'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
|
||||
import {GifView} from '../../../../../modules/expo-bluesky-gif-view'
|
||||
import {GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types'
|
||||
|
||||
|
@ -69,24 +69,7 @@ function PlaybackControls({
|
|||
</View>
|
||||
</View>
|
||||
) : !isPlaying ? (
|
||||
<View
|
||||
style={[
|
||||
a.rounded_full,
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
{
|
||||
backgroundColor: t.palette.primary_500,
|
||||
width: 60,
|
||||
height: 60,
|
||||
},
|
||||
]}>
|
||||
<FontAwesomeIcon
|
||||
icon="play"
|
||||
size={42}
|
||||
color="white"
|
||||
style={{marginLeft: 8}}
|
||||
/>
|
||||
</View>
|
||||
<PlayButtonIcon />
|
||||
) : undefined}
|
||||
</Pressable>
|
||||
)
|
||||
|
@ -155,7 +138,6 @@ export function GifEmbed({
|
|||
accessibilityHint={_(msg`Animated GIF`)}
|
||||
accessibilityLabel={parsedAlt.alt}
|
||||
/>
|
||||
|
||||
{!hideAlt && parsedAlt.isPreferred && <AltText text={parsedAlt.alt} />}
|
||||
</View>
|
||||
</View>
|
||||
|
@ -183,7 +165,6 @@ function AltText({text}: {text: string}) {
|
|||
<Trans>ALT</Trans>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Prompt.Outer control={control}>
|
||||
<Prompt.TitleText>
|
||||
<Trans>Alt Text</Trans>
|
||||
|
|
|
@ -8,9 +8,9 @@ import {useLingui} from '@lingui/react'
|
|||
import {clamp} from '#/lib/numbers'
|
||||
import {useGate} from '#/lib/statsig/statsig'
|
||||
import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Button} from '#/components/Button'
|
||||
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
|
||||
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
|
||||
import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army'
|
||||
import {ErrorBoundary} from '../ErrorBoundary'
|
||||
import {useActiveVideoNative} from './ActiveVideoNativeContext'
|
||||
|
@ -18,7 +18,6 @@ import * as VideoFallback from './VideoEmbedInner/VideoFallback'
|
|||
|
||||
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const {activeSource, activeViewId, setActiveSource, player} =
|
||||
useActiveVideoNative()
|
||||
const viewId = useId()
|
||||
|
@ -95,7 +94,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
|||
}}
|
||||
label={_(msg`Play video`)}
|
||||
color="secondary">
|
||||
<PlayIcon width={48} fill={t.palette.white} />
|
||||
<PlayButtonIcon />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
|
Loading…
Reference in New Issue