Unify lightbox types

This commit is contained in:
Dan Abramov
2024-11-01 23:49:12 +00:00
parent 431c81981c
commit fd27242ce8
6 changed files with 17 additions and 59 deletions
+12 -2
View File
@@ -55,8 +55,18 @@ let ProfileHeaderShell = ({
const modui = moderation.ui('avatar') const modui = moderation.ui('avatar')
if (profile.avatar && !(modui.blur && modui.noOverride)) { if (profile.avatar && !(modui.blur && modui.noOverride)) {
openLightbox({ openLightbox({
type: 'profile-image', images: [
profile: profile, {
uri: profile.avatar,
thumbUri: profile.avatar,
dimensions: {
// It's fine if it's actually smaller but we know it's 1:1.
height: 1000,
width: 1000,
},
},
],
index: 0,
thumbDims: null, thumbDims: null,
}) })
} }
+1 -11
View File
@@ -1,16 +1,9 @@
import React from 'react' import React from 'react'
import type {MeasuredDimensions} from 'react-native-reanimated' import type {MeasuredDimensions} from 'react-native-reanimated'
import {AppBskyActorDefs} from '@atproto/api'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {Dimensions} from '#/lib/media/types' import {Dimensions} from '#/lib/media/types'
type ProfileImageLightbox = {
type: 'profile-image'
profile: AppBskyActorDefs.ProfileViewDetailed
thumbDims: null
}
type ImagesLightboxItem = { type ImagesLightboxItem = {
uri: string uri: string
thumbUri: string thumbUri: string
@@ -18,15 +11,12 @@ type ImagesLightboxItem = {
dimensions: Dimensions | null dimensions: Dimensions | null
} }
type ImagesLightbox = { type Lightbox = {
type: 'images'
images: ImagesLightboxItem[] images: ImagesLightboxItem[]
thumbDims: MeasuredDimensions | null thumbDims: MeasuredDimensions | null
index: number index: number
} }
type Lightbox = ProfileImageLightbox | ImagesLightbox
const LightboxContext = React.createContext<{ const LightboxContext = React.createContext<{
activeLightbox: Lightbox | null activeLightbox: Lightbox | null
}>({ }>({
+2 -26
View File
@@ -27,33 +27,11 @@ export function Lightbox() {
if (!activeLightbox) { if (!activeLightbox) {
return null return null
} else if (activeLightbox.type === 'profile-image') { } else {
const opts = activeLightbox const opts = activeLightbox
return ( return (
<ImageView <ImageView
images={[ images={opts.images}
{
uri: opts.profile.avatar || '',
thumbUri: opts.profile.avatar || '',
dimensions: {
// It's fine if it's actually smaller but we know it's 1:1.
height: 1000,
width: 1000,
},
},
]}
initialImageIndex={0}
thumbDims={opts.thumbDims}
visible
onRequestClose={onClose}
renderFooter={() => <LightboxFooter uri={opts.profile.avatar || ''} />}
/>
)
} else if (activeLightbox.type === 'images') {
const opts = activeLightbox
return (
<ImageView
images={opts.images.map(img => ({...img}))}
initialImageIndex={opts.index} initialImageIndex={opts.index}
thumbDims={opts.thumbDims} thumbDims={opts.thumbDims}
visible visible
@@ -66,8 +44,6 @@ export function Lightbox() {
)} )}
/> />
) )
} else {
return null
} }
} }
+2 -18
View File
@@ -38,24 +38,8 @@ export function Lightbox() {
return null return null
} }
const initialIndex = const initialIndex = activeLightbox.index
activeLightbox.type === 'images' ? activeLightbox.index : 0 const imgs = activeLightbox.images
let imgs: Img[] | undefined
if (activeLightbox.type === 'profile-image') {
const opts = activeLightbox
if (opts.profile.avatar) {
imgs = [{uri: opts.profile.avatar}]
}
} else if (activeLightbox.type === 'images') {
const opts = activeLightbox
imgs = opts.images
}
if (!imgs) {
return null
}
return ( return (
<LightboxInner <LightboxInner
imgs={imgs} imgs={imgs}
@@ -71,7 +71,6 @@ export function ProfileSubpageHeader({
avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride) avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
) { ) {
openLightbox({ openLightbox({
type: 'images',
images: [ images: [
{ {
uri: avatar, uri: avatar,
-1
View File
@@ -152,7 +152,6 @@ export function PostEmbeds({
thumbDims: MeasuredDimensions | null, thumbDims: MeasuredDimensions | null,
) => { ) => {
openLightbox({ openLightbox({
type: 'images',
images: items, images: items,
index, index,
thumbDims, thumbDims,