zumepro/pythagoras
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve dom synchronization

Browse Source
This commit is contained in:
Ondřej Mekina
2025-05-06 20:35:03 +02:00
parent 2e915b9037
commit 0d752a9038
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/presentationmgr.ts
View File

@@ -3,7 +3,7 @@ import {
} from "./pythagoras_client"; } from "./pythagoras_client";
import { ScrollingTextBox } from "./scrolling_textbox"; import { ScrollingTextBox } from "./scrolling_textbox";
import { dict, IDLE_LOGOS, QUESTION_LINK, QUESTION_QR } from "./settings"; 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 { interface PresentationScreen {
prepare(): Promise<void>; prepare(): Promise<void>;
@@ -27,7 +27,7 @@ export class PresentationManager {
await this.screen.prepare(); await this.screen.prepare();
this.dom_root.innerHTML = ""; this.dom_root.innerHTML = "";
this.dom_root.appendChild(this.screen.dom); this.dom_root.appendChild(this.screen.dom);
await sleep(10); await wait_for_dom_refresh();
} }
public async serve(ws_client: PythagorasClient): Promise<void> { public async serve(ws_client: PythagorasClient): Promise<void> {
@@ -93,7 +93,7 @@ class MainScreen implements PresentationScreen {
} }
public async start(): Promise<void> { public async start(): Promise<void> {
await sleep(10); await wait_for_dom_refresh();
this.dom_root.style.opacity = "1"; this.dom_root.style.opacity = "1";
await sleep(500); await sleep(500);
} }
@@ -198,7 +198,7 @@ class VideoScreen implements PresentationScreen {
this.dom_video.currentTime = seconds_from_start; this.dom_video.currentTime = seconds_from_start;
this.dom_root.innerHTML = ""; this.dom_root.innerHTML = "";
this.dom_root.appendChild(this.dom_video); this.dom_root.appendChild(this.dom_video);
await sleep(10); await wait_for_dom_refresh();
await this.start(); await this.start();
} }
@@ -233,7 +233,7 @@ class IdleScreen implements PresentationScreen {
} }
public async start(): Promise<void> { public async start(): Promise<void> {
await sleep(10); await wait_for_dom_refresh();
this.dom_title.style.transform = "translateY(0)"; this.dom_title.style.transform = "translateY(0)";
this.dom_title.style.opacity = "1"; this.dom_title.style.opacity = "1";
await sleep(250); await sleep(250);

10
client/tools.ts
View File

@@ -31,6 +31,16 @@ export async function sleep(millis: number): Promise<void> {
}); });
} }
export function wait_for_dom_refresh(): Promise<void> {
return new Promise<void>((resolver) => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
resolver();
});
});
});
}
export namespace el { export namespace el {
function add_classes(target: HTMLElement, classes?: string[]): void { function add_classes(target: HTMLElement, classes?: string[]): void {
if (classes === undefined) { return; } if (classes === undefined) { return; }