From 8972c69a9a41c84c7b9b4645b3c3a4a7af3b881f Mon Sep 17 00:00:00 2001 From: morethanwords Date: Tue, 21 Apr 2020 20:18:21 +0300 Subject: [PATCH] Preload auth pages stickers & pixel-perfect fixes & minor --- src/lib/lottie.ts | 1 + src/lib/lottieLoader.ts | 9 ++-- src/pages/page.ts | 9 ++-- src/pages/pageAuthCode.ts | 61 +++++++++++++------------ src/pages/pageIm.ts | 44 ------------------ src/pages/pagePassword.ts | 63 +++++++++++++------------- src/pages/pageSignIn.ts | 4 +- src/pages/pagesManager.ts | 9 ++++ src/scss/style.scss | 93 ++++++++++++++++++++++++--------------- 9 files changed, 145 insertions(+), 148 deletions(-) diff --git a/src/lib/lottie.ts b/src/lib/lottie.ts index 07e3f68f..068174ec 100644 --- a/src/lib/lottie.ts +++ b/src/lib/lottie.ts @@ -1,4 +1,5 @@ // @ts-ignore import LottiePlayer from "lottie-web/build/player/lottie_canvas.min.js"; +//import LottiePlayer from "lottie-web/build/player/lottie_light.min.js"; (window as any).lottie = LottiePlayer; \ No newline at end of file diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts index fd5a1c37..cf28e1fd 100644 --- a/src/lib/lottieLoader.ts +++ b/src/lib/lottieLoader.ts @@ -2,7 +2,7 @@ import { isElementInViewport, isInDOM } from "./utils"; import LottiePlayer, { AnimationConfigWithPath, AnimationConfigWithData, AnimationItem } from "lottie-web/build/player/lottie.d"; class LottieLoader { - private lottie: /* any */ typeof LottiePlayer = null; + public lottie: /* any */ typeof LottiePlayer = null; private animations: { [group: string]: { animation: /* any */AnimationItem, @@ -91,13 +91,16 @@ class LottieLoader { public async loadAnimation(params: /* any */AnimationConfigWithPath | AnimationConfigWithData, group = '') { //params.autoplay = false; - params.renderer = 'canvas'; + //if(group != 'auth') { + params.renderer = 'canvas'; + //} + params.rendererSettings = { //context: context, // the canvas context //preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property clearCanvas: true, progressiveLoad: true, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements. - hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true) + hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true), }; if(!this.lottie) { diff --git a/src/pages/page.ts b/src/pages/page.ts index 08e1859f..3753bd54 100644 --- a/src/pages/page.ts +++ b/src/pages/page.ts @@ -4,11 +4,11 @@ export default class Page { public pageEl: HTMLDivElement; private installed = false; - constructor(className: string, public isAuthPage: boolean, private onFirstMount?: (...args: any[]) => void, private onMount?: (...args: any[]) => void) { + constructor(className: string, public isAuthPage: boolean, private onFirstMount?: (...args: any[]) => Promise | void, private onMount?: (...args: any[]) => void) { this.pageEl = document.body.getElementsByClassName(className)[0] as HTMLDivElement; } - public mount(...args: any[]) { + public async mount(...args: any[]) { //this.pageEl.style.display = ''; if(this.onMount) { @@ -17,7 +17,10 @@ export default class Page { if(!this.installed) { if(this.onFirstMount) { - this.onFirstMount(...args); + let res = this.onFirstMount(...args); + if(res instanceof Promise) { + await res; + } } this.installed = true; diff --git a/src/pages/pageAuthCode.ts b/src/pages/pageAuthCode.ts index 19b2dc38..9c4e1985 100644 --- a/src/pages/pageAuthCode.ts +++ b/src/pages/pageAuthCode.ts @@ -24,40 +24,12 @@ const EDITONSAMEPAGE = false; let headerElement: HTMLHeadElement = null; let sentTypeElement: HTMLParagraphElement = null; -let onFirstMount = () => { +let onFirstMount = (): Promise => { let needFrame = 0, lastLength = 0; let animation: /* AnimationItem */any = undefined; const CODELENGTH = authCode.type.length; - fetch('assets/img/TwoFactorSetupMonkeyTracking.tgs') - .then(res => res.arrayBuffer()) - .then(async(data) => { - let str = await CryptoWorker.gzipUncompress(data, true); - - animation = await LottieLoader.loadAnimation({ - container: page.pageEl.querySelector('.auth-image'), - renderer: 'svg', - loop: false, - autoplay: false, - animationData: JSON.parse(str) - }); - - animation.setSpeed(1); - //console.log(animation.getDuration(), animation.getDuration(true)); - - animation.addEventListener('enterFrame', (e: any) => { - //console.log('enterFrame', e, needFrame); - let currentFrame = Math.round(e.currentTime); - - if((e.direction == 1 && currentFrame >= needFrame) || - (e.direction == -1 && currentFrame <= needFrame)) { - animation.setSpeed(1); - animation.pause(); - } - }); - }); - const codeInput = page.pageEl.querySelector('#code') as HTMLInputElement; const codeInputLabel = codeInput.nextElementSibling as HTMLLabelElement; const editButton = page.pageEl.querySelector('.phone-edit') as HTMLElement; @@ -242,6 +214,37 @@ let onFirstMount = () => { /* animation.goToAndStop(15, true); */ //animation.goToAndStop(length / max * ); }); + + return Promise.all([ + LottieLoader.loadLottie(), + + fetch('assets/img/TwoFactorSetupMonkeyTracking.tgs') + .then(res => res.arrayBuffer()) + .then(data => CryptoWorker.gzipUncompress(data, true)) + .then(str => LottieLoader.loadAnimation({ + container: page.pageEl.querySelector('.auth-image'), + renderer: 'svg', + loop: false, + autoplay: false, + animationData: JSON.parse(str) + })) + .then(_animation => { + animation = _animation; + animation.setSpeed(1); + //console.log(animation.getDuration(), animation.getDuration(true)); + + animation.addEventListener('enterFrame', (e: any) => { + //console.log('enterFrame', e, needFrame); + let currentFrame = Math.round(e.currentTime); + + if((e.direction == 1 && currentFrame >= needFrame) || + (e.direction == -1 && currentFrame <= needFrame)) { + animation.setSpeed(1); + animation.pause(); + } + }); + }) + ]); }; const page = new Page('page-authCode', true, onFirstMount, (_authCode: typeof authCode) => { diff --git a/src/pages/pageIm.ts b/src/pages/pageIm.ts index d9f1e67c..c73577b6 100644 --- a/src/pages/pageIm.ts +++ b/src/pages/pageIm.ts @@ -1,52 +1,8 @@ import { openBtnMenu, ripple } from "../components/misc"; //import {stackBlurImage} from '../lib/StackBlur'; import Page from "./page"; -//import appImManager from '../lib/appManagers/appImManager'; let onFirstMount = () => import('../lib/appManagers/appImManager').then(() => {//import('../lib/services').then(services => { - //console.log('included services', services); - -//export default () => { - - -/* - loadDialogs().then(result => { - //appImManager.setScroll(chatScroll); - }); - return; - */ - - - /* function placeCaretAfterNode(node: HTMLElement) { - if (typeof window.getSelection != "undefined") { - var range = document.createRange(); - range.setStartAfter(node); - range.collapse(true); - var selection = window.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); - } -} - - messageInput.onclick = (e) => { - let target = e.target as HTMLElement; - if(target.classList.contains('emoji-inner')) { - placeCaretAfterNode(target.parentElement); - } else if(target.classList.contains('emoji-sizer')) { - placeCaretAfterNode(target); - } - console.log('lol', target); - }; */ - - /* window.addEventListener('click', function(this, e) { - // @ts-ignore - let isInput = e.target.tagName == 'INPUT'; - if(!isInput && !window.getSelection().toString()) { - console.log('click'); - messageInput.focus(); - } - }); */ - /* fetch('assets/img/camomile.jpg') .then(res => res.blob()) .then(blob => { diff --git a/src/pages/pagePassword.ts b/src/pages/pagePassword.ts index 8dda12c5..beb715c7 100644 --- a/src/pages/pagePassword.ts +++ b/src/pages/pagePassword.ts @@ -7,43 +7,12 @@ import passwordManager from '../lib/mtproto/passwordManager'; import apiManager from '../lib/mtproto/apiManager'; import Page from './page'; -let onFirstMount = () => { +let onFirstMount = (): Promise => { let needFrame = 0; let animation: /* AnimationItem */any = undefined; let passwordVisible = false; - fetch('assets/img/TwoFactorSetupMonkeyClose.tgs') - .then(res => res.arrayBuffer()) - .then(async(data) => { - let str = await CryptoWorker.gzipUncompress(data, true); - - animation = await LottieLoader.loadAnimation({ - container: page.pageEl.querySelector('.auth-image'), - renderer: 'svg', - loop: false, - autoplay: false, - animationData: JSON.parse(str) - }); - - console.log(animation.getDuration(true)); - //animation.goToAndStop(822); - - animation.addEventListener('enterFrame', (e: any) => { - //console.log('enterFrame', e, needFrame); - let currentFrame = Math.round(e.currentTime); - - if((e.direction == 1 && currentFrame >= needFrame) || - (e.direction == -1 && currentFrame <= needFrame)) { - animation.setSpeed(1); - animation.pause(); - } - }); - - needFrame = 49; - animation.play(); - }); - const btnNext = page.pageEl.querySelector('button') as HTMLButtonElement; const passwordInput = document.getElementById('password') as HTMLInputElement; //const passwordInputLabel = passwordInput.nextElementSibling as HTMLLabelElement; @@ -124,6 +93,36 @@ let onFirstMount = () => { /* passwordInput.addEventListener('input', function(this, e) { }); */ + return Promise.all([ + LottieLoader.loadLottie(), + + fetch('assets/img/TwoFactorSetupMonkeyClose.tgs') + .then(res => res.arrayBuffer()) + .then(data => CryptoWorker.gzipUncompress(data, true)) + .then(str => LottieLoader.loadAnimation({ + container: page.pageEl.querySelector('.auth-image'), + renderer: 'svg', + loop: false, + autoplay: false, + animationData: JSON.parse(str) + })) + .then(_animation => { + animation = _animation; + animation.addEventListener('enterFrame', (e: any) => { + //console.log('enterFrame', e, needFrame); + let currentFrame = Math.round(e.currentTime); + + if((e.direction == 1 && currentFrame >= needFrame) || + (e.direction == -1 && currentFrame <= needFrame)) { + animation.setSpeed(1); + animation.pause(); + } + }); + + needFrame = 49; + animation.play(); + }) + ]); }; const page = new Page('page-password', true, onFirstMount); diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index 2ab016cc..c11b2a8c 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -30,7 +30,7 @@ let onFirstMount = () => { var parent = selectCountryCode.parentElement; var wrapper = document.createElement('div'); - wrapper.classList.add('select-wrapper', 'z-depth-4'); + wrapper.classList.add('select-wrapper', 'z-depth-3'); var list = document.createElement('ul'); wrapper.appendChild(list); @@ -100,7 +100,7 @@ let onFirstMount = () => { parent.appendChild(wrapper); }/* , {once: true} */); selectCountryCode.addEventListener('blur', function(this: typeof selectCountryCode, e) { - parent.removeChild(wrapper); + //parent.removeChild(wrapper); e.cancelBubble = true; }, {capture: true}); diff --git a/src/pages/pagesManager.ts b/src/pages/pagesManager.ts index e1fda750..0282efdb 100644 --- a/src/pages/pagesManager.ts +++ b/src/pages/pagesManager.ts @@ -1,6 +1,7 @@ import Page from "./page"; import { whichChild } from "../lib/utils"; import { horizontalMenu } from "../components/misc"; +import lottieLoader from "../lib/lottieLoader"; class PagesManager { private pageID = -1; @@ -22,6 +23,14 @@ class PagesManager { this.selectTab(id); + // это нужно чтобы ресайзнуть канвас (из-за скрытого рендера будет 0х0) + if(this.pageID != -1) { + lottieLoader.loadLottie().then(() => { + // @ts-ignore + lottieLoader.lottie.resize(); + }); + } + this.pageID = id; } else { this.pagesDiv.style.display = 'none'; diff --git a/src/scss/style.scss b/src/scss/style.scss index b03ca90d..4f34aff5 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -98,24 +98,17 @@ input { line-height: 1.25; } -.page-sign .input-wrapper, -.page-authCode .input-wrapper, -.page-signUp .input-wrapper, -.page-password .input-wrapper { - /* margin-top: 3rem; */ - margin-top: 50px; -} - .page-authCode { + .auth-image { + transform: translateY(12px); + } + .phone-wrapper { display: flex; align-items: center; justify-content: center; - margin: 1.52rem 0 0.912rem 0; - + h4 { - margin: 0; - &[contenteditable="true"] { padding: 0 1rem; border: none; @@ -129,6 +122,10 @@ input { border-color: $color-error!important; } } + + .subtitle { + margin-top: 0; + } } .btn-icon { @@ -500,33 +497,59 @@ input { max-width: 720px; // 360 + 360 / 2 overflow: hidden; + .subtitle { + margin: 0; + } + + .input-wrapper { + margin-top: 49px; + } + .tabs-container { + height: 100%; + &.animated { transition: .42s transform; } > div { - justify-content: center; + /* justify-content: center; */ /* &.active { flex-direction: row; } */ + &:before, &:after { + content: " "; + flex: 1; + min-height: 3rem; + /* height: 105px; */ + width: 100%; + } + > div { + height: 810px; padding: 0; - overflow: visible; - /* display: flex; + flex: 1 1 auto; + display: flex; flex-direction: column; - justify-content: center; */ } } - } + } + + @media (max-height: 858px) { + height: auto; + + /* .tabs-container > div > div { + height: auto; + } */ + } } -.page-sign { +.page-sign, .page-signUp { .auth-image { - width: 160px; - height: 160px; - margin-bottom: 45px; + width: 10rem; + height: 10rem; + margin-bottom: 1.5rem; } } @@ -607,7 +630,7 @@ input { input { border: 1px solid #DADCE0; - border-radius: $border-radius-big; + border-radius: $border-radius-medium; padding: 0 1rem; box-sizing: border-box; width: 100%; @@ -753,7 +776,7 @@ input { } .select-wrapper { - max-height: 300px; + max-height: 23.5rem; /* height: auto; */ position: absolute; width: 100%; @@ -762,7 +785,7 @@ input { overflow: hidden; background-color: #fff; z-index: 3; - border-radius: $border-radius; + border-radius: $border-radius-medium; display: flex; flex-direction: column; flex-wrap: wrap; @@ -778,21 +801,22 @@ input { justify-content: space-between; height: 3.5rem; cursor: pointer; - font-weight: 500; + /* font-weight: 500; */ text-align: left; display: grid; - grid-template-columns: 15% 60% 25%; + grid-template-columns: calc(26px + 2rem) 1fr 50px; &:hover { background-color: rgba(112, 117, 121, .08); } } + // +2 px bc of whitespace .emoji { - height: 24px; - width: 24px; - font-size: 24px; + height: 26px; + width: 26px; + font-size: 26px; line-height: 1; } @@ -823,12 +847,11 @@ input:focus, button:focus { outline: none; } +// this dimensions will be used for monkey business .auth-image { - width: 133px; - height: 133px; - margin-left: auto; - margin-right: auto; - margin-bottom: 1rem; + width: 166px; + height: 166px; + margin: 0 auto 18px; } /* .phone-wrapper { @@ -878,7 +901,7 @@ input:focus, button:focus { .btn-primary { background: $button-primary-background; color: #fff; - border-radius: $border-radius; + border-radius: $border-radius-medium; width: 100%; text-align: center; height: 54px;