Unify lightbox types
This commit is contained in:
@@ -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
@@ -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
|
||||||
}>({
|
}>({
|
||||||
|
|||||||
@@ -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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user