Files
mediaflow-proxy/mediaflow_proxy/static/speedtest_progress.html
T
Mohamed Zumair abbeaee0d0 Apply suggestions from code review
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2024-11-10 08:04:05 +05:30

140 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speedtest</title>
<style>
body.light-mode {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
color: #333;
}
body.dark-mode {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #121212;
color: #ffffff;
}
.container {
text-align: center;
}
h1 {
font-size: 24px;
}
.progress-bar {
width: 80%;
margin: 20px auto;
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #3498db;
animation: progress 180s linear forwards;
}
@keyframes progress {
0% { width: 0%; }
100% { width: 100%; }
}
.toggle-switch {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<script>
const urlParams = new URLSearchParams(window.location.search);
const taskId = urlParams.get("task_id");
if (!taskId || !/^[a-zA-Z0-9-_]+$/.test(taskId)) {
window.location.href = "/speedtest";
}
let statusCheckTimeout;
let retryCount = 0;
const MAX_RETRIES = 5;
async function checkStatus() {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
const response = await fetch(`/speedtest/results/${taskId}`, {
signal: controller.signal
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log("Fetched data:", data);
retryCount = 0;
if (data && data.message && data.message.includes("still running")) {
console.log("Test still running, polling again...");
statusCheckTimeout = setTimeout(checkStatus, 5000);
} else {
console.log("Test complete, redirecting after a short delay...");
setTimeout(() => {
window.location.href = `/speedtest/results/${taskId}`;
}, 2000);
}
} catch (error) {
console.error("Error fetching status:", error);
retryCount++;
if (retryCount < MAX_RETRIES) {
statusCheckTimeout = setTimeout(checkStatus, 5000);
} else {
alert("Failed to check status after multiple attempts. Please refresh the page.");
}
}
}
// Cleanup on page unload
window.addEventListener('unload', () => {
if (statusCheckTimeout) {
clearTimeout(statusCheckTimeout);
}
});
// Start the first status check after 120 seconds (120000 milliseconds)
setTimeout(checkStatus, 120000);
// Toggle dark mode
function toggleDarkMode() {
const body = document.body;
body.classList.toggle('dark-mode');
body.classList.toggle('light-mode');
}
</script>
</head>
<body class="light-mode">
<div class="toggle-switch">
<label for="darkModeToggle" class="switch">
<input type="checkbox" id="darkModeToggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode">
<span class="slider">Dark Mode</span>
</label>
</div>
<div class="container">
<h1>Speedtest in progress... Please wait up to 3 minutes.</h1>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
</body>
</html>