[Refactoring] Media Viewer: Fix imports order, optimize CSS selector (#1567)

src/components/mediaViewer/MediaViewer.tsx

@@ -1,10 +1,16 @@
+import React, {
+  FC, memo, useCallback, useEffect, useMemo, useRef, useState,
+} from '../../lib/teact/teact';
+import { withGlobal } from '../../lib/teact/teactn';
+
+import { GlobalActions } from '../../global/types';
 import {
   ApiChat, ApiDimensions, ApiMediaFormat, ApiMessage, ApiUser,
 } from '../../api/types';
+import { MediaViewerOrigin } from '../../types';
 
 import { ANIMATION_END_DELAY } from '../../config';
 
-import { GlobalActions } from '../../global/types';
 import useBlurSync from '../../hooks/useBlurSync';
 import useForceUpdate from '../../hooks/useForceUpdate';
 import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
@@ -12,12 +18,7 @@ import useHistoryBack from '../../hooks/useHistoryBack';
 import useLang from '../../hooks/useLang';
 import useMedia from '../../hooks/useMedia';
 import useMediaWithLoadProgress from '../../hooks/useMediaWithLoadProgress';
-
 import usePrevious from '../../hooks/usePrevious';
-import React, {
-  FC, memo, useCallback, useEffect, useMemo, useRef, useState,
-} from '../../lib/teact/teact';
-import { withGlobal } from '../../lib/teact/teactn';
 import {
   getChatAvatarHash,
   getChatMediaMessageIds,
@@ -46,7 +47,6 @@ import {
   selectScheduledMessages,
   selectUser,
 } from '../../modules/selectors';
-import { MediaViewerOrigin } from '../../types';
 import { stopCurrentAudio } from '../../util/audioPlayer';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
 import { captureEvents } from '../../util/captureEvents';
@@ -55,12 +55,11 @@ import { pick } from '../../util/iteratees';
 import windowSize from '../../util/windowSize';
 import { AVATAR_FULL_DIMENSIONS, MEDIA_VIEWER_MEDIA_QUERY } from '../common/helpers/mediaDimensions';
 import { renderMessageText } from '../common/helpers/renderMessageText';
+import { animateClosing, animateOpening } from './helpers/ghostAnimation';
+
 import Button from '../ui/Button';
 import ShowTransition from '../ui/ShowTransition';
 import Transition from '../ui/Transition';
-import { animateClosing, animateOpening } from './helpers/ghostAnimation';
-
-import './MediaViewer.scss';
 import MediaViewerActions from './MediaViewerActions';
 import MediaViewerSlides from './MediaViewerSlides';
 import PanZoom from './PanZoom';
@@ -68,6 +67,8 @@ import SenderInfo from './SenderInfo';
 import SlideTransition from './SlideTransition';
 import ZoomControls from './ZoomControls';
 
+import './MediaViewer.scss';
+
 type StateProps = {
   chatId?: string;
   threadId?: number;
@@ -414,7 +415,7 @@ const MediaViewer: FC<StateProps & DispatchProps> = ({
 
   useEffect(() => {
     if (isZoomed || IS_TOUCH_ENV) return undefined;
-    const element = document.querySelector<HTMLDivElement>('.MediaViewerSlide.active');
+    const element = document.querySelector<HTMLDivElement>('.MediaViewerSlide--active');
     if (!element) {
       return undefined;
     }
@@ -492,7 +493,7 @@ const MediaViewer: FC<StateProps & DispatchProps> = ({
               activeKey={selectedMediaMessageIndex}
               name={slideAnimation}
             >
-              {(isActive) => (
+              {(isActive: boolean) => (
                 <MediaViewerSlides
                   messageId={messageId}
                   getMessageId={getMessageId}

src/components/mediaViewer/MediaViewerContent.tsx

@@ -1,11 +1,14 @@
+import React, { FC, memo } from '../../lib/teact/teact';
+import { withGlobal } from '../../lib/teact/teactn';
+
 import {
   ApiChat, ApiDimensions, ApiMediaFormat, ApiMessage, ApiUser,
 } from '../../api/types';
+import { MediaViewerOrigin } from '../../types';
+
 import useBlurSync from '../../hooks/useBlurSync';
 import useMedia from '../../hooks/useMedia';
 import useMediaWithLoadProgress from '../../hooks/useMediaWithLoadProgress';
-import React, { FC, memo } from '../../lib/teact/teact';
-import { withGlobal } from '../../lib/teact/teactn';
 import {
   getChatAvatarHash,
   getMessageDocument,
@@ -25,14 +28,15 @@ import {
 import {
   selectChat, selectChatMessage, selectScheduledMessage, selectUser,
 } from '../../modules/selectors';
-import { MediaViewerOrigin } from '../../types';
 import { AVATAR_FULL_DIMENSIONS, calculateMediaViewerDimensions } from '../common/helpers/mediaDimensions';
 import { renderMessageText } from '../common/helpers/renderMessageText';
+
 import Spinner from '../ui/Spinner';
-import './MediaViewerContent.scss';
 import MediaViewerFooter from './MediaViewerFooter';
 import VideoPlayer from './VideoPlayer';
 
+import './MediaViewerContent.scss';
+
 type OwnProps = {
   messageId?: number;
   chatId?: string;

src/components/mediaViewer/MediaViewerSlides.scss

@@ -31,7 +31,7 @@
   touch-action: none;
   transform-origin: 0 0;
 
-  &.active {
+  &--active {
     z-index: 1;
   }
 }

src/components/mediaViewer/MediaViewerSlides.tsx

@@ -1,16 +1,19 @@
-import useDebounce from '../../hooks/useDebounce';
-import useForceUpdate from '../../hooks/useForceUpdate';
-import {
+import React, {
   FC, memo, useCallback, useEffect, useRef, useState,
 } from '../../lib/teact/teact';
-import React from '../../lib/teact/teactn';
+
 import { MediaViewerOrigin } from '../../types';
+
+import useDebounce from '../../hooks/useDebounce';
+import useForceUpdate from '../../hooks/useForceUpdate';
 import { animateNumber, timingFunctions } from '../../util/animation';
 import arePropsShallowEqual from '../../util/arePropsShallowEqual';
 import { captureEvents } from '../../util/captureEvents';
 import { IS_TOUCH_ENV } from '../../util/environment';
 import { debounce } from '../../util/schedulers';
+
 import MediaViewerContent from './MediaViewerContent';
+
 import './MediaViewerSlides.scss';
 
 type OwnProps = {
@@ -430,7 +433,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
       )}
       {activeMessageId && (
         <div
-          className={`MediaViewerSlide ${isActive ? 'active' : ''}`}
+          className={`MediaViewerSlide ${isActive ? 'MediaViewerSlide--active' : ''}`}
           onClick={handleToggleFooterVisibility}
           ref={activeSlideRef}
           /* @ts-ignore */
@@ -454,6 +457,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
     </div>
   );
 };
+
 export default memo(MediaViewerSlides);
 
 function getAnimationStyle(x = 0, y = 0, scale = 1) {

src/components/mediaViewer/SlideTransition.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from '../../lib/teact/teact';
+
 import { IS_TOUCH_ENV } from '../../util/environment';
+
 import Transition, { TransitionProps } from '../ui/Transition';
 
 const SlideTransition: FC<TransitionProps> = ({ children, ...props }) => {

src/components/mediaViewer/helpers/ghostAnimation.ts

@@ -96,7 +96,7 @@ export function animateClosing(origin: MediaViewerOrigin, bestImageData: string,
   }
 
   const fromImage = document.getElementById('MediaViewer')!.querySelector<HTMLImageElement>(
-    '.MediaViewerSlide.active img, .MediaViewerSlide.active video',
+    '.MediaViewerSlide--active img, .MediaViewerSlide--active video',
   );
   if (!fromImage || !toImage) {
     return;