+8 -6

src/components/MediaPreview.tsx

··· 4 import {Trans} from '@lingui/react/macro' 5 6 import {isTenorGifUri} from '#/lib/strings/embed-player' 0 7 import { 8 - maybeModifyHighQualityImage, 9 - useHighQualityImages, 10 - } from '#/state/preferences/high-quality-images' 11 import {atoms as a, useTheme} from '#/alf' 12 import {MediaInsetBorder} from '#/components/MediaInsetBorder' 13 import {Text} from '#/components/Typography' ··· 25 style?: StyleProp<ViewStyle> 26 }) { 27 const highQualityImages = useHighQualityImages() 0 28 const e = bsky.post.parseEmbed(embed) 29 30 if (!e) return null ··· 35 {e.view.images.map(image => ( 36 <ImageItem 37 key={image.thumb} 38 - thumbnail={maybeModifyHighQualityImage( 39 - image.thumb, 40 highQualityImages, 41 - )} 42 alt={image.alt} 43 /> 44 ))}

··· 4 import {Trans} from '@lingui/react/macro' 5 6 import {isTenorGifUri} from '#/lib/strings/embed-player' 7 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 8 import { 9 + applyImageTransforms, 10 + useImageCdnHost, 11 + } from '#/state/preferences/image-cdn-host' 12 import {atoms as a, useTheme} from '#/alf' 13 import {MediaInsetBorder} from '#/components/MediaInsetBorder' 14 import {Text} from '#/components/Typography' ··· 26 style?: StyleProp<ViewStyle> 27 }) { 28 const highQualityImages = useHighQualityImages() 29 + const imageCdnHost = useImageCdnHost() 30 const e = bsky.post.parseEmbed(embed) 31 32 if (!e) return null ··· 37 {e.view.images.map(image => ( 38 <ImageItem 39 key={image.thumb} 40 + thumbnail={applyImageTransforms(image.thumb, { 41 + imageCdnHost, 42 highQualityImages, 43 + })} 44 alt={image.alt} 45 /> 46 ))}

+13 -5

src/components/Post/Embed/ImageEmbed.tsx

··· 9 import {Image} from 'expo-image' 10 11 import {useLightboxControls} from '#/state/lightbox' 0 12 import { 13 - maybeModifyHighQualityImage, 14 - useHighQualityImages, 15 - } from '#/state/preferences/high-quality-images' 16 import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types' 17 import {atoms as a} from '#/alf' 18 import {AutoSizedImage} from '#/components/images/AutoSizedImage' ··· 29 }) { 30 const {openLightbox} = useLightboxControls() 31 const highQualityImages = useHighQualityImages() 0 32 const {images} = embed.view 33 34 if (images.length > 0) { 35 const items = images.map(img => ({ 36 - uri: maybeModifyHighQualityImage(img.fullsize, highQualityImages), 37 - thumbUri: maybeModifyHighQualityImage(img.thumb, highQualityImages), 0 0 0 0 0 0 38 alt: img.alt, 39 dimensions: img.aspectRatio ?? null, 40 }))

··· 9 import {Image} from 'expo-image' 10 11 import {useLightboxControls} from '#/state/lightbox' 12 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 13 import { 14 + applyImageTransforms, 15 + useImageCdnHost, 16 + } from '#/state/preferences/image-cdn-host' 17 import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types' 18 import {atoms as a} from '#/alf' 19 import {AutoSizedImage} from '#/components/images/AutoSizedImage' ··· 30 }) { 31 const {openLightbox} = useLightboxControls() 32 const highQualityImages = useHighQualityImages() 33 + const imageCdnHost = useImageCdnHost() 34 const {images} = embed.view 35 36 if (images.length > 0) { 37 const items = images.map(img => ({ 38 + uri: applyImageTransforms(img.fullsize, { 39 + imageCdnHost, 40 + highQualityImages, 41 + }), 42 + thumbUri: applyImageTransforms(img.thumb, { 43 + imageCdnHost, 44 + highQualityImages, 45 + }), 46 alt: img.alt, 47 dimensions: img.aspectRatio ?? null, 48 }))

+2 -2

src/components/Post/Embed/index.tsx

··· 9 RichText as RichTextAPI, 10 } from '@atproto/api' 11 import {msg} from '@lingui/core/macro' 12 - import {Trans} from '@lingui/react/macro' 13 import {useLingui} from '@lingui/react' 0 14 import {useQueryClient} from '@tanstack/react-query' 15 16 import {makeProfileLink} from '#/lib/routes/links' ··· 377 author={quote.author} 378 moderation={moderation} 379 showAvatar 380 - showPronouns={showPronouns} 381 postHref={itemHref} 382 timestamp={quote.indexedAt} 383 linkDisabled

··· 9 RichText as RichTextAPI, 10 } from '@atproto/api' 11 import {msg} from '@lingui/core/macro' 0 12 import {useLingui} from '@lingui/react' 13 + import {Trans} from '@lingui/react/macro' 14 import {useQueryClient} from '@tanstack/react-query' 15 16 import {makeProfileLink} from '#/lib/routes/links' ··· 377 author={quote.author} 378 moderation={moderation} 379 showAvatar 380 + showPronouns={showPronouns} 381 postHref={itemHref} 382 timestamp={quote.indexedAt} 383 linkDisabled

+9 -4

src/components/images/AutoSizedImage.tsx

··· 12 import {Trans} from '@lingui/react/macro' 13 14 import {type Dimensions} from '#/lib/media/types' 0 15 import { 16 - maybeModifyHighQualityImage, 17 - useHighQualityImages, 18 - } from '#/state/preferences/high-quality-images' 19 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' 20 import {atoms as a, useTheme} from '#/alf' 21 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal' ··· 90 const containerRef = useAnimatedRef() 91 const fetchedDimsRef = useRef<{width: number; height: number} | null>(null) 92 const highQualityImages = useHighQualityImages() 0 93 94 let aspectRatio: number | undefined 95 const dims = image.aspectRatio ··· 120 <Image 121 contentFit={isContain ? 'contain' : 'cover'} 122 style={[a.w_full, a.h_full]} 123 - source={maybeModifyHighQualityImage(image.thumb, highQualityImages)} 0 0 0 124 accessible={true} // Must set for `accessibilityLabel` to work 125 accessibilityIgnoresInvertColors 126 accessibilityLabel={image.alt}

··· 12 import {Trans} from '@lingui/react/macro' 13 14 import {type Dimensions} from '#/lib/media/types' 15 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 16 import { 17 + applyImageTransforms, 18 + useImageCdnHost, 19 + } from '#/state/preferences/image-cdn-host' 20 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' 21 import {atoms as a, useTheme} from '#/alf' 22 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal' ··· 91 const containerRef = useAnimatedRef() 92 const fetchedDimsRef = useRef<{width: number; height: number} | null>(null) 93 const highQualityImages = useHighQualityImages() 94 + const imageCdnHost = useImageCdnHost() 95 96 let aspectRatio: number | undefined 97 const dims = image.aspectRatio ··· 122 <Image 123 contentFit={isContain ? 'contain' : 'cover'} 124 style={[a.w_full, a.h_full]} 125 + source={applyImageTransforms(image.thumb, { 126 + imageCdnHost, 127 + highQualityImages, 128 + })} 129 accessible={true} // Must set for `accessibilityLabel` to work 130 accessibilityIgnoresInvertColors 131 accessibilityLabel={image.alt}

+9 -4

src/components/images/Gallery.tsx

··· 8 import {Trans} from '@lingui/react/macro' 9 10 import {type Dimensions} from '#/lib/media/types' 0 11 import { 12 - maybeModifyHighQualityImage, 13 - useHighQualityImages, 14 - } from '#/state/preferences/high-quality-images' 15 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' 16 import {atoms as a, useTheme} from '#/alf' 17 import {MediaInsetBorder} from '#/components/MediaInsetBorder' ··· 53 const {_} = useLingui() 54 const largeAltBadge = useLargeAltBadgeEnabled() 55 const highQualityImages = useHighQualityImages() 0 56 const image = images[index] 57 const hasAlt = !!image.alt 58 const hideBadges = ··· 82 accessibilityHint=""> 83 <Image 84 source={{ 85 - uri: maybeModifyHighQualityImage(image.thumb, highQualityImages), 0 0 0 86 }} 87 style={[a.flex_1]} 88 accessible={true}

··· 8 import {Trans} from '@lingui/react/macro' 9 10 import {type Dimensions} from '#/lib/media/types' 11 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 12 import { 13 + applyImageTransforms, 14 + useImageCdnHost, 15 + } from '#/state/preferences/image-cdn-host' 16 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' 17 import {atoms as a, useTheme} from '#/alf' 18 import {MediaInsetBorder} from '#/components/MediaInsetBorder' ··· 54 const {_} = useLingui() 55 const largeAltBadge = useLargeAltBadgeEnabled() 56 const highQualityImages = useHighQualityImages() 57 + const imageCdnHost = useImageCdnHost() 58 const image = images[index] 59 const hasAlt = !!image.alt 60 const hideBadges = ··· 84 accessibilityHint=""> 85 <Image 86 source={{ 87 + uri: applyImageTransforms(image.thumb, { 88 + imageCdnHost, 89 + highQualityImages, 90 + }), 91 }} 92 style={[a.flex_1]} 93 accessible={true}

+1 -1

src/screens/Post/PostLikedBy.tsx

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 3 - import {Plural, Trans} from '@lingui/react/macro' 4 import {useLingui} from '@lingui/react' 0 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 0 3 import {useLingui} from '@lingui/react' 4 + import {Plural, Trans} from '@lingui/react/macro' 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

+1 -1

src/screens/Post/PostQuotes.tsx

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 3 - import {Plural, Trans} from '@lingui/react/macro' 4 import {useLingui} from '@lingui/react' 0 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 0 3 import {useLingui} from '@lingui/react' 4 + import {Plural, Trans} from '@lingui/react/macro' 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

+1 -1

src/screens/Post/PostRepostedBy.tsx

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 3 - import {Plural, Trans} from '@lingui/react/macro' 4 import {useLingui} from '@lingui/react' 0 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 0 3 import {useLingui} from '@lingui/react' 4 + import {Plural, Trans} from '@lingui/react/macro' 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

+17 -9

src/screens/Profile/Header/Shell.tsx

··· 20 import {useLightboxControls} from '#/state/lightbox' 21 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' 22 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' 0 23 import { 24 - maybeModifyHighQualityImage, 25 - useHighQualityImages, 26 - } from '#/state/preferences/high-quality-images' 27 import {useSession} from '#/state/session' 28 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 29 import {UserAvatar} from '#/view/com/util/UserAvatar' ··· 68 const playHaptic = useHaptics() 69 const liveStatusControl = useDialogControl() 70 const highQualityImages = useHighQualityImages() 0 71 const enableSquareAvatars = useEnableSquareAvatars() 72 const enableSquareButtons = useEnableSquareButtons() 73 ··· 102 openLightbox({ 103 images: [ 104 { 105 - uri: maybeModifyHighQualityImage(uri, highQualityImages), 106 - thumbUri: maybeModifyHighQualityImage(uri, highQualityImages), 0 0 0 107 thumbRect, 108 dimensions: 109 type === 'circle-avi' || type === 'rect-avi' ··· 124 index: 0, 125 }) 126 }, 127 - [openLightbox, highQualityImages, enableSquareAvatars], 128 ) 129 130 // theres probs a better way instead of just making a separate one but this works:tm: so its whatever ··· 133 openLightbox({ 134 images: [ 135 { 136 - uri: maybeModifyHighQualityImage(uri, highQualityImages), 137 - thumbUri: maybeModifyHighQualityImage(uri, highQualityImages), 0 0 0 138 thumbRect, 139 dimensions: thumbRect, 140 thumbDimensions: null, ··· 144 index: 0, 145 }) 146 }, 147 - [openLightbox, highQualityImages], 148 ) 149 150 const isMe = useMemo(

··· 20 import {useLightboxControls} from '#/state/lightbox' 21 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' 22 import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' 23 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 24 import { 25 + applyImageTransforms, 26 + useImageCdnHost, 27 + } from '#/state/preferences/image-cdn-host' 28 import {useSession} from '#/state/session' 29 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 30 import {UserAvatar} from '#/view/com/util/UserAvatar' ··· 69 const playHaptic = useHaptics() 70 const liveStatusControl = useDialogControl() 71 const highQualityImages = useHighQualityImages() 72 + const imageCdnHost = useImageCdnHost() 73 const enableSquareAvatars = useEnableSquareAvatars() 74 const enableSquareButtons = useEnableSquareButtons() 75 ··· 104 openLightbox({ 105 images: [ 106 { 107 + uri: applyImageTransforms(uri, {imageCdnHost, highQualityImages}), 108 + thumbUri: applyImageTransforms(uri, { 109 + imageCdnHost, 110 + highQualityImages, 111 + }), 112 thumbRect, 113 dimensions: 114 type === 'circle-avi' || type === 'rect-avi' ··· 129 index: 0, 130 }) 131 }, 132 + [openLightbox, imageCdnHost, highQualityImages, enableSquareAvatars], 133 ) 134 135 // theres probs a better way instead of just making a separate one but this works:tm: so its whatever ··· 138 openLightbox({ 139 images: [ 140 { 141 + uri: applyImageTransforms(uri, {imageCdnHost, highQualityImages}), 142 + thumbUri: applyImageTransforms(uri, { 143 + imageCdnHost, 144 + highQualityImages, 145 + }), 146 thumbRect, 147 dimensions: thumbRect, 148 thumbDimensions: null, ··· 152 index: 0, 153 }) 154 }, 155 + [openLightbox, imageCdnHost, highQualityImages], 156 ) 157 158 const isMe = useMemo(

+1 -1

src/screens/Profile/ProfileFollowers.tsx

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 3 - import {Plural} from '@lingui/react/macro' 4 import {useLingui} from '@lingui/react' 0 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 0 3 import {useLingui} from '@lingui/react' 4 + import {Plural} from '@lingui/react/macro' 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

+1 -1

src/screens/Profile/ProfileFollows.tsx

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 3 - import {Plural} from '@lingui/react/macro' 4 import {useLingui} from '@lingui/react' 0 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

··· 1 import React from 'react' 2 import {msg} from '@lingui/core/macro' 0 3 import {useLingui} from '@lingui/react' 4 + import {Plural} from '@lingui/react/macro' 5 import {useFocusEffect} from '@react-navigation/native' 6 7 import {useSetTitle} from '#/lib/hooks/useSetTitle'

+109 -3

src/screens/Settings/RunesSettings.tsx

··· 1 import {useState} from 'react' 2 import {View} from 'react-native' 3 import {type ProfileViewBasic} from '@atproto/api/dist/client/types/app/bsky/actor/defs' 4 - import {msg, Trans} from '@lingui/macro' 5 import {useLingui} from '@lingui/react' 0 6 import {type NativeStackScreenProps} from '@react-navigation/native-stack' 7 8 import {DEFAULT_ALT_TEXT_AI_MODEL} from '#/lib/constants' ··· 98 useHighQualityImages, 99 useSetHighQualityImages, 100 } from '#/state/preferences/high-quality-images' 0 0 0 0 101 import {useModerationOpts} from '#/state/preferences/moderation-opts' 102 import { 103 useNoAppLabelers, ··· 319 ) 320 } 321 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 322 function PostReplacementDialog({ 323 control, 324 }: { ··· 657 658 const highQualityImages = useHighQualityImages() 659 const setHighQualityImages = useSetHighQualityImages() 0 660 661 const hideFeedsPromoTab = useHideFeedsPromoTab() 662 const setHideFeedsPromoTab = useSetHideFeedsPromoTab() ··· 732 const setTranslationServicePreference = useSetTranslationServicePreference() 733 734 const setLibreTranslateInstanceControl = Dialog.useDialogControl() 0 0 735 736 const setPostReplacementDialogControl = Dialog.useDialogControl() 737 ··· 1007 longer to load and use more bandwidth. 1008 </Trans> 1009 </Admonition> 0 1010 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1011 <Toggle.Item 1012 name="hide_feeds_promo_tab" 1013 label={_(msg`Hide "Feeds ✨" tab when only one feed is selected`)} ··· 1096 <Admonition type="warning" style={[a.flex_1]}> 1097 <Trans> 1098 This only gets rid of the reminder on app launch, useful if your 1099 - PDS does not have email verification setup.\nThis does NOT give 1100 - access to features locked behind email verification. 1101 </Trans> 1102 </Admonition> 1103 ··· 1406 <LibreTranslateInstanceDialog 1407 control={setLibreTranslateInstanceControl} 1408 /> 0 1409 <PostReplacementDialog control={setPostReplacementDialogControl} /> 1410 <OpenRouterApiKeyDialog control={setOpenRouterApiKeyControl} /> 1411 <OpenRouterModelDialog control={setOpenRouterModelControl} />

··· 1 import {useState} from 'react' 2 import {View} from 'react-native' 3 import {type ProfileViewBasic} from '@atproto/api/dist/client/types/app/bsky/actor/defs' 4 + import {msg} from '@lingui/core/macro' 5 import {useLingui} from '@lingui/react' 6 + import {Trans} from '@lingui/react/macro' 7 import {type NativeStackScreenProps} from '@react-navigation/native-stack' 8 9 import {DEFAULT_ALT_TEXT_AI_MODEL} from '#/lib/constants' ··· 99 useHighQualityImages, 100 useSetHighQualityImages, 101 } from '#/state/preferences/high-quality-images' 102 + import { 103 + useImageCdnHost, 104 + useSetImageCdnHost, 105 + } from '#/state/preferences/image-cdn-host' 106 import {useModerationOpts} from '#/state/preferences/moderation-opts' 107 import { 108 useNoAppLabelers, ··· 324 ) 325 } 326 327 + function ImageCdnHostDialog({control}: {control: Dialog.DialogControlProps}) { 328 + const pal = usePalette('default') 329 + const {_} = useLingui() 330 + 331 + const imageCdnHost = useImageCdnHost() 332 + const [url, setUrl] = useState(imageCdnHost ?? '') 333 + const setImageCdnHost = useSetImageCdnHost() 334 + 335 + const submit = () => { 336 + try { 337 + setImageCdnHost(new URL(url).origin) 338 + } catch { 339 + setImageCdnHost(url) 340 + } 341 + control.close() 342 + } 343 + 344 + const shouldDisable = () => { 345 + try { 346 + return !new URL(url).hostname.includes('.') 347 + } catch (e) { 348 + return true 349 + } 350 + } 351 + 352 + return ( 353 + <Dialog.Outer 354 + control={control} 355 + nativeOptions={{preventExpansion: true}} 356 + onClose={() => setUrl(imageCdnHost ?? '')}> 357 + <Dialog.Handle /> 358 + <Dialog.ScrollableInner label={_(msg`Image CDN URL`)}> 359 + <View style={[a.gap_sm, a.pb_lg]}> 360 + <Text style={[a.text_2xl, a.font_bold]}> 361 + <Trans>Image CDN URL</Trans> 362 + </Text> 363 + </View> 364 + 365 + <View style={a.gap_lg}> 366 + <Dialog.Input 367 + label="Text input field" 368 + autoFocus 369 + style={[styles.textInput, pal.border, pal.text]} 370 + onChangeText={value => { 371 + setUrl(value) 372 + }} 373 + placeholder={persisted.defaults.imageCdnHost} 374 + placeholderTextColor={pal.colors.textLight} 375 + onSubmitEditing={submit} 376 + accessibilityHint={_(msg`Input the URL of the image CDN to use`)} 377 + defaultValue={imageCdnHost} 378 + /> 379 + 380 + <View style={IS_WEB && [a.flex_row, a.justify_end]}> 381 + <Button 382 + label={_(msg`Save`)} 383 + size="large" 384 + onPress={submit} 385 + variant="solid" 386 + color="primary" 387 + disabled={shouldDisable()}> 388 + <ButtonText> 389 + <Trans>Save</Trans> 390 + </ButtonText> 391 + </Button> 392 + </View> 393 + </View> 394 + 395 + <Dialog.Close /> 396 + </Dialog.ScrollableInner> 397 + </Dialog.Outer> 398 + ) 399 + } 400 + 401 function PostReplacementDialog({ 402 control, 403 }: { ··· 736 737 const highQualityImages = useHighQualityImages() 738 const setHighQualityImages = useSetHighQualityImages() 739 + const imageCdnHost = useImageCdnHost() 740 741 const hideFeedsPromoTab = useHideFeedsPromoTab() 742 const setHideFeedsPromoTab = useSetHideFeedsPromoTab() ··· 812 const setTranslationServicePreference = useSetTranslationServicePreference() 813 814 const setLibreTranslateInstanceControl = Dialog.useDialogControl() 815 + 816 + const setImageCdnHostControl = Dialog.useDialogControl() 817 818 const setPostReplacementDialogControl = Dialog.useDialogControl() 819 ··· 1089 longer to load and use more bandwidth. 1090 </Trans> 1091 </Admonition> 1092 + </SettingsList.Group> 1093 1094 + <SettingsList.Item> 1095 + <SettingsList.ItemIcon icon={EarthIcon} /> 1096 + <SettingsList.ItemText> 1097 + <Trans>{`Image CDN`}</Trans> 1098 + </SettingsList.ItemText> 1099 + <SettingsList.BadgeButton 1100 + label={_(msg`Change`)} 1101 + onPress={() => setImageCdnHostControl.open()} 1102 + /> 1103 + </SettingsList.Item> 1104 + <SettingsList.Item> 1105 + <Admonition type="info" style={[a.flex_1]}> 1106 + <Trans> 1107 + Override the CDN host for all images. Current:  1108 + <InlineLinkText to={imageCdnHost} label={imageCdnHost}> 1109 + {imageCdnHost} 1110 + </InlineLinkText> 1111 + </Trans> 1112 + </Admonition> 1113 + </SettingsList.Item> 1114 + 1115 + <SettingsList.Group contentContainerStyle={[a.gap_sm]}> 1116 <Toggle.Item 1117 name="hide_feeds_promo_tab" 1118 label={_(msg`Hide "Feeds ✨" tab when only one feed is selected`)} ··· 1201 <Admonition type="warning" style={[a.flex_1]}> 1202 <Trans> 1203 This only gets rid of the reminder on app launch, useful if your 1204 + PDS does not have email verification setup.\u00A0 This does NOT 1205 + give access to features locked behind email verification. 1206 </Trans> 1207 </Admonition> 1208 ··· 1511 <LibreTranslateInstanceDialog 1512 control={setLibreTranslateInstanceControl} 1513 /> 1514 + <ImageCdnHostDialog control={setImageCdnHostControl} /> 1515 <PostReplacementDialog control={setPostReplacementDialogControl} /> 1516 <OpenRouterApiKeyDialog control={setOpenRouterApiKeyControl} /> 1517 <OpenRouterModelDialog control={setOpenRouterModelControl} />

+2

src/state/persisted/schema.ts

··· 173 }) 174 .optional(), 175 highQualityImages: z.boolean().optional(), 0 176 hideUnreplyablePosts: z.boolean().optional(), 177 pdsLabel: z 178 .object({ ··· 310 ], 311 }, 312 highQualityImages: false, 0 313 hideUnreplyablePosts: false, 314 pdsLabel: { 315 enabled: true,

··· 173 }) 174 .optional(), 175 highQualityImages: z.boolean().optional(), 176 + imageCdnHost: z.string().optional(), 177 hideUnreplyablePosts: z.boolean().optional(), 178 pdsLabel: z 179 .object({ ··· 311 ], 312 }, 313 highQualityImages: false, 314 + imageCdnHost: 'https://cdn.bsky.app', 315 hideUnreplyablePosts: false, 316 pdsLabel: { 317 enabled: true,

+117

src/state/preferences/image-cdn-host.tsx

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

··· 1 + import React from 'react' 2 + 3 + import * as persisted from '#/state/persisted' 4 + 5 + type StateContext = persisted.Schema['imageCdnHost'] 6 + type SetContext = (v: persisted.Schema['imageCdnHost']) => void 7 + 8 + const stateContext = React.createContext<StateContext>( 9 + persisted.defaults.imageCdnHost, 10 + ) 11 + const setContext = React.createContext<SetContext>( 12 + (_: persisted.Schema['imageCdnHost']) => {}, 13 + ) 14 + 15 + const DEFAULT_IMAGE_CDN_ORIGIN = normalizeOrigin( 16 + persisted.defaults.imageCdnHost ?? '', 17 + ) 18 + 19 + export function Provider({children}: React.PropsWithChildren<{}>) { 20 + const [state, setState] = React.useState(persisted.get('imageCdnHost')) 21 + 22 + const setStateWrapped = React.useCallback( 23 + (imageCdnHost: persisted.Schema['imageCdnHost']) => { 24 + setState(imageCdnHost) 25 + persisted.write('imageCdnHost', imageCdnHost) 26 + }, 27 + [setState], 28 + ) 29 + 30 + React.useEffect(() => { 31 + return persisted.onUpdate('imageCdnHost', nextImageCdnHost => { 32 + setState(nextImageCdnHost) 33 + }) 34 + }, [setStateWrapped]) 35 + 36 + return ( 37 + <stateContext.Provider value={state}> 38 + <setContext.Provider value={setStateWrapped}> 39 + {children} 40 + </setContext.Provider> 41 + </stateContext.Provider> 42 + ) 43 + } 44 + 45 + export function useImageCdnHost() { 46 + return React.useContext(stateContext) ?? persisted.defaults.imageCdnHost! 47 + } 48 + 49 + export function useSetImageCdnHost() { 50 + return React.useContext(setContext) 51 + } 52 + 53 + function normalizeOrigin(input: string) { 54 + try { 55 + return new URL(input).origin 56 + } catch { 57 + return null 58 + } 59 + } 60 + 61 + function modifyImageCdnHost(src: string, imageCdnHost: string) { 62 + try { 63 + const srcUrl = new URL(src) 64 + if (srcUrl.protocol !== 'https:' && srcUrl.protocol !== 'http:') { 65 + return null 66 + } 67 + if (!srcUrl.pathname.startsWith('/img/')) { 68 + return null 69 + } 70 + 71 + const cdnUrl = new URL(imageCdnHost) 72 + srcUrl.protocol = cdnUrl.protocol 73 + srcUrl.hostname = cdnUrl.hostname 74 + srcUrl.port = cdnUrl.port 75 + 76 + return srcUrl.toString() 77 + } catch { 78 + return null 79 + } 80 + } 81 + 82 + export function maybeModifyImageCdnHost(src: string, imageCdnHost?: string) { 83 + if (!imageCdnHost) { 84 + return src 85 + } 86 + 87 + const nextOrigin = normalizeOrigin(imageCdnHost) 88 + if (!nextOrigin || nextOrigin === DEFAULT_IMAGE_CDN_ORIGIN) { 89 + return src 90 + } 91 + 92 + return modifyImageCdnHost(src, nextOrigin) ?? src 93 + } 94 + 95 + /** 96 + * Combined image transformation pipeline: applies high-quality image format 97 + * transformation first (on original CDN), then applies CDN host rewrite. 98 + */ 99 + export function applyImageTransforms( 100 + src: string, 101 + options: { 102 + imageCdnHost?: string 103 + highQualityImages?: boolean 104 + }, 105 + ) { 106 + // Import is deferred to avoid circular dependency 107 + const {maybeModifyHighQualityImage} = 108 + require('./high-quality-images') as typeof import('./high-quality-images') 109 + 110 + // First apply quality transformation on original CDN 111 + const withQuality = maybeModifyHighQualityImage( 112 + src, 113 + options.highQualityImages, 114 + ) 115 + // Then apply CDN host replacement 116 + return maybeModifyImageCdnHost(withQuality, options.imageCdnHost) 117 + }

+65 -61

src/state/preferences/index.tsx

··· 30 import {Provider as HideSimilarAccountsRecommProvider} from './hide-similar-accounts-recommendations' 31 import {Provider as HideUnreplyablePostsProvider} from './hide-unreplyable-posts' 32 import {Provider as HighQualityImagesProvider} from './high-quality-images' 0 33 import {Provider as InAppBrowserProvider} from './in-app-browser' 34 import {Provider as KawaiiProvider} from './kawaii' 35 import {Provider as LanguagesProvider} from './languages' ··· 71 useHideFeedsPromoTab, 72 useSetHideFeedsPromoTab, 73 } from './hide-feeds-promo-tab' 0 74 export {useLabelDefinitions} from './label-defs' 75 export {useLanguagePrefs, useLanguagePrefsApi} from './languages' 76 export { ··· 105 <ExternalEmbedsProvider> 106 <HiddenPostsProvider> 107 <HighQualityImagesProvider> 108 - <InAppBrowserProvider> 109 - <DisableHapticsProvider> 110 - <AutoplayProvider> 111 - <UsedStarterPacksProvider> 112 - <SubtitlesProvider> 113 - <TrendingSettingsProvider> 114 - <RepostCarouselProvider> 115 - <KawaiiProvider> 116 - <HideFeedsPromoTabProvider> 117 - <DisableViaRepostNotificationProvider> 118 - <DisableLikesMetricsProvider> 119 - <DisableRepostsMetricsProvider> 120 - <DisableQuotesMetricsProvider> 121 - <DisableSavesMetricsProvider> 122 - <DisableReplyMetricsProvider> 123 - <DisableFollowersMetricsProvider> 124 - <DisableFollowingMetricsProvider> 125 - <DisableFollowedByMetricsProvider> 126 - <DisablePostsMetricsProvider> 127 - <HideSimilarAccountsRecommProvider> 128 - <HideUnreplyablePostsProvider> 129 - <EnableSquareAvatarsProvider> 130 - <EnableSquareButtonsProvider> 131 - <PostNameReplacementProvider> 132 - <DisableVerifyEmailReminderProvider> 133 - <TranslationServicePreferenceProvider> 134 - <OpenRouterProvider> 135 - <DisableComposerPromptProvider> 136 - <DiscoverContextEnabledProvider> 137 - { 138 - children 139 - } 140 - </DiscoverContextEnabledProvider> 141 - </DisableComposerPromptProvider> 142 - </OpenRouterProvider> 143 - </TranslationServicePreferenceProvider> 144 - </DisableVerifyEmailReminderProvider> 145 - </PostNameReplacementProvider> 146 - </EnableSquareButtonsProvider> 147 - </EnableSquareAvatarsProvider> 148 - </HideUnreplyablePostsProvider> 149 - </HideSimilarAccountsRecommProvider> 150 - </DisablePostsMetricsProvider> 151 - </DisableFollowedByMetricsProvider> 152 - </DisableFollowingMetricsProvider> 153 - </DisableFollowersMetricsProvider> 154 - </DisableReplyMetricsProvider> 155 - </DisableSavesMetricsProvider> 156 - </DisableQuotesMetricsProvider> 157 - </DisableRepostsMetricsProvider> 158 - </DisableLikesMetricsProvider> 159 - </DisableViaRepostNotificationProvider> 160 - </HideFeedsPromoTabProvider> 161 - </KawaiiProvider> 162 - </RepostCarouselProvider> 163 - </TrendingSettingsProvider> 164 - </SubtitlesProvider> 165 - </UsedStarterPacksProvider> 166 - </AutoplayProvider> 167 - </DisableHapticsProvider> 168 - </InAppBrowserProvider> 0 0 169 </HighQualityImagesProvider> 170 </HiddenPostsProvider> 171 </ExternalEmbedsProvider>

··· 30 import {Provider as HideSimilarAccountsRecommProvider} from './hide-similar-accounts-recommendations' 31 import {Provider as HideUnreplyablePostsProvider} from './hide-unreplyable-posts' 32 import {Provider as HighQualityImagesProvider} from './high-quality-images' 33 + import {Provider as ImageCdnHostProvider} from './image-cdn-host' 34 import {Provider as InAppBrowserProvider} from './in-app-browser' 35 import {Provider as KawaiiProvider} from './kawaii' 36 import {Provider as LanguagesProvider} from './languages' ··· 72 useHideFeedsPromoTab, 73 useSetHideFeedsPromoTab, 74 } from './hide-feeds-promo-tab' 75 + export {useImageCdnHost, useSetImageCdnHost} from './image-cdn-host' 76 export {useLabelDefinitions} from './label-defs' 77 export {useLanguagePrefs, useLanguagePrefsApi} from './languages' 78 export { ··· 107 <ExternalEmbedsProvider> 108 <HiddenPostsProvider> 109 <HighQualityImagesProvider> 110 + <ImageCdnHostProvider> 111 + <InAppBrowserProvider> 112 + <DisableHapticsProvider> 113 + <AutoplayProvider> 114 + <UsedStarterPacksProvider> 115 + <SubtitlesProvider> 116 + <TrendingSettingsProvider> 117 + <RepostCarouselProvider> 118 + <KawaiiProvider> 119 + <HideFeedsPromoTabProvider> 120 + <DisableViaRepostNotificationProvider> 121 + <DisableLikesMetricsProvider> 122 + <DisableRepostsMetricsProvider> 123 + <DisableQuotesMetricsProvider> 124 + <DisableSavesMetricsProvider> 125 + <DisableReplyMetricsProvider> 126 + <DisableFollowersMetricsProvider> 127 + <DisableFollowingMetricsProvider> 128 + <DisableFollowedByMetricsProvider> 129 + <DisablePostsMetricsProvider> 130 + <HideSimilarAccountsRecommProvider> 131 + <HideUnreplyablePostsProvider> 132 + <EnableSquareAvatarsProvider> 133 + <EnableSquareButtonsProvider> 134 + <PostNameReplacementProvider> 135 + <DisableVerifyEmailReminderProvider> 136 + <TranslationServicePreferenceProvider> 137 + <OpenRouterProvider> 138 + <DisableComposerPromptProvider> 139 + <DiscoverContextEnabledProvider> 140 + { 141 + children 142 + } 143 + </DiscoverContextEnabledProvider> 144 + </DisableComposerPromptProvider> 145 + </OpenRouterProvider> 146 + </TranslationServicePreferenceProvider> 147 + </DisableVerifyEmailReminderProvider> 148 + </PostNameReplacementProvider> 149 + </EnableSquareButtonsProvider> 150 + </EnableSquareAvatarsProvider> 151 + </HideUnreplyablePostsProvider> 152 + </HideSimilarAccountsRecommProvider> 153 + </DisablePostsMetricsProvider> 154 + </DisableFollowedByMetricsProvider> 155 + </DisableFollowingMetricsProvider> 156 + </DisableFollowersMetricsProvider> 157 + </DisableReplyMetricsProvider> 158 + </DisableSavesMetricsProvider> 159 + </DisableQuotesMetricsProvider> 160 + </DisableRepostsMetricsProvider> 161 + </DisableLikesMetricsProvider> 162 + </DisableViaRepostNotificationProvider> 163 + </HideFeedsPromoTabProvider> 164 + </KawaiiProvider> 165 + </RepostCarouselProvider> 166 + </TrendingSettingsProvider> 167 + </SubtitlesProvider> 168 + </UsedStarterPacksProvider> 169 + </AutoplayProvider> 170 + </DisableHapticsProvider> 171 + </InAppBrowserProvider> 172 + </ImageCdnHostProvider> 173 </HighQualityImagesProvider> 174 </HiddenPostsProvider> 175 </ExternalEmbedsProvider>

+14 -8

src/view/com/util/UserAvatar.tsx

··· 35 createComposerImage, 36 } from '#/state/gallery' 37 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' 0 38 import { 39 - maybeModifyHighQualityImage, 40 - useHighQualityImages, 41 - } from '#/state/preferences/high-quality-images' 42 import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache' 43 import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog' 44 import {atoms as a, tokens, useTheme} from '#/alf' ··· 250 const finalShape = 251 overrideShape ?? (type === 'user' ? avishapeforce : 'square') 252 const highQualityImages = useHighQualityImages() 0 253 254 const aviStyle = useMemo(() => { 255 let borderRadius ··· 321 style={aviStyle} 322 resizeMode="cover" 323 source={{ 324 - uri: maybeModifyHighQualityImage( 325 hackModifyThumbnailPath(avatar, size < 90), 326 - highQualityImages, 327 ), 328 }} 329 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} ··· 335 style={aviStyle} 336 contentFit="cover" 337 source={{ 338 - uri: maybeModifyHighQualityImage( 339 hackModifyThumbnailPath(avatar, size < 90), 340 - highQualityImages, 341 ), 342 }} 343 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} ··· 379 380 const sheetWrapper = useSheetWrapper() 381 const highQualityImages = useHighQualityImages() 0 382 383 const enableSquareAvatars = useEnableSquareAvatars() 384 ··· 480 testID="userAvatarImage" 481 style={aviStyle} 482 source={{ 483 - uri: maybeModifyHighQualityImage(avatar, highQualityImages), 0 0 0 484 }} 485 accessibilityRole="image" 486 />

··· 35 createComposerImage, 36 } from '#/state/gallery' 37 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' 38 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 39 import { 40 + applyImageTransforms, 41 + useImageCdnHost, 42 + } from '#/state/preferences/image-cdn-host' 43 import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache' 44 import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog' 45 import {atoms as a, tokens, useTheme} from '#/alf' ··· 251 const finalShape = 252 overrideShape ?? (type === 'user' ? avishapeforce : 'square') 253 const highQualityImages = useHighQualityImages() 254 + const imageCdnHost = useImageCdnHost() 255 256 const aviStyle = useMemo(() => { 257 let borderRadius ··· 323 style={aviStyle} 324 resizeMode="cover" 325 source={{ 326 + uri: applyImageTransforms( 327 hackModifyThumbnailPath(avatar, size < 90), 328 + {imageCdnHost, highQualityImages}, 329 ), 330 }} 331 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} ··· 337 style={aviStyle} 338 contentFit="cover" 339 source={{ 340 + uri: applyImageTransforms( 341 hackModifyThumbnailPath(avatar, size < 90), 342 + {imageCdnHost, highQualityImages}, 343 ), 344 }} 345 blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} ··· 381 382 const sheetWrapper = useSheetWrapper() 383 const highQualityImages = useHighQualityImages() 384 + const imageCdnHost = useImageCdnHost() 385 386 const enableSquareAvatars = useEnableSquareAvatars() 387 ··· 483 testID="userAvatarImage" 484 style={aviStyle} 485 source={{ 486 + uri: applyImageTransforms(avatar, { 487 + imageCdnHost, 488 + highQualityImages, 489 + }), 490 }} 491 accessibilityRole="image" 492 />

+11 -7

src/view/com/util/UserBanner.tsx

··· 20 compressImage, 21 createComposerImage, 22 } from '#/state/gallery' 0 23 import { 24 - maybeModifyHighQualityImage, 25 - useHighQualityImages, 26 - } from '#/state/preferences/high-quality-images' 27 import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog' 28 import {EventStopper} from '#/view/com/util/EventStopper' 29 import {atoms as a, tokens, useTheme} from '#/alf' ··· 57 const [rawImage, setRawImage] = useState<ComposerImage | undefined>() 58 const editImageDialogControl = useDialogControl() 59 const highQualityImages = useHighQualityImages() 0 60 61 const onOpenCamera = useCallback(async () => { 62 if (!(await requestCameraAccessIfNeeded())) { ··· 132 testID="userBannerImage" 133 style={styles.bannerImage} 134 source={{ 135 - uri: maybeModifyHighQualityImage( 136 - banner, 137 highQualityImages, 138 - ), 139 }} 140 accessible={true} 141 accessibilityIgnoresInvertColors ··· 222 <Image 223 style={[styles.bannerImage, t.atoms.bg_contrast_25]} 224 contentFit="cover" 225 - source={{uri: maybeModifyHighQualityImage(banner, highQualityImages)}} 0 0 226 blurRadius={moderation?.blur ? 100 : 0} 227 accessible={true} 228 accessibilityIgnoresInvertColors

··· 20 compressImage, 21 createComposerImage, 22 } from '#/state/gallery' 23 + import {useHighQualityImages} from '#/state/preferences/high-quality-images' 24 import { 25 + applyImageTransforms, 26 + useImageCdnHost, 27 + } from '#/state/preferences/image-cdn-host' 28 import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog' 29 import {EventStopper} from '#/view/com/util/EventStopper' 30 import {atoms as a, tokens, useTheme} from '#/alf' ··· 58 const [rawImage, setRawImage] = useState<ComposerImage | undefined>() 59 const editImageDialogControl = useDialogControl() 60 const highQualityImages = useHighQualityImages() 61 + const imageCdnHost = useImageCdnHost() 62 63 const onOpenCamera = useCallback(async () => { 64 if (!(await requestCameraAccessIfNeeded())) { ··· 134 testID="userBannerImage" 135 style={styles.bannerImage} 136 source={{ 137 + uri: applyImageTransforms(banner, { 138 + imageCdnHost, 139 highQualityImages, 140 + }), 141 }} 142 accessible={true} 143 accessibilityIgnoresInvertColors ··· 224 <Image 225 style={[styles.bannerImage, t.atoms.bg_contrast_25]} 226 contentFit="cover" 227 + source={{ 228 + uri: applyImageTransforms(banner, {imageCdnHost, highQualityImages}), 229 + }} 230 blurRadius={moderation?.blur ? 100 : 0} 231 accessible={true} 232 accessibilityIgnoresInvertColors

+1 -1

src/view/shell/Drawer.tsx

··· 56 UserCircle_Stroke2_Corner0_Rounded as UserCircle, 57 } from '#/components/icons/UserCircle' 58 import {InlineLinkText} from '#/components/Link' 59 - import {Text} from '#/components/Typography' 60 import {PdsBadge} from '#/components/PdsBadge' 0 61 import {useSimpleVerificationState} from '#/components/verification' 62 import {VerificationCheck} from '#/components/verification/VerificationCheck' 63 import {IS_WEB} from '#/env'

··· 56 UserCircle_Stroke2_Corner0_Rounded as UserCircle, 57 } from '#/components/icons/UserCircle' 58 import {InlineLinkText} from '#/components/Link' 0 59 import {PdsBadge} from '#/components/PdsBadge' 60 + import {Text} from '#/components/Typography' 61 import {useSimpleVerificationState} from '#/components/verification' 62 import {VerificationCheck} from '#/components/verification/VerificationCheck' 63 import {IS_WEB} from '#/env'