forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Use same play button for gifs and videos (#5144)
+36
-28
+6
-3
src/components/MediaPreview.tsx
+6
-3
src/components/MediaPreview.tsx
···
11
11
12
12
import {parseTenorGif} from '#/lib/strings/embed-player'
13
13
import {atoms as a} from '#/alf'
14
-
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
15
14
import {Text} from '#/components/Typography'
15
+
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
16
16
17
17
/**
18
18
* Streamlined MediaPreview component which just handles images, gifs, and videos
···
111
111
export function GifItem({thumbnail, alt}: {thumbnail: string; alt?: string}) {
112
112
return (
113
113
<ImageItem thumbnail={thumbnail} alt={alt}>
114
+
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
115
+
<PlayButtonIcon size={24} />
116
+
</View>
114
117
<View style={styles.altContainer}>
115
118
<Text style={styles.alt}>
116
119
<Trans>GIF</Trans>
···
137
140
a.justify_center,
138
141
a.align_center,
139
142
]}>
140
-
<PlayIcon size="xl" fill="white" />
143
+
<PlayButtonIcon size={24} />
141
144
</View>
142
145
)
143
146
}
144
147
return (
145
148
<ImageItem thumbnail={thumbnail} alt={alt}>
146
149
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
147
-
<PlayIcon size="xl" fill="white" />
150
+
<PlayButtonIcon size={24} />
148
151
</View>
149
152
</ImageItem>
150
153
)
+25
src/components/video/PlayButtonIcon.tsx
+25
src/components/video/PlayButtonIcon.tsx
···
1
+
import React from 'react'
2
+
import {View} from 'react-native'
3
+
4
+
import {atoms as a, useTheme} from '#/alf'
5
+
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
6
+
7
+
export function PlayButtonIcon({size = 44}: {size?: number}) {
8
+
const t = useTheme()
9
+
10
+
return (
11
+
<View
12
+
style={[
13
+
a.rounded_full,
14
+
a.align_center,
15
+
a.justify_center,
16
+
{
17
+
backgroundColor: t.palette.primary_500,
18
+
width: size + 16,
19
+
height: size + 16,
20
+
},
21
+
]}>
22
+
<PlayIcon height={size} width={size} style={{color: 'white'}} />
23
+
</View>
24
+
)
25
+
}
+2
-21
src/view/com/util/post-embeds/GifEmbed.tsx
+2
-21
src/view/com/util/post-embeds/GifEmbed.tsx
···
8
8
ViewStyle,
9
9
} from 'react-native'
10
10
import {AppBskyEmbedExternal} from '@atproto/api'
11
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
12
11
import {msg, Trans} from '@lingui/macro'
13
12
import {useLingui} from '@lingui/react'
14
13
···
22
21
import {Loader} from '#/components/Loader'
23
22
import * as Prompt from '#/components/Prompt'
24
23
import {Text} from '#/components/Typography'
24
+
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
25
25
import {GifView} from '../../../../../modules/expo-bluesky-gif-view'
26
26
import {GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types'
27
27
···
69
69
</View>
70
70
</View>
71
71
) : !isPlaying ? (
72
-
<View
73
-
style={[
74
-
a.rounded_full,
75
-
a.align_center,
76
-
a.justify_center,
77
-
{
78
-
backgroundColor: t.palette.primary_500,
79
-
width: 60,
80
-
height: 60,
81
-
},
82
-
]}>
83
-
<FontAwesomeIcon
84
-
icon="play"
85
-
size={42}
86
-
color="white"
87
-
style={{marginLeft: 8}}
88
-
/>
89
-
</View>
72
+
<PlayButtonIcon />
90
73
) : undefined}
91
74
</Pressable>
92
75
)
···
155
138
accessibilityHint={_(msg`Animated GIF`)}
156
139
accessibilityLabel={parsedAlt.alt}
157
140
/>
158
-
159
141
{!hideAlt && parsedAlt.isPreferred && <AltText text={parsedAlt.alt} />}
160
142
</View>
161
143
</View>
···
183
165
<Trans>ALT</Trans>
184
166
</Text>
185
167
</TouchableOpacity>
186
-
187
168
<Prompt.Outer control={control}>
188
169
<Prompt.TitleText>
189
170
<Trans>Alt Text</Trans>
+3
-4
src/view/com/util/post-embeds/VideoEmbed.tsx
+3
-4
src/view/com/util/post-embeds/VideoEmbed.tsx
···
8
8
import {clamp} from '#/lib/numbers'
9
9
import {useGate} from '#/lib/statsig/statsig'
10
10
import {VideoEmbedInnerNative} from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative'
11
-
import {atoms as a, useTheme} from '#/alf'
11
+
import {atoms as a} from '#/alf'
12
12
import {Button} from '#/components/Button'
13
-
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
13
+
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
14
14
import {VisibilityView} from '../../../../../modules/expo-bluesky-swiss-army'
15
15
import {ErrorBoundary} from '../ErrorBoundary'
16
16
import {useActiveVideoNative} from './ActiveVideoNativeContext'
···
18
18
19
19
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
20
20
const {_} = useLingui()
21
-
const t = useTheme()
22
21
const {activeSource, activeViewId, setActiveSource, player} =
23
22
useActiveVideoNative()
24
23
const viewId = useId()
···
95
94
}}
96
95
label={_(msg`Play video`)}
97
96
color="secondary">
98
-
<PlayIcon width={48} fill={t.palette.white} />
97
+
<PlayButtonIcon />
99
98
</Button>
100
99
</>
101
100
)}