_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix the main coWebsite loader

Browse Source
This commit is contained in:
Alexis Faizeau 2022-05-02 12:01:12 +02:00
parent 755ca93d49
commit 2358aac775
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -238,6 +238,7 @@ class CoWebsiteManager {
const iframe = coWebsite.getIframe(); const iframe = coWebsite.getIframe();
if (iframe) { if (iframe) {
this.activateMainLoaderAnimation();
iframe.style.display = "none"; iframe.style.display = "none";
} }
this.resizing = true; this.resizing = true;
@ -258,6 +259,7 @@ class CoWebsiteManager {
const iframe = coWebsite.getIframe(); const iframe = coWebsite.getIframe();
if (iframe) { if (iframe) {
iframe.style.display = "flex"; iframe.style.display = "flex";
this.desactivateMainLoaderAnimation();
} }
this.resizing = false; this.resizing = false;
}); });
@ -273,6 +275,7 @@ class CoWebsiteManager {
const iframe = coWebsite.getIframe(); const iframe = coWebsite.getIframe();
if (iframe) { if (iframe) {
this.activateMainLoaderAnimation();
iframe.style.display = "none"; iframe.style.display = "none";
} }
this.resizing = true; this.resizing = true;
@ -296,6 +299,7 @@ class CoWebsiteManager {
const iframe = coWebsite.getIframe(); const iframe = coWebsite.getIframe();
if (iframe) { if (iframe) {
iframe.style.display = "flex"; iframe.style.display = "flex";
this.desactivateMainLoaderAnimation();
} }
this.resizing = false; this.resizing = false;
}); });
@ -309,9 +313,7 @@ class CoWebsiteManager {
if (this.cowebsiteDom.classList.contains("closing")) { if (this.cowebsiteDom.classList.contains("closing")) {
this.cowebsiteDom.classList.remove("closing"); this.cowebsiteDom.classList.remove("closing");
if (this.loaderAnimationInterval.interval) { this.desactivateMainLoaderAnimation();
clearInterval(this.loaderAnimationInterval.interval);
}
this.loaderAnimationInterval.trails = undefined; this.loaderAnimationInterval.trails = undefined;
} }
}); });
@ -353,7 +355,10 @@ class CoWebsiteManager {
this.fire(); this.fire();
} }
private loadMain(openingWidth?: number): void { private activateMainLoaderAnimation() {
this.desactivateMainLoaderAnimation();
this.cowebsiteLoaderDom.style.display = "block";
this.loaderAnimationInterval.interval = setInterval(() => { this.loaderAnimationInterval.interval = setInterval(() => {
if (!this.loaderAnimationInterval.trails) { if (!this.loaderAnimationInterval.trails) {
this.loaderAnimationInterval.trails = [0, 1, 2]; this.loaderAnimationInterval.trails = [0, 1, 2];
@ -361,7 +366,6 @@ class CoWebsiteManager {
for (let trail = 1; trail < this.loaderAnimationInterval.trails.length + 1; trail++) { for (let trail = 1; trail < this.loaderAnimationInterval.trails.length + 1; trail++) {
for (let state = 0; state < 4; state++) { for (let state = 0; state < 4; state++) {
// const newState = this.loaderAnimationInterval.frames + trail -1;
const stateDom = this.cowebsiteLoaderDom.querySelector( const stateDom = this.cowebsiteLoaderDom.querySelector(
`#trail-${trail}-state-${state}` `#trail-${trail}-state-${state}`
) as SVGPolygonElement; ) as SVGPolygonElement;
@ -382,6 +386,17 @@ class CoWebsiteManager {
trail === 3 ? 0 : trail + 1 trail === 3 ? 0 : trail + 1
); );
}, 200); }, 200);
}
private desactivateMainLoaderAnimation() {
if (this.loaderAnimationInterval.interval) {
this.cowebsiteLoaderDom.style.display = "none";
clearInterval(this.loaderAnimationInterval.interval);
}
}
private loadMain(openingWidth?: number): void {
this.activateMainLoaderAnimation();
if (!this.verticalMode && openingWidth) { if (!this.verticalMode && openingWidth) {
let newWidth = 50; let newWidth = 50;
@ -623,6 +638,8 @@ class CoWebsiteManager {
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
}, animationTime); }, animationTime);
this.desactivateMainLoaderAnimation();
} else if ( } else if (
!highlightedEmbed && !highlightedEmbed &&
this.getCoWebsites().find((searchCoWebsite) => searchCoWebsite.getId() === coWebsite.getId()) this.getCoWebsites().find((searchCoWebsite) => searchCoWebsite.getId() === coWebsite.getId())

1
front/style/cowebsite/_global.scss
View File

@ -68,6 +68,7 @@
&-loader { &-loader {
width: 20%; width: 20%;
display: none;
#smoke { #smoke {
@for $i from 1 through 3 { @for $i from 1 through 3 {