You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
7.1 KiB
JavaScript
300 lines
7.1 KiB
JavaScript
const videoToggle = getId("videoToggle");
|
|
const audioToggle = getId("audioToggle");
|
|
const incorrectMsg = getId("incorrectMsg");
|
|
const loadingMsg = getId("loadingWrapper");
|
|
|
|
function getId(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
function getInfo() {
|
|
incorrectMsg.textContent = "";
|
|
loadingMsg.style.display = "flex";
|
|
getId("videoFormatSelect").innerHTML = "";
|
|
getId("audioFormatSelect").innerHTML = "";
|
|
const url = getId("url").value;
|
|
const options = {
|
|
method: "POST",
|
|
body: "url=" + url,
|
|
headers: {
|
|
"Content-Type": "Application/x-www-form-urlencoded",
|
|
},
|
|
};
|
|
|
|
fetch("/", options)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log(data.formats);
|
|
|
|
const urlElements = document.querySelectorAll(".url");
|
|
|
|
urlElements.forEach((element) => {
|
|
element.value = data.url;
|
|
});
|
|
|
|
if (data.status == true) {
|
|
loadingMsg.style.display = "none";
|
|
getId("hidden").style.display = "inline-block";
|
|
getId("title").innerHTML = "<b>Title</b>: " + data.title;
|
|
getId("videoList").style.display = "block";
|
|
videoToggle.style.backgroundColor = "rgb(67, 212, 164)";
|
|
|
|
let highestQualityLength = 0;
|
|
let audioSize = 0;
|
|
|
|
// Getting approx size of audio file
|
|
for (let format of data.formats){
|
|
if (format.hasAudio && !format.hasVideo && format.contentLength && format.container == "mp4"){
|
|
audioSize = (Number(format.contentLength) / 1000000)
|
|
}
|
|
}
|
|
|
|
for (let format of data.formats) {
|
|
let size = (Number(format.contentLength) / 1000000).toFixed(2)
|
|
|
|
// For videos
|
|
if (
|
|
format.hasVideo &&
|
|
format.contentLength &&
|
|
!format.hasAudio
|
|
) {
|
|
size = (Number(size) + Number(audioSize)).toFixed(2)
|
|
size = size + " MB";
|
|
const itag = format.itag;
|
|
const avcPattern = /^avc1[0-9a-zA-Z.]+$/g;
|
|
const av1Pattern = /^av01[0-9a-zA-Z.]+$/g;
|
|
|
|
let codec;
|
|
if (av1Pattern.test(format.codecs)) {
|
|
codec = "AV1 Codec";
|
|
} else if (avcPattern.test(format.codecs)) {
|
|
codec = "AVC Codec";
|
|
} else {
|
|
codec = format.codecs.toUpperCase() + " Codec";
|
|
}
|
|
|
|
const element =
|
|
"<option value='" +
|
|
itag +
|
|
"'>" +
|
|
format.qualityLabel +
|
|
" | " +
|
|
format.container +
|
|
" | " +
|
|
size +
|
|
" | " +
|
|
codec;
|
|
("</option>");
|
|
getId("videoFormatSelect").innerHTML += element;
|
|
}
|
|
|
|
// For audios
|
|
else if (
|
|
format.hasAudio &&
|
|
!format.hasVideo &&
|
|
format.audioBitrate
|
|
) {
|
|
size = size + " MB";
|
|
const pattern = /^mp*4a[0-9.]+$/g;
|
|
let audioCodec;
|
|
const itag = format.itag;
|
|
|
|
if (pattern.test(format.audioCodec)) {
|
|
audioCodec = "mp4a";
|
|
} else {
|
|
audioCodec = format.audioCodec;
|
|
}
|
|
const element =
|
|
"<option value='" +
|
|
itag +
|
|
"'>" +
|
|
format.audioBitrate +
|
|
" kbps" +
|
|
" | " +
|
|
audioCodec +
|
|
" | " +
|
|
size +
|
|
"</option>";
|
|
getId("audioFormatSelect").innerHTML += element;
|
|
}
|
|
}
|
|
} else {
|
|
loadingMsg.style.display = "none";
|
|
incorrectMsg.textContent =
|
|
"Some error has occured. Check your connection and use correct URL";
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
if (error) {
|
|
loadingMsg.style.display = "none";
|
|
incorrectMsg.textContent = error;
|
|
}
|
|
});
|
|
}
|
|
|
|
function download(type) {
|
|
getId("videoProgressBox").style.display = "none";
|
|
getId("audioProgressBox").style.display = "none";
|
|
|
|
getId("savedMsg").innerHTML = "";
|
|
const url = getId("url").value;
|
|
let itag;
|
|
let options;
|
|
if (type === "video") {
|
|
itag = getId("videoFormatSelect").value;
|
|
options = {
|
|
method: "POST",
|
|
body: new URLSearchParams({
|
|
url: url,
|
|
videoTag: itag,
|
|
}),
|
|
headers: {
|
|
"Content-Type": "Application/x-www-form-urlencoded",
|
|
},
|
|
};
|
|
} else {
|
|
itag = getId("audioFormatSelect").value;
|
|
options = {
|
|
method: "POST",
|
|
body: new URLSearchParams({
|
|
url: url,
|
|
audioTag: itag,
|
|
}),
|
|
headers: {
|
|
"Content-Type": "Application/x-www-form-urlencoded",
|
|
},
|
|
};
|
|
}
|
|
fetch("/download", options)
|
|
.then((response) => response.json)
|
|
.then((data) => {
|
|
console.log(data);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
let menuIsOpen = false;
|
|
|
|
getId("menuIcon").addEventListener("click", (event) => {
|
|
if (menuIsOpen) {
|
|
getId("menuIcon").style.transform = "rotate(0deg)";
|
|
menuIsOpen = false;
|
|
let count = 0;
|
|
let opacity = 1
|
|
const fade = setInterval(() => {
|
|
if (count >= 10) {
|
|
clearInterval(fade);
|
|
console.log("end")
|
|
} else {
|
|
opacity -= .1
|
|
getId("menu").style.opacity = opacity;
|
|
console.log("doing")
|
|
count++;
|
|
}
|
|
}, 50);
|
|
|
|
} else {
|
|
getId("menuIcon").style.transform = "rotate(90deg)";
|
|
menuIsOpen = true;
|
|
|
|
setTimeout(() => {
|
|
getId("menu").style.display = "flex";
|
|
getId("menu").style.opacity = 1;
|
|
}, 150);
|
|
}
|
|
});
|
|
|
|
getId("videoDownload").addEventListener("click", (event) => {
|
|
getId("preparingBox").style.display = "flex";
|
|
clickAnimation("videoDownload");
|
|
download("video");
|
|
});
|
|
|
|
getId("audioDownload").addEventListener("click", (event) => {
|
|
getId("preparingBox").style.display = "flex";
|
|
clickAnimation("audioDownload");
|
|
download("audio");
|
|
});
|
|
|
|
// Getting video info
|
|
|
|
getId("getInfo").addEventListener("click", (event) => {
|
|
getInfo();
|
|
});
|
|
|
|
getId("url").addEventListener("keypress", (event) => {
|
|
if (event.key == "Enter") {
|
|
getInfo();
|
|
}
|
|
});
|
|
|
|
// Video and audio toggle
|
|
|
|
videoToggle.addEventListener("click", (event) => {
|
|
videoToggle.style.backgroundColor = "var(--box-toggleOn)";
|
|
audioToggle.style.backgroundColor = "var(--box-toggle)";
|
|
getId("audioList").style.display = "none";
|
|
getId("videoList").style.display = "block";
|
|
});
|
|
|
|
audioToggle.addEventListener("click", (event) => {
|
|
audioToggle.style.backgroundColor = "var(--box-toggleOn)";
|
|
videoToggle.style.backgroundColor = "var(--box-toggle)";
|
|
getId("videoList").style.display = "none";
|
|
getId("audioList").style.display = "block";
|
|
});
|
|
|
|
/////////////
|
|
|
|
// Toggle theme
|
|
let darkTheme = false;
|
|
let circle = getId("themeToggleInside");
|
|
const root = document.querySelector(":root");
|
|
|
|
function toggle() {
|
|
if (darkTheme == false) {
|
|
circle.style.left = "25px";
|
|
|
|
root.style.setProperty("--background", "rgb(40,40,40)");
|
|
root.style.setProperty("--text", "white");
|
|
root.style.setProperty("--box-main", "rgb(80,80,80)");
|
|
root.style.setProperty("--box-toggle", "rgb(70,70,70)");
|
|
root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
|
|
|
|
darkTheme = true;
|
|
localStorage.setItem("theme", "dark");
|
|
} else {
|
|
circle.style.left = "0px";
|
|
|
|
root.style.setProperty("--background", "whitesmoke");
|
|
root.style.setProperty("--text", "rgb(20, 20, 20)");
|
|
root.style.setProperty("--box-main", "rgb(143, 239, 207)");
|
|
root.style.setProperty("--box-toggle", "rgb(108, 231, 190)");
|
|
root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
|
|
|
|
darkTheme = false;
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
}
|
|
|
|
const storageTheme = localStorage.getItem("theme");
|
|
|
|
if (storageTheme == "dark") {
|
|
darkTheme = false;
|
|
toggle();
|
|
} else if (storageTheme == "light") {
|
|
darkTheme = true;
|
|
toggle();
|
|
}
|
|
////
|
|
|
|
function clickAnimation(id) {
|
|
getId(id).style.animationName = "clickAnimation";
|
|
|
|
setTimeout(() => {
|
|
getId(id).style.animationName = "";
|
|
}, 500);
|
|
}
|