style(*): bootstrapify

manbearwiz · Sep 19, 2015 · 4f35b5b · 4f35b5b
1 parent 8e2fc92
commit 4f35b5b
Show file tree

Hide file tree

Showing 3 changed files with 224 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <link rel="icon" href="../../favicon.ico">
+
+  <title>youtube-dl</title>
+
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
+  <link href="youtube-dl/static/style.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="site-wrapper">
+    <div class="site-wrapper-inner">
+      <div class="cover-container">
+
+        <div class="inner cover">
+          <h1 class="cover-heading">youtube-dl</h1>
+          <p class="lead">Enter a video url to download the video to the server. Url can be to YouTube or <a href="https://rg3.github.io/youtube-dl/supportedsites.html">any other supported site</a>. The server will automatically download the highest quality version available.</p>
+          <div class="row">
+            <form action="/youtube-dl/q" method="POST">
+            <div class="input-group">
+              <input name="url" type="url" class="form-control" placeholder="URL">
+              <span class="input-group-btn">
+                <button class="btn btn-primary" type="submit" >
+                  <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> Submit
+                </button>
+              </span>
+            </div>
+          </form>
+          </div>
+        </div>
+
+        <div class="mastfoot">
+          <div class="inner">
+            <p>Web frontend for <a href="https://rg3.github.io/youtube-dl/">youtube-dl</a>, by <a href="https://twitter.com/manbearwiz">@manbearwiz</a>.</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+</body>
+
+</html>
diff --git a/static/style.css b/static/style.css
@@ -0,0 +1,157 @@
+/*
+ * Globals
+ */
+
+
+/* Links */
+
+a, a:focus, a:hover {
+  color: #fff;
+}
+.lead a {
+  color: #268bd2;
+}
+
+/* Custom default button */
+
+.btn-default, .btn-default:hover, .btn-default:focus {
+  color: #333;
+  text-shadow: none;
+  /* Prevent inheritence from `body` */
+  background-color: #fff;
+  border: 1px solid #fff;
+}
+
+/*
+ * Base structure
+ */
+
+html, body {
+  height: 100%;
+  background-color: #002b36;
+}
+body {
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
+}
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+
+.site-wrapper {
+  display: table;
+  width: 100%;
+  height: 100%;
+  /* For at least Firefox */
+  min-height: 100%;
+  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
+  box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
+}
+.site-wrapper-inner {
+  display: table-cell;
+  vertical-align: top;
+}
+.cover-container {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/* Padding for spacing */
+
+.inner {
+  padding: 30px;
+}
+
+/*
+ * Header
+ */
+
+.masthead-brand {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.masthead-nav > li {
+  display: inline-block;
+}
+.masthead-nav > li + li {
+  margin-left: 20px;
+}
+.masthead-nav > li > a {
+  padding-right: 0;
+  padding-left: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  /* IE8 proofing */
+  color: rgba(255, 255, 255, .75);
+  border-bottom: 2px solid transparent;
+}
+.masthead-nav > li > a:hover, .masthead-nav > li > a:focus {
+  background-color: transparent;
+  border-bottom-color: #a9a9a9;
+  border-bottom-color: rgba(255, 255, 255, .25);
+}
+.masthead-nav > .active > a, .masthead-nav > .active > a:hover, .masthead-nav > .active > a:focus {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+@media (min-width: 768px) {
+  .masthead-brand {
+    float: left;
+  }
+  .masthead-nav {
+    float: right;
+  }
+}
+
+/*
+ * Cover
+ */
+
+.cover {
+  padding: 0 20px;
+}
+.cover .btn-lg {
+  padding: 10px 20px;
+  font-weight: bold;
+}
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+  color: #999;
+  /* IE8 proofing */
+  color: rgba(255, 255, 255, .5);
+}
+
+/*
+ * Affix and center
+ */
+
+@media (min-width: 768px) {
+  /* Pull out the header and footer */
+  .masthead {
+    position: fixed;
+    top: 0;
+  }
+  .mastfoot {
+    position: fixed;
+    bottom: 0;
+  }
+  /* Start the vertical centering */
+  .site-wrapper-inner {
+    vertical-align: middle;
+  }
+  /* Handle the widths */
+  .masthead, .mastfoot, .cover-container {
+    width: 100%;
+    /* Must be percentage or pixels for horizontal alignment */
+  }
+}
+@media (min-width: 992px) {
+  .masthead, .mastfoot, .cover-container {
+    width: 700px;
+  }
+}
diff --git a/youtube-dl-server.py b/youtube-dl-server.py
@@ -2,20 +2,18 @@
 import os
 import subprocess
 from queue import Queue
-from bottle import route, run, Bottle, request
+from bottle import route, run, Bottle, request, static_file
 from threading import Thread
 
 app = Bottle()
 
 @app.route('/youtube-dl')
 def dl_queue_list():
-    print("bar")
-    return '''
-        <form action="/youtube-dl/q" method="POST">
-            URL: <input name="url" type="text" />
-            <input value="Submit" type="submit" />
-        </form>
-    '''
+    return static_file('index.html', root='./')
+
+@app.route('/youtube-dl/static/:filename#.*#')
+def server_static(filename):
+    return static_file(filename, root='./static')
 
 @app.route('/youtube-dl/q', method='GET')
 def q_size():
@@ -30,19 +28,19 @@ def q_put():
         return { "success" : True, "url" : url }
     else:
         return { "success" : False, "error" : "dl called without a url" }
-        
+
 def dl_worker():
     while not done:
-        item = dl_q.get() 
+        item = dl_q.get()
         download(item)
         dl_q.task_done()
-        
+
 def download(url):
     print("Starting download of " + url)
     command = """youtube-dl -o "/youtube-dl/.incomplete/%(title)s.%(ext)s" -f best[acodec=none][ext=mp4]+best[vcodec=none][ext=m4a] --exec 'touch {} && mv {} /youtube-dl/' --merge-output-format mp4 """ + url
-    print("Finished downloading " + url)
     subprocess.call(command, shell=True)
-
+    print("Finished downloading " + url)
+
 dl_q = Queue();
 done = False;
 dl_thread = Thread(target=dl_worker)