diff --git a/src/api/gramjs/methods/client.ts b/src/api/gramjs/methods/client.ts index 93432d901..fae7eb222 100644 --- a/src/api/gramjs/methods/client.ts +++ b/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) { diff --git a/src/api/gramjs/methods/symbols.ts b/src/api/gramjs/methods/symbols.ts index 4bf47e323..ef2ac640a 100644 --- a/src/api/gramjs/methods/symbols.ts +++ b/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)), }; } diff --git a/src/bundles/auth.ts b/src/bundles/auth.ts index c69454d8a..de01ccb84 100644 --- a/src/bundles/auth.ts +++ b/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'; diff --git a/src/components/auth/Auth.scss b/src/components/auth/Auth.scss index f9c4d5473..1ea9f4de7 100644 --- a/src/components/auth/Auth.scss +++ b/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; diff --git a/src/components/auth/Auth.tsx b/src/components/auth/Auth.tsx index b791e07b7..c1a8a2b36 100644 --- a/src/components/auth/Auth.tsx +++ b/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 = ({ authState, reset, initApi }) => initApi(); }, [reset, initApi]); - useEffect(() => { - }, []); - switch (authState) { case 'authorizationStateWaitCode': return ; @@ -34,11 +31,11 @@ const Auth: FC = ({ authState, reset, initApi }) => return ; case 'authorizationStateWaitRegistration': return ; - case 'authorizationStateWaitQrCode': - return ; case 'authorizationStateWaitPhoneNumber': - default: return ; + case 'authorizationStateWaitQrCode': + default: + return ; } }; diff --git a/src/components/auth/AuthPhoneNumber.tsx b/src/components/auth/AuthPhoneNumber.tsx index 5f09f5d85..75d460a63 100644 --- a/src/components/auth/AuthPhoneNumber.tsx +++ b/src/components/auth/AuthPhoneNumber.tsx @@ -25,7 +25,7 @@ type StateProps = Pick; type DispatchProps = Pick; const MIN_NUMBER_LENGTH = 7; @@ -45,7 +45,7 @@ const AuthPhoneNumber: FC = ({ setAuthRememberMe, loadNearestCountry, clearAuthError, - gotToAuthQrCode, + goToAuthQrCode, }) => { // eslint-disable-next-line no-null/no-null const inputRef = useRef(null); @@ -183,7 +183,7 @@ const AuthPhoneNumber: FC = ({ ) )} {isAuthReady && ( - )} @@ -209,6 +209,6 @@ export default memo(withGlobal( 'setAuthRememberMe', 'clearAuthError', 'loadNearestCountry', - 'gotToAuthQrCode', + 'goToAuthQrCode', ]), )(AuthPhoneNumber)); diff --git a/src/components/auth/AuthQrCode.async.tsx b/src/components/auth/AuthQrCode.async.tsx deleted file mode 100644 index 18d416fab..000000000 --- a/src/components/auth/AuthQrCode.async.tsx +++ /dev/null @@ -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 ? : ; -}; - -export default memo(AuthQrCodeAsync); diff --git a/src/components/auth/AuthQrCode.tsx b/src/components/auth/AuthQrCode.tsx index ae4e3a029..86bda6dcc 100644 --- a/src/components/auth/AuthQrCode.tsx +++ b/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; @@ -32,6 +31,7 @@ const AuthCode: FC = ({ container.innerHTML = ''; container.classList.remove('pre-animate'); + QrCreator.render({ text: `${DATA_PREFIX}${authQrCode.token}`, radius: 0.5, @@ -45,11 +45,13 @@ const AuthCode: FC = ({ return (
-
-
- {!authQrCode && } -
-

Log in to Telegram by QR Code

+
+ {authQrCode ? ( +
+ ) : ( +
+ )} +

Log in to Telegram by QR Code

  1. Open Telegram on your phone
  2. Go to Settings > Devices > Scan QR
  3. diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 443b0f4a1..0c7d66c95 100644 --- a/src/components/middle/MessageList.tsx +++ b/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 = ({ } }); + useBackgroundMode(freezeForReading, unfreezeForReading); + useOnChange(() => { memoFocusingIdRef.current = focusingId; diff --git a/src/components/middle/MessageScroll.tsx b/src/components/middle/MessageScroll.tsx index 250c7f491..07bc2064a 100644 --- a/src/components/middle/MessageScroll.tsx +++ b/src/components/middle/MessageScroll.tsx @@ -1,7 +1,5 @@ import { MutableRefObject } from 'react'; -import React, { - FC, useCallback, useEffect, useRef, -} from '../../lib/teact/teact'; +import React, { FC, useCallback, 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 = ({ containerRef, className, @@ -49,10 +44,6 @@ const MessageScroll: FC = ({ const fabTriggerRef = useRef(null); const toggleScrollTools = useCallback(() => { - if (areToolsFrozen) { - return; - } - if (!messageIds || !messageIds.length) { onFabToggle(false); onNotchToggle(false); @@ -118,35 +109,33 @@ const MessageScroll: FC = ({ 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 (
    diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx index 377744ba6..e10907af2 100644 --- a/src/components/middle/message/MessageContextMenu.tsx +++ b/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 = ({ @@ -81,10 +79,6 @@ const MessageContextMenu: FC = ({ onCloseAnimationEnd, onCopyLink, }) => { - useEffect(() => { - dispatchHeavyAnimationEvent(ANIMATION_DURATION); - }, [isOpen]); - const copyOptions = getMessageCopyOptions(message, onClose, canCopyLink ? onCopyLink : undefined); const getTriggerElement = useCallback(() => { diff --git a/src/config.ts b/src/config.ts index 3aeb1cc75..570ca4308 100644 --- a/src/config.ts +++ b/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; diff --git a/src/global/types.ts b/src/global/types.ts index a443a62d1..eb7e2aaae 100644 --- a/src/global/types.ts +++ b/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' | diff --git a/src/hooks/useHeavyAnimationCheck.ts b/src/hooks/useHeavyAnimationCheck.ts index a362c5a6b..8060fa863 100644 --- a/src/hooks/useHeavyAnimationCheck.ts +++ b/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)); - isAnimating = true; + if (!isAnimating) { + isAnimating = true; + document.dispatchEvent(new Event(ANIMATION_START_EVENT)); + } if (timeout) { clearTimeout(timeout); diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index 42cc5045a..8bb940955 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -41,19 +41,23 @@ export function useIntersectionObserver({ }, rootCallback?: RootCallback): Response { const controllerRef = useRef(); const rootCallbackRef = useRef(); - const isFrozenRef = useRef(); + const freezeFlagsRef = useRef(0); const onUnfreezeRef = useRef(); 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(); }; diff --git a/src/lib/gramjs/client/auth.ts b/src/lib/gramjs/client/auth.ts index 30546ca41..f3bdbd6e8 100644 --- a/src/lib/gramjs/client/auth.ts +++ b/src/lib/gramjs/client/auth.ts @@ -13,6 +13,7 @@ export interface UserAuthParams { qrCode: (qrCode: { token: Buffer; expires: number }) => Promise; 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 - ? await signInUser(client, apiCredentials, authParams) - : await signInBot(client, apiCredentials, authParams); + 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); + } + } - // TODO @logger client._log.info('Signed in successfully as', utils.getDisplayName(me)); } diff --git a/src/modules/actions/api/initial.ts b/src/modules/actions/api/initial.ts index c71b03164..af3a101f8 100644 --- a/src/modules/actions/api/initial.ts +++ b/src/modules/actions/api/initial.ts @@ -101,7 +101,7 @@ addReducer('returnToAuthPhoneNumber', (global) => { }; }); -addReducer('gotToAuthQrCode', (global) => { +addReducer('goToAuthQrCode', (global) => { void callApi('restartAuthWithQr'); return {