ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auth QR Code: Better animation

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-04-19 15:12:20 +02:00
parent 7b253a4103
commit fe8f147a59
2 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/auth/Auth.scss
View File

@ -108,23 +108,39 @@
} }
#auth-qr-form { #auth-qr-form {
.qr-container, .qr-outer {
.qr-loading {
height: 280px; height: 280px;
position: relative;
} }
.qr-wrapper { .qr-inner,
.qr-loading {
height: 280px;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; }
.qr-inner {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms;
&.pre-animate {
&:not(.open) {
opacity: 0.5; opacity: 0.5;
transform: scale(0.5); transform: scale(0.5);
} }
&:not(.shown) {
display: none;
}
}
.qr-loading {
transition: opacity 1ms;
} }
.qr-plane { .qr-plane {

31
src/components/auth/AuthQrCode.tsx
View File

@ -9,6 +9,7 @@ import { LangCode } from '../../types';
import { DEFAULT_LANG_CODE } from '../../config'; import { DEFAULT_LANG_CODE } from '../../config';
import { setLanguage } from '../../util/langProvider'; import { setLanguage } from '../../util/langProvider';
import buildClassName from '../../util/buildClassName';
import renderText from '../common/helpers/renderText'; import renderText from '../common/helpers/renderText';
import { getSuggestedLanguage } from './helpers/getSuggestedLanguage'; import { getSuggestedLanguage } from './helpers/getSuggestedLanguage';
import getAnimationData from '../common/helpers/animatedAssets'; import getAnimationData from '../common/helpers/animatedAssets';
@ -16,6 +17,7 @@ import getAnimationData from '../common/helpers/animatedAssets';
import useLangString from '../../hooks/useLangString'; import useLangString from '../../hooks/useLangString';
import useFlag from '../../hooks/useFlag'; import useFlag from '../../hooks/useFlag';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import useMediaTransition from '../../hooks/useMediaTransition';
import Loading from '../ui/Loading'; import Loading from '../ui/Loading';
import Button from '../ui/Button'; import Button from '../ui/Button';
@ -24,9 +26,7 @@ import blankUrl from '../../assets/blank.png';
type StateProps = type StateProps =
Pick<GlobalState, 'connectionState' | 'authState' | 'authQrCode'> Pick<GlobalState, 'connectionState' | 'authState' | 'authQrCode'>
& { & { language?: LangCode };
language?: LangCode;
};
const DATA_PREFIX = 'tg://login?token='; const DATA_PREFIX = 'tg://login?token=';
const QR_SIZE = 280; const QR_SIZE = 280;
@ -73,8 +73,10 @@ const AuthCode: FC<StateProps> = ({
const [isQrMounted, markQrMounted, unmarkQrMounted] = useFlag(); const [isQrMounted, markQrMounted, unmarkQrMounted] = useFlag();
const [animationData, setAnimationData] = useState<string>(); const [animationData, setAnimationData] = useState<string>();
const [isAnimationLoaded, setIsAnimationLoaded] = useState(false); const [isAnimationLoaded, markAnimationLoaded] = useFlag();
const handleAnimationLoad = useCallback(() => setIsAnimationLoaded(true), []);
const transitionClassNames = useMediaTransition(isQrMounted);
const airplaneTransitionClassNames = useMediaTransition(isAnimationLoaded);
useEffect(() => { useEffect(() => {
if (!animationData) { if (!animationData) {
@ -94,9 +96,6 @@ const AuthCode: FC<StateProps> = ({
} }
const container = qrCodeRef.current!; const container = qrCodeRef.current!;
container.parentElement!.classList.remove('pre-animate');
const data = `${DATA_PREFIX}${authQrCode.token}`; const data = `${DATA_PREFIX}${authQrCode.token}`;
QR_CODE.update({ QR_CODE.update({
@ -131,8 +130,11 @@ const AuthCode: FC<StateProps> = ({
return ( return (
<div id="auth-qr-form" className="custom-scroll"> <div id="auth-qr-form" className="custom-scroll">
<div className="auth-form qr"> <div className="auth-form qr">
{authQrCode ? ( <div className="qr-outer">
<div className="qr-wrapper pre-animate" key="qr-wrapper"> <div
className={buildClassName('qr-inner', transitionClassNames)}
key="qr-inner"
>
<div <div
key="qr-container" key="qr-container"
className="qr-container" className="qr-container"
@ -142,18 +144,17 @@ const AuthCode: FC<StateProps> = ({
{animationData && ( {animationData && (
<AnimatedSticker <AnimatedSticker
id="qrPlane" id="qrPlane"
className="qr-plane" className={buildClassName('qr-plane', airplaneTransitionClassNames)}
size={QR_PLANE_SIZE} size={QR_PLANE_SIZE}
animationData={animationData} animationData={animationData}
play={isAnimationLoaded} play={isAnimationLoaded}
onLoad={handleAnimationLoad} onLoad={markAnimationLoaded}
key="qrPlane" key="qrPlane"
/> />
)} )}
</div> </div>
) : ( {!isQrMounted && <div className="qr-loading"><Loading /></div>}
<div key="qr-loading" className="qr-loading"><Loading /></div> </div>
)}
<h3>{lang('Login.QR.Title')}</h3> <h3>{lang('Login.QR.Title')}</h3>
<ol> <ol>
<li><span>{lang('Login.QR.Help1')}</span></li> <li><span>{lang('Login.QR.Help1')}</span></li>