forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Refactor lightbox model to plain object (#5999)
* Refactor lightbox model to plain object
* Rename name to type
+48
-49
+5
-2
src/screens/Profile/Header/Shell.tsx
+5
-2
src/screens/Profile/Header/Shell.tsx
···
11
11
import {NavigationProp} from '#/lib/routes/types'
12
12
import {isIOS} from '#/platform/detection'
13
13
import {Shadow} from '#/state/cache/types'
14
-
import {ProfileImageLightbox, useLightboxControls} from '#/state/lightbox'
14
+
import {useLightboxControls} from '#/state/lightbox'
15
15
import {useSession} from '#/state/session'
16
16
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
17
17
import {UserAvatar} from '#/view/com/util/UserAvatar'
···
54
54
const onPressAvi = React.useCallback(() => {
55
55
const modui = moderation.ui('avatar')
56
56
if (profile.avatar && !(modui.blur && modui.noOverride)) {
57
-
openLightbox(new ProfileImageLightbox(profile))
57
+
openLightbox({
58
+
type: 'profile-image',
59
+
profile: profile,
60
+
})
58
61
}
59
62
}, [openLightbox, profile, moderation])
60
63
+11
-14
src/state/lightbox.tsx
+11
-14
src/state/lightbox.tsx
···
1
1
import React from 'react'
2
2
import {AppBskyActorDefs} from '@atproto/api'
3
+
3
4
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
4
5
5
-
interface Lightbox {
6
-
name: string
6
+
type ProfileImageLightbox = {
7
+
type: 'profile-image'
8
+
profile: AppBskyActorDefs.ProfileViewDetailed
7
9
}
8
10
9
-
export class ProfileImageLightbox implements Lightbox {
10
-
name = 'profile-image'
11
-
constructor(public profile: AppBskyActorDefs.ProfileViewDetailed) {}
12
-
}
13
-
14
-
interface ImagesLightboxItem {
11
+
type ImagesLightboxItem = {
15
12
uri: string
16
13
alt?: string
17
14
}
18
15
19
-
export class ImagesLightbox implements Lightbox {
20
-
name = 'images'
21
-
constructor(public images: ImagesLightboxItem[], public index: number) {}
22
-
setIndex(index: number) {
23
-
this.index = index
24
-
}
16
+
type ImagesLightbox = {
17
+
type: 'images'
18
+
images: ImagesLightboxItem[]
19
+
index: number
25
20
}
21
+
22
+
type Lightbox = ProfileImageLightbox | ImagesLightbox
26
23
27
24
const LightboxContext = React.createContext<{
28
25
activeLightbox: Lightbox | null
+9
-14
src/view/com/lightbox/Lightbox.tsx
+9
-14
src/view/com/lightbox/Lightbox.tsx
···
9
9
import {saveImageToMediaLibrary, shareImageModal} from '#/lib/media/manip'
10
10
import {colors, s} from '#/lib/styles'
11
11
import {isIOS} from '#/platform/detection'
12
-
import {
13
-
ImagesLightbox,
14
-
ProfileImageLightbox,
15
-
useLightbox,
16
-
useLightboxControls,
17
-
} from '#/state/lightbox'
12
+
import {useLightbox, useLightboxControls} from '#/state/lightbox'
18
13
import {ScrollView} from '#/view/com/util/Views'
19
14
import {Button} from '../util/forms/Button'
20
15
import {Text} from '../util/text/Text'
···
32
27
33
28
if (!activeLightbox) {
34
29
return null
35
-
} else if (activeLightbox.name === 'profile-image') {
36
-
const opts = activeLightbox as ProfileImageLightbox
30
+
} else if (activeLightbox.type === 'profile-image') {
31
+
const opts = activeLightbox
37
32
return (
38
33
<ImageView
39
34
images={[{uri: opts.profile.avatar || ''}]}
···
43
38
FooterComponent={LightboxFooter}
44
39
/>
45
40
)
46
-
} else if (activeLightbox.name === 'images') {
47
-
const opts = activeLightbox as ImagesLightbox
41
+
} else if (activeLightbox.type === 'images') {
42
+
const opts = activeLightbox
48
43
return (
49
44
<ImageView
50
45
images={opts.images.map(img => ({...img}))}
···
107
102
108
103
let altText = ''
109
104
let uri = ''
110
-
if (lightbox.name === 'images') {
111
-
const opts = lightbox as ImagesLightbox
105
+
if (lightbox.type === 'images') {
106
+
const opts = lightbox
112
107
uri = opts.images[imageIndex].uri
113
108
altText = opts.images[imageIndex].alt || ''
114
-
} else if (lightbox.name === 'profile-image') {
115
-
const opts = lightbox as ProfileImageLightbox
109
+
} else if (lightbox.type === 'profile-image') {
110
+
const opts = lightbox
116
111
uri = opts.profile.avatar || ''
117
112
}
118
113
+11
-15
src/view/com/lightbox/Lightbox.web.tsx
+11
-15
src/view/com/lightbox/Lightbox.web.tsx
···
2
2
import {
3
3
Image,
4
4
ImageStyle,
5
+
Pressable,
6
+
StyleSheet,
5
7
TouchableOpacity,
6
8
TouchableWithoutFeedback,
7
-
StyleSheet,
8
9
View,
9
-
Pressable,
10
10
ViewStyle,
11
11
} from 'react-native'
12
12
import {
13
13
FontAwesomeIcon,
14
14
FontAwesomeIconStyle,
15
15
} from '@fortawesome/react-native-fontawesome'
16
-
import {colors, s} from 'lib/styles'
17
-
import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
18
-
import {Text} from '../util/text/Text'
19
-
import {useLingui} from '@lingui/react'
20
16
import {msg} from '@lingui/macro'
21
-
import {
22
-
useLightbox,
23
-
useLightboxControls,
24
-
ImagesLightbox,
25
-
ProfileImageLightbox,
26
-
} from '#/state/lightbox'
17
+
import {useLingui} from '@lingui/react'
18
+
27
19
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
28
20
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
21
+
import {colors, s} from '#/lib/styles'
22
+
import {useLightbox, useLightboxControls} from '#/state/lightbox'
23
+
import {Text} from '../util/text/Text'
24
+
import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
29
25
30
26
interface Img {
31
27
uri: string
···
43
39
}
44
40
45
41
const initialIndex =
46
-
activeLightbox instanceof ImagesLightbox ? activeLightbox.index : 0
42
+
activeLightbox.type === 'images' ? activeLightbox.index : 0
47
43
48
44
let imgs: Img[] | undefined
49
-
if (activeLightbox instanceof ProfileImageLightbox) {
45
+
if (activeLightbox.type === 'profile-image') {
50
46
const opts = activeLightbox
51
47
if (opts.profile.avatar) {
52
48
imgs = [{uri: opts.profile.avatar}]
53
49
}
54
-
} else if (activeLightbox instanceof ImagesLightbox) {
50
+
} else if (activeLightbox.type === 'images') {
55
51
const opts = activeLightbox
56
52
imgs = opts.images
57
53
}
+6
-2
src/view/com/profile/ProfileSubpageHeader.tsx
+6
-2
src/view/com/profile/ProfileSubpageHeader.tsx
···
13
13
import {sanitizeHandle} from '#/lib/strings/handles'
14
14
import {isNative} from '#/platform/detection'
15
15
import {emitSoftReset} from '#/state/events'
16
-
import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
16
+
import {useLightboxControls} from '#/state/lightbox'
17
17
import {useSetDrawerOpen} from '#/state/shell'
18
18
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
19
19
import {StarterPack} from '#/components/icons/StarterPack'
···
70
70
if (
71
71
avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
72
72
) {
73
-
openLightbox(new ImagesLightbox([{uri: avatar}], 0))
73
+
openLightbox({
74
+
type: 'images',
75
+
images: [{uri: avatar}],
76
+
index: 0,
77
+
})
74
78
}
75
79
}, [openLightbox, avatar])
76
80
+6
-2
src/view/com/util/post-embeds/index.tsx
+6
-2
src/view/com/util/post-embeds/index.tsx
···
21
21
} from '@atproto/api'
22
22
23
23
import {usePalette} from '#/lib/hooks/usePalette'
24
-
import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
24
+
import {useLightboxControls} from '#/state/lightbox'
25
25
import {useModerationOpts} from '#/state/preferences/moderation-opts'
26
26
import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
27
27
import {atoms as a, useTheme} from '#/alf'
···
138
138
aspectRatio: img.aspectRatio,
139
139
}))
140
140
const _openLightbox = (index: number) => {
141
-
openLightbox(new ImagesLightbox(items, index))
141
+
openLightbox({
142
+
type: 'images',
143
+
images: items,
144
+
index,
145
+
})
142
146
}
143
147
const onPressIn = (_: number) => {
144
148
InteractionManager.runAfterInteractions(() => {