diff --git a/src/components/mediaViewer/helpers/ghostAnimation.ts b/src/components/mediaViewer/helpers/ghostAnimation.ts index f85bc6e0a..16a59b59f 100644 --- a/src/components/mediaViewer/helpers/ghostAnimation.ts +++ b/src/components/mediaViewer/helpers/ghostAnimation.ts @@ -5,8 +5,9 @@ import { ANIMATION_END_DELAY, MESSAGE_CONTENT_SELECTOR } from '../../../config'; import { requestMutation } from '../../../lib/fasterdom/fasterdom'; import { getMessageHtmlId } from '../../../global/helpers'; import { applyStyles } from '../../../util/animation'; -import { isElementInViewport } from '../../../util/isElementInViewport'; import stopEvent from '../../../util/stopEvent'; +import getOffsetToContainer from '../../../util/visibility/getOffsetToContainer'; +import { isElementInViewport } from '../../../util/visibility/isElementInViewport'; import { IS_TOUCH_ENV } from '../../../util/windowEnvironment'; import windowSize from '../../../util/windowSize'; import { @@ -128,11 +129,13 @@ export function animateClosing( let fromScaleY = fromHeight / toHeight; const shouldFadeOut = ( - [MediaViewerOrigin.Inline, MediaViewerOrigin.ScheduledInline].includes(origin) - && !isMessageImageFullyVisible(container, toImage) - ) || ( - [MediaViewerOrigin.Album, MediaViewerOrigin.ScheduledAlbum].includes(origin) - && !isMessageImageFullyVisible(container, toImage) + [ + MediaViewerOrigin.Inline, + MediaViewerOrigin.ScheduledInline, + MediaViewerOrigin.Album, + MediaViewerOrigin.ScheduledAlbum, + ].includes(origin) + && !isMessageImageFullyVisible(toImage) ); if ([ @@ -266,15 +269,13 @@ function uncover(realWidth: number, realHeight: number, top: number, left: numbe }; } -function isMessageImageFullyVisible(container: HTMLElement, imageEl: HTMLElement) { +function isMessageImageFullyVisible(imageEl: HTMLElement) { const messageListElement = document.querySelector('.Transition_slide-active > .MessageList')!; - let imgOffsetTop = container.offsetTop + imageEl.closest('.content-inner, .WebPage')!.offsetTop; - if (container.id.includes('album-media-')) { - imgOffsetTop += container.parentElement!.offsetTop + container.closest('.Message')!.offsetTop; - } - return imgOffsetTop > messageListElement.scrollTop - && imgOffsetTop + imageEl.offsetHeight < messageListElement.scrollTop + messageListElement.offsetHeight; + const { top } = getOffsetToContainer(imageEl, messageListElement); + + return top > messageListElement.scrollTop + && top + imageEl.offsetHeight < messageListElement.scrollTop + messageListElement.offsetHeight; } function getTopOffset(hasFooter: boolean) { diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index e7cf2febb..3736f4144 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -56,7 +56,7 @@ import { orderBy } from '../../util/iteratees'; import { isLocalMessageId } from '../../util/keys/messageKey'; import resetScroll from '../../util/resetScroll'; import { debounce, onTickEnd } from '../../util/schedulers'; -import { getOffsetToContainer } from '../../util/scroll'; +import getOffsetToContainer from '../../util/visibility/getOffsetToContainer'; import { groupMessages } from './helpers/groupMessages'; import { preventMessageInputBlur } from './helpers/preventMessageInputBlur'; diff --git a/src/components/middle/composer/EmojiTooltip.tsx b/src/components/middle/composer/EmojiTooltip.tsx index be569bcd4..dcb23723e 100644 --- a/src/components/middle/composer/EmojiTooltip.tsx +++ b/src/components/middle/composer/EmojiTooltip.tsx @@ -6,7 +6,7 @@ import type { ApiSticker } from '../../../api/types'; import animateHorizontalScroll from '../../../util/animateHorizontalScroll'; import buildClassName from '../../../util/buildClassName'; import findInViewport from '../../../util/findInViewport'; -import isFullyVisible from '../../../util/isFullyVisible'; +import isFullyVisible from '../../../util/visibility/isFullyVisible'; import useEffectWithPrevDeps from '../../../hooks/useEffectWithPrevDeps'; import useHorizontalScroll from '../../../hooks/useHorizontalScroll'; diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 98bd03d27..d15bcc200 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -111,9 +111,9 @@ import { selectUser, } from '../../../global/selectors'; import buildClassName from '../../../util/buildClassName'; -import { isElementInViewport } from '../../../util/isElementInViewport'; import { getMessageKey } from '../../../util/keys/messageKey'; import stopEvent from '../../../util/stopEvent'; +import { isElementInViewport } from '../../../util/visibility/isElementInViewport'; import { IS_ANDROID, IS_ELECTRON, IS_TRANSLATION_SUPPORTED } from '../../../util/windowEnvironment'; import { calculateDimensionsForMessageMedia, getStickerDimensions, REM } from '../../common/helpers/mediaDimensions'; import { getPeerColorClass } from '../../common/helpers/peerColor'; diff --git a/src/util/animateScroll.ts b/src/util/animateScroll.ts index f071419bb..bb21e0768 100644 --- a/src/util/animateScroll.ts +++ b/src/util/animateScroll.ts @@ -12,8 +12,8 @@ import { } from '../config'; import { requestMeasure, requestMutation } from '../lib/fasterdom/fasterdom'; import { selectCanAnimateInterface } from '../global/selectors'; +import getOffsetToContainer from './visibility/getOffsetToContainer'; import { animateSingle, cancelSingleAnimation } from './animation'; -import { getOffsetToContainer } from './scroll'; import { IS_ANDROID } from './windowEnvironment'; export type AnimateScrollArgs = { diff --git a/src/util/setTooltipItemVisible.ts b/src/util/setTooltipItemVisible.ts index 7dda580ab..54653e8a9 100644 --- a/src/util/setTooltipItemVisible.ts +++ b/src/util/setTooltipItemVisible.ts @@ -1,6 +1,6 @@ +import isFullyVisible from './visibility/isFullyVisible'; import animateScroll from './animateScroll'; import findInViewport from './findInViewport'; -import isFullyVisible from './isFullyVisible'; const VIEWPORT_MARGIN = 8; const SCROLL_MARGIN = 10; diff --git a/src/util/scroll.ts b/src/util/visibility/getOffsetToContainer.ts similarity index 78% rename from src/util/scroll.ts rename to src/util/visibility/getOffsetToContainer.ts index 4fea01b75..cb8427291 100644 --- a/src/util/scroll.ts +++ b/src/util/visibility/getOffsetToContainer.ts @@ -1,4 +1,4 @@ -export function getOffsetToContainer(element: HTMLElement, container: HTMLElement) { +export default function getOffsetToContainer(element: HTMLElement, container: HTMLElement) { let offsetTop = 0; let offsetLeft = 0; diff --git a/src/util/isElementInViewport.ts b/src/util/visibility/isElementInViewport.ts similarity index 87% rename from src/util/isElementInViewport.ts rename to src/util/visibility/isElementInViewport.ts index af365bf49..d519608ab 100644 --- a/src/util/isElementInViewport.ts +++ b/src/util/visibility/isElementInViewport.ts @@ -1,4 +1,4 @@ -import windowSize from './windowSize'; +import windowSize from '../windowSize'; export function isElementInViewport(el: HTMLElement) { if (el.style.display === 'none') { diff --git a/src/util/isFullyVisible.ts b/src/util/visibility/isFullyVisible.ts similarity index 73% rename from src/util/isFullyVisible.ts rename to src/util/visibility/isFullyVisible.ts index ee0a90acf..2aa1ee050 100644 --- a/src/util/isFullyVisible.ts +++ b/src/util/visibility/isFullyVisible.ts @@ -1,9 +1,7 @@ -function isFullyVisible(container: HTMLElement, element: HTMLElement, isHorizontal = false) { +export default function isFullyVisible(container: HTMLElement, element: HTMLElement, isHorizontal = false) { const viewportY1 = container[isHorizontal ? 'scrollLeft' : 'scrollTop']; const viewportY2 = viewportY1 + container[isHorizontal ? 'offsetWidth' : 'offsetHeight']; const y1 = element[isHorizontal ? 'offsetLeft' : 'offsetTop']; const y2 = y1 + element[isHorizontal ? 'offsetWidth' : 'offsetHeight']; return y1 > viewportY1 && y2 < viewportY2; } - -export default isFullyVisible;