|
|
|
@ -24,9 +24,32 @@ |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
|
|
|
|
#preload video { |
|
|
|
height: 144px; |
|
|
|
width: 256px; |
|
|
|
#preload .logo { |
|
|
|
height: 100px; |
|
|
|
width: 100px; |
|
|
|
animation: logo 4s infinite 1s; |
|
|
|
transform-origin: 50% 50%; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes logo { |
|
|
|
from, to { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
10% { |
|
|
|
transform: rotate(0deg); |
|
|
|
} |
|
|
|
30% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
40% { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
60% { |
|
|
|
transform: rotate(720deg); |
|
|
|
} |
|
|
|
70% { |
|
|
|
transform: rotate(720deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
@ -41,7 +64,7 @@ |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div id="preload"> |
|
|
|
<video autoplay loop muted src="<%= __DEV__ ? '.' : '../static' %>/videos/loader.mp4" /> |
|
|
|
<img class="logo" src="<%= __DEV__ ? '.' : '../static' %>/images/tmp_logo_will_be_svg_later.png" alt="" /> |
|
|
|
</div> |
|
|
|
<div id="app"></div> |
|
|
|
<script> |
|
|
|
@ -52,6 +75,7 @@ |
|
|
|
const appEl = document.getElementById('app') |
|
|
|
|
|
|
|
const initApp = (options = {}) => { |
|
|
|
return |
|
|
|
const { force = false } = options |
|
|
|
|
|
|
|
if (force) { |
|
|
|
@ -65,17 +89,11 @@ |
|
|
|
|
|
|
|
if (name === 'MainWindow') { |
|
|
|
preloadEl.style.display = 'flex' |
|
|
|
|
|
|
|
let waitTime = 0 |
|
|
|
|
|
|
|
const PRELOAD_WAIT_TIME_MIN = 2e3 |
|
|
|
const interval = setInterval(() => (waitTime += 250), 250) |
|
|
|
|
|
|
|
const startTime = Date.now() |
|
|
|
const PRELOAD_WAIT_TIME_MIN = 2000 |
|
|
|
window.onAppReady = () => { |
|
|
|
const delay = PRELOAD_WAIT_TIME_MIN - waitTime |
|
|
|
|
|
|
|
clearInterval(interval) |
|
|
|
setTimeout(initApp, delay > 0 ? delay : 1) |
|
|
|
const delay = Math.max(0, PRELOAD_WAIT_TIME_MIN - (Date.now() - startTime)) |
|
|
|
setTimeout(initApp, delay) |
|
|
|
} |
|
|
|
} else { |
|
|
|
initApp({ force: true }) |
|
|
|
|
Gaëtan Renaudeau
7 years ago
