ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Multiple assorted merge fixes
Keep things more consistent with deer-social/social-app, make images higher quality in more places, re-add direct quote fetching, fix some icons, and make some more tweaks.
essem.space
+179
-113
+1
-1
README.md
+1
-1
README.md
···
77
- Stay away from PRs like...
78
- Changing "Post" to "Skeet."
79
- Refactoring the codebase, e.g., to replace React Query with Redux Toolkit or something.
80
-
- Adding entirely new features without prior discussion.
81
82
If we don't merge your PR for whatever reason, you are welcome to fork and/or self host:
83
···
77
- Stay away from PRs like...
78
- Changing "Post" to "Skeet."
79
- Refactoring the codebase, e.g., to replace React Query with Redux Toolkit or something.
80
+
- Include a new toggle and preference for your feature.
81
82
If we don't merge your PR for whatever reason, you are welcome to fork and/or self host:
83
+7
-2
src/components/Post/Embed/ImageEmbed.tsx
+7
-2
src/components/Post/Embed/ImageEmbed.tsx
···
9
import {Image} from 'expo-image'
10
11
import {useLightboxControls} from '#/state/lightbox'
12
import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types'
13
import {AutoSizedImage} from '#/view/com/util/images/AutoSizedImage'
14
import {ImageLayoutGrid} from '#/view/com/util/images/ImageLayoutGrid'
···
24
embed: EmbedType<'images'>
25
}) {
26
const {openLightbox} = useLightboxControls()
27
const {images} = embed.view
28
29
if (images.length > 0) {
30
const items = images.map(img => ({
31
-
uri: img.fullsize,
32
-
thumbUri: img.thumb,
33
alt: img.alt,
34
dimensions: img.aspectRatio ?? null,
35
}))
···
9
import {Image} from 'expo-image'
10
11
import {useLightboxControls} from '#/state/lightbox'
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 {AutoSizedImage} from '#/view/com/util/images/AutoSizedImage'
18
import {ImageLayoutGrid} from '#/view/com/util/images/ImageLayoutGrid'
···
28
embed: EmbedType<'images'>
29
}) {
30
const {openLightbox} = useLightboxControls()
31
+
const highQualityImages = useHighQualityImages()
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),
38
alt: img.alt,
39
dimensions: img.aspectRatio ?? null,
40
}))
+13
-2
src/components/Post/Embed/PostPlaceholder.tsx
+13
-2
src/components/Post/Embed/PostPlaceholder.tsx
···
4
import {InfoCircleIcon} from '#/lib/icons'
5
import {Text} from '#/view/com/util/text/Text'
6
import {atoms as a, useTheme} from '#/alf'
7
8
-
export function PostPlaceholder({children}: {children: React.ReactNode}) {
9
const t = useTheme()
10
const pal = usePalette('default')
11
return (
12
<View
13
style={[styles.errorContainer, a.border, t.atoms.border_contrast_low]}>
14
-
<InfoCircleIcon size={18} style={pal.text} />
15
<Text type="lg" style={pal.text}>
16
{children}
17
</Text>
···
4
import {InfoCircleIcon} from '#/lib/icons'
5
import {Text} from '#/view/com/util/text/Text'
6
import {atoms as a, useTheme} from '#/alf'
7
+
import {Loader} from '#/components/Loader'
8
9
+
export function PostPlaceholder({
10
+
children,
11
+
directFetchEnabled,
12
+
}: {
13
+
children: React.ReactNode
14
+
directFetchEnabled?: boolean
15
+
}) {
16
const t = useTheme()
17
const pal = usePalette('default')
18
return (
19
<View
20
style={[styles.errorContainer, a.border, t.atoms.border_contrast_low]}>
21
+
{directFetchEnabled ? (
22
+
<Loader size={'md'} style={pal.text} />
23
+
) : (
24
+
<InfoCircleIcon size={18} style={pal.text} />
25
+
)}
26
<Text type="lg" style={pal.text}>
27
{children}
28
</Text>
+111
-5
src/components/Post/Embed/index.tsx
+111
-5
src/components/Post/Embed/index.tsx
···
1
import React from 'react'
2
-
import {View} from 'react-native'
3
import {
4
type $Typed,
5
type AppBskyFeedDefs,
···
8
moderatePost,
9
RichText as RichTextAPI,
10
} from '@atproto/api'
11
-
import {Trans} from '@lingui/macro'
12
import {useQueryClient} from '@tanstack/react-query'
13
14
import {usePalette} from '#/lib/hooks/usePalette'
15
import {makeProfileLink} from '#/lib/routes/links'
16
import {useModerationOpts} from '#/state/preferences/moderation-opts'
17
import {unstableCacheProfileView} from '#/state/queries/profile'
18
import {useSession} from '#/state/session'
19
import {Link} from '#/view/com/util/Link'
20
import {PostMeta} from '#/view/com/util/PostMeta'
21
import {atoms as a, useTheme} from '#/alf'
22
import {ContentHider} from '#/components/moderation/ContentHider'
23
import {PostAlerts} from '#/components/moderation/PostAlerts'
24
import {RichText} from '#/components/RichText'
···
122
}: CommonProps & {
123
embed: TEmbed
124
}) {
125
switch (embed.type) {
126
case 'feed': {
127
return (
···
175
)
176
}
177
case 'post_blocked': {
178
return (
179
-
<PostPlaceholderText>
180
<Trans>Blocked</Trans>
181
</PostPlaceholderText>
182
)
183
}
184
case 'post_detached': {
185
-
return <PostDetachedEmbed embed={embed} />
186
}
187
default: {
188
return null
···
190
}
191
}
192
193
export function PostDetachedEmbed({
194
embed,
195
}: {
196
embed: EmbedType<'post_detached'>
197
}) {
198
const {currentAccount} = useSession()
199
const isViewerOwner = currentAccount?.did
···
201
: false
202
203
return (
204
-
<PostPlaceholderText>
205
{isViewerOwner ? (
206
<Trans>Removed by you</Trans>
207
) : (
···
221
style,
222
isWithinQuote: parentIsWithinQuote,
223
allowNestedQuotes: parentAllowNestedQuotes,
224
}: Omit<CommonProps, 'viewContext'> & {
225
embed: EmbedType<'post'>
226
viewContext?: QuoteEmbedViewContext
227
}) {
228
const moderationOpts = useModerationOpts()
229
const quote = React.useMemo<$Typed<AppBskyFeedDefs.PostView>>(
···
292
title={itemTitle}
293
onBeforePress={onBeforePress}>
294
<View pointerEvents="none">
295
<PostMeta
296
author={quote.author}
297
moderation={moderation}
···
330
</View>
331
)
332
}
···
1
import React from 'react'
2
+
import {StyleSheet, View} from 'react-native'
3
import {
4
type $Typed,
5
type AppBskyFeedDefs,
···
8
moderatePost,
9
RichText as RichTextAPI,
10
} from '@atproto/api'
11
+
import {msg, Trans} from '@lingui/macro'
12
+
import {useLingui} from '@lingui/react'
13
import {useQueryClient} from '@tanstack/react-query'
14
15
import {usePalette} from '#/lib/hooks/usePalette'
16
import {makeProfileLink} from '#/lib/routes/links'
17
+
import {useDirectFetchRecords} from '#/state/preferences/direct-fetch-records'
18
import {useModerationOpts} from '#/state/preferences/moderation-opts'
19
+
import {useDirectFetchEmbedRecord} from '#/state/queries/direct-fetch-record'
20
import {unstableCacheProfileView} from '#/state/queries/profile'
21
import {useSession} from '#/state/session'
22
import {Link} from '#/view/com/util/Link'
23
import {PostMeta} from '#/view/com/util/PostMeta'
24
+
import {Text} from '#/view/com/util/text/Text'
25
import {atoms as a, useTheme} from '#/alf'
26
+
import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash'
27
import {ContentHider} from '#/components/moderation/ContentHider'
28
import {PostAlerts} from '#/components/moderation/PostAlerts'
29
import {RichText} from '#/components/RichText'
···
127
}: CommonProps & {
128
embed: TEmbed
129
}) {
130
+
const {_} = useLingui()
131
+
const directFetchEnabled = useDirectFetchRecords()
132
+
const shouldDirectFetch =
133
+
(embed.type === 'post_blocked' || embed.type === 'post_detached') &&
134
+
directFetchEnabled
135
+
136
+
const directRecord = useDirectFetchEmbedRecord({
137
+
uri:
138
+
embed.type === 'post_blocked' || embed.type === 'post_detached'
139
+
? embed.view.uri
140
+
: '',
141
+
enabled: shouldDirectFetch,
142
+
})
143
+
144
switch (embed.type) {
145
case 'feed': {
146
return (
···
194
)
195
}
196
case 'post_blocked': {
197
+
const record = directRecord.data
198
+
if (record !== undefined) {
199
+
return (
200
+
<DirectFetchEmbed
201
+
{...rest}
202
+
embed={record}
203
+
visibilityLabel={_(msg`Blocked`)}
204
+
/>
205
+
)
206
+
}
207
+
208
return (
209
+
<PostPlaceholderText directFetchEnabled={directFetchEnabled}>
210
<Trans>Blocked</Trans>
211
</PostPlaceholderText>
212
)
213
}
214
case 'post_detached': {
215
+
const record = directRecord.data
216
+
if (record !== undefined) {
217
+
return (
218
+
<DirectFetchEmbed
219
+
{...rest}
220
+
embed={record}
221
+
visibilityLabel={_(msg`Removed by author`)}
222
+
visibilityLabelOwner={_(`Removed by you`)}
223
+
/>
224
+
)
225
+
}
226
+
227
+
return (
228
+
<PostDetachedEmbed
229
+
embed={embed}
230
+
directFetchEnabled={directFetchEnabled}
231
+
/>
232
+
)
233
}
234
default: {
235
return null
···
237
}
238
}
239
240
+
export function DirectFetchEmbed({
241
+
embed,
242
+
visibilityLabel,
243
+
visibilityLabelOwner,
244
+
...rest
245
+
}: Omit<CommonProps, 'viewContext'> & {
246
+
embed: EmbedType<'post'>
247
+
viewContext?: PostEmbedViewContext
248
+
visibilityLabel: string
249
+
visibilityLabelOwner?: string
250
+
}) {
251
+
const {currentAccount} = useSession()
252
+
const isViewerOwner = currentAccount?.did
253
+
? embed.view.uri.includes(currentAccount.did)
254
+
: false
255
+
256
+
return (
257
+
<View>
258
+
<QuoteEmbed
259
+
{...rest}
260
+
embed={embed}
261
+
viewContext={
262
+
rest.viewContext === PostEmbedViewContext.Feed
263
+
? QuoteEmbedViewContext.FeedEmbedRecordWithMedia
264
+
: undefined
265
+
}
266
+
isWithinQuote={rest.isWithinQuote}
267
+
allowNestedQuotes={rest.allowNestedQuotes}
268
+
visibilityLabel={
269
+
isViewerOwner && visibilityLabelOwner
270
+
? visibilityLabelOwner
271
+
: visibilityLabel
272
+
}
273
+
/>
274
+
</View>
275
+
)
276
+
}
277
+
278
export function PostDetachedEmbed({
279
embed,
280
+
directFetchEnabled,
281
}: {
282
embed: EmbedType<'post_detached'>
283
+
directFetchEnabled?: boolean
284
}) {
285
const {currentAccount} = useSession()
286
const isViewerOwner = currentAccount?.did
···
288
: false
289
290
return (
291
+
<PostPlaceholderText directFetchEnabled={directFetchEnabled}>
292
{isViewerOwner ? (
293
<Trans>Removed by you</Trans>
294
) : (
···
308
style,
309
isWithinQuote: parentIsWithinQuote,
310
allowNestedQuotes: parentAllowNestedQuotes,
311
+
visibilityLabel,
312
}: Omit<CommonProps, 'viewContext'> & {
313
embed: EmbedType<'post'>
314
viewContext?: QuoteEmbedViewContext
315
+
visibilityLabel?: string
316
}) {
317
const moderationOpts = useModerationOpts()
318
const quote = React.useMemo<$Typed<AppBskyFeedDefs.PostView>>(
···
381
title={itemTitle}
382
onBeforePress={onBeforePress}>
383
<View pointerEvents="none">
384
+
{visibilityLabel !== undefined ? (
385
+
<View style={[styles.blockHeader, t.atoms.border_contrast_low]}>
386
+
<EyeSlashIcon size="sm" style={pal.text} />
387
+
<Text type="lg" style={pal.text}>
388
+
{visibilityLabel}
389
+
</Text>
390
+
</View>
391
+
) : undefined}
392
<PostMeta
393
author={quote.author}
394
moderation={moderation}
···
427
</View>
428
)
429
}
430
+
431
+
const styles = StyleSheet.create({
432
+
blockHeader: {
433
+
flexDirection: 'row',
434
+
alignItems: 'center',
435
+
gap: 4,
436
+
marginBottom: 8,
437
+
},
438
+
})
-1
src/components/PostControls/PostMenu/PostMenuItems.tsx
-1
src/components/PostControls/PostMenu/PostMenuItems.tsx
···
35
import {toShareUrl} from '#/lib/strings/url-helpers'
36
import {getTranslatorLink} from '#/locale/helpers'
37
import {logger} from '#/logger'
38
-
import {isWeb} from '#/platform/detection'
39
import {type Shadow} from '#/state/cache/post-shadow'
40
import {useProfileShadow} from '#/state/cache/profile-shadow'
41
import {useFeedFeedbackContext} from '#/state/feed-feedback'
···
35
import {toShareUrl} from '#/lib/strings/url-helpers'
36
import {getTranslatorLink} from '#/locale/helpers'
37
import {logger} from '#/logger'
38
import {type Shadow} from '#/state/cache/post-shadow'
39
import {useProfileShadow} from '#/state/cache/profile-shadow'
40
import {useFeedFeedbackContext} from '#/state/feed-feedback'
+1
-2
src/components/verification/VerifierDialog.tsx
+1
-2
src/components/verification/VerifierDialog.tsx
+2
-2
src/screens/Profile/Header/Handle.tsx
+2
-2
src/screens/Profile/Header/Handle.tsx
···
3
import {msg, Trans} from '@lingui/macro'
4
import {useLingui} from '@lingui/react'
5
6
-
import {isInvalidHandle} from '#/lib/strings/handles'
7
import {isIOS} from '#/platform/detection'
8
import {type Shadow} from '#/state/cache/types'
9
import {useShowLinkInHandle} from '#/state/preferences/show-link-in-handle.tsx'
···
64
</Text>
65
</InlineLinkText>
66
) : (
67
-
`@${profile.handle}`
68
)}
69
</Text>
70
</View>
···
3
import {msg, Trans} from '@lingui/macro'
4
import {useLingui} from '@lingui/react'
5
6
+
import {isInvalidHandle, sanitizeHandle} from '#/lib/strings/handles'
7
import {isIOS} from '#/platform/detection'
8
import {type Shadow} from '#/state/cache/types'
9
import {useShowLinkInHandle} from '#/state/preferences/show-link-in-handle.tsx'
···
64
</Text>
65
</InlineLinkText>
66
) : (
67
+
sanitizeHandle(profile.handle, '@')
68
)}
69
</Text>
70
</View>
+1
-1
src/screens/Settings/AboutSettings.tsx
+1
-1
src/screens/Settings/AboutSettings.tsx
···
30
const {_, i18n} = useLingui()
31
const [devModeEnabled, setDevModeEnabled] = useDevMode()
32
const [demoModeEnabled, setDemoModeEnabled] = useDemoMode()
33
-
const stableID = useMemo(() => Statsig.getStableID(), [])
34
35
const {mutate: onClearImageCache, isPending: isClearingImageCache} =
36
useMutation({
+6
-66
src/state/geolocation.tsx
+6
-66
src/state/geolocation.tsx
···
1
import React from 'react'
2
import EventEmitter from 'eventemitter3'
3
4
-
import {networkRetry} from '#/lib/async/retry'
5
import {logger} from '#/logger'
6
import {type Device, device} from '#/storage'
7
···
27
countryCode: 'US',
28
}
29
30
-
async function getGeolocation(): Promise<Device['geolocation']> {
31
-
const res = await fetch(`https://bsky.app/ipcc`)
32
-
33
-
if (!res.ok) {
34
-
throw new Error(`geolocation: lookup failed ${res.status}`)
35
-
}
36
-
37
-
const json = await res.json()
38
-
39
-
if (json.countryCode) {
40
-
return {
41
-
countryCode: json.countryCode,
42
-
}
43
-
} else {
44
-
return undefined
45
-
}
46
-
}
47
-
48
/**
49
* Local promise used within this file only.
50
*/
···
64
* In dev, IP server is unavailable, so we just set the default geolocation
65
* and fail closed.
66
*/
67
-
if (__DEV__) {
68
-
geolocationResolution = new Promise(y => y({success: true}))
69
device.set(['geolocation'], DEFAULT_GEOLOCATION)
70
}
71
}
72
73
-
geolocationResolution = new Promise(async resolve => {
74
-
let success = true
75
-
76
-
try {
77
-
// Try once, fail fast
78
-
const geolocation = await getGeolocation()
79
-
if (geolocation) {
80
-
device.set(['geolocation'], geolocation)
81
-
emitGeolocationUpdate(geolocation)
82
-
logger.debug(`geolocation: success`, {geolocation})
83
-
} else {
84
-
// endpoint should throw on all failures, this is insurance
85
-
throw new Error(`geolocation: nothing returned from initial request`)
86
-
}
87
-
} catch (e: any) {
88
-
success = false
89
-
90
-
logger.debug(`geolocation: failed initial request`, {
91
-
safeMessage: e.message,
92
-
})
93
-
94
-
// set to default
95
-
device.set(['geolocation'], DEFAULT_GEOLOCATION)
96
-
97
-
// retry 3 times, but don't await, proceed with default
98
-
networkRetry(3, getGeolocation)
99
-
.then(geolocation => {
100
-
if (geolocation) {
101
-
device.set(['geolocation'], geolocation)
102
-
emitGeolocationUpdate(geolocation)
103
-
logger.debug(`geolocation: success`, {geolocation})
104
-
success = true
105
-
} else {
106
-
// endpoint should throw on all failures, this is insurance
107
-
throw new Error(`geolocation: nothing returned from retries`)
108
-
}
109
-
})
110
-
.catch((e: any) => {
111
-
// complete fail closed
112
-
logger.debug(`geolocation: failed retries`, {safeMessage: e.message})
113
-
})
114
-
} finally {
115
-
resolve({success})
116
-
}
117
-
})
118
119
/**
120
* Ensure that geolocation has been resolved, or at the very least attempted
···
1
import React from 'react'
2
import EventEmitter from 'eventemitter3'
3
4
import {logger} from '#/logger'
5
import {type Device, device} from '#/storage'
6
···
26
countryCode: 'US',
27
}
28
29
/**
30
* Local promise used within this file only.
31
*/
···
45
* In dev, IP server is unavailable, so we just set the default geolocation
46
* and fail closed.
47
*/
48
+
geolocationResolution = new Promise(y => y({success: true}))
49
+
if (device.get(['geolocation']) == undefined) {
50
device.set(['geolocation'], DEFAULT_GEOLOCATION)
51
}
52
}
53
54
+
export function setGeolocation(geolocation: Device['geolocation']) {
55
+
device.set(['geolocation'], geolocation)
56
+
emitGeolocationUpdate(geolocation)
57
+
}
58
59
/**
60
* Ensure that geolocation has been resolved, or at the very least attempted
+13
-9
src/state/queries/direct-fetch-record.ts
+13
-9
src/state/queries/direct-fetch-record.ts
···
12
import {STALE} from '#/state/queries'
13
import {useAgent} from '#/state/session'
14
import * as bsky from '#/types/bsky'
15
16
const RQKEY_ROOT = 'direct-fetch-record'
17
export const RQKEY = (uri: string) => [RQKEY_ROOT, uri]
···
62
export async function directFetchEmbedRecord(
63
agent: BskyAgent,
64
uri: string,
65
-
): Promise<AppBskyEmbedRecord.ViewRecord | undefined> {
66
const res = await directFetchRecordAndProfile(agent, uri)
67
if (res === undefined) return undefined
68
const {profile, record} = res
69
70
if (record && bsky.validate(record, AppBskyFeedPost.validateRecord)) {
71
return {
72
-
$type: 'app.bsky.embed.record#viewRecord',
73
-
uri,
74
-
author: profile as ProfileViewBasic,
75
-
cid: 'directfetch',
76
-
value: record,
77
-
indexedAt: new Date().toISOString(),
78
-
} satisfies AppBskyEmbedRecord.ViewRecord
79
} else {
80
return undefined
81
}
···
89
enabled?: boolean
90
}) {
91
const agent = useAgent()
92
-
return useQuery<AppBskyEmbedRecord.ViewRecord | undefined>({
93
staleTime: STALE.HOURS.ONE,
94
queryKey: RQKEY(uri || ''),
95
async queryFn() {
···
12
import {STALE} from '#/state/queries'
13
import {useAgent} from '#/state/session'
14
import * as bsky from '#/types/bsky'
15
+
import {type EmbedType} from '#/types/bsky/post'
16
17
const RQKEY_ROOT = 'direct-fetch-record'
18
export const RQKEY = (uri: string) => [RQKEY_ROOT, uri]
···
63
export async function directFetchEmbedRecord(
64
agent: BskyAgent,
65
uri: string,
66
+
): Promise<EmbedType<'post'> | undefined> {
67
const res = await directFetchRecordAndProfile(agent, uri)
68
if (res === undefined) return undefined
69
const {profile, record} = res
70
71
if (record && bsky.validate(record, AppBskyFeedPost.validateRecord)) {
72
return {
73
+
type: 'post',
74
+
view: {
75
+
$type: 'app.bsky.embed.record#viewRecord',
76
+
uri,
77
+
author: profile as ProfileViewBasic,
78
+
cid: 'directfetch',
79
+
value: record,
80
+
indexedAt: new Date().toISOString(),
81
+
} satisfies AppBskyEmbedRecord.ViewRecord,
82
+
}
83
} else {
84
return undefined
85
}
···
93
enabled?: boolean
94
}) {
95
const agent = useAgent()
96
+
return useQuery<EmbedType<'post'> | undefined>({
97
staleTime: STALE.HOURS.ONE,
98
queryKey: RQKEY(uri || ''),
99
async queryFn() {
+1
-1
src/storage/schema.ts
+1
-1
src/storage/schema.ts
+1
src/view/com/posts/PostFeed.tsx
+1
src/view/com/posts/PostFeed.tsx
+2
-2
src/view/com/profile/ProfileMenu.tsx
+2
-2
src/view/com/profile/ProfileMenu.tsx
···
330
<Menu.ItemText>
331
<Trans>Remove trust</Trans>
332
</Menu.ItemText>
333
-
<Menu.ItemIcon icon={CircleX} />
334
</Menu.Item>
335
) : (
336
<Menu.Item
···
340
<Menu.ItemText>
341
<Trans>Trust verifier</Trans>
342
</Menu.ItemText>
343
-
<Menu.ItemIcon icon={CircleCheck} />
344
</Menu.Item>
345
))}
346
{isSelf && canGoLive && (
···
330
<Menu.ItemText>
331
<Trans>Remove trust</Trans>
332
</Menu.ItemText>
333
+
<Menu.ItemIcon icon={CircleXIcon} />
334
</Menu.Item>
335
) : (
336
<Menu.Item
···
340
<Menu.ItemText>
341
<Trans>Trust verifier</Trans>
342
</Menu.ItemText>
343
+
<Menu.ItemIcon icon={CircleCheckIcon} />
344
</Menu.Item>
345
))}
346
{isSelf && canGoLive && (
+1
src/view/com/util/UserAvatar.tsx
+1
src/view/com/util/UserAvatar.tsx
+16
-16
src/view/com/util/UserBanner.tsx
+16
-16
src/view/com/util/UserBanner.tsx
···
1
-
import React from 'react'
2
import {useCallback, useState} from 'react'
3
import {
4
Pressable,
···
7
View,
8
} from 'react-native'
9
import {
10
type MeasuredDimensions,
11
runOnJS,
12
runOnUI,
13
} from 'react-native-reanimated'
14
-
import {measure, useAnimatedRef} from 'react-native-reanimated'
15
import {Image} from 'expo-image'
16
import {type ModerationUI} from '@atproto/api'
17
import {msg, Trans} from '@lingui/macro'
···
24
import {compressIfNeeded} from '#/lib/media/manip'
25
import {openCamera, openCropper, openPicker} from '#/lib/media/picker'
26
import {type PickerImage} from '#/lib/media/picker.shared'
27
-
import {useTheme} from '#/lib/ThemeContext'
28
import {logger} from '#/logger'
29
import {isAndroid, isNative} from '#/platform/detection'
30
import {
···
39
} from '#/state/preferences/high-quality-images'
40
import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog'
41
import {EventStopper} from '#/view/com/util/EventStopper'
42
-
import {atoms as a, tokens, useTheme as useAlfTheme} from '#/alf'
43
import {useDialogControl} from '#/components/Dialog'
44
import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
45
import {
···
61
moderation?: ModerationUI
62
onSelectNewBanner?: (img: PickerImage | null) => void
63
}) {
64
-
const theme = useTheme()
65
-
const t = useAlfTheme()
66
const {_} = useLingui()
67
const {requestCameraAccessIfNeeded} = useCameraPermission()
68
const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
69
const sheetWrapper = useSheetWrapper()
70
const {openLightbox} = useLightboxControls()
71
const highQualityImages = useHighQualityImages()
72
73
const bannerRef = useAnimatedRef()
74
-
const [rawImage, setRawImage] = useState<ComposerImage | undefined>()
75
-
const editImageDialogControl = useDialogControl()
76
77
const onOpenCamera = useCallback(async () => {
78
if (!(await requestCameraAccessIfNeeded())) {
···
126
onSelectNewBanner?.(null)
127
}, [onSelectNewBanner])
128
129
-
const _openLightbox = React.useCallback(
130
(uri: string, thumbRect: MeasuredDimensions | null) => {
131
openLightbox({
132
images: [
···
145
[openLightbox, highQualityImages],
146
)
147
148
-
const onPressBanner = React.useCallback(() => {
149
if (banner && !(moderation?.blur && moderation?.noOverride)) {
150
runOnUI(() => {
151
'worklet'
···
175
<Image
176
testID="userBannerImage"
177
style={styles.bannerImage}
178
-
source={{uri: banner}}
179
accessible={true}
180
accessibilityIgnoresInvertColors
181
/>
···
266
accessibilityHint="">
267
<Image
268
testID="userBannerImage"
269
-
style={[
270
-
styles.bannerImage,
271
-
{backgroundColor: theme.palette.default.backgroundLight},
272
-
]}
273
contentFit="cover"
274
-
source={{uri: banner}}
275
blurRadius={moderation?.blur ? 100 : 0}
276
accessible={true}
277
accessibilityIgnoresInvertColors
···
1
import {useCallback, useState} from 'react'
2
import {
3
Pressable,
···
6
View,
7
} from 'react-native'
8
import {
9
+
measure,
10
type MeasuredDimensions,
11
runOnJS,
12
runOnUI,
13
+
useAnimatedRef,
14
} from 'react-native-reanimated'
15
import {Image} from 'expo-image'
16
import {type ModerationUI} from '@atproto/api'
17
import {msg, Trans} from '@lingui/macro'
···
24
import {compressIfNeeded} from '#/lib/media/manip'
25
import {openCamera, openCropper, openPicker} from '#/lib/media/picker'
26
import {type PickerImage} from '#/lib/media/picker.shared'
27
import {logger} from '#/logger'
28
import {isAndroid, isNative} from '#/platform/detection'
29
import {
···
38
} from '#/state/preferences/high-quality-images'
39
import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog'
40
import {EventStopper} from '#/view/com/util/EventStopper'
41
+
import {atoms as a, tokens, useTheme} from '#/alf'
42
import {useDialogControl} from '#/components/Dialog'
43
import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
44
import {
···
60
moderation?: ModerationUI
61
onSelectNewBanner?: (img: PickerImage | null) => void
62
}) {
63
+
const t = useTheme()
64
const {_} = useLingui()
65
const {requestCameraAccessIfNeeded} = useCameraPermission()
66
const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
67
const sheetWrapper = useSheetWrapper()
68
+
const [rawImage, setRawImage] = useState<ComposerImage | undefined>()
69
+
const editImageDialogControl = useDialogControl()
70
const {openLightbox} = useLightboxControls()
71
const highQualityImages = useHighQualityImages()
72
73
const bannerRef = useAnimatedRef()
74
75
const onOpenCamera = useCallback(async () => {
76
if (!(await requestCameraAccessIfNeeded())) {
···
124
onSelectNewBanner?.(null)
125
}, [onSelectNewBanner])
126
127
+
const _openLightbox = useCallback(
128
(uri: string, thumbRect: MeasuredDimensions | null) => {
129
openLightbox({
130
images: [
···
143
[openLightbox, highQualityImages],
144
)
145
146
+
const onPressBanner = useCallback(() => {
147
if (banner && !(moderation?.blur && moderation?.noOverride)) {
148
runOnUI(() => {
149
'worklet'
···
173
<Image
174
testID="userBannerImage"
175
style={styles.bannerImage}
176
+
source={{
177
+
uri: maybeModifyHighQualityImage(
178
+
banner,
179
+
highQualityImages,
180
+
),
181
+
}}
182
accessible={true}
183
accessibilityIgnoresInvertColors
184
/>
···
269
accessibilityHint="">
270
<Image
271
testID="userBannerImage"
272
+
style={[styles.bannerImage, t.atoms.bg_contrast_25]}
273
contentFit="cover"
274
+
source={{uri: maybeModifyHighQualityImage(banner, highQualityImages)}}
275
blurRadius={moderation?.blur ? 100 : 0}
276
accessible={true}
277
accessibilityIgnoresInvertColors