summaryrefslogtreecommitdiffhomepage
path: root/html
diff options
context:
space:
mode:
authorRoland Reichwein <mail@reichwein.it>2022-11-05 13:49:53 +0100
committerRoland Reichwein <mail@reichwein.it>2022-11-05 13:49:53 +0100
commit4aeab7931182cb1c35bd5c52b58d71b30c32674d (patch)
treee9635c5b2c0827f16dc2021a6193139ef536793b /html
Initial files, WIP
Diffstat (limited to 'html')
-rw-r--r--html/index.html60
-rw-r--r--html/whiteboard.css69
-rw-r--r--html/whiteboard.js116
3 files changed, 245 insertions, 0 deletions
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..f97b295
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="keywords" content="Reichwein, DownTube, YouTube, Download MP3">
+ <title>DownTube</title>
+ <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
+ <link rel="stylesheet" type="text/css" href="downtube.css"/>
+ <script src="downtube.js"></script>
+ </head>
+ <body onload="init();">
+ <div class="page">
+ <h1><img src="Downtube256.png"></h1>
+
+ <p>
+ Download internet videos as MP3 (audio) or MP4 (video).
+ </p>
+
+ <p>
+ Video URL:<br/>
+ <input size="40" type="text" id="url" name="url"><br><br>
+ </p>
+
+ <p>
+ Transform to format:<br/>
+ <input type="radio" id="mp3" name="format" value="mp3" checked>
+ <label for="mp3">MP3 (Audio)</label><br>
+ <input type="radio" id="mp4" name="format" value="mp4">
+ <label for="mp4">MP4 (Video)</label><br>
+ </p>
+
+ <br/>
+ <div class="status" id="status">&nbsp;</div>
+ <p>
+ <button class="button" onclick="on_start();">Start</button>
+ </p>
+
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <br/>
+ <p>
+ Note: Audio download is currently limited to 30MB, Video download is limited to 300MB.
+ </p>
+ <br/>
+ <br/>
+ <h2>Contact</h2>
+ Roland Reichwein<br/>
+ Hauptstr. 101a<br/>
+ 82008 Unterhaching<br/>
+ <a href="mailto:mail@reichwein.it">mail@reichwein.it</a><br/>
+ <a href="https://www.reichwein.it">https://www.reichwein.it</a><br/>
+ </div>
+
+ <a id="download-a" hidden></a>
+ </body>
+</html>
diff --git a/html/whiteboard.css b/html/whiteboard.css
new file mode 100644
index 0000000..2f68794
--- /dev/null
+++ b/html/whiteboard.css
@@ -0,0 +1,69 @@
+body {
+ font-family: "sans-serif";
+}
+
+figcaption {
+ text-align: center;
+ font-size: 8px;
+ color: #808080;
+}
+
+figure {
+ display: inline-block;
+}
+
+p {
+ margin: 30px 0px 30px 0px;
+}
+
+div.status {
+ color: #FF0000;
+}
+
+.mobile {
+ width: 300px;
+ border-width: 80px 15px 80px 15px;
+ border-style: solid;
+ border-radius: 30px;
+ border-color: #000000;
+}
+
+.logo {
+ display: block;
+ margin: 0 auto;
+}
+
+.screenshot {
+ width: 400px;
+ border: 2px solid;
+ border-color: #8888AA;
+}
+
+img.banner {
+ vertical-align: -5px;
+}
+
+.button {
+ color:#FFFFFF;
+ background-color:#50B050;
+ text-decoration: none;
+ padding: 15px 20px;
+ font-size: 16px;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+}
+
+@media only screen and (min-width: 1px) and (max-width: 630px) {
+}
+
+@media only screen and (min-width: 631px) and (max-width: 950px) {
+}
+
+@media only screen and (min-width: 951px) {
+ div.page {
+ max-width: 950px;
+ width: 100%;
+ margin: 0 auto;
+ }
+}
diff --git a/html/whiteboard.js b/html/whiteboard.js
new file mode 100644
index 0000000..f79443e
--- /dev/null
+++ b/html/whiteboard.js
@@ -0,0 +1,116 @@
+// started on main page load
+function init() {
+
+ // Connect "Enter" in text field with Button click
+ var url = document.getElementById("url");
+ url.addEventListener("keyup", function(event) {
+ if (event.keyCode === 13) {
+ event.preventDefault();
+ on_start();
+ }
+ });
+}
+
+function set_status(message) {
+ if (message == "")
+ message = "&nbsp;";
+
+ document.getElementById("status").innerHTML = message;
+}
+
+// started on button click: get filename
+function on_start() {
+ var xhr = new XMLHttpRequest();
+
+ // run on data received back
+ xhr.onreadystatechange = function() {
+ if (this.readyState != 4) {
+ return;
+ }
+ if (this.status != 200) {
+ set_status("Server Error while retrieving filename, " + filename + ", status: " + this.status + " " + this.statusText);
+ return;
+ }
+
+ var filename = this.responseText;
+
+ get_file(filename);
+ }
+
+ var parser = new DOMParser();
+ var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
+
+ var requestElement = xmlDocument.getElementsByTagName("request")[0];
+
+ var commandElement = xmlDocument.createElement("command");
+ commandElement.appendChild(document.createTextNode("getfilename"));
+ requestElement.appendChild(commandElement);
+
+ var urlElement = xmlDocument.createElement("url");
+ urlElement.appendChild(document.createTextNode(document.getElementById("url").value));
+ requestElement.appendChild(urlElement);
+
+ var formatElement = xmlDocument.createElement("format");
+ formatElement.appendChild(document.createTextNode(document.getElementById("mp3").checked ? "mp3" : "mp4"));
+ requestElement.appendChild(formatElement);
+
+ xhr.open("POST", "downtube.fcgi", true);
+ xhr.setRequestHeader("Content-type", "text/xml");
+ xhr.responseType = 'text';
+ xhr.send(xmlDocument);
+
+ set_status("Please wait while retrieving filename...");
+}
+
+// started on button click: get file
+function get_file(filename) {
+ var xhr = new XMLHttpRequest();
+
+ // run on data received back
+ xhr.onreadystatechange = function() {
+ if (this.readyState == 3) {
+ set_status("Please wait while downloading " + filename + " ...");
+ return;
+ }
+ if (this.readyState != 4) {
+ return;
+ }
+ if (this.status != 200) {
+ set_status("Server Error while retrieving " + filename + ", status: " + this.status + " " + this.statusText);
+ return;
+ }
+
+ var a = document.getElementById("download-a");
+ a.setAttribute("download", filename);
+ var file = new Blob([this.response]);
+ a.href = window.URL.createObjectURL(file);
+ a.click();
+
+ set_status(""); // OK
+ }
+
+ var parser = new DOMParser();
+ var xmlDocument = parser.parseFromString("<request></request>", "text/xml");
+
+ var requestElement = xmlDocument.getElementsByTagName("request")[0];
+
+ var commandElement = xmlDocument.createElement("command");
+ commandElement.appendChild(document.createTextNode("getfile"));
+ requestElement.appendChild(commandElement);
+
+ var urlElement = xmlDocument.createElement("url");
+ urlElement.appendChild(document.createTextNode(document.getElementById("url").value));
+ requestElement.appendChild(urlElement);
+
+ var formatElement = xmlDocument.createElement("format");
+ formatElement.appendChild(document.createTextNode(document.getElementById("mp3").checked ? "mp3" : "mp4"));
+ requestElement.appendChild(formatElement);
+
+ xhr.open("POST", "downtube.fcgi", true);
+ xhr.setRequestHeader("Content-type", "text/xml");
+ xhr.responseType = 'blob';
+ xhr.send(xmlDocument);
+
+ set_status("Please wait while server prepares " + filename + " ...");
+}
+
generated by Reichwein.IT Webserver and cgit