diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx index 34669fd4f..2e690ca05 100644 --- a/src/components/mediaViewer/MediaViewer.tsx +++ b/src/components/mediaViewer/MediaViewer.tsx @@ -11,6 +11,7 @@ import { MediaViewerOrigin } from '../../types'; import { ANIMATION_END_DELAY } from '../../config'; import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment'; +import windowSize from '../../util/windowSize'; import { AVATAR_FULL_DIMENSIONS, MEDIA_VIEWER_MEDIA_QUERY, @@ -43,7 +44,6 @@ import { getMessageWebPageVideo, getPhotoFullDimensions, getVideoDimensions, getMessageFileSize, - } from '../../modules/helpers'; import { pick } from '../../util/iteratees'; import { captureEvents, SwipeDirection } from '../../util/captureEvents'; @@ -332,6 +332,19 @@ const MediaViewer: FC = ({ } }, [isGif, isVideo]); + // Prevent refresh when rotating device to watch a video + useEffect(() => { + if (!isOpen) { + return undefined; + } + + windowSize.disableRefresh(); + + return () => { + windowSize.enableRefresh(); + }; + }, [isOpen]); + const getMessageId = useCallback((fromId: number, direction: number): number => { let index = messageIds.indexOf(fromId); if ((direction === -1 && index > 0) || (direction === 1 && index < messageIds.length - 1)) { diff --git a/src/util/windowSize.ts b/src/util/windowSize.ts index 7f110a9a5..d80838861 100644 --- a/src/util/windowSize.ts +++ b/src/util/windowSize.ts @@ -14,11 +14,23 @@ type IDimensions = { const IS_LANDSCAPE = IS_SINGLE_COLUMN_LAYOUT && isLandscape(); let windowSize = updateSizes(); +let isRefreshDisabled = false; + +function disableRefresh() { + isRefreshDisabled = true; +} + +function enableRefresh() { + isRefreshDisabled = false; +} const handleResize = throttle(() => { windowSize = updateSizes(); - if ((isMobileScreen() !== IS_SINGLE_COLUMN_LAYOUT) || (IS_SINGLE_COLUMN_LAYOUT && IS_LANDSCAPE !== isLandscape())) { + if (!isRefreshDisabled && ( + isMobileScreen() !== IS_SINGLE_COLUMN_LAYOUT + || (IS_SINGLE_COLUMN_LAYOUT && IS_LANDSCAPE !== isLandscape()) + )) { window.location.reload(); } }, 250, true); @@ -57,4 +69,6 @@ function isLandscape() { export default { get: () => windowSize, + disableRefresh, + enableRefresh, };