From 4aeab7931182cb1c35bd5c52b58d71b30c32674d Mon Sep 17 00:00:00 2001 From: Roland Reichwein Date: Sat, 5 Nov 2022 13:49:53 +0100 Subject: Initial files, WIP --- html/index.html | 60 +++++++++++++++++++++++++++ html/whiteboard.css | 69 +++++++++++++++++++++++++++++++ html/whiteboard.js | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 245 insertions(+) create mode 100644 html/index.html create mode 100644 html/whiteboard.css create mode 100644 html/whiteboard.js (limited to 'html') 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 @@ + + + + + + + DownTube + + + + + +
+

+ +

+ Download internet videos as MP3 (audio) or MP4 (video). +

+ +

+ Video URL:
+

+

+ +

+ Transform to format:
+ +
+ +
+

+ +
+
 
+

+ +

+ +
+
+
+
+
+
+

+ Note: Audio download is currently limited to 30MB, Video download is limited to 300MB. +

+
+
+

Contact

+ Roland Reichwein
+ Hauptstr. 101a
+ 82008 Unterhaching
+ mail@reichwein.it
+ https://www.reichwein.it
+
+ + + + 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("", "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("", "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 + " ..."); +} + -- cgit v1.2.3