Working version 1.1 - Cosmetic updates to come and client downloads
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Page Title</title>
|
||||
<title>Ben's YouTube Downloader</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
@@ -21,7 +21,9 @@
|
||||
|
||||
<button id="Download">Download</button>
|
||||
|
||||
<div id="VideoPreview"></div>
|
||||
<div class="VideoContainer">
|
||||
<div id="VideoBox"></div>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -27,20 +27,20 @@ let VideoPreview = [];
|
||||
|
||||
function renderPreview() {
|
||||
if (isDownloading) return;
|
||||
document.getElementById('VideoPreview').innerText = '';
|
||||
document.getElementById('VideoBox').innerText = '';
|
||||
for (const [key, value] of Object.entries(VideoPreview)) {
|
||||
if (document.getElementById(key) == null) {
|
||||
if (!value.found) {
|
||||
document.getElementById('VideoPreview').innerHTML += `<div id="${key}">${key}: <h>Video not found</h></div>`;
|
||||
document.getElementById('VideoBox').innerHTML += `<div id="${key}">${key}: <h>Video not found</h></div>`;
|
||||
} else {
|
||||
document.getElementById('VideoPreview').innerHTML += `<div id="${key}">${key}: <h>${value.title}</h></div>`;
|
||||
document.getElementById('VideoBox').innerHTML += `<div id="${key}">${key}: <h>${value.title}</h></div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearPreview() {
|
||||
document.getElementById('VideoPreview').innerText = '';
|
||||
document.getElementById('VideoBox').innerText = '';
|
||||
}
|
||||
|
||||
socket.on('video-preview', async (data) => {
|
||||
@@ -56,10 +56,40 @@ socket.on('video-preview', async (data) => {
|
||||
document.getElementById('Download').addEventListener('click', async (event) => {
|
||||
if (isDownloading) return;
|
||||
socket.emit('download', document.getElementById('VideosToRecord').value.split('\n'));
|
||||
document.getElementById('VideoPreview').innerText = '\nDownloading...';
|
||||
document.getElementById('VideosToRecord').value = null;
|
||||
document.getElementById('VideoBox').innerText = 'Downloading...';
|
||||
// document.getElementById('VideosToRecord').value = null;
|
||||
isDownloading = true;
|
||||
console.log('Asked server for download...');
|
||||
});
|
||||
|
||||
let downloads = [];
|
||||
let downloadCount = 0;
|
||||
let completedDownloads = 0;
|
||||
|
||||
function renderDownloads() {
|
||||
document.getElementById('VideoBox').innerText = '';
|
||||
for (const [key, value] of Object.entries(downloads)) {
|
||||
document.getElementById('VideoBox').innerHTML += `<div id="${key}">${value.title}: <h>${value.percent}</h></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
socket.on('download-count', async (data) => {
|
||||
downloadCount = data.num;
|
||||
});
|
||||
|
||||
socket.on('download-done', async(data) => {
|
||||
completedDownloads++;
|
||||
|
||||
downloads[data.video] = {title: data.title, percent: 'Complete!'};
|
||||
renderDownloads();
|
||||
if (completedDownloads == downloadCount) {
|
||||
completedDownloads = 0; downloadCount = 0;
|
||||
isDownloading = false;
|
||||
downloads = [];
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('download-progress', async (data) => {
|
||||
downloads[data.video] = data;
|
||||
renderDownloads();
|
||||
});
|
||||
|
||||
BIN
public/resources/YouTube Logo.png
Normal file
BIN
public/resources/YouTube Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -30,7 +30,12 @@ textarea {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#VideoPreview {
|
||||
.VideoContainer {
|
||||
padding: 30px, 0px, 30px, 0px;
|
||||
}
|
||||
|
||||
#VideoBox {
|
||||
padding-top: 10px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const server = require('./server');
|
||||
|
||||
let config = {
|
||||
serverPort: 80,
|
||||
serverPort: 8080,
|
||||
downloadLocation: './'
|
||||
};
|
||||
|
||||
|
||||
@@ -37,8 +37,9 @@ module.exports.listen = async () => {
|
||||
});
|
||||
|
||||
socket.on('download', async (data) => {
|
||||
logger.log(`Socket id ${socket.id}' is requesting a download`);
|
||||
youtube.downloadVideos(data, socket, {path: main.config.downloadLocation});
|
||||
logger.log(`Socket id '${socket.id}' is requesting a download`);
|
||||
let toDownload = await youtube.resolveVideos(data);
|
||||
youtube.downloadVideos(toDownload.data, socket, {path: main.config.downloadLocation});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
const logger = require('./logger');
|
||||
|
||||
const fs = require('fs');
|
||||
const ytdl = require('ytdl-core');
|
||||
|
||||
module.exports.resolveVideos = async (arr) => {
|
||||
@@ -29,6 +32,39 @@ module.exports.resolveVideos = async (arr) => {
|
||||
|
||||
module.exports.downloadVideos = async (arr, socket, options) => {
|
||||
let path = options.path ? options.path : './'
|
||||
|
||||
let numOfDownloads = 0;
|
||||
|
||||
for (const [key, value] of Object.entries(arr)) {
|
||||
if (ytdl.validateURL(key)) {
|
||||
try {
|
||||
const stream = await ytdl(key, {quality: 'highest'});
|
||||
stream.pipe(fs.createWriteStream(`${path}/${value.title}.mp4`));
|
||||
|
||||
stream.on('response', (res) => {
|
||||
let totalSize = res.headers['content-length'];
|
||||
let dataRead = 0;
|
||||
let lastPercent = 0;
|
||||
res.on('data', (data) => {
|
||||
dataRead += data.length;
|
||||
let percent = Math.floor((dataRead / totalSize) * 100) + '%';
|
||||
if (percent != lastPercent) {
|
||||
socket.emit('download-progress', {video: key, percent: percent, title: value.title});
|
||||
}
|
||||
lastPercent = percent;
|
||||
});
|
||||
res.on('end', () => {
|
||||
logger.log(`Socket id '${socket.id}' finished downloading ${value.title}`)
|
||||
socket.emit('download-done', {video: key, title: value.title});
|
||||
});
|
||||
});
|
||||
|
||||
logger.log(`Socket id '${socket.id}' is downloading ${value.title}`);
|
||||
} catch (e) {
|
||||
logger.log(`Socket id '${socket.id}' failed to download ${value.title}`);
|
||||
socket.emit('download-done', {video: key, title: value.title});
|
||||
}
|
||||
numOfDownloads++;
|
||||
}
|
||||
}
|
||||
socket.emit('download-count', {num: numOfDownloads});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user