mirror of
https://github.com/viarotel-org/escrcpy.git
synced 2024-12-30 16:23:05 +01:00
176 lines
5.0 KiB
JavaScript
176 lines
5.0 KiB
JavaScript
// --------- Preload scripts loading ---------
|
|
function domReady(condition = ['complete', 'interactive']) {
|
|
return new Promise((resolve) => {
|
|
if (condition.includes(document.readyState)) {
|
|
resolve(true)
|
|
}
|
|
else {
|
|
document.addEventListener('readystatechange', () => {
|
|
if (condition.includes(document.readyState)) {
|
|
resolve(true)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const safeDOM = {
|
|
append(parent, child) {
|
|
if (!Array.from(parent.children).find(e => e === child)) {
|
|
parent.appendChild(child)
|
|
}
|
|
},
|
|
remove(parent, child) {
|
|
if (Array.from(parent.children).find(e => e === child)) {
|
|
parent.removeChild(child)
|
|
}
|
|
},
|
|
}
|
|
|
|
/**
|
|
* https://tobiasahlin.com/spinkit
|
|
* https://connoratherton.com/loaders
|
|
* https://projects.lukehaas.me/css-loaders
|
|
* https://matejkustec.github.io/SpinThatShit
|
|
*/
|
|
function useLoading() {
|
|
const className = 'electron-loading'
|
|
const loginStyles = `
|
|
.${className}-core {
|
|
font-size: 30px;
|
|
text-indent: -9999em;
|
|
overflow: hidden;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
margin: 72px auto;
|
|
position: relative;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation: electron-loading-dots 1.7s infinite ease, electron-loading-spin 1.7s infinite ease;
|
|
animation: electron-loading-dots 1.7s infinite ease, electron-loading-spin 1.7s infinite ease;
|
|
}
|
|
|
|
@-webkit-keyframes electron-loading-dots {
|
|
0% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
5%,
|
|
95% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
10%,
|
|
59% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
|
|
}
|
|
20% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
|
|
}
|
|
38% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
|
|
}
|
|
100% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
}
|
|
|
|
@keyframes electron-loading-dots {
|
|
0% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
5%,
|
|
95% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
10%,
|
|
59% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
|
|
}
|
|
20% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
|
|
}
|
|
38% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
|
|
}
|
|
100% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes electron-loading-spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes electron-loading-spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.${className}-wrap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 3000;
|
|
background: white;
|
|
color: #028D71;
|
|
}
|
|
|
|
.${className}-text {
|
|
margin-top: -45px;
|
|
}
|
|
`
|
|
|
|
const styleEl = document.createElement('style')
|
|
styleEl.id = `${className}-style`
|
|
styleEl.innerHTML = loginStyles
|
|
|
|
const divEl = document.createElement('div')
|
|
divEl.className = `${className}-wrap`
|
|
divEl.innerHTML = `
|
|
<div class="${className}-core"></div>
|
|
<div class="${className}-text"> Initializing service...</div>
|
|
`
|
|
|
|
return {
|
|
appendLoading() {
|
|
safeDOM.append(document.head, styleEl)
|
|
safeDOM.append(document.body, divEl)
|
|
},
|
|
removeLoading() {
|
|
safeDOM.remove(document.head, styleEl)
|
|
safeDOM.remove(document.body, divEl)
|
|
},
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const { appendLoading, removeLoading } = useLoading()
|
|
domReady().then(appendLoading)
|
|
|
|
window.onmessage = (ev) => {
|
|
ev.data.payload === 'removeLoading' && removeLoading()
|
|
}
|
|
|
|
setTimeout(removeLoading, 4999)
|