diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx
index 4e34c87ef8..ac98deed7b 100644
--- a/src/screens/Profile/Header/Shell.tsx
+++ b/src/screens/Profile/Header/Shell.tsx
@@ -11,7 +11,7 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {NavigationProp} from '#/lib/routes/types'
import {isIOS} from '#/platform/detection'
import {Shadow} from '#/state/cache/types'
-import {ProfileImageLightbox, useLightboxControls} from '#/state/lightbox'
+import {useLightboxControls} from '#/state/lightbox'
import {useSession} from '#/state/session'
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {UserAvatar} from '#/view/com/util/UserAvatar'
@@ -54,7 +54,10 @@ let ProfileHeaderShell = ({
const onPressAvi = React.useCallback(() => {
const modui = moderation.ui('avatar')
if (profile.avatar && !(modui.blur && modui.noOverride)) {
- openLightbox(new ProfileImageLightbox(profile))
+ openLightbox({
+ type: 'profile-image',
+ profile: profile,
+ })
}
}, [openLightbox, profile, moderation])
diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx
index e3bddaee02..a971643273 100644
--- a/src/state/lightbox.tsx
+++ b/src/state/lightbox.tsx
@@ -1,29 +1,26 @@
import React from 'react'
import {AppBskyActorDefs} from '@atproto/api'
+
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-interface Lightbox {
- name: string
+type ProfileImageLightbox = {
+ type: 'profile-image'
+ profile: AppBskyActorDefs.ProfileViewDetailed
}
-export class ProfileImageLightbox implements Lightbox {
- name = 'profile-image'
- constructor(public profile: AppBskyActorDefs.ProfileViewDetailed) {}
-}
-
-interface ImagesLightboxItem {
+type ImagesLightboxItem = {
uri: string
alt?: string
}
-export class ImagesLightbox implements Lightbox {
- name = 'images'
- constructor(public images: ImagesLightboxItem[], public index: number) {}
- setIndex(index: number) {
- this.index = index
- }
+type ImagesLightbox = {
+ type: 'images'
+ images: ImagesLightboxItem[]
+ index: number
}
+type Lightbox = ProfileImageLightbox | ImagesLightbox
+
const LightboxContext = React.createContext<{
activeLightbox: Lightbox | null
}>({
diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index e1c12e4192..b6bc670c1f 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -9,12 +9,7 @@ import {useLingui} from '@lingui/react'
import {saveImageToMediaLibrary, shareImageModal} from '#/lib/media/manip'
import {colors, s} from '#/lib/styles'
import {isIOS} from '#/platform/detection'
-import {
- ImagesLightbox,
- ProfileImageLightbox,
- useLightbox,
- useLightboxControls,
-} from '#/state/lightbox'
+import {useLightbox, useLightboxControls} from '#/state/lightbox'
import {ScrollView} from '#/view/com/util/Views'
import {Button} from '../util/forms/Button'
import {Text} from '../util/text/Text'
@@ -32,8 +27,8 @@ export function Lightbox() {
if (!activeLightbox) {
return null
- } else if (activeLightbox.name === 'profile-image') {
- const opts = activeLightbox as ProfileImageLightbox
+ } else if (activeLightbox.type === 'profile-image') {
+ const opts = activeLightbox
return (
)
- } else if (activeLightbox.name === 'images') {
- const opts = activeLightbox as ImagesLightbox
+ } else if (activeLightbox.type === 'images') {
+ const opts = activeLightbox
return (
({...img}))}
@@ -107,12 +102,12 @@ function LightboxFooter({imageIndex}: {imageIndex: number}) {
let altText = ''
let uri = ''
- if (lightbox.name === 'images') {
- const opts = lightbox as ImagesLightbox
+ if (lightbox.type === 'images') {
+ const opts = lightbox
uri = opts.images[imageIndex].uri
altText = opts.images[imageIndex].alt || ''
- } else if (lightbox.name === 'profile-image') {
- const opts = lightbox as ProfileImageLightbox
+ } else if (lightbox.type === 'profile-image') {
+ const opts = lightbox
uri = opts.profile.avatar || ''
}
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index 942c9a686e..9a0fa5d331 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -2,30 +2,26 @@ import React, {useCallback, useEffect, useState} from 'react'
import {
Image,
ImageStyle,
+ Pressable,
+ StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
- StyleSheet,
View,
- Pressable,
ViewStyle,
} from 'react-native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
-import {colors, s} from 'lib/styles'
-import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
-import {Text} from '../util/text/Text'
-import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
-import {
- useLightbox,
- useLightboxControls,
- ImagesLightbox,
- ProfileImageLightbox,
-} from '#/state/lightbox'
+import {useLingui} from '@lingui/react'
+
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {colors, s} from '#/lib/styles'
+import {useLightbox, useLightboxControls} from '#/state/lightbox'
+import {Text} from '../util/text/Text'
+import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
interface Img {
uri: string
@@ -43,15 +39,15 @@ export function Lightbox() {
}
const initialIndex =
- activeLightbox instanceof ImagesLightbox ? activeLightbox.index : 0
+ activeLightbox.type === 'images' ? activeLightbox.index : 0
let imgs: Img[] | undefined
- if (activeLightbox instanceof ProfileImageLightbox) {
+ if (activeLightbox.type === 'profile-image') {
const opts = activeLightbox
if (opts.profile.avatar) {
imgs = [{uri: opts.profile.avatar}]
}
- } else if (activeLightbox instanceof ImagesLightbox) {
+ } else if (activeLightbox.type === 'images') {
const opts = activeLightbox
imgs = opts.images
}
diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx
index d6995749bf..6b267c6da8 100644
--- a/src/view/com/profile/ProfileSubpageHeader.tsx
+++ b/src/view/com/profile/ProfileSubpageHeader.tsx
@@ -13,7 +13,7 @@ import {NavigationProp} from '#/lib/routes/types'
import {sanitizeHandle} from '#/lib/strings/handles'
import {isNative} from '#/platform/detection'
import {emitSoftReset} from '#/state/events'
-import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
+import {useLightboxControls} from '#/state/lightbox'
import {useSetDrawerOpen} from '#/state/shell'
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
import {StarterPack} from '#/components/icons/StarterPack'
@@ -70,7 +70,11 @@ export function ProfileSubpageHeader({
if (
avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
) {
- openLightbox(new ImagesLightbox([{uri: avatar}], 0))
+ openLightbox({
+ type: 'images',
+ images: [{uri: avatar}],
+ index: 0,
+ })
}
}, [openLightbox, avatar])
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 70192c813f..5100e7032c 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -21,7 +21,7 @@ import {
} from '@atproto/api'
import {usePalette} from '#/lib/hooks/usePalette'
-import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
+import {useLightboxControls} from '#/state/lightbox'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
import {atoms as a, useTheme} from '#/alf'
@@ -138,7 +138,11 @@ export function PostEmbeds({
aspectRatio: img.aspectRatio,
}))
const _openLightbox = (index: number) => {
- openLightbox(new ImagesLightbox(items, index))
+ openLightbox({
+ type: 'images',
+ images: items,
+ index,
+ })
}
const onPressIn = (_: number) => {
InteractionManager.runAfterInteractions(() => {