Always animate lightbox transitions

This commit is contained in:
Fedor Indutny 2023-03-14 09:53:09 -07:00 committed by GitHub
parent 4591b56f7f
commit c5c399e4e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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,