Recent Stickers: Limit amount (#1167)

src/api/gramjs/methods/client.ts

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

src/api/gramjs/methods/symbols.ts

@@ -5,6 +5,7 @@ import { invokeRequest } from './client';
 import { buildStickerFromDocument, buildStickerSet, buildStickerSetCovered } from '../apiBuilders/symbols';
 import { buildInputStickerSet, buildInputDocument } from '../gramjsBuilders';
 import { buildVideoFromDocument } from '../apiBuilders/messages';
+import { RECENT_STICKERS_LIMIT } from '../../../config';
 
 import localDb from '../localDb';
 
@@ -42,7 +43,7 @@ export async function fetchRecentStickers({ hash }: { hash: number }) {
 
   return {
     hash: result.hash,
-    stickers: processStickerResult(result.stickers),
+    stickers: processStickerResult(result.stickers.slice(0, RECENT_STICKERS_LIMIT)),
   };
 }
 

src/bundles/auth.ts

@@ -1,4 +1,3 @@
 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,6 +9,10 @@
   @media (min-width: 600px) and (min-height: 450px) {
     padding: 1.5rem;
     padding-top: 6.8rem;
+
+    &.qr {
+      padding-top: 5rem;
+    }
   }
 
   #logo, .AvatarEditable label {
@@ -104,12 +108,14 @@
 }
 
 #auth-qr-form {
-  .qr-container {
+  .qr-container, .qr-loading {
     height: 280px;
+  }
 
+  .qr-container {
     opacity: 1;
     transform: scale(1);
-    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s;
+    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
 
     &.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.async';
+import AuthQrCode from './AuthQrCode';
 
 import './Auth.scss';
 
@@ -24,9 +24,6 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
     initApi();
   }, [reset, initApi]);
 
-  useEffect(() => {
-  }, []);
-
   switch (authState) {
     case 'authorizationStateWaitCode':
       return <UiLoader page="authCode" key="authCode"><AuthCode /></UiLoader>;
@@ -34,11 +31,11 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
       return <UiLoader page="authPassword" key="authPassword"><AuthPassword /></UiLoader>;
     case 'authorizationStateWaitRegistration':
       return <AuthRegister />;
-    case 'authorizationStateWaitQrCode':
-      return <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></UiLoader>;
     case 'authorizationStateWaitPhoneNumber':
-    default:
       return <UiLoader page="authPhoneNumber" key="authPhoneNumber"><AuthPhoneNumber /></UiLoader>;
+    case 'authorizationStateWaitQrCode':
+    default:
+      return <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></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' | 'gotToAuthQrCode'
+  'setAuthPhoneNumber' | 'setAuthRememberMe' | 'loadNearestCountry' | 'clearAuthError' | 'goToAuthQrCode'
 )>;
 
 const MIN_NUMBER_LENGTH = 7;
@@ -45,7 +45,7 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
   setAuthRememberMe,
   loadNearestCountry,
   clearAuthError,
-  gotToAuthQrCode,
+  goToAuthQrCode,
 }) => {
   // 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={gotToAuthQrCode}>
+            <Button isText ripple isLoading={authIsLoadingQrCode} onClick={goToAuthQrCode}>
               Log in by QR code
             </Button>
           )}
@@ -209,6 +209,6 @@ export default memo(withGlobal(
     'setAuthRememberMe',
     'clearAuthError',
     'loadNearestCountry',
-    'gotToAuthQrCode',
+    'goToAuthQrCode',
   ]),
 )(AuthPhoneNumber));

src/components/auth/AuthQrCode.async.tsx

@@ -1,13 +0,0 @@
-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,7 +9,6 @@ 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'>;
@@ -32,6 +31,7 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
     container.innerHTML = '';
     container.classList.remove('pre-animate');
+
     QrCreator.render({
       text: `${DATA_PREFIX}${authQrCode.token}`,
       radius: 0.5,
@@ -45,11 +45,13 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
   return (
     <div id="auth-qr-form" className="custom-scroll">
-      <div className="auth-form">
+      <div className="auth-form qr">
-        <div className={buildClassName('qr-container', authQrCode && 'pre-animate')} ref={qrCodeRef}>
+        {authQrCode ? (
-          {!authQrCode && <Loading />}
+          <div key="qr-container" className="qr-container pre-animate" ref={qrCodeRef} />
-        </div>
+        ) : (
-        <h3> Log in to Telegram by QR Code</h3>
+          <div key="qr-loading" className="qr-loading"><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,6 +54,7 @@ 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';
@@ -227,6 +228,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   });
 
+  useBackgroundMode(freezeForReading, unfreezeForReading);
+
   useOnChange(() => {
     memoFocusingIdRef.current = focusingId;
 

src/components/middle/MessageScroll.tsx

@@ -1,7 +1,5 @@
 import { MutableRefObject } from 'react';
-import React, {
+import React, { FC, useCallback, useRef } from '../../lib/teact/teact';
-  FC, useCallback, useEffect, useRef,
-} from '../../lib/teact/teact';
 
 import { MESSAGE_LIST_SENSITIVE_AREA } from '../../config';
 import resetScroll from '../../util/resetScroll';
@@ -25,9 +23,6 @@ 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,
@@ -49,10 +44,6 @@ const MessageScroll: FC<OwnProps> = ({
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
   const toggleScrollTools = useCallback(() => {
-    if (areToolsFrozen) {
-      return;
-    }
-
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
       onNotchToggle(false);
@@ -118,35 +109,33 @@ 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(() => {
-    areToolsFrozen = true;
+    freezeForFab();
+    freezeForNotch();
 
     setTimeout(() => {
-      areToolsFrozen = false;
+      unfreezeForNotch();
+      unfreezeForFab();
     }, 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,11 +1,10 @@
-import React, { FC, useCallback, useEffect } from '../../../lib/teact/teact';
+import React, { FC, useCallback } 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';
@@ -46,7 +45,6 @@ type OwnProps = {
   onCopyLink?: () => void;
 };
 
-const ANIMATION_DURATION = 200;
 const SCROLLBAR_WIDTH = 10;
 
 const MessageContextMenu: FC<OwnProps> = ({
@@ -81,10 +79,6 @@ const MessageContextMenu: FC<OwnProps> = ({
   onCloseAnimationEnd,
   onCopyLink,
 }) => {
-  useEffect(() => {
-    dispatchHeavyAnimationEvent(ANIMATION_DURATION);
-  }, [isOpen]);
-
   const copyOptions = getMessageCopyOptions(message, onClose, canCopyLink ? onCopyLink : undefined);
 
   const getTriggerElement = useCallback(() => {

src/config.ts

@@ -104,6 +104,7 @@ export const STICKER_SIZE_MODAL = 64;
 export const STICKER_SIZE_TWO_FA = 160;
 export const STICKER_SIZE_DISCUSSION_GROUPS = 140;
 export const STICKER_SIZE_FOLDER_SETTINGS = 80;
+export const RECENT_STICKERS_LIMIT = 20;
 export const MEMOJI_STICKER_ID = 'MEMOJI_STICKER';
 
 export const MENU_TRANSITION_DURATION = 200;

src/global/types.ts

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

src/hooks/useHeavyAnimationCheck.ts

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

src/hooks/useIntersectionObserver.ts

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

src/lib/gramjs/client/auth.ts

@@ -13,6 +13,7 @@ export interface UserAuthParams {
     qrCode: (qrCode: { token: Buffer; expires: number }) => Promise<void>;
     onError: (err: Error) => void;
     forceSMS?: boolean;
+    initialMethod?: 'phoneNumber' | 'qrCode';
 }
 
 export interface BotAuthParams {
@@ -24,6 +25,7 @@ interface ApiCredentials {
     apiHash: string;
 }
 
+const DEFAULT_INITIAL_METHOD = 'phoneNumber';
 const QR_CODE_TIMEOUT = 30000;
 
 export async function authFlow(
@@ -31,11 +33,20 @@ export async function authFlow(
     apiCredentials: ApiCredentials,
     authParams: UserAuthParams | BotAuthParams,
 ) {
-    const me = 'phoneNumber' in authParams
+    let me: Api.TypeUser;
-        ? await signInUser(client, apiCredentials, authParams)
+
-        : await signInBot(client, apiCredentials, authParams);
+    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);
+        }
+    }
 
-    // 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('gotToAuthQrCode', (global) => {
+addReducer('goToAuthQrCode', (global) => {
   void callApi('restartAuthWithQr');
 
   return {