0c701eeffb
Summary: This will automatically invoke the "Start" button if Flipper detect it is offline, to automate that step. It will do so only once (safe for the reload logic that also triggers on server errors, not sure if that was intentionally?) Reviewed By: lblasa Differential Revision: D50074673 fbshipit-source-id: 2c11e80429a2c4ed0e43e62cb2f6057fad5eb410
178 lines
4.1 KiB
HTML
178 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>You are offline</title>
|
|
|
|
<!-- Inline the page's stylesheet. -->
|
|
<style>
|
|
body {
|
|
font-family: system-ui;
|
|
font-size: 13px;
|
|
cursor: default;
|
|
overflow: hidden;
|
|
line-height: 1;
|
|
}
|
|
|
|
#container {
|
|
-webkit-app-region: drag;
|
|
z-index: 999999;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 50px;
|
|
overflow: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
color: #525252;
|
|
text-align: center;
|
|
}
|
|
|
|
.console {
|
|
font-family: 'Fira Mono';
|
|
width: 600px;
|
|
height: 250px;
|
|
box-sizing: border-box;
|
|
margin: auto;
|
|
}
|
|
|
|
.console header {
|
|
border-top-left-radius: 15px;
|
|
border-top-right-radius: 15px;
|
|
background-color: #9254de;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.console .consolebody {
|
|
border-bottom-left-radius: 15px;
|
|
border-bottom-right-radius: 15px;
|
|
box-sizing: border-box;
|
|
padding: 0px 10px;
|
|
height: calc(100% - 40px);
|
|
overflow: scroll;
|
|
background-color: #000;
|
|
color: white;
|
|
text-align: left;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
background-color: #9254de;
|
|
color: white;
|
|
font-family: system-ui;
|
|
font-size: 15px;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="submit"]:hover {
|
|
background-color: #722ed1;
|
|
}
|
|
|
|
input[type="submit"]:active {
|
|
background-color: #722ed1;
|
|
}
|
|
|
|
input[type="submit"]:disabled {
|
|
background-color: gray;
|
|
color: lightgray;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="container">
|
|
<div>
|
|
<b>Flipper is not running in the background</b>
|
|
|
|
<p>It can be started by clicking the button below.</p>
|
|
<form action="flipper-launcher://start-server" onSubmit="serverStart();">
|
|
<input id="submit" type="submit" value="Start" />
|
|
</form>
|
|
|
|
<p>
|
|
Flipper will automatically reload once the connection is re-established.
|
|
</p>
|
|
<p>If is taking a bit longer than it should, you can manually start Flipper.</p>
|
|
<p>From the terminal, please run:</p>
|
|
|
|
<div class="console">
|
|
<header>
|
|
<p>shell</p>
|
|
</header>
|
|
<div class="consolebody">
|
|
<p>> open -a 'Flipper' --args '--server'</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function serverStart() {
|
|
const button = document.getElementById('submit');
|
|
if (!button) {
|
|
return;
|
|
}
|
|
button.disabled = true;
|
|
button.value = 'Starting...';
|
|
|
|
// Set a timeout to disable the start button for
|
|
// a period of 30 seconds. If after 30 seconds, the server
|
|
// has not loaded, then re-enable it.
|
|
setTimeout(() => {
|
|
button.disabled = false;
|
|
button.value = 'Start';
|
|
}, 30 * 10000);
|
|
}
|
|
|
|
// Listen to changes in the network state, reload when online.
|
|
// This handles the case when the device is completely offline
|
|
// i.e. no network connection.
|
|
window.addEventListener('online', () => {
|
|
window.location.reload();
|
|
});
|
|
|
|
let autoStarted = false;
|
|
|
|
// Check if the server is responding & reload the page if it is.
|
|
// This handles the case when the device is online, but the server
|
|
// is offline or misbehaving.
|
|
async function checkNetworkAndReload() {
|
|
try {
|
|
const response = await fetch('.');
|
|
if (response.status === 200) {
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
} catch {
|
|
// trigger submit button automatically, but only once
|
|
if (!autoStarted) {
|
|
autoStarted = true;
|
|
document.getElementById("submit").click();
|
|
}
|
|
}
|
|
window.setTimeout(checkNetworkAndReload, 2500);
|
|
}
|
|
|
|
checkNetworkAndReload();
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|