From a034f207c8bd66f90efd35c475d332a019d2622c Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 12 Jun 2021 20:43:13 +0300 Subject: [PATCH] Fix blinking fonts again Fix manifest for PWA --- src/components/languageChangeButton.ts | 7 +++- src/helpers/dom/loadFonts.ts | 12 +++++++ src/index.ts | 6 +--- src/lib/appManagers/appDialogsManager.ts | 4 ++- src/pages/pageIm.ts | 43 ++++++++++++------------ 5 files changed, 44 insertions(+), 28 deletions(-) create mode 100644 src/helpers/dom/loadFonts.ts diff --git a/src/components/languageChangeButton.ts b/src/components/languageChangeButton.ts index 9d8aa6de..af9be770 100644 --- a/src/components/languageChangeButton.ts +++ b/src/components/languageChangeButton.ts @@ -6,6 +6,7 @@ import { cancelEvent } from "../helpers/dom/cancelEvent"; import { attachClickEvent } from "../helpers/dom/clickEvent"; +import loadFonts from "../helpers/dom/loadFonts"; import { Config, LangPackDifference, LangPackString } from "../layer"; import I18n, { LangPackKey } from "../lib/langPack"; import apiManager from "../lib/mtproto/mtprotoworker"; @@ -61,7 +62,11 @@ export default function getLanguageChangeButton(appendTo: HTMLElement) { }); const btnChangeLanguage = Button('btn-primary btn-secondary btn-primary-transparent primary', {text: 'Login.ContinueOnLanguage'}); - appendTo.append(btnChangeLanguage); + loadFonts().then(() => { + window.requestAnimationFrame(() => { + appendTo.append(btnChangeLanguage); + }); + }); rootScope.addEventListener('language_change', () => { btnChangeLanguage.remove(); diff --git a/src/helpers/dom/loadFonts.ts b/src/helpers/dom/loadFonts.ts new file mode 100644 index 00000000..8e88894f --- /dev/null +++ b/src/helpers/dom/loadFonts.ts @@ -0,0 +1,12 @@ +/* + * https://github.com/morethanwords/tweb + * Copyright (C) 2019-2021 Eduard Kuzmenko + * https://github.com/morethanwords/tweb/blob/master/LICENSE + */ + +let promise: Promise; +export default function loadFonts(): Promise { + if(promise) return promise; + // @ts-ignore + return promise = 'fonts' in document ? Promise.all(['400 1rem Roboto', '500 1rem Roboto', '500 1rem tgico'].map(font => document.fonts.load(font))) : Promise.resolve(); +} diff --git a/src/index.ts b/src/index.ts index 8fb2f1a0..93ff04ae 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,7 @@ import App from './config/app'; import blurActiveElement from './helpers/dom/blurActiveElement'; import findUpClassName from './helpers/dom/findUpClassName'; import fixSafariStickyInput from './helpers/dom/fixSafariStickyInput'; +import loadFonts from './helpers/dom/loadFonts'; import { isMobileSafari } from './helpers/userAgent'; import './materialize.scss'; import './scss/style.scss'; @@ -261,11 +262,6 @@ console.timeEnd('get storage1'); */ const langPromise = I18n.default.getCacheLangPack(); - function loadFonts(): Promise { - // @ts-ignore - return 'fonts' in document ? Promise.all(['400 1rem Roboto', '500 1rem Roboto'].map(font => document.fonts.load(font))) : Promise.resolve(); - } - const [state, langPack] = await Promise.all([ appStateManager.default.getState(), langPromise diff --git a/src/lib/appManagers/appDialogsManager.ts b/src/lib/appManagers/appDialogsManager.ts index 72ee5629..0cc80a04 100644 --- a/src/lib/appManagers/appDialogsManager.ts +++ b/src/lib/appManagers/appDialogsManager.ts @@ -395,7 +395,9 @@ export class AppDialogsManager { new ConnectionStatusComponent(this.chatsContainer); this.chatsContainer.append(bottomPart); - lottieLoader.loadLottieWorkers(); + setTimeout(() => { + lottieLoader.loadLottieWorkers(); + }, 200); } private getOffset(side: 'top' | 'bottom'): {index: number, pos: number} { diff --git a/src/pages/pageIm.ts b/src/pages/pageIm.ts index ff5c2ac3..f23b1be0 100644 --- a/src/pages/pageIm.ts +++ b/src/pages/pageIm.ts @@ -1,5 +1,3 @@ -//import {stackBlurImage} from '../lib/StackBlur'; -//import appStateManager from "../lib/appManagers/appStateManager"; /* * https://github.com/morethanwords/tweb * Copyright (C) 2019-2021 Eduard Kuzmenko @@ -7,6 +5,7 @@ */ import blurActiveElement from "../helpers/dom/blurActiveElement"; +import loadFonts from "../helpers/dom/loadFonts"; import appStateManager from "../lib/appManagers/appStateManager"; import I18n from "../lib/langPack"; import Page from "./page"; @@ -30,25 +29,27 @@ let onFirstMount = () => { } blurActiveElement(); - return new Promise((resolve) => { - window.requestAnimationFrame(() => { - const promise = import('../lib/appManagers/appDialogsManager'); - promise.finally(async() => { - //alert('pageIm!'); - resolve(); - - //AudioContext && global.navigator && global.navigator.mediaDevices && global.navigator.mediaDevices.getUserMedia && global.WebAssembly; - - /* // @ts-ignore - var AudioContext = globalThis.AudioContext || globalThis.webkitAudioContext; - alert('AudioContext:' + typeof(AudioContext)); - // @ts-ignore - alert('global.navigator:' + typeof(navigator)); - alert('navigator.mediaDevices:' + typeof(navigator.mediaDevices)); - alert('navigator.mediaDevices.getUserMedia:' + typeof(navigator.mediaDevices?.getUserMedia)); - alert('global.WebAssembly:' + typeof(WebAssembly)); */ - - //(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el)); + return loadFonts().then(() => { + return new Promise((resolve) => { + window.requestAnimationFrame(() => { + const promise = import('../lib/appManagers/appDialogsManager'); + promise.finally(async() => { + //alert('pageIm!'); + resolve(); + + //AudioContext && global.navigator && global.navigator.mediaDevices && global.navigator.mediaDevices.getUserMedia && global.WebAssembly; + + /* // @ts-ignore + var AudioContext = globalThis.AudioContext || globalThis.webkitAudioContext; + alert('AudioContext:' + typeof(AudioContext)); + // @ts-ignore + alert('global.navigator:' + typeof(navigator)); + alert('navigator.mediaDevices:' + typeof(navigator.mediaDevices)); + alert('navigator.mediaDevices.getUserMedia:' + typeof(navigator.mediaDevices?.getUserMedia)); + alert('global.WebAssembly:' + typeof(WebAssembly)); */ + + //(Array.from(document.getElementsByClassName('rp')) as HTMLElement[]).forEach(el => ripple(el)); + }); }); }); });