diff --git a/frontend/app/player/web/MessageManager.ts b/frontend/app/player/web/MessageManager.ts index d4328732e..ce38d93cf 100644 --- a/frontend/app/player/web/MessageManager.ts +++ b/frontend/app/player/web/MessageManager.ts @@ -274,9 +274,9 @@ export default class MessageManager { public changeTab(tabId: string) { this.activeTab = tabId; - this.state.update({ currentTab: tabId }); this.tabs[tabId].clean(); this.tabs[tabId].move(this.state.get().time); + this.state.update({ currentTab: tabId }); } public updateChangeEvents() { diff --git a/frontend/app/player/web/TabManager.ts b/frontend/app/player/web/TabManager.ts index e049a8878..56f87adf3 100644 --- a/frontend/app/player/web/TabManager.ts +++ b/frontend/app/player/web/TabManager.ts @@ -342,7 +342,6 @@ export default class TabSessionManager { Object.assign(stateToUpdate, this.lists.moveGetState(t)); Object.keys(stateToUpdate).length > 0 && this.updateLocalState(stateToUpdate); - /* Sequence of the managers is important here */ // Preparing the size of "screen" const lastResize = this.resizeManager.moveGetLast(t, index); diff --git a/frontend/app/player/web/managers/DOM/DOMManager.ts b/frontend/app/player/web/managers/DOM/DOMManager.ts index 3e51ec202..9cd110d31 100644 --- a/frontend/app/player/web/managers/DOM/DOMManager.ts +++ b/frontend/app/player/web/managers/DOM/DOMManager.ts @@ -422,11 +422,10 @@ export default class DOMManager extends ListWalker { */ async moveReady(t: number): Promise { this.moveApply(t, this.applyMessage) - this.olVRoots.forEach(rt => rt.applyChanges()) // Thinkabout (read): css preload // What if we go back before it is ready? We'll have two handlres? - return this.stylesManager.moveReady(t).then(() => { + return this.stylesManager.moveReady().then(() => { /* Waiting for styles to be applied first */ /* Applying focus */ this.focusManager.move(t) diff --git a/frontend/app/player/web/managers/DOM/StylesManager.ts b/frontend/app/player/web/managers/DOM/StylesManager.ts index 4ee22b3fd..cfe121692 100644 --- a/frontend/app/player/web/managers/DOM/StylesManager.ts +++ b/frontend/app/player/web/managers/DOM/StylesManager.ts @@ -18,6 +18,7 @@ export default class StylesManager { private linkLoadingCount: number = 0; private linkLoadPromises: Array> = []; private skipCSSLinks: Array = []; // should be common for all pages + private abortController = new AbortController() constructor(private readonly screen: Screen, private readonly setLoading: (flag: boolean) => void) {} @@ -25,17 +26,26 @@ export default class StylesManager { this.linkLoadingCount = 0; this.linkLoadPromises = []; - //cancel all promises? thinkaboutit + this.abortController.abort(); + this.abortController = new AbortController(); } setStyleHandlers(node: HTMLLinkElement, value: string): void { let timeoutId: ReturnType | undefined; const promise = new Promise((resolve) => { - if (this.skipCSSLinks.includes(value)) resolve(); - this.linkLoadingCount++; + if ( + this.abortController.signal.aborted + || this.skipCSSLinks.includes(value) + || node.ownerDocument !== this.screen.document + ) { + console.log('skipped', node, value, this.abortController.signal.aborted, this.skipCSSLinks.includes(value), node.ownerDocument !== this.screen.document) + resolve(); + } this.setLoading(true); - const addSkipAndResolve = () => { + this.linkLoadingCount++; + const addSkipAndResolve = (e: any) => { this.skipCSSLinks.push(value); // watch out + console.error('skip node', e) resolve() } timeoutId = setTimeout(addSkipAndResolve, 4000); @@ -43,23 +53,38 @@ export default class StylesManager { // It would be better to make it more relyable with addEventListener node.onload = () => { const doc = this.screen.document; - doc && rewriteNodeStyleSheet(doc, node); + if (node.ownerDocument === doc && doc) { + rewriteNodeStyleSheet(doc, node); + } resolve(); } node.onerror = addSkipAndResolve; + this.abortController.signal.addEventListener('abort', () => { + node.onload = null; + node.onerror = null; + clearTimeout(timeoutId); + resolve(); + }); }).then(() => { node.onload = null; node.onerror = null; clearTimeout(timeoutId); this.linkLoadingCount--; if (this.linkLoadingCount === 0) { - this.setLoading(false); + setTimeout(() => { + this.setLoading(false) + this.linkLoadPromises = []; + }, 0) } }); this.linkLoadPromises.push(promise); } - moveReady(t: number): Promise { - return Promise.all(this.linkLoadPromises) + moveReady(): Promise { + if (this.linkLoadingCount > 0) { + return Promise.all(this.linkLoadPromises) + } else { + return Promise.resolve([]) + } } }