mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-22 22:57:54 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor code :3

Browse source
This commit is contained in:
Ashley 2023-06-10 08:07:07 +00:00
parent b618995b37
commit 10500917c3
1 changed files with 72 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
css/app.js
View file

@ -11,28 +11,29 @@ video.addEventListener('volumechange', function() {
}); });
// Get the progress bar and container elements // Get the progress bar and container elements
const progressBar1 = document.querySelector(".progress-bar"); const progressBar = document.querySelector(".progress-bar");
const progressContainer1 = document.querySelector(".progress-container"); const progressContainer = document.querySelector(".progress-container");
// Set the initial width of the progress bar to 0% // Set the initial width of the progress bar to 0%
progressBar1.style.width = "0%"; progressBar.style.width = "0%";
progressContainer1.style.display = 'block'; progressContainer.style.display = 'block';
// Attach an event listener to the window object to listen for the 'load' event // Attach an event listener to the window object to listen for the 'load' event
window.addEventListener("load", () => { window.addEventListener("load", () => {
progressBar1.style.width = "100%"; progressBar.style.width = "100%";
setTimeout(() => { setTimeout(() => {
progressContainer1.style.display = 'none'; progressContainer.style.display = 'none';
}, 500); }, 500);
}); });
// Lazy load background images
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
let bgs = document.querySelectorAll('[data-bg]'); const bgs = document.querySelectorAll('[data-bg]');
let bgCount = bgs.length; let bgCount = bgs.length;
function loadBg(index) { function loadBg(index) {
let bg = bgs[index]; const bg = bgs[index];
let bgUrl = bg.getAttribute('data-bg'); const bgUrl = bg.getAttribute('data-bg');
bg.style.backgroundImage = `url(${bgUrl})`; bg.style.backgroundImage = `url(${bgUrl})`;
bg.removeAttribute('data-bg'); bg.removeAttribute('data-bg');
bg.classList.add('loaded'); bg.classList.add('loaded');
@ -40,8 +41,8 @@ let bgUrl = bg.getAttribute('data-bg');
function lazyLoadBg() { function lazyLoadBg() {
for (let i = 0; i < bgCount; i++) { for (let i = 0; i < bgCount; i++) {
let bg = bgs[i]; const bg = bgs[i];
let bgRect = bg.getBoundingClientRect(); const bgRect = bg.getBoundingClientRect();
if (bgRect.top < window.innerHeight && bgRect.bottom > 0) { if (bgRect.top < window.innerHeight && bgRect.bottom > 0) {
loadBg(i); loadBg(i);
} }
@ -54,7 +55,8 @@ let bgUrl = bg.getAttribute('data-bg');
window.addEventListener('resize', lazyLoadBg); window.addEventListener('resize', lazyLoadBg);
}); });
const fadeInElements = () => { // Fade in elements on scroll or fullscreen change
function fadeInElements() {
const elements = document.querySelectorAll('.fade-in'); const elements = document.querySelectorAll('.fade-in');
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
elements.forEach(element => { elements.forEach(element => {
@ -65,42 +67,24 @@ let bgUrl = bg.getAttribute('data-bg');
element.classList.add('fade-in-active'); element.classList.add('fade-in-active');
} }
}); });
}; }
fadeInElements();
window.addEventListener('scroll', fadeInElements); window.addEventListener('scroll', fadeInElements);
document.addEventListener('fullscreenchange', fadeInElements);
document.addEventListener('fullscreenchange', () => {
fadeInElements();
});
setInterval(fadeInElements, 500); setInterval(fadeInElements, 500);
// Handle click events on links
// Get all anchor links on the page except for links with "jump_to_time" onclick attribute
const links = document.querySelectorAll('a:not([data-onclick="jump_to_time"])'); const links = document.querySelectorAll('a:not([data-onclick="jump_to_time"])');
// Add a click event listener to each link
links.forEach(link => { links.forEach(link => {
link.addEventListener('click', e => { link.addEventListener('click', e => {
// Check if the link's href includes a hash character
if (!link.href.includes('#')) { if (!link.href.includes('#')) {
e.preventDefault(); // Prevent the default link behavior e.preventDefault();
// Create a loading spinner element
const spinner = document.createElement('div'); const spinner = document.createElement('div');
spinner.classList.add('spinner'); spinner.classList.add('spinner');
// Create a loading overlay element
const loading = document.createElement('div'); const loading = document.createElement('div');
loading.classList.add('loading'); loading.classList.add('loading');
loading.appendChild(spinner); loading.appendChild(spinner);
// Add the loading overlay to the body
document.body.appendChild(loading); document.body.appendChild(loading);
// Redirect to the link after a short delay to show the loading overlay
setTimeout(() => { setTimeout(() => {
window.location.href = link.href; window.location.href = link.href;
}, 100); }, 100);
@ -108,35 +92,13 @@ links.forEach(link => {
}); });
}); });
// Handle click events for time-based links
const a = document.querySelectorAll('a[data-onclick="jump_to_time"]'); const timeLinks = document.querySelectorAll('a[data-onclick="jump_to_time"]');
timeLinks.forEach(link => {
function jumpToTime(e) {
e.preventDefault();
const link = e.target;
const video = document.getElementById('video');
const time = link.dataset.jumpTime;
video.currentTime = time;
window.location.hash = 'top'; // Add #video to the URL
setTimeout(() => {
history.replaceState(null, null, ' '); // Remove #video after 1 second
}, 250);
}
a.forEach(link => {
const href = link.getAttribute('href'); const href = link.getAttribute('href');
if (link.dataset.jumpTime) { if (link.dataset.jumpTime && href && href.includes('&t=')) {
link.removeAttribute('href');
}
if (href && href.includes('&t=')) {
const params = new URLSearchParams(href.split('?')[1]); const params = new URLSearchParams(href.split('?')[1]);
const time = params.get('t'); const time = params.get('t');
if (time) { if (time) {
link.dataset.jumpTime = time; link.dataset.jumpTime = time;
link.addEventListener('click', jumpToTime); link.addEventListener('click', jumpToTime);
@ -145,33 +107,26 @@ a.forEach(link => {
} }
}); });
// Fetch URLs and handle progress saving
const urls = document.querySelectorAll('a[href*="/watch?v="]'); // get all links with "/watch?v=" in href attribute const urls = document.querySelectorAll('a[href*="/watch?v="]');
const spinner = document.createElement('div'); const spinner = document.createElement('div');
spinner.id = 'fetch-spinner'; spinner.id = 'fetch-spinner';
spinner.classList.add('hide'); spinner.classList.add('hide');
document.body.appendChild(spinner); document.body.appendChild(spinner);
const text = document.createElement('div'); const text = document.createElement('div');
text.id = 'fetch-text'; text.id = 'fetch-text';
text.classList.add('hide'); text.classList.add('hide');
document.body.appendChild(text); document.body.appendChild(text);
document.body.classList.add('blur'); document.body.classList.add('blur');
let fetchedCount = 0; let fetchedCount = 0;
urls.forEach(link => { urls.forEach(link => {
const url = new URL(link.href); const url = new URL(link.href);
if (url.host !== 'www.youtube.com' && url.host !== 'youtube.com' && url.host !== "redirect.poketube.fun") {
if (url.host !== 'www.youtube.com' && url.host !== 'youtube.com') {
if (url.host !== "redirect.poketube.fun") {
console.log(`Fetching ${url.origin}`); console.log(`Fetching ${url.origin}`);
spinner.classList.remove('hide'); spinner.classList.remove('hide');
text.classList.remove('hide'); text.classList.remove('hide');
fetch(url.href) fetch(url.href)
.then(response => { .then(response => {
if (response.status === 500) { if (response.status === 500) {
@ -180,31 +135,24 @@ urls.forEach(link => {
console.log(`Fetched ${url.origin}`); console.log(`Fetched ${url.origin}`);
fetchedCount++; fetchedCount++;
console.clear() console.clear()
if (fetchedCount === urls.length) { if (fetchedCount === urls.length) {
spinner.classList.add('hide'); spinner.classList.add('hide');
text.classList.add('hide'); text.classList.add('hide');
document.body.classList.remove('blur'); document.body.classList.remove('blur');
} }
// Do something with the response
}) })
.catch(error => { .catch(error => {
spinner.classList.add('hide'); spinner.classList.add('hide');
text.classList.add('hide'); text.classList.add('hide');
console.clear() console.clear()
// Ignore network errors
if (!(error instanceof TypeError && error.message.includes('Failed to fetch'))) { if (!(error instanceof TypeError && error.message.includes('Failed to fetch'))) {
console.error(`Error fetching ${url.origin}: ${error}`); console.error(`Error fetching ${url.origin}: ${error}`);
} }
}); });
} }
}
}); });
console.clear() // Save and resume video progress
const videoId = new URLSearchParams(window.location.search).get('v'); const videoId = new URLSearchParams(window.location.search).get('v');
const localStorageKey = `progress-${videoId}`; const localStorageKey = `progress-${videoId}`;
@ -224,7 +172,7 @@ function resumeProgress() {
} }
video.addEventListener('timeupdate', () => { video.addEventListener('timeupdate', () => {
if (Math.floor(video.currentTime) % 1 === 0) { // save progress every 1 second if (Math.floor(video.currentTime) % 1 === 0) {
saveProgress(); saveProgress();
} }
}); });
@ -237,33 +185,20 @@ window.addEventListener('load', () => {
resumeProgress(); resumeProgress();
}); });
// Adjust video element style on fullscreen change
const videoElement = document.getElementById("video"); const videoElement = document.getElementById("video");
// Listen for full screen change events on the video element
videoElement.addEventListener("fullscreenchange", () => { videoElement.addEventListener("fullscreenchange", () => {
if (document.fullscreenElement === videoElement) { videoElement.style.borderRadius = document.fullscreenElement === videoElement ? "0em" : "16px";
// If the video element is in full screen mode, remove the border radius });
videoElement.style.borderRadius = "0em ";
} else {
// If the video element exits full screen mode, restore the border radius
videoElement.style.borderRadius = "16px";
}
});
const chnlurl = document.querySelectorAll('a[href*="/channel?id="]'); // get all links with "/watch?v=" in href attribute
// Fetch channel URLs
const channelUrls = document.querySelectorAll('a[href*="/channel?id="]');
let fetchedCountChannel = 0; let fetchedCountChannel = 0;
chnlurl.forEach(link => { channelUrls.forEach(link => {
const url = new URL(link.href); const url = new URL(link.href);
if (url.host !== 'www.youtube.com' && url.host !== 'youtube.com' && url.host !== "redirect.poketube.fun") {
if (url.host !== 'www.youtube.com' && url.host !== 'youtube.com') {
if (url.host !== "redirect.poketube.fun") {
console.log(`Fetching ${url.origin}`); console.log(`Fetching ${url.origin}`);
fetch(url.href) fetch(url.href)
.then(response => { .then(response => {
if (response.status === 500) { if (response.status === 500) {
@ -272,25 +207,39 @@ chnlurl.forEach(link => {
console.log(`Fetched ${url.origin}`); console.log(`Fetched ${url.origin}`);
fetchedCountChannel++; fetchedCountChannel++;
console.clear() console.clear()
if (fetchedCountChannel === channelUrls.length) {
if (fetchedCountChannel === chnlurl.length) {
document.body.classList.remove('blur'); document.body.classList.remove('blur');
} }
// Do something with the response
}) })
.catch(error => { .catch(error => {
console.clear() console.clear()
// Ignore network errors
if (!(error instanceof TypeError && error.message.includes('Failed to fetch'))) { if (!(error instanceof TypeError && error.message.includes('Failed to fetch'))) {
console.error(`Error fetching ${url.origin}: ${error}`); console.error(`Error fetching ${url.origin}: ${error}`);
} }
}); });
} }
} });
// Fetch download URLs
const downloadUrls = document.querySelectorAll('a[href*="/download?v="]');
downloadUrls.forEach(link => {
const url = new URL(link.href);
if (url.host !== 'www.youtube.com' && url.host !== 'youtube.com' && url.host !== "redirect.poketube.fun") {
console.log(`Fetching ${url.origin}`);
fetch(url.href)
.then(response => {
if (response.status === 500) {
// do nothing
}
console.log(`Fetched ${url.origin}`);
console.clear()
})
.catch(error => {
console.clear()
if (!(error instanceof TypeError && error.message.includes('Failed to fetch'))) {
console.error(`Error fetching ${url.origin}: ${error}`);
}
});
}
}); });
// @license-end // @license-end