[Splash] Rewrite to fix progress UI, fix state text
This commit is contained in:
parent
c381ac913f
commit
6689c99589
|
@ -1,9 +1,8 @@
|
||||||
<video loop autoplay src="https://goosemod.com/vid/discord_loading.webm"></video>
|
<video loop autoplay src="https://goosemod.com/vid/discord_loading.webm"></video>
|
||||||
|
|
||||||
<div id="text">Launching...</div>
|
<div id="text">Starting...</div>
|
||||||
|
|
||||||
<div id="bar-container"></div>
|
<div id="bar-container"><div id="bar-fill"></div></div>
|
||||||
<div id="bar-fill"></div>
|
|
||||||
|
|
||||||
<div id="debug"></div>
|
<div id="debug"></div>
|
||||||
|
|
||||||
|
@ -69,9 +68,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#bar-container, #bar-fill {
|
#bar-container, #bar-fill {
|
||||||
margin-top: 10px;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
width: 180px;
|
width: 180px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
|
|
||||||
|
@ -81,16 +77,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#bar-container {
|
#bar-container {
|
||||||
position: absolute;
|
background-color: var(--background-secondary);
|
||||||
background: var(--background-secondary);
|
|
||||||
|
position: relative;
|
||||||
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bar-fill {
|
#bar-fill {
|
||||||
background-color: var(--brand-experiment);
|
background-color: var(--brand-experiment);
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|
||||||
transform: translate(0%, -50%);
|
|
||||||
left: 10%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#debug {
|
#debug {
|
||||||
|
@ -114,34 +109,36 @@
|
||||||
DiscordSplash.signalReady();
|
DiscordSplash.signalReady();
|
||||||
|
|
||||||
DiscordSplash.onStateUpdate(({ status, current, total, progress, seconds }) => {
|
DiscordSplash.onStateUpdate(({ status, current, total, progress, seconds }) => {
|
||||||
let text = status.replaceAll('-', ' ');
|
let statusText = status.replaceAll('-', ' ');
|
||||||
|
let showProgress = false;
|
||||||
|
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case 'downloading-updates': // X of Y states
|
case 'downloading-updates': // X of Y states
|
||||||
case 'installing-updates':
|
case 'installing-updates':
|
||||||
text = text.slice(0, -1) + ` ${current} of ${total}`; // Remove "s" and concat
|
statusText = statusText.slice(0, -1) + ` ${current} of ${total}`; // Remove "s" and concat
|
||||||
|
showProgress = true;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'update-failure': // Custom for update failure, include retry and reorder text
|
case 'update-failure': // Custom for update failure, include retry and reorder text
|
||||||
text = `Update Failed - Retrying in ${seconds}`;
|
statusText = `Update Failed - Retrying in ${seconds}`;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'launching':
|
case 'launching':
|
||||||
text = 'Starting...';
|
statusText = 'Starting...';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.textContent = text;
|
text.textContent = statusText;
|
||||||
|
|
||||||
|
|
||||||
if (progress) {
|
if (showProgress) {
|
||||||
barContainer.style.visibility = 'visible';
|
barContainer.style.visibility = 'visible';
|
||||||
barFill.style.visibility = 'visible';
|
barFill.style.visibility = 'visible';
|
||||||
|
|
||||||
barFill.style.width = 80 * (progress / 100) + '%';
|
barFill.style.width = 100 * (progress / 100) + '%';
|
||||||
} else {
|
} else {
|
||||||
barContainer.style.display = '';
|
barContainer.style.visibility = '';
|
||||||
barFill.style.display = '';
|
barFill.style.visibility = '';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue