forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add lightbox for web
+123
+121
src/view/com/lightbox/Lightbox.web.tsx
+121
src/view/com/lightbox/Lightbox.web.tsx
···
1
+
import React from 'react'
2
+
import {
3
+
Image,
4
+
TouchableOpacity,
5
+
TouchableWithoutFeedback,
6
+
StyleSheet,
7
+
View,
8
+
} from 'react-native'
9
+
import {observer} from 'mobx-react-lite'
10
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
11
+
import {useStores} from '../../../state'
12
+
import * as models from '../../../state/models/shell-ui'
13
+
import {colors} from '../../lib/styles'
14
+
15
+
interface Img {
16
+
uri: string
17
+
}
18
+
19
+
export const Lightbox = observer(function Lightbox() {
20
+
const store = useStores()
21
+
if (!store.shell.isLightboxActive) {
22
+
return null
23
+
}
24
+
25
+
const onClose = () => store.shell.closeLightbox()
26
+
27
+
let imgs: Img[] | undefined
28
+
if (store.shell.activeLightbox?.name === 'profile-image') {
29
+
const opts = store.shell.activeLightbox as models.ProfileImageLightbox
30
+
if (opts.profileView.avatar) {
31
+
imgs = [{uri: opts.profileView.avatar}]
32
+
}
33
+
} else if (store.shell.activeLightbox?.name === 'images') {
34
+
const opts = store.shell.activeLightbox as models.ImagesLightbox
35
+
imgs = opts.uris.map(uri => ({uri}))
36
+
}
37
+
38
+
if (!imgs) {
39
+
return null
40
+
}
41
+
42
+
return <LightboxInner imgs={imgs} onClose={onClose} />
43
+
})
44
+
45
+
function LightboxInner({imgs, onClose}: {imgs: Img[]; onClose: () => void}) {
46
+
const [index, setIndex] = React.useState<number>(0)
47
+
48
+
const canGoLeft = index >= 1
49
+
const canGoRight = index < imgs.length - 1
50
+
const onPressLeft = () => {
51
+
if (canGoLeft) {
52
+
setIndex(index - 1)
53
+
}
54
+
}
55
+
const onPressRight = () => {
56
+
if (canGoRight) {
57
+
setIndex(index + 1)
58
+
}
59
+
}
60
+
61
+
return (
62
+
<TouchableWithoutFeedback onPress={onClose}>
63
+
<View style={styles.mask}>
64
+
<Image source={imgs[index]} style={styles.image} />
65
+
{canGoLeft && (
66
+
<TouchableOpacity
67
+
onPress={onPressLeft}
68
+
style={[styles.btn, styles.leftBtn]}>
69
+
<FontAwesomeIcon icon="angle-left" style={styles.icon} size={40} />
70
+
</TouchableOpacity>
71
+
)}
72
+
{canGoRight && (
73
+
<TouchableOpacity
74
+
onPress={onPressRight}
75
+
style={[styles.btn, styles.rightBtn]}>
76
+
<FontAwesomeIcon icon="angle-right" style={styles.icon} size={40} />
77
+
</TouchableOpacity>
78
+
)}
79
+
</View>
80
+
</TouchableWithoutFeedback>
81
+
)
82
+
}
83
+
84
+
const styles = StyleSheet.create({
85
+
mask: {
86
+
position: 'absolute',
87
+
top: 0,
88
+
left: 0,
89
+
width: '100%',
90
+
height: '100%',
91
+
backgroundColor: '#000c',
92
+
alignItems: 'center',
93
+
justifyContent: 'center',
94
+
},
95
+
image: {
96
+
width: '100%',
97
+
height: '100%',
98
+
resizeMode: 'contain',
99
+
},
100
+
icon: {
101
+
color: colors.white,
102
+
},
103
+
btn: {
104
+
position: 'absolute',
105
+
backgroundColor: '#000',
106
+
width: 50,
107
+
height: 50,
108
+
justifyContent: 'center',
109
+
alignItems: 'center',
110
+
borderRadius: 25,
111
+
},
112
+
leftBtn: {
113
+
left: 30,
114
+
top: '50%',
115
+
},
116
+
rightBtn: {
117
+
position: 'absolute',
118
+
right: 30,
119
+
top: '50%',
120
+
},
121
+
})
+2
src/view/shell/web/index.tsx
+2
src/view/shell/web/index.tsx
···
8
8
import {Onboard} from '../../screens/Onboard'
9
9
import {Login} from '../../screens/Login'
10
10
import {ErrorBoundary} from '../../com/util/ErrorBoundary'
11
+
import {Lightbox} from '../../com/lightbox/Lightbox'
11
12
import {usePalette} from '../../lib/hooks/usePalette'
12
13
import {s} from '../../lib/styles'
13
14
···
46
47
))}
47
48
<DesktopLeftColumn />
48
49
<DesktopRightColumn />
50
+
<Lightbox />
49
51
</View>
50
52
)
51
53
// TODO