Violet/Univerter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Still not done

Browse source
This commit is contained in:
Violet 2023-05-10 17:36:26 +00:00
parent 184f58a147
commit 78d50b2ca7
3 changed files with 66 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.js
View file

@ -9,21 +9,17 @@ const app = express()
app.get("/download", (req, res) => { app.get("/download", (req, res) => {
const filename = req.query.filename const filename = req.query.filename
const url = req.query.url const url = req.query.url
const format= req.query.format const format = req.query.format
const quality = req.query.quality const quality = req.query.quality
if ((filename === 'string' && url === 'string' && format === 'string' && quality === 'string')) {
res.header('Content-Disposition', `attachment; filename="${filename}.${format}"`); res.header('Content-Disposition', `attachment; filename="${filename}.${format}"`);
ytdl(url, {'format': format, 'quality': quality}).pipe(res); ytdl(url, { 'format': format, 'quality': quality }).pipe(res);
} else {
res.send('Please input proper values in all fields.')
}
}); });
app.use(express.static(path.join(__dirname, 'static'))) app.use(express.static(path.join(__dirname, 'static')))
app.listen(PORT, function() { app.listen(PORT, function () {
console.log("Hosted on port " + PORT) console.log("Hosted on port " + PORT)
}) })

41
static/index.html
View file

@ -6,23 +6,24 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script> integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<title>Youtube Downloader</title> <title>Youtube Downloader</title>
</head> </head>
<body> <body>
<h1>Youtube Downloader <h1>Youtube Downloader <p>v1.0</p>
<hr> <hr>
</h1> </h1>
<form action="download" method="get" target="_blank"> <form action="download" method="get" target="_blank">
<p style="margin-bottom: 1px;">Video URL:</p> <p style="margin-bottom: 1px;">Video URL:</p>
<div class="grid-container"> <input required id="url" placeholder="Enter url" name="url">
<input required id="url" placeholder="Enter url" name="url"><br>
<!-- <label for="quality">Quality:</label> -->
<p>Quality:</p> <p>Quality:</p>
<select required id="quality" name="quality"> <select required id="quality" name="quality">
<option value="lowestaudio">Lowest (Audio Only)</option> <option value="lowestaudio">Lowest (Audio Only)</option>
@ -31,21 +32,25 @@
<option value="lowestvideo">Lowest (Video Only)</option> <option value="lowestvideo">Lowest (Video Only)</option>
<option value="highest">Highest</option> <option value="highest">Highest</option>
<option value="lowest">Lowest</option> <option value="lowest">Lowest</option>
</select><br> </select>
<!-- <label for="filename">Save As:</label> --> <p>Filename:</p>
<input id="filename" placeholder="Enter filename" name="filename"><br> <input id="filename" placeholder="Enter filename" name="filename"><br>
<!-- <label for="format">Format:</label> --> <p>Format:</p>
<select required id="format" name="format"> <select required id="format" name="format">
<option value="mp4">mp4</option> <option value="mp4">.mp4</option>
<option value="wmv">wmv</option> <option value="wmv">.wmv</option>
<option value="flv">flv</option> <option value="flv">.flv</option>
<option value="avi">avi</option> <option value="avi">.avi</option>
<option value="mp3">mp3</option> <option value="mp3">.mp3</option>
<option value="mpg">mpg</option> <option value="mpg">.mpg</option>
</select><br> </select>
<input type="submit" placeholder="test"> <input type="submit" placeholder="test">
</div>
</form> </form>
<hr>
<p>Thank you, <a>please consider donating</a> so that I may pay for hosting costs! (Or, you may also help me out by
hosting it <em>yourself</em> instead of using this site! (Check github for more details)</p><br>
<p>Check out the <a id="github" href="https://github.com/Violets-puragtory/YoutubeConverter">Github page</a> to
learn how to host it yourself, how it works, report bugs, and more.</p>
</body> </body>
</html> </html>

37
static/style.css
View file

@ -1,5 +1,6 @@
:root { :root {
--text-color: rgb(230, 210, 255); --primary-color: rgb(230, 210, 255);
--text-color: white;
--background-color: rgb(50, 35, 75); --background-color: rgb(50, 35, 75);
--second-bg-color: black; --second-bg-color: black;
} }
@ -10,7 +11,14 @@
font-family: Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
} }
p, select, input { h1,
h1>* {
color: var(--primary-color)
}
p,
select,
input {
font-size: 1.4rem; font-size: 1.4rem;
} }
@ -18,7 +26,8 @@ p {
margin: 5px; margin: 5px;
} }
body, html { body,
html {
background-color: var(--background-color); background-color: var(--background-color);
} }
@ -27,21 +36,27 @@ body, html {
margin: auto; margin: auto;
} }
/* .grid-container > *:not(select, input) { select,
float: left; input {
} */
select, input{
display: inline-grid; display: inline-grid;
background-color: var(--second-bg-color); background-color: var(--second-bg-color);
color: var(--text-color); color: var(--primary-color);
margin: 5px auto; margin: 5px auto;
border: 2px var(--text-color) solid; border: 2px var(--primary-color) solid;
border-radius: 5px; border-radius: 5px;
/* width: 70%; */
padding: 5px; padding: 5px;
} }
.col-sm-3 {
outline: white solid 2px
}
select:hover,
input:hover {
color: var(--text-color);
border-color: var(--text-color)
}
label { label {
font-size: 1.5rem; font-size: 1.5rem;
} }