add loading stuff :3

This commit is contained in:
Ashley 2023-03-05 20:36:20 +00:00
parent 59df1b5b62
commit 961779b6a7

View file

@ -290,6 +290,36 @@
.video{
margin-right: auto;
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loading .spinner {
display: inline-block;
border: 5px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
width: 50px;
height: 50px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
@ -1267,10 +1297,8 @@ Recommended Videos
<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later
function removeParam(paramName) {
let searchParams = new URLSearchParams(window.location.search);
searchParams.delete(paramName);
if (history.replaceState) {
let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + searchString + window.location.hash;
@ -1278,40 +1306,68 @@ function removeParam(paramName) {
}
}
checkbox = document.getElementById("continue");
let checkbox = document.getElementById("continue");
checkbox.addEventListener('change', function(e) {
if(checkbox.checked) {
console.log("[AUTOPLAY] enabled")
document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
if (checkbox.checked) {
console.log("[AUTOPLAY] enabled");
document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
document.body.style.cursor = "wait"; // set cursor to "wait" before the fetch request starts
fetch(url)
.then(response => response.json())
.then(data => {
// do something with the data
document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
})
.catch(error => {
console.error(error);
document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
});
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
}
}
if (/[?&]autoplay=/.test(location.search)) {
if(!checkbox.checked) {
removeParam("autoplay")
if (!checkbox.checked) {
removeParam("autoplay");
}
}
});
if (/[?&]autoplay=/.test(location.search)) {
checkbox.checked = true;
console.log("[AUTOPLAY] enabled")
document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
console.log("[AUTOPLAY] enabled");
let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
document.body.style.cursor = "wait"; // set cursor to "wait" before the fetch request starts
fetch(url)
.then(response => response.json())
.then(data => {
// do something with the data
document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
})
.catch(error => {
console.error(error);
document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
});
document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
}
}
// Retrieve volume from local storage or set to max if not available
const initialVolume = localStorage.getItem('playerVolume') || 1;
const video = document.getElementById('video');
video.volume = initialVolume;
// Save volume to local storage whenever it changes
video.addEventListener('volumechange', function() {
localStorage.setItem('playerVolume', this.volume);
});
// Get the progress bar and container elements
const progressBar1 = document.querySelector(".progress-bar");
const progressContainer1 = document.querySelector(".progress-container");
@ -1356,6 +1412,35 @@ window.addEventListener("load", () => {
window.addEventListener('resize', lazyLoadBg);
});
// Get all anchor links on the page
const links = document.querySelectorAll('a');
// Add a click event listener to each link
links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault(); // Prevent the default link behavior
// Create a loading spinner element
const spinner = document.createElement('div');
spinner.classList.add('spinner');
// Create a loading overlay element
const loading = document.createElement('div');
loading.classList.add('loading');
loading.appendChild(spinner);
// Add the loading overlay to the body
document.body.appendChild(loading);
// Redirect to the link after a short delay to show the loading overlay
setTimeout(() => {
window.location.href = link.href;
}, 500);
});
});
</script>
<% if (!optout) { %>