Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

authored by

Hailey and committed by
GitHub
6382a91f 5f5c14d0

+36 -28
+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
··· 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
··· 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
··· 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 )}