Bluesky app fork with some witchin' additions 💫

Hack-modify avi path to use smaller thumbs behind gate (#4816)

* Hack-modify avi path to use smaller thumbs behind gate

* Only use small thumbs on smaller rendering

authored by

Paul Frazee and committed by
GitHub
4af6bcb1 67ce18a1

+25 -2
+1
src/lib/statsig/gates.ts
··· 14 14 | 'suggested_follows_interstitial' 15 15 | 'ungroup_follow_backs' 16 16 | 'videos' 17 + | 'small_avi_thumb'
+24 -2
src/view/com/util/UserAvatar.tsx
··· 8 8 import {useLingui} from '@lingui/react' 9 9 import {useQueryClient} from '@tanstack/react-query' 10 10 11 + import {useGate} from '#/lib/statsig/statsig' 11 12 import {logger} from '#/logger' 12 13 import {usePalette} from 'lib/hooks/usePalette' 13 14 import { ··· 179 180 const pal = usePalette('default') 180 181 const backgroundColor = pal.colors.backgroundLight 181 182 const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square') 183 + const gate = useGate() 182 184 183 185 const aviStyle = useMemo(() => { 184 186 if (finalShape === 'square') { ··· 221 223 testID="userAvatarImage" 222 224 style={aviStyle} 223 225 resizeMode="cover" 224 - source={{uri: avatar}} 226 + source={{ 227 + uri: hackModifyThumbnailPath( 228 + avatar, 229 + size < 90 && gate('small_avi_thumb'), 230 + ), 231 + }} 225 232 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} 226 233 /> 227 234 ) : ( ··· 229 236 testID="userAvatarImage" 230 237 style={aviStyle} 231 238 contentFit="cover" 232 - source={{uri: avatar}} 239 + source={{ 240 + uri: hackModifyThumbnailPath( 241 + avatar, 242 + size < 90 && gate('small_avi_thumb'), 243 + ), 244 + }} 233 245 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} 234 246 /> 235 247 )} ··· 432 444 } 433 445 PreviewableUserAvatar = memo(PreviewableUserAvatar) 434 446 export {PreviewableUserAvatar} 447 + 448 + // HACK 449 + // We have started serving smaller avis but haven't updated lexicons to give the data properly 450 + // manually string-replace to use the smaller ones 451 + // -prf 452 + function hackModifyThumbnailPath(uri: string, isEnabled: boolean): string { 453 + return isEnabled 454 + ? uri.replace('/img/avatar/plain/', '/img/avatar_thumbnail/plain/') 455 + : uri 456 + } 435 457 436 458 const styles = StyleSheet.create({ 437 459 editButtonContainer: {