diff --git a/client/presentationmgr.ts b/client/presentationmgr.ts index 1d05704..d7f4ff9 100644 --- a/client/presentationmgr.ts +++ b/client/presentationmgr.ts @@ -3,7 +3,7 @@ import { } from "./pythagoras_client"; import { ScrollingTextBox } from "./scrolling_textbox"; import { dict, IDLE_LOGOS, QUESTION_LINK, QUESTION_QR } from "./settings"; -import { el, sleep } from "./tools"; +import { el, sleep, wait_for_dom_refresh } from "./tools"; interface PresentationScreen { prepare(): Promise; @@ -27,7 +27,7 @@ export class PresentationManager { await this.screen.prepare(); this.dom_root.innerHTML = ""; this.dom_root.appendChild(this.screen.dom); - await sleep(10); + await wait_for_dom_refresh(); } public async serve(ws_client: PythagorasClient): Promise { @@ -93,7 +93,7 @@ class MainScreen implements PresentationScreen { } public async start(): Promise { - await sleep(10); + await wait_for_dom_refresh(); this.dom_root.style.opacity = "1"; await sleep(500); } @@ -198,7 +198,7 @@ class VideoScreen implements PresentationScreen { this.dom_video.currentTime = seconds_from_start; this.dom_root.innerHTML = ""; this.dom_root.appendChild(this.dom_video); - await sleep(10); + await wait_for_dom_refresh(); await this.start(); } @@ -233,7 +233,7 @@ class IdleScreen implements PresentationScreen { } public async start(): Promise { - await sleep(10); + await wait_for_dom_refresh(); this.dom_title.style.transform = "translateY(0)"; this.dom_title.style.opacity = "1"; await sleep(250); diff --git a/client/tools.ts b/client/tools.ts index a4cf0e1..bb34a51 100644 --- a/client/tools.ts +++ b/client/tools.ts @@ -31,6 +31,16 @@ export async function sleep(millis: number): Promise { }); } +export function wait_for_dom_refresh(): Promise { + return new Promise((resolver) => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + resolver(); + }); + }); + }); +} + export namespace el { function add_classes(target: HTMLElement, classes?: string[]): void { if (classes === undefined) { return; }