Always animate lightbox transitions
This commit is contained in:
parent
4591b56f7f
commit
c5c399e4e8
1 changed files with 5 additions and 4 deletions
|
@ -86,8 +86,9 @@ export function Lightbox({
|
||||||
hasPrevMessage,
|
hasPrevMessage,
|
||||||
}: PropsType): JSX.Element | null {
|
}: PropsType): JSX.Element | null {
|
||||||
const hasThumbnails = media.length > 1;
|
const hasThumbnails = media.length > 1;
|
||||||
const hadThumbnails = usePrevious(hasThumbnails, hasThumbnails);
|
const messageId = media[0].message.id;
|
||||||
const justGotThumbnails = !hadThumbnails && hasThumbnails;
|
const prevMessageId = usePrevious(messageId, messageId);
|
||||||
|
const needsAnimation = messageId !== prevMessageId;
|
||||||
const [root, setRoot] = React.useState<HTMLElement | undefined>();
|
const [root, setRoot] = React.useState<HTMLElement | undefined>();
|
||||||
|
|
||||||
const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
|
const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
|
||||||
|
@ -301,7 +302,7 @@ export function Lightbox({
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!justGotThumbnails) {
|
if (!needsAnimation) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -317,7 +318,7 @@ export function Lightbox({
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
});
|
});
|
||||||
}, [
|
}, [
|
||||||
justGotThumbnails,
|
needsAnimation,
|
||||||
selectedIndex,
|
selectedIndex,
|
||||||
thumbnailsMarginLeft,
|
thumbnailsMarginLeft,
|
||||||
thumbnailsAnimation,
|
thumbnailsAnimation,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue