jeff-downloader/views/index.ejs

286 lines
13 KiB
Text

<!--
What are you doing here 😳😳😳😳
I guess have fun looking at the html, no easter egg to find here.
Come take a look here https://git.namejeff.xyz/Supositware/jeff-downloader for all my bad coding
-->
<!DOCTYPE html>
<html class="has-background-grey-dark" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:type" content="website">
<meta property="og:title" content="Le epic video downloader v<%= version %>" />
<meta property="og:description" content="A simple video downloader without any ad or tracking." />
<meta property="og:url" content="https://namejeff.xyz/" />
<meta property="og:image" content="https://namejeff.xyz/asset/jeff.png" />
<meta name="theme-color" content="#3b2ccf" />
<link rel="icon" href="/asset/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="asset/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css">
<link rel="stylesheet" type="text/css" href="stylesheets/background.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<title>Le epic video downloader v<%= version %></title>
</head>
<body class="has-text-light gradientBG">
<section class="section has-text-centered">
<div class="container">
<h1 class="title has-text-light">Le epic downloader v<%= version %></h1>
<div class="downloader form">
<form id="download-form" method="POST" action="/" enctype="application/x-www-form-urlencoded">
<div class="field is-horizontal">
<div class="field-body">
<div class="field is-horizontal">
<div class="control">
<label class="checkbox" for="feed">
<input class="checkbox" type="checkbox" name="feed" id="feed" title="Use this if you don't want the video you are downloading to be public">
Hide from feed
</label>
<label class="checkbox" for="sponsorBlock">
<input class="checkbox" type="checkbox" name="sponsorBlock" id="sponsorBlock" title="(Using sponsor.ajay.app)">
(W.I.P) Remove sponsors of video using <a href="https://sponsor.ajay.app/">SponsorBlock</a>
</label>
</div>
</div>
</div>
</div>
<div class="field-body">
<div class="field is-expanded">
<div class="field has-addons">
<p class="control is-expanded">
<input type="text" id="url" name="url" class="downloadurl input is-rounded" placeholder="Link" onkeyup="CheckFormat()">
</p>
<p class="control">
<button type="submit" class="downloadbtn button is-primary is-rounded" id="button">Download that mf video</button>
</p>
</div>
</div>
<div class="select">
<select name="format" id="format">
<option value="mp4">MP4</option>
<option value="mp3">MP3</option>
<option value="flac">FLAC</option>
</select>
<label for="advanced" class="checkbox">
<input class="checkbox" type="checkbox" name="advanced" id="advanced" title="Advanced" onclick="CheckFormat()">
Advanced (Prone to errors!)
</label>
</div>
</div>
<br>
<div class="field is-horizontal level">
<div class="field-body">
<div class="field is-horizontal">
<div class="control">
<span>Proxy options:</span>
<label class="radio" for="none">
<input class="radio" type="radio" name="proxy" value="none" id="none" checked>
None
</label>
<% proxy.forEach(function(proxy){ %>
<label class="radio" for="<%= proxy.ip %>">
<input class="radio" type="radio" name="proxy" value="<%= proxy.ip %>" id="<%= proxy.ip %>">
<%= proxy.ip.substring(0, proxy.ip.length - 5) %> - <%= proxy.country %>
</label>
<% }) %>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="container" id="progress"></div>
</div>
</section>
<% if (files != "") {%>
<p class="title has-text-light has-text-centered">Recently downloaded videos</p>
<section class="section">
<div class="columns is-vcentered is-multiline fadein">
<% files.forEach(function(file){ %>
<div class="column hvr-grow">
<div class="column box notification is-dark level">
<p class="subtitle"><%= file.name %></p>
<div>
<figure class="is-4by3">
<video muted loop onmouseover="this.play();" onmouseout="this.pause();this.currentTime = 0;" oncanplay="this.muted=true;" poster="<%= file.img %>" preload="metadata">
<source src="/thumbnail/<%= file.name %>.mp4#t=0.5" >
<img src="<%= file.img %>" title="Your browser does not support the <video> tag">
</video>
</figure>
</div>
<br>
<div class="content">
<div class="field has-addons is-centered">
<p class="control">
<a class="button is-link is-rounded" href="<%= file.location %>" download>Download<i class="fas fa-fw fa-file-download" aria-hidden="true"></i></a>
</p>
<p class="control">
<button class="button is-link is-rounded" onclick="toClipboard('https:\/\/namejeff.xyz\/{{ file.location }}')">Copy to clipboard<i class="fas fa-fw fa-clipboard" aria-hidden="true"></i></button>
</p>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<div class="tags has-addons">
<span class="tag">File format</span>
<span class="tag is-primary"><%= file.ext %></span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">File size</span>
<span class="tag is-primary"><%= file.size%> <%= file.unit %></span>
</div>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">Download date</span>
<span class="tag is-primary"><%= file.date %></span>
</div>
</div>
</div>
</div>
<% }) %>
</div>
</section>
<% } %>
<footer class="footer has-background-grey-dark has-text-light has-text-centered">
<p>Uses SponsorBlock API from <a href="https://sponsor.ajay.app/">https://sponsor.ajay.app/</a></p>
<p>I don't take any accountability for downloads made using this website.</p>
<p>Credit to <a href="https://github.com/rg3/youtube-dl/">youtube-dl</a> - My other projects <a href="https://discordapp.com/oauth2/authorize?client_id=377563711927484418&scope=bot&permissions=0">Haha yes</a> & <a href="https://twitter.com/YTPB5k">YTP twitter bot</a> - Numbers of visits: <%= viewCounter %> - Contact <a href="https://discord.gg/cNRh5JQ">Supositware#1616</a> on Discord if you have any issues</p>
<p>You can also support me either on <a href="https://www.paypal.me/supositware">Paypal</a> Or by tipping <a href="https://basicattentiontoken.org/">BAT</a> on this website!</p>
<p><a href="https://git.namejeff.xyz/Supositware/jeff-downloader">Source code</a></p>
</footer>
</body>
<script>
let uuid = uuidv4();
console.log(uuid);
let form = document.getElementById('download-form');
form.addEventListener("submit", function (event) {
event.preventDefault();
submitDownload();
});
function submitDownload() {
document.getElementById('progress').innerHTML = '<progress class="progress is-success" id="progress-bar" max="100">0%</progress>';
let frm = new FormData(form);
frm.append('uuid', uuid);
let xhttp = new XMLHttpRequest();
let progress = setInterval(() => {
CheckProgress();
}, 2000);
xhttp.addEventListener("load", function(event) {
const json = JSON.parse(event.target.responseText);
console.log(json);
if (json.error) {
clearInterval(progress);
document.getElementById('progress').innerHTML = '';
alert(json.error);
} else {
const url = json.url;
let a = document.createElement("a");
a.href = url;
fileName = url.split("/").pop();
a.download = fileName;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
a.remove();
}
clearInterval(progress);
setTimeout(() => {
document.getElementById('progress').innerHTML = '';
}, 500)
});
xhttp.addEventListener("error", function(event) {
clearInterval(progress);
document.getElementById('progress').innerHTML = '';
alert('whoops, something gone wrong');
});
xhttp.open("POST", "/", true);
xhttp.send(frm);
}
function CheckProgress() {
let xhttp = new XMLHttpRequest();
xhttp.open("GET", `/status/${uuid}?=${Math.random()}`, true);
xhttp.send();
xhttp.addEventListener("load", function(event) {
console.log(event.target.responseText);
if (event.target.responseText === '') return;
document.getElementsByTagName("progress")[0].value = event.target.responseText;
document.getElementsByTagName("progress")[0].innerHTML = `${event.target.responseText}%`;
});
xhttp.addEventListener("error", function(event) {
clearInterval(progress);
document.getElementById('progress').innerHTML = '';
alert('whoops, something gone wrong');
console.error(event.target.responseText);
});
}
function CheckFormat() {
let url;
try {
url = new URL(document.getElementById("url").value);
} catch (e) {
return;
}
document.getElementsByClassName("select")[0].className = "select is-loading";
console.log(encodeURI(url.href));
let xhttp = new XMLHttpRequest();
xhttp.open("get", `/format?url=${url.href}&advanced=${document.getElementById("advanced").checked}`, true);
xhttp.send();
xhttp.addEventListener("load", function(event) {
console.log(event.target.responseText);
let html = [];
let json = JSON.parse(event.target.responseText);
json.forEach(format => {
html.push(`<option value="${format.id}">${format.ext} - ${format.note}</option>`);
});
html.reverse();
html.push('<option value="mp3">MP3</option>');
html.push('<option value="flac">FLAC</option>');
document.getElementById("format").innerHTML = html;
document.getElementsByClassName("select")[0].className = "select";
});
xhttp.addEventListener("error", function(event) {
console.error(event.target.responseText);
});
}
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
console.log('%cWhat are you doing here 😳😳😳😳', 'font-size: 40px;');
</script>
</html>