mirror of
https://github.com/ReviveMii/revivetube
synced 2025-04-29 12:39:25 -04:00
163 lines
5.3 KiB
HTML
163 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Loading...</title>
|
|
<style>
|
|
a {
|
|
color: #3ea6ff;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #46bbff;
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
color: #fff;
|
|
background-color: #0f0f0f;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.header {
|
|
background-color: #202020;
|
|
border-bottom:2px solid #2c2c2c;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.logo {
|
|
font-size: 24px;
|
|
color: #fe0000;
|
|
font-weight: bold;
|
|
}
|
|
.search-container {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.search-bar {
|
|
width: 400px;
|
|
padding: 8px;
|
|
font-size: 16px;
|
|
border: 1px solid #313131;
|
|
background-color: #121212;
|
|
color: #fff;
|
|
}
|
|
.search-bar:hover {
|
|
border: 1px solid #268ee9;
|
|
}
|
|
.search-button {
|
|
padding: 8px 15px;
|
|
font-size: 16px;
|
|
background-color: #222222;
|
|
border:1px solid #3d3d3d;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
.search-button:hover {
|
|
border: 1px solid #268ee9;
|
|
}
|
|
.loading-section {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
#loadingGif {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 20px auto;
|
|
}
|
|
#goButton {
|
|
display: none;
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
background-color: #4caf50;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
#goButton:disabled {
|
|
background-color: gray;
|
|
cursor: not-allowed;
|
|
}
|
|
small {
|
|
color: grey;
|
|
display: block;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a href="/" style="text-decoration: none;"><div class="logo"><img src="../favicon.ico" style="width:32px; height:32px; display:inline; position:relative; top:3px; right:3px; padding-right:2px;"><span style="position:relative; top:-4px; padding-left:5px; border-left:1px solid #323232;">
|
|
ReviveTube</span></div></a>
|
|
<div class="search-container">
|
|
<form action="/" method="get">
|
|
<input class="search-bar" name="query" placeholder="Search YouTube" type="text">
|
|
<input type="submit" class="search-button" value="Search">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="loading-section">
|
|
<h1>Loading...</h1>
|
|
<img alt="Loading..." id="loadingGif" src="loading.gif"/>
|
|
<p id="progressText">Fetching Info...</p>
|
|
<button id="goButton" onclick="startVideo()">Go</button>
|
|
<br>
|
|
<small>Loading Screen will <b>NOT</b> work in Dolphin Emulator.<br><br>Long Video = Longer Download and Converting.<br><br>Videos over 5 minutes will not play.</small>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var goButton = document.getElementById('goButton');
|
|
var loadingGif = document.getElementById('loadingGif');
|
|
var progressText = document.getElementById('progressText');
|
|
var videoId = "{{ video_id }}";
|
|
|
|
function simulateLoading() {
|
|
setInterval(checkStatus, 1000);
|
|
}
|
|
|
|
|
|
function checkStatus() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', '/status/' + videoId, true);
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
var response;
|
|
try {
|
|
response = eval('(' + xhr.responseText + ')');
|
|
} catch (e) {
|
|
response = { status: 'error' };
|
|
}
|
|
updateProgress(response);
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function updateProgress(status) {
|
|
if (status.status === 'complete') {
|
|
loadingGif.style.display = 'none';
|
|
progressText.innerHTML = 'Done!';
|
|
goButton.style.display = 'inline';
|
|
} else if (status.status === 'downloading') {
|
|
progressText.innerHTML = 'The Server is Downloading...';
|
|
} else if (status.status === 'converting') {
|
|
progressText.innerHTML = 'The Server is Converting video...';
|
|
} else if (status.status === 'converting for Wii') {
|
|
progressText.innerHTML = 'The Server is Converting for Wii...';
|
|
} else {
|
|
progressText.innerHTML = 'The Server was unable to process the video! Report the Bug in the Discord Server. <br> Error Details: Error on Video with ID: {{ video_id }}<br>Discord Server on ReviveMii Homepage Footer';
|
|
}
|
|
}
|
|
|
|
function startVideo() {
|
|
window.location.href = '/watch?video_id=' + videoId;
|
|
}
|
|
|
|
window.onload = function () {
|
|
simulateLoading();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|