Revert unstable code

src/api/gramjs/methods/client.ts

@@ -68,7 +68,6 @@ export async function init(_onUpdate: OnApiUpdate, sessionData?: ApiSessionData)
       firstAndLastNames: onRequestRegistration,
       qrCode: onRequestQrCode,
       onError: onAuthError,
-      initialMethod: 'qrCode',
     });
 
     if (DEBUG) {

src/bundles/auth.ts

@@ -1,3 +1,4 @@
 export { default as AuthCode } from '../components/auth/AuthCode';
 export { default as AuthPassword } from '../components/auth/AuthPassword';
 export { default as AuthRegister } from '../components/auth/AuthRegister';
+export { default as AuthQrCode } from '../components/auth/AuthQrCode';

src/components/auth/Auth.scss

@@ -9,10 +9,6 @@
   @media (min-width: 600px) and (min-height: 450px) {
     padding: 1.5rem;
     padding-top: 6.8rem;
-
-    &.qr {
-      padding-top: 5rem;
-    }
   }
 
   #logo, .AvatarEditable label {
@@ -108,14 +104,12 @@
 }
 
 #auth-qr-form {
-  .qr-container, .qr-loading {
-    height: 280px;
-  }
-
   .qr-container {
+    height: 280px;
+
     opacity: 1;
     transform: scale(1);
-    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
+    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s;
 
     &.pre-animate {
       opacity: 0.5;

src/components/auth/Auth.tsx

@@ -11,7 +11,7 @@ import AuthPhoneNumber from './AuthPhoneNumber';
 import AuthCode from './AuthCode.async';
 import AuthPassword from './AuthPassword.async';
 import AuthRegister from './AuthRegister.async';
-import AuthQrCode from './AuthQrCode';
+import AuthQrCode from './AuthQrCode.async';
 
 import './Auth.scss';
 
@@ -24,6 +24,9 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
     initApi();
   }, [reset, initApi]);
 
+  useEffect(() => {
+  }, []);
+
   switch (authState) {
     case 'authorizationStateWaitCode':
       return <UiLoader page="authCode" key="authCode"><AuthCode /></UiLoader>;
@@ -31,11 +34,11 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
       return <UiLoader page="authPassword" key="authPassword"><AuthPassword /></UiLoader>;
     case 'authorizationStateWaitRegistration':
       return <AuthRegister />;
-    case 'authorizationStateWaitPhoneNumber':
-      return <UiLoader page="authPhoneNumber" key="authPhoneNumber"><AuthPhoneNumber /></UiLoader>;
     case 'authorizationStateWaitQrCode':
-    default:
       return <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></UiLoader>;
+    case 'authorizationStateWaitPhoneNumber':
+    default:
+      return <UiLoader page="authPhoneNumber" key="authPhoneNumber"><AuthPhoneNumber /></UiLoader>;
   }
 };
 

src/components/auth/AuthPhoneNumber.tsx

@@ -25,7 +25,7 @@ type StateProps = Pick<GlobalState, (
   'authPhoneNumber' | 'authIsLoading' | 'authIsLoadingQrCode' | 'authError' | 'authRememberMe' | 'authNearestCountry'
 )>;
 type DispatchProps = Pick<GlobalActions, (
-  'setAuthPhoneNumber' | 'setAuthRememberMe' | 'loadNearestCountry' | 'clearAuthError' | 'goToAuthQrCode'
+  'setAuthPhoneNumber' | 'setAuthRememberMe' | 'loadNearestCountry' | 'clearAuthError' | 'gotToAuthQrCode'
 )>;
 
 const MIN_NUMBER_LENGTH = 7;
@@ -45,7 +45,7 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
   setAuthRememberMe,
   loadNearestCountry,
   clearAuthError,
-  goToAuthQrCode,
+  gotToAuthQrCode,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const inputRef = useRef<HTMLInputElement>(null);
@@ -183,7 +183,7 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
             )
           )}
           {isAuthReady && (
-            <Button isText ripple isLoading={authIsLoadingQrCode} onClick={goToAuthQrCode}>
+            <Button isText ripple isLoading={authIsLoadingQrCode} onClick={gotToAuthQrCode}>
               Log in by QR code
             </Button>
           )}
@@ -209,6 +209,6 @@ export default memo(withGlobal(
     'setAuthRememberMe',
     'clearAuthError',
     'loadNearestCountry',
-    'goToAuthQrCode',
+    'gotToAuthQrCode',
   ]),
 )(AuthPhoneNumber));

src/components/auth/AuthQrCode.async.tsx

@@ -0,0 +1,13 @@
+import React, { FC, memo } from '../../lib/teact/teact';
+import { Bundles } from '../../util/moduleLoader';
+
+import useModuleLoader from '../../hooks/useModuleLoader';
+import Loading from '../ui/Loading';
+
+const AuthQrCodeAsync: FC = () => {
+  const AuthQrCode = useModuleLoader(Bundles.Auth, 'AuthQrCode');
+
+  return AuthQrCode ? <AuthQrCode /> : <Loading />;
+};
+
+export default memo(AuthQrCodeAsync);

src/components/auth/AuthQrCode.tsx

@@ -9,6 +9,7 @@ import { pick } from '../../util/iteratees';
 
 import Loading from '../ui/Loading';
 import Button from '../ui/Button';
+import buildClassName from '../../util/buildClassName';
 import useHistoryBack from '../../hooks/useHistoryBack';
 
 type StateProps = Pick<GlobalState, 'connectionState' | 'authQrCode'>;
@@ -31,7 +32,6 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
     container.innerHTML = '';
     container.classList.remove('pre-animate');
-
     QrCreator.render({
       text: `${DATA_PREFIX}${authQrCode.token}`,
       radius: 0.5,
@@ -45,13 +45,11 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
   return (
     <div id="auth-qr-form" className="custom-scroll">
-      <div className="auth-form qr">
-        {authQrCode ? (
-          <div key="qr-container" className="qr-container pre-animate" ref={qrCodeRef} />
-        ) : (
-          <div key="qr-loading" className="qr-loading"><Loading /></div>
-        )}
-        <h3>Log in to Telegram by QR Code</h3>
+      <div className="auth-form">
+        <div className={buildClassName('qr-container', authQrCode && 'pre-animate')} ref={qrCodeRef}>
+          {!authQrCode && <Loading />}
+        </div>
+        <h3> Log in to Telegram by QR Code</h3>
         <ol>
           <li><span>Open Telegram on your phone</span></li>
           <li><span>Go to&nbsp;<b>Settings</b>&nbsp;&gt;&nbsp;<b>Devices</b>&nbsp;&gt;&nbsp;<b>Scan QR</b></span></li>

src/components/middle/MessageList.tsx

@@ -54,7 +54,6 @@ import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll
 import renderText from '../common/helpers/renderText';
 import useLang, { LangFn } from '../../hooks/useLang';
 import useWindowSize from '../../hooks/useWindowSize';
-import useBackgroundMode from '../../hooks/useBackgroundMode';
 
 import Loading from '../ui/Loading';
 import MessageScroll from './MessageScroll';
@@ -228,8 +227,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   });
 
-  useBackgroundMode(freezeForReading, unfreezeForReading);
-
   useOnChange(() => {
     memoFocusingIdRef.current = focusingId;
 

src/components/middle/MessageScroll.tsx

@@ -1,5 +1,7 @@
 import { MutableRefObject } from 'react';
-import React, { FC, useCallback, useRef } from '../../lib/teact/teact';
+import React, {
+  FC, useCallback, useEffect, useRef,
+} from '../../lib/teact/teact';
 
 import { MESSAGE_LIST_SENSITIVE_AREA } from '../../config';
 import resetScroll from '../../util/resetScroll';
@@ -23,6 +25,9 @@ type OwnProps = {
 const FAB_THRESHOLD = 50;
 const TOOLS_FREEZE_TIMEOUT = 100;
 
+// Local flag is used because `freeze/unfreeze` methods are controlled by heavy animation
+let areToolsFrozen = false;
+
 const MessageScroll: FC<OwnProps> = ({
   containerRef,
   className,
@@ -44,6 +49,10 @@ const MessageScroll: FC<OwnProps> = ({
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
   const toggleScrollTools = useCallback(() => {
+    if (areToolsFrozen) {
+      return;
+    }
+
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
       onNotchToggle(false);
@@ -109,33 +118,35 @@ const MessageScroll: FC<OwnProps> = ({
 
   const {
     observe: observeIntersectionForNotch,
-    freeze: freezeForNotch,
-    unfreeze: unfreezeForNotch,
   } = useIntersectionObserver({
     rootRef: containerRef,
   }, toggleScrollTools);
 
   useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
 
+  // Do not load more and show FAB when focusing
   useOnChange(() => {
     if (focusingId) {
       freezeForLoadMore();
+      freezeForFab();
     } else {
+      unfreezeForFab();
       unfreezeForLoadMore();
     }
   }, [focusingId]);
 
   // Workaround for FAB and notch flickering with tall incoming message
   useOnChange(() => {
-    freezeForFab();
-    freezeForNotch();
+    areToolsFrozen = true;
 
     setTimeout(() => {
-      unfreezeForNotch();
-      unfreezeForFab();
+      areToolsFrozen = false;
     }, TOOLS_FREEZE_TIMEOUT);
   }, [messageIds]);
 
+  // Workaround for stuck FAB when many unread messages
+  useEffect(toggleScrollTools, [firstUnreadId]);
+
   return (
     <div className={className} teactFastList>
       <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />

src/components/middle/message/MessageContextMenu.tsx

@@ -1,10 +1,11 @@
-import React, { FC, useCallback } from '../../../lib/teact/teact';
+import React, { FC, useCallback, useEffect } from '../../../lib/teact/teact';
 
 import { ApiMessage } from '../../../api/types';
 import { IAnchorPosition } from '../../../types';
 
 import { getMessageCopyOptions } from './helpers/copyOptions';
 import useContextMenuPosition from '../../../hooks/useContextMenuPosition';
+import { dispatchHeavyAnimationEvent } from '../../../hooks/useHeavyAnimationCheck';
 import useLang from '../../../hooks/useLang';
 
 import Menu from '../../ui/Menu';
@@ -45,6 +46,7 @@ type OwnProps = {
   onCopyLink?: () => void;
 };
 
+const ANIMATION_DURATION = 200;
 const SCROLLBAR_WIDTH = 10;
 
 const MessageContextMenu: FC<OwnProps> = ({
@@ -79,6 +81,10 @@ const MessageContextMenu: FC<OwnProps> = ({
   onCloseAnimationEnd,
   onCopyLink,
 }) => {
+  useEffect(() => {
+    dispatchHeavyAnimationEvent(ANIMATION_DURATION);
+  }, [isOpen]);
+
   const copyOptions = getMessageCopyOptions(message, onClose, canCopyLink ? onCopyLink : undefined);
 
   const getTriggerElement = useCallback(() => {

src/global/types.ts

@@ -401,7 +401,7 @@ export type ActionTypes = (
   'toggleSafeLinkModal' | 'openHistoryCalendar' | 'closeHistoryCalendar' |
   // auth
   'setAuthPhoneNumber' | 'setAuthCode' | 'setAuthPassword' | 'signUp' | 'returnToAuthPhoneNumber' | 'signOut' |
-  'setAuthRememberMe' | 'clearAuthError' | 'uploadProfilePhoto' | 'goToAuthQrCode' | 'clearCache' |
+  'setAuthRememberMe' | 'clearAuthError' | 'uploadProfilePhoto' | 'gotToAuthQrCode' | 'clearCache' |
   // chats
   'preloadTopChatMessages' | 'loadChats' | 'loadMoreChats' | 'openChat' | 'openChatWithInfo' |
   'openSupportChat' | 'openTipsChat' |

src/hooks/useHeavyAnimationCheck.ts

@@ -7,10 +7,8 @@ let timeout: number | undefined;
 let isAnimating = false;
 
 export const dispatchHeavyAnimationEvent = (duration: number) => {
-  if (!isAnimating) {
-    isAnimating = true;
-    document.dispatchEvent(new Event(ANIMATION_START_EVENT));
-  }
+  document.dispatchEvent(new Event(ANIMATION_START_EVENT));
+  isAnimating = true;
 
   if (timeout) {
     clearTimeout(timeout);

src/hooks/useIntersectionObserver.ts

@@ -41,23 +41,19 @@ export function useIntersectionObserver({
 }, rootCallback?: RootCallback): Response {
   const controllerRef = useRef<IntersectionController>();
   const rootCallbackRef = useRef<RootCallback>();
-  const freezeFlagsRef = useRef(0);
+  const isFrozenRef = useRef<boolean>();
   const onUnfreezeRef = useRef<NoneToVoidFunction>();
 
   rootCallbackRef.current = rootCallback;
 
   const freeze = useCallback(() => {
-    freezeFlagsRef.current++;
+    isFrozenRef.current = true;
   }, []);
 
   const unfreeze = useCallback(() => {
-    if (!freezeFlagsRef.current) {
-      return;
-    }
+    isFrozenRef.current = false;
 
-    freezeFlagsRef.current--;
-
-    if (!freezeFlagsRef.current && onUnfreezeRef.current) {
+    if (onUnfreezeRef.current) {
       onUnfreezeRef.current();
       onUnfreezeRef.current = undefined;
     }
@@ -108,7 +104,7 @@ export function useIntersectionObserver({
           entriesAccumulator.set(entry.target, entry);
         });
 
-        if (freezeFlagsRef.current) {
+        if (isFrozenRef.current) {
           onUnfreezeRef.current = () => {
             observerCallback();
           };

src/lib/gramjs/client/auth.ts

@@ -13,7 +13,6 @@ export interface UserAuthParams {
     qrCode: (qrCode: { token: Buffer; expires: number }) => Promise<void>;
     onError: (err: Error) => void;
     forceSMS?: boolean;
-    initialMethod?: 'phoneNumber' | 'qrCode';
 }
 
 export interface BotAuthParams {
@@ -25,7 +24,6 @@ interface ApiCredentials {
     apiHash: string;
 }
 
-const DEFAULT_INITIAL_METHOD = 'phoneNumber';
 const QR_CODE_TIMEOUT = 30000;
 
 export async function authFlow(
@@ -33,20 +31,11 @@ export async function authFlow(
     apiCredentials: ApiCredentials,
     authParams: UserAuthParams | BotAuthParams,
 ) {
-    let me: Api.TypeUser;
-
-    if ('botAuthToken' in authParams) {
-        me = await signInBot(client, apiCredentials, authParams);
-    } else {
-        const { initialMethod = DEFAULT_INITIAL_METHOD } = authParams;
-
-        if (initialMethod === 'phoneNumber') {
-            me = await signInUser(client, apiCredentials, authParams);
-        } else {
-            me = await signInUserWithQrCode(client, apiCredentials, authParams);
-        }
-    }
+    const me = 'phoneNumber' in authParams
+        ? await signInUser(client, apiCredentials, authParams)
+        : await signInBot(client, apiCredentials, authParams);
 
+    // TODO @logger
     client._log.info('Signed in successfully as', utils.getDisplayName(me));
 }
 

src/modules/actions/api/initial.ts

@@ -101,7 +101,7 @@ addReducer('returnToAuthPhoneNumber', (global) => {
   };
 });
 
-addReducer('goToAuthQrCode', (global) => {
+addReducer('gotToAuthQrCode', (global) => {
   void callApi('restartAuthWithQr');
 
   return {