Typescript remake
Feuerhamster
4 years ago
parent
94ba9a5a65
commit
35bcbe9568
@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
.idea
|
||||
dist
|
||||
@ -0,0 +1,34 @@
|
||||
# Build stage
|
||||
FROM node:lts-alpine AS builder
|
||||
|
||||
RUN mkdir /app
|
||||
WORKDIR /app
|
||||
|
||||
# copy configs folder
|
||||
COPY package*.json ./
|
||||
COPY tsconfig.json ./
|
||||
# copy source code to /app/src folder
|
||||
COPY src src
|
||||
|
||||
# install dependencies (https://docs.npmjs.com/cli/v7/commands/npm-ci)
|
||||
RUN npm ci
|
||||
|
||||
# build
|
||||
RUN npm run build
|
||||
|
||||
# Production stage
|
||||
FROM node:lts-alpine
|
||||
ENV NODE_ENV=production
|
||||
|
||||
RUN mkdir /app
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
COPY --from=builder /app/dist dist
|
||||
|
||||
RUN mkdir targets
|
||||
|
||||
# install production dependencies
|
||||
RUN npm ci
|
||||
|
||||
CMD ["npm", "start"]
|
||||
@ -1 +1,29 @@
|
||||
# web-youtube-downloader
|
||||
# Web YouTube Downloader
|
||||
A simple express app which allows you to view all source urls of a YouTube video to directly download it from Google's servers.
|
||||
|
||||
## 📦 Dependencies
|
||||
- [Express](https://expressjs.com/)
|
||||
- [Typescript](https://www.typescriptlang.org/)
|
||||
- [Pug](https://pugjs.org/)
|
||||
- [ytdl-core](https://www.npmjs.com/package/ytdl-core)
|
||||
|
||||
## 💽 Installation
|
||||
### Docker
|
||||
```shell
|
||||
git clone https://github.com/Feuerhamster/web-youtube-downloader.git
|
||||
cd web-youtube-downloader
|
||||
docker build -t Feuerhamster/web-youtube-downloader .
|
||||
docker run Feuerhamster/web-youtube-downloader
|
||||
-e PORT=3000
|
||||
```
|
||||
|
||||
### Manually
|
||||
*Requires NodeJS 14 or higher*
|
||||
|
||||
```shell
|
||||
git clone https://github.com/Feuerhamster/web-youtube-downloader.git
|
||||
cd web-youtube-downloader
|
||||
npm install
|
||||
npm run build
|
||||
npm run start
|
||||
```
|
||||
@ -1,55 +0,0 @@
|
||||
<?php
|
||||
header("Content-Type: application/json");
|
||||
header("Access-Control-Allow-Origin: *");
|
||||
|
||||
if(isset($_GET["vid"])){
|
||||
|
||||
|
||||
$ytpage = file_get_contents("https://www.youtube.com/watch?v=".$_GET["vid"]);
|
||||
|
||||
unset($_COOKIE);
|
||||
|
||||
$pattern = "/ytplayer.config\ \=\ ({.+}});/";
|
||||
|
||||
preg_match_all($pattern, $ytpage, $matches);
|
||||
$json = $matches[1][0];
|
||||
|
||||
//parse informations
|
||||
|
||||
$json = json_decode($json);
|
||||
|
||||
$ytdata = $json->args->player_response;
|
||||
|
||||
$ytdata = json_decode($ytdata);
|
||||
|
||||
if($ytdata->videoDetails->useCipher == false){
|
||||
|
||||
$data = new stdClass();
|
||||
|
||||
$data->title = $ytdata->videoDetails->title;
|
||||
$data->channel = $ytdata->videoDetails->author;
|
||||
$data->videoId = $ytdata->videoDetails->videoId;
|
||||
$data->length = $ytdata->videoDetails->lengthSeconds;
|
||||
$data->views = $ytdata->videoDetails->viewCount;
|
||||
|
||||
$data->sources = $ytdata->streamingData;
|
||||
$data->thumbnails = $ytdata->videoDetails->thumbnail->thumbnails;
|
||||
|
||||
$send = json_encode($data);
|
||||
|
||||
echo $send;
|
||||
|
||||
}else{
|
||||
$data = new stdClass();
|
||||
$data->error = "cipher_video";
|
||||
$send = json_encode($data);
|
||||
echo $send;
|
||||
}
|
||||
|
||||
}else{
|
||||
$data = new stdClass();
|
||||
$data->error = "missing_video_id";
|
||||
$send = json_encode($data);
|
||||
echo $send;
|
||||
}
|
||||
?>
|
||||
@ -1,59 +0,0 @@
|
||||
<h1>API for Developers</h1>
|
||||
<p>You can get the data of a video very easily by using our API.</p>
|
||||
|
||||
<h2>Web Request structure</h2>
|
||||
<span class="label"><span class="label-name" style="width: 70px;display: inline-block;">Method</span><span class="label-value label-green">GET</span></span>
|
||||
<span class="label"><span class="label-name" style="width: 70px;display: inline-block;">Url</span><span class="label-value label-blue">https://feuerhamster.code-elite.net/web-youtube-downloader/api.php</span></span>
|
||||
<span class="label"><span class="label-name" style="width: 70px;display: inline-block;">Params</span><span class="label-value label-purble">vid={YOUTUBE VIDEO ID}</span></span>
|
||||
<span class="label"><span class="label-name" style="width: 70px;display: inline-block;">Return</span><span class="label-value label-orange">JSON</span></span>
|
||||
|
||||
<h2 style="margin-top: 40px;">Return values</h2>
|
||||
<p>There are mulitple return values for that request. The return values are also in JSON format</p>
|
||||
<div class="pre">Errors:
|
||||
- error: missing_video_id //returns if you have not send the video Id in the query string
|
||||
- error: cipher_video" //returns if the video is protected and can not be read by the api
|
||||
</div>
|
||||
|
||||
<div class="pre">Video Data JSON structure:
|
||||
|
||||
- title
|
||||
- channel
|
||||
- length
|
||||
- views
|
||||
|
||||
- sources:
|
||||
|
||||
- expiresInSeconds
|
||||
|
||||
- formats:
|
||||
ARRAY()
|
||||
|
||||
- adaptiveFormats:
|
||||
ARRAY()
|
||||
|
||||
- thumbnails:
|
||||
ARRAY()
|
||||
</div>
|
||||
|
||||
|
||||
<h2 style="margin-top: 40px;">Examples</h2>
|
||||
<p>An example url for an api call</p>
|
||||
<div class="pre">https://feuerhamster.code-elite.net/web-youtube-downloader/api.php?vid=nD6_aQIJgW0
|
||||
</div class="pre">
|
||||
|
||||
<p>An example with Ajax in JavaScript</p>
|
||||
<div class="pre">var videoId = "nD6_aQIJgW0";
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: 'https://feuerhamster.code-elite.net/web-youtube-downloader/api.php',
|
||||
data: 'vid=' + videoId,
|
||||
success: function(res){
|
||||
|
||||
if(!res.error){
|
||||
console.log(res);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
</div>
|
||||
@ -1,31 +0,0 @@
|
||||
<div class="box box-mobile">
|
||||
|
||||
<img id="video-thumbnail" style="max-height: 160px;">
|
||||
<div>
|
||||
<h1 id="video-title" style="margin: 0px 0px 0px 20px;">...</h1>
|
||||
<h2 id="video-time" style="margin: 0px 0px 0px 20px; color: #9e4b8b;">...</h2>
|
||||
<h2 id="video-views" style="margin: 0px 0px 0px 20px; color: #9e4b8b;">...</h2>
|
||||
<h2 id="video-channel" style="margin: 0px 0px 0px 20px; color: rgb(120,120,120)">...</h2>
|
||||
<h3 id="video-links" style="margin: 0px 0px 0px 20px;">...</h3>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Main Sources</h1>
|
||||
|
||||
<div id="video-main-source">
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Adaptive Sources</h1>
|
||||
|
||||
<div id="video-sources">
|
||||
|
||||
</div>
|
||||
|
||||
<h1>Thumbnails</h1>
|
||||
|
||||
<div id="video-thumbnails">
|
||||
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
@ -1,9 +0,0 @@
|
||||
<div id="home-page">
|
||||
|
||||
<h1 style="font-size: 42px">Download YouTube videos from source!</h1>
|
||||
|
||||
<h2 style="margin-bottom: 50px;">All Video and Audio Tracks + Thumbnails</h2>
|
||||
|
||||
<input type="text" id="home-video-url" placeholder="Paste your Video URL" onchange="loadVideoURL(this.value);" />
|
||||
|
||||
</div>
|
||||
@ -1,107 +0,0 @@
|
||||
//get query string
|
||||
var urlQs = document.URL.split('?');
|
||||
|
||||
//check if any querystring is set
|
||||
if(urlQs[1]){
|
||||
|
||||
//parse querytring args
|
||||
var qsArgs = urlQs[1].split('=');
|
||||
|
||||
if(qsArgs[0] == "vid"){
|
||||
|
||||
$('#content').load('./downloader.html');
|
||||
getVideoData(qsArgs[1]);
|
||||
|
||||
}else if(qsArgs[0] == "page"){
|
||||
if(qsArgs[1] == "infos"){
|
||||
$('#content').load('./infos.html');
|
||||
}else if(qsArgs[1] == "documentation"){
|
||||
$('#content').load('./docs.php');
|
||||
}else{
|
||||
$('#content').html('<center><h1>ERROR 404: Page not found!</h1></center>');
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
$('#content').load('./home.html');
|
||||
}
|
||||
|
||||
|
||||
function parseMimeType(mimeType){
|
||||
var regex = /(\w+)\/(\w+)\;\ codecs\=\"(.+)\"/;
|
||||
var result = regex.exec(mimeType);
|
||||
return { type: result[1], format: result[2], codec: result[3] };
|
||||
}
|
||||
|
||||
function secToMin(time) {
|
||||
var hr = ~~(time / 3600);
|
||||
var min = ~~((time % 3600) / 60);
|
||||
var sec = time % 60;
|
||||
var sec_min = "";
|
||||
if (hr > 0) {
|
||||
sec_min += "" + hrs + ":" + (min < 10 ? "0" : "");
|
||||
}
|
||||
sec_min += "" + min + ":" + (sec < 10 ? "0" : "");
|
||||
sec_min += "" + sec;
|
||||
return sec_min+ " minutes";
|
||||
}
|
||||
|
||||
function getVideoData(videoId){
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "./api.php",
|
||||
data: "vid=" + videoId,
|
||||
success: function(res){
|
||||
|
||||
console.log(res);
|
||||
|
||||
if(!res.error){
|
||||
|
||||
$('#video-title').html(res.title);
|
||||
$('#video-channel').html(res.channel);
|
||||
$('#video-views').html(res.views.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') + " views");
|
||||
$('#video-time').html(secToMin(res.length));
|
||||
$('#video-thumbnail').attr("src", res.thumbnails[3].url);
|
||||
|
||||
$('#video-links').html('<a href="https://www.youtube.com/watch?v=' + res.videoId + '" style="color: #2980b9" target="_blank">https://www.youtube.com/watch?v=' + res.videoId + '<a>');
|
||||
|
||||
res.sources.formats.forEach(element => {
|
||||
|
||||
var mainMime = parseMimeType(element.mimeType);
|
||||
$('#video-main-source').append('<div class="box box-mobile"> <video src="' + element.url + '" controls height="190px"></video> <div style="padding: 10px 20px 10px 20px"> <h2 style="margin-top: 0px; margin-bottom: 10px; font-weight: 100"><b style="font-weight: 700">Quality:</b> ' +element.qualityLabel+ ' </h2> <h2 style="margin-top: 0px; margin-bottom: 10px; font-weight: 100"><b style="font-weight: 700">Format:</b> ' + mainMime.format + ' </h2> <h2 style="margin-top: 0px; margin-bottom: 10px; font-weight: 100"><b style="font-weight: 700">Codec:</b> ' + mainMime.codec + ' </h2> <a href="' + element.url + '" target="_blank" class="download-link-large"><i class="fas fa-external-link-alt"></i> Download</a> </div></div>');
|
||||
|
||||
});
|
||||
|
||||
res.sources.adaptiveFormats.forEach(element => {
|
||||
var mime = parseMimeType(element.mimeType);
|
||||
if(mime.type == "video"){
|
||||
$('#video-sources').append('<div class="box" style="margin: 10px 0px 10px 0px;"><span class="label"><span class="label-name">Type</span><span class="label-value label-red">' + mime.type + '</span></span><span class="label"><span class="label-name">Quality</span><span class="label-value label-green">' + element.qualityLabel + '</span></span><span class="label"><span class="label-name">Format</span><span class="label-value label-orange">' + mime.format + '</span></span><span class="label"><span class="label-name">Codec</span><span class="label-value label-purble">' + mime.codec + '</span></span> <div class="spacer"></div> <a href="' + element.url + '" target="_blank" style="color: rgb(50,50,50); font-size: 26px;"><i class="fas fa-external-link-alt"></i></a> </div>');
|
||||
}else{
|
||||
$('#video-sources').append('<div class="box" style="margin: 10px 0px 10px 0px;"><span class="label"><span class="label-name">Type</span><span class="label-value label-blue">' + mime.type + '</span></span><span class="label"><span class="label-name">Bitrate</span><span class="label-value label-green">' + element.bitrate + '</span></span><span class="label"><span class="label-name">Format</span><span class="label-value label-orange">' + mime.format + '</span></span><span class="label"><span class="label-name">Codec</span><span class="label-value label-purble">' + mime.codec + '</span></span> <div class="spacer"></div> <a href="' + element.url + '" target="_blank" style="color: rgb(50,50,50); font-size: 26px;"><i class="fas fa-external-link-alt"></i></a> </div>');
|
||||
}
|
||||
});
|
||||
|
||||
res.thumbnails.forEach(element => {
|
||||
$('#video-thumbnails').append('<div class="box box-mobile" style="margin: 10px 0px 10px 0px; flex-direction: row"><img src="' + element.url + '" style="width: 200px;" /><div style="padding: 10px 20px 10px 20px"><span class="label" style="margin: 0px;"><span class="label-name">Size</span><span class="label-value label-green">' + element.width + 'px*' + element.height + 'px</span></span><br/><a href="' + element.url + '" target="_blank" class="download-link-large" style="font-size: 20px;" download="' + element.url + '"><i class="fas fa-external-link-alt"></i> Download</a></div></div>')
|
||||
});
|
||||
|
||||
}else{
|
||||
$('#content').html('<center><h1>An error has occurred!</h1><h2>Please try another video or try again later</h2></center>');
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function loadVideoURL(source){
|
||||
|
||||
//parse soruce and get id
|
||||
var ytidRegex = /(youtu\.be\/|youtube\.com\/(watch\?(.*&)?v=|(embed|v)\/))([^\?&"'>]+)/;
|
||||
var videoId = ytidRegex.exec(source)[5];
|
||||
|
||||
window.location.href = window.location.protocol + "//" + window.location.hostname + window.location.pathname + "?vid=" + videoId;
|
||||
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<title>Web-YTDL</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=400, initial-scale=0.8">
|
||||
<meta name="description" content="Download YouTube videos from source!">
|
||||
|
||||
<link rel="stylesheet" href="style.css?v=2" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div id="head-bar">
|
||||
|
||||
<h1 onclick="window.location.href='./';" style="cursor: pointer;"> <i class="fas fa-file-video"></i> <span id="head-text">Web-Youtube-Downloader</span></h1>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<input type="text" id="headbar-video-url" placeholder="Paste your video URL" onchange="loadVideoURL(this.value); this.value = '';" />
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="?page=documentation">Developer API</a> <a href="https://github.com/Feuerhamster/web-youtube-downloader" target="_blank">GitHub</a> <a href="?page=infos">Disclaimer/Informations</a> <a href="https://hamsterlabs.de" target="_blank">Visit HamsterLabs</a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="index.js"></script>
|
||||
@ -1,26 +0,0 @@
|
||||
<h1>Disclaimer</h1>
|
||||
<p>This Website is not a part of youtube or google</p>
|
||||
|
||||
<h1>Infos</h1>
|
||||
<p>
|
||||
<b>Contact the owner:</b> <br/><br/>
|
||||
<b>Email: </b> myhamstermail@gmail.com<br/>
|
||||
<b>GitHub: </b> github.com/Feuerhamster<br/>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<b>Where do we have the data of the youtube videos?</b><br/><br/>
|
||||
We use the official data from the youtube.com website. All URLs and metadata come from the respective page of the corresponding Youtube video.<br/><br/>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<b>Is the downloading of youtube videos lawful?</b><br/><br/>
|
||||
Everyone is allowed to download public Youtube videos for private use.<br/><br/>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<b>Does this website violate laws and regulations such as once "convert2mp3"?</b><br/><br/>
|
||||
No. On "convert2mp3" the videos were converted on the servers of the provider and made available for download.<br/>
|
||||
On our website, you download the videos directly from the sources on the google server.
|
||||
|
||||
</p>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "web-youtube-downloader",
|
||||
"version": "2.0.0",
|
||||
"description": "Download YouTube videos from source",
|
||||
"main": "dist/main.js",
|
||||
"scripts": {
|
||||
"start": "node dist/main.js",
|
||||
"build": "tsc"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Feuerhamster/web-youtube-downloader.git"
|
||||
},
|
||||
"author": "Feuerhamster",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Feuerhamster/web-youtube-downloader/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Feuerhamster/web-youtube-downloader#readme",
|
||||
"dependencies": {
|
||||
"express": "^4.17.1",
|
||||
"node-cache": "^5.1.2",
|
||||
"pug": "^3.0.2",
|
||||
"typescript": "^4.2.3",
|
||||
"ytdl-core": "^4.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.11"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,200 @@
|
||||
/*
|
||||
* Main styles
|
||||
*/
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #222;
|
||||
background-color: #fafafa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* titlebox
|
||||
*/
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title-box > img {
|
||||
max-height: 100px;
|
||||
border-radius: 6px;
|
||||
margin-right: 30px;
|
||||
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.title-box h1 {
|
||||
font-size: 32px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.title-box a {
|
||||
margin: 5px;
|
||||
font-size: 18px;
|
||||
color: #2481e6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title-box a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
* responsive element
|
||||
*/
|
||||
.responsive {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.responsive > h1 {
|
||||
font-size: 32px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.responsive > h2 {
|
||||
font-size: 24px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.responsive input {
|
||||
border: 2px solid #ddd;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
outline: 0;
|
||||
margin-right: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #eb6161;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c32e2e;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Table
|
||||
*/
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-bottom: 2px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr:last-child > td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
td a {
|
||||
color: #3488ee;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
td a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
td img {
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Format label
|
||||
*/
|
||||
.format {
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.format-0 {
|
||||
background-color: #43c043;
|
||||
}
|
||||
|
||||
.format-1 {
|
||||
background-color: #3488ee;
|
||||
}
|
||||
|
||||
.format-2 {
|
||||
background-color: #EE6565;
|
||||
}
|
||||
|
||||
td.mp4 {
|
||||
color: #f38a00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td.webm {
|
||||
color: #3488ee;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Iframe
|
||||
*/
|
||||
|
||||
iframe {
|
||||
height: 355px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
.responsive {
|
||||
width: 100%;
|
||||
}
|
||||
table.formats th:nth-child(5), table.formats td:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import express, { Application } from "express";
|
||||
import defaultRoute from "./routes/default";
|
||||
|
||||
const app: Application = express();
|
||||
const port: number = parseInt(process.env.PORT) || 4131;
|
||||
|
||||
app.set("views", "views");
|
||||
app.set("view engine", "pug");
|
||||
|
||||
app.use(express.static("public"));
|
||||
app.use(defaultRoute);
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log("App started on port: " + port);
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import {Request, Response, Router} from "express";
|
||||
import {VideoData} from "../types/youtube";
|
||||
import {YouTube} from "../services/youtube";
|
||||
|
||||
const router: Router = Router();
|
||||
|
||||
router.get("/", async (req: Request, res: Response) => {
|
||||
|
||||
// No video searched -> startpage
|
||||
if(!req.query.url) {
|
||||
res.render("index");
|
||||
return;
|
||||
}
|
||||
|
||||
let video: VideoData = await YouTube.getVideoInfo(req.query.url);
|
||||
|
||||
// Cant get video -> error page
|
||||
if(!video) {
|
||||
res.render("error");
|
||||
return;
|
||||
}
|
||||
|
||||
res.render("video", video);
|
||||
|
||||
});
|
||||
|
||||
router.get("/about", (req, res) => res.render("about"));
|
||||
|
||||
export default router;
|
||||
@ -0,0 +1,56 @@
|
||||
import ytdl, {videoInfo} from "ytdl-core";
|
||||
import {FormatType, VideoData} from "../types/youtube";
|
||||
import NodeCache from "node-cache";
|
||||
|
||||
export class YouTube {
|
||||
|
||||
private static cache = new NodeCache({ stdTTL: 3600 });
|
||||
|
||||
static async getVideoInfo(url): Promise<VideoData> {
|
||||
|
||||
if(this.cache.has(url)) {
|
||||
return this.cache.get(url);
|
||||
}
|
||||
|
||||
let video: videoInfo = null;
|
||||
let videoData: VideoData = <VideoData>{};
|
||||
|
||||
// Get video info
|
||||
try {
|
||||
video = await ytdl.getInfo(url.toString());
|
||||
} catch(e) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// format info data
|
||||
videoData.id = video.videoDetails.videoId;
|
||||
videoData.url = video.videoDetails.video_url;
|
||||
videoData.title = video.videoDetails.title;
|
||||
videoData.author = video.videoDetails.author.name;
|
||||
|
||||
videoData.thumbnails = video.videoDetails.thumbnails.map((t) => ({
|
||||
url: t.url,
|
||||
size: `${t.width}x${t.height}`
|
||||
}));
|
||||
|
||||
videoData.formats = video.formats.map((f) => ({
|
||||
type: f.hasVideo && f.hasAudio ? FormatType.main : f.hasVideo ? FormatType.video : FormatType.audio,
|
||||
quality: f.qualityLabel,
|
||||
container: f.container,
|
||||
codecs: f.codecs,
|
||||
url: f.url,
|
||||
bitrate: f.bitrate.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
|
||||
}));
|
||||
|
||||
videoData.formats = videoData.formats.sort((a, b) => a.type < b.type ? -1 : a.type > b.type ? 1 : 0);
|
||||
|
||||
// Save to cache
|
||||
if(!this.cache.has(url)) {
|
||||
this.cache.set(url, videoData);
|
||||
}
|
||||
|
||||
return videoData;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
export interface VideoData {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
url: string;
|
||||
thumbnails: Thumbnail[];
|
||||
formats: Format[]
|
||||
}
|
||||
|
||||
export interface Thumbnail {
|
||||
url: string;
|
||||
size: string
|
||||
}
|
||||
|
||||
export interface Format {
|
||||
type: FormatType
|
||||
quality: string;
|
||||
container: string;
|
||||
codecs: string;
|
||||
url: string;
|
||||
bitrate: string
|
||||
}
|
||||
|
||||
export enum FormatType {
|
||||
main, audio, video
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
body, html{
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: 'Muli', sans-serif;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p{
|
||||
color: rgb(50,50,50);
|
||||
}
|
||||
|
||||
@media (max-width:901px){
|
||||
.box-mobile{
|
||||
flex-direction: column!important;
|
||||
align-items: center;
|
||||
}
|
||||
.box{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#head-text{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pre{
|
||||
background-color: rgba(240,240,240);
|
||||
border: 2px solid rgba(230,230,230);
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
color: rgb(50,50,50);
|
||||
overflow-x: auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#head-bar{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: #d63030;
|
||||
padding: 5px;
|
||||
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#head-bar > h1{
|
||||
color: white;
|
||||
margin: 0px;
|
||||
font-family: 'Muli', sans-serif;
|
||||
font-size: 28px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.spacer{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#head-bar > input{
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
margin: 2px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
font-family: 'Muli', sans-serif;
|
||||
min-width: 300px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#head-bar > input:focus{
|
||||
box-shadow: 0px 0px 5px 1px rgba(70,70,70,0.2);
|
||||
}
|
||||
|
||||
#content{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100% - 93px);
|
||||
flex-direction: column;
|
||||
background-color: rgb(250,250,250);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#home-page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#home-page > input{
|
||||
background-color: #f04f4f;
|
||||
border: 0;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
font-size: 18px;
|
||||
font-family: 'Muli', sans-serif;
|
||||
min-width: 400px;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
}
|
||||
#home-page > input:focus{
|
||||
box-shadow: 0px 0px 2px 1px rgba(180,180,180,1);
|
||||
}
|
||||
|
||||
footer{
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: rgb(250,250,250);
|
||||
}
|
||||
footer > a{
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
footer > a:hover{
|
||||
color: rgb(70, 70, 70);
|
||||
}
|
||||
|
||||
.box{
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
margin: 10px 0px 10px 0px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.label{
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
.label > .label-name{
|
||||
background-color: rgb(120,120,120);
|
||||
color: white;
|
||||
padding: 2px 5px 2px 5px;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.label-value{
|
||||
color: white;
|
||||
padding: 2px 5px 2px 5px;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
}
|
||||
.label > .label-blue{
|
||||
background-color: #3498db;
|
||||
}
|
||||
.label > .label-red{
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
.label > .label-green{
|
||||
background-color: #27ae60;
|
||||
}
|
||||
.label > .label-orange{
|
||||
background-color: #e49517;
|
||||
}
|
||||
.label > .label-purble{
|
||||
background-color: #8a52a0;
|
||||
}
|
||||
|
||||
.download-link-large{
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
text-decoration: none;
|
||||
background-color: #0984e3;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.2);
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.download-link-large:hover{
|
||||
background-color: #0569b6;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"outDir": "dist"
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
title Web YouTube Downloader
|
||||
meta(name="description" content="Download YouTube videos from source!")
|
||||
meta(charset="utf-8")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1.0")
|
||||
link(rel="stylesheet" href="style.css")
|
||||
body
|
||||
div.responsive
|
||||
include partials/titlebox
|
||||
block content
|
||||
@ -0,0 +1,17 @@
|
||||
extends _layout
|
||||
|
||||
block content
|
||||
h1 About
|
||||
h2 Disclaimer
|
||||
p This Website is not a part of YouTube or Google.
|
||||
|
||||
h2 Where do we have the data of the youtube videos?
|
||||
p We use the official data from the youtube.com website. All URLs and metadata come from the respective page of the corresponding Youtube video.
|
||||
|
||||
h2 Is the downloading of youtube videos lawful?
|
||||
p Everyone is allowed to download public Youtube videos for private use.
|
||||
|
||||
h2 Does this website violate laws and regulations such as once "convert2mp3"?
|
||||
p
|
||||
| No. On "convert2mp3" the videos were converted on the servers of the provider and made available for download.
|
||||
| On our website, you download the videos directly from the sources on the google server.
|
||||
@ -0,0 +1,4 @@
|
||||
extends _layout
|
||||
|
||||
block content
|
||||
h1 Cannot fetch video
|
||||
@ -0,0 +1,10 @@
|
||||
extends _layout
|
||||
|
||||
block content
|
||||
div.center
|
||||
h1 Download YouTube videos from source!
|
||||
h2 All Video and Audio Tracks + Thumbnails
|
||||
|
||||
form
|
||||
input(type="url" placeholder="Paste a YouTube video url" name="url")
|
||||
button Fetch
|
||||
@ -0,0 +1,8 @@
|
||||
div.title-box
|
||||
img(src="logo.png")
|
||||
div
|
||||
h1 Web YouTube Downloader
|
||||
nav
|
||||
a(href="/") Startpage
|
||||
a(href="/about") About
|
||||
a(href="https://github.com/Feuerhamster/web-youtube-downloader/" target="_blank" rel="noopener") GitHub
|
||||
@ -0,0 +1,48 @@
|
||||
extends _layout
|
||||
|
||||
block content
|
||||
h2 Video
|
||||
iframe(src="https://www.youtube.com/embed/" + id frameborder="0" allow="autoplay; encrypted-media")
|
||||
|
||||
h2 Formats
|
||||
|
||||
table.formats
|
||||
tr
|
||||
th Format
|
||||
th Quality
|
||||
th Bitrate
|
||||
th Container
|
||||
th Codecs
|
||||
th URL
|
||||
each format in formats
|
||||
tr
|
||||
td
|
||||
case format.type
|
||||
when 0
|
||||
span.format.format-0 Video
|
||||
when 1
|
||||
span.format.format-1 Audio
|
||||
when 2
|
||||
span.format.format-2 Adaptive
|
||||
|
||||
td= format.quality
|
||||
td= format.bitrate
|
||||
td(class=format.container)= format.container
|
||||
td= format.codecs
|
||||
td
|
||||
a(href=format.url target="_blank" rel="noreferrer") Download
|
||||
|
||||
h2 Thumbnails
|
||||
table
|
||||
tr
|
||||
th Image
|
||||
th Size
|
||||
th Download
|
||||
each thumbnail in thumbnails
|
||||
tr
|
||||
td
|
||||
img(src=thumbnail.url)
|
||||
|
||||
td= thumbnail.size
|
||||
td
|
||||
a(href=thumbnail.url target="_blank" rel="noreferrer") Download
|
||||
Loading…
Reference in New Issue