Media Viewer: Prevent refresh when rotating device to watch a video

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<StateProps & DispatchProps> = ({
     }
   }, [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)) {

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,
 };