Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add lightbox for web

+123
+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
··· 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