Preload auth pages stickers & pixel-perfect fixes & minor
This commit is contained in:
morethanwords
parent
43bc94b0c4
commit
8972c69a9a
@ -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;
|
||||
@ -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) {
|
||||
|
||||
@ -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<any> | 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;
|
||||
|
||||
@ -24,40 +24,12 @@ const EDITONSAMEPAGE = false;
|
||||
let headerElement: HTMLHeadElement = null;
|
||||
let sentTypeElement: HTMLParagraphElement = null;
|
||||
|
||||
let onFirstMount = () => {
|
||||
let onFirstMount = (): Promise<any> => {
|
||||
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<string>(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<string>(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) => {
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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<any> => {
|
||||
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<string>(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<string>(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);
|
||||
|
||||
@ -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});
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user