diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/index.html | 60 | ||||
| -rw-r--r-- | html/whiteboard.css | 69 | ||||
| -rw-r--r-- | html/whiteboard.js | 116 |
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"> </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 = " "; + + 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 + " ..."); +} + |