Working version 1.1 - Cosmetic updates to come and client downloads

This commit is contained in:
Ben
2018-12-24 23:41:14 +00:00
parent 39958ba4ae
commit 5c236676a5
7 changed files with 87 additions and 13 deletions

View File

@@ -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>

View File

@@ -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();
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@@ -30,7 +30,12 @@ textarea {
height: 100px;
}
#VideoPreview {
.VideoContainer {
padding: 30px, 0px, 30px, 0px;
}
#VideoBox {
padding-top: 10px;
font-weight: lighter;
}

View File

@@ -1,7 +1,7 @@
const server = require('./server');
let config = {
serverPort: 80,
serverPort: 8080,
downloadLocation: './'
};

View File

@@ -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});
});
});
}

View File

@@ -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});
}