Merge pull request #1 from akiicat/develop

add style

public/javascripts/application.js

@@ -1,48 +1,104 @@
-var YoutubeRetriever = React.createClass({
-  getInitialState: function () {
-    return {
-    };
-  },
+class YoutubeRetriever extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {};
+    this.video = {};
+  }
 
-  getVideoId: function() {
-    var video_url = document.getElementById('video_url').value
+  getVideoId() {
     var video_id_m = /^((?:https?:\/\/|\/\/)(?:(?:(?:(?:www\.)?youtube\.com\/)(?:(?:(?:v|embed|e)\/(?!videoseries))|(?:(?:(?:watch|movie)\/?)?(?:\?)v=)))|(?:youtu\.be)\/))?([0-9A-Za-z_-]{11})/m
-    var video_id = video_id_m.exec(video_url)[2]
-    return video_id
-  },
+    this.video.url = document.getElementById('video-url').value
+    this.video.id = video_id_m.exec(this.video.url)[2]
+    return this.video.id
+  }
 
-  sendVideoUrl: function() {
+  sendVideoUrl() {
     var xhr = null;
-    if(window.XMLHttpRequest){
+    if (window.XMLHttpRequest) {
       xhr = new XMLHttpRequest();
-    } else {
+    }
+    else {
       xhr = new ActiveXObject('Microsoft.XMLHTTP');
     }
 
-    xhr.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        document.getElementById('video_info').innerHTML = this.responseText;
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        var rsp = JSON.parse(xhr.responseText)
+        this.state.title = rsp.title
+        this.state.author = rsp.author
+
+        var date = new Date(null);
+        date.setSeconds(rsp.length_seconds);
+        this.state.length = date.toISOString().substr(11, 8);
+        this.state.streams    = this.renderStreams(rsp.streams, "default")
+        this.state.video_only = this.renderStreams(rsp.streams, "video only")
+        this.state.audio_only = this.renderStreams(rsp.streams, "audio only")
+        this.forceUpdate()
       }
     };
 
-    video_id = this.getVideoId()
-    xhr.open('GET', '/watch?v=' + video_id,  true);
+    this.getVideoId()
+    xhr.open('GET', '/watch?v=' + this.video.id,  true);
     xhr.send();
-  },
+  }
 
-  sendVideoUrlWithEnter: function (e) {
+  sendVideoUrlWithEnter(e) {
     if (e.keyCode == 13) {
       this.sendVideoUrl();
     }
-  },
+  }
 
-  render: function () {
-    return React.createElement('div', null,
-      React.createElement('input', { id: 'video_url', autofocus: true, placeholder: 'Youtube URL', type: 'text', ref: 'video_url', onKeyUp: this.sendVideoUrlWithEnter }),
-      React.createElement('button', { type: 'button', onClick: this.sendVideoUrl }, 'Send'),
-      React.createElement('div', { id: 'video_info' }, null)
-    );
+  renderStreams(streams, selector) {
+    streams = streams.filter((stream) => {
+      return stream.comment == selector
+    })
+
+    selector = (selector == "default") ? 'VIDEO + AUDIO' : selector.toUpperCase();
+
+    return React.createElement('div', {},
+      React.createElement('hr', {}, null),
+      React.createElement('h2', { className: 'text-center' }, selector),
+      React.createElement('table', {},
+        React.createElement('tbody', {}, this.renderStreamsBody(streams))
+      )
+    )
   }
-});
 
+  renderStreamsBody(streams) {
+    return streams.map((stream) => {
+      return React.createElement('tr', {},
+        // url, itag, container, video_resolution, video_profile, video_bitrate, video_encoding, audio_bitrate, audio_encoding, comment
+        React.createElement('td', {},
+          React.createElement('a', { href: stream.url, target: '_blank' }, 'Download')
+        ),
+        React.createElement('td', {}, stream.container),
+        React.createElement('td', {}, stream.video_resolution),
+        React.createElement('td', {}, stream.audio_encoding)
+      )
+    })
+  }
+
+  render() {
+    return React.createElement('div', {},
+      React.createElement('header', {},
+        React.createElement('h1', { className: 'text-center' }, 'YOUTUBE RETRIEVER'),
+        React.createElement('div', { id: 'url-input', className: 'text-center' },
+          React.createElement('input', { id: 'video-url', autofocus: true, placeholder: 'Youtube URL', type: 'text', ref: 'video-url', onKeyUp: this.sendVideoUrlWithEnter.bind(this) }),
+          React.createElement('button', { type: 'button', onClick: this.sendVideoUrl.bind(this) }, 'Send')
+        )
+      ),
+      React.createElement('hr', {}, null),
+      React.createElement('div', { id: 'response-content' },
+        React.createElement('div', { className: 'text-center' },
+          React.createElement('div', { className: 'title' }, this.state.title ),
+          React.createElement('div', { className: 'title' }, this.state.author ),
+          React.createElement('div', { className: 'title' }, this.state.length )
+        ),
+        React.createElement('div', { className: 'container' }, this.state.streams),
+        React.createElement('div', { className: 'container' }, this.state.video_only),
+        React.createElement('div', { className: 'container' }, this.state.audio_only)
+      )
+    );
+  }
+}
 ReactDOM.render(React.createElement(YoutubeRetriever, null), document.getElementById('youtube-retriever'));

public/stylesheets/application.css

@@ -1,6 +1,109 @@
 * {
   padding: 0;
   margin: 0;
+  list-style:none;
+  font-family: helvetica;
 }
 
+@font-face {
+  font-family: '8-bit-pusab';
+  src: url('/fonts/8-bit-pusab/8-bit-pusab.ttf');
+}
+
+span {
+  padding-left: 3px;
+}
+
+hr {
+  border: 2px solid #1cb09d;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: '8-bit-pusab';
+}
+
+h1, h2, h3, h4, h5, h6, div, p, table, a {
+  color: #cefe74;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+body {
+  background-color: #006570;
+}
+
+header {
+  padding: 20px 0;
+  background-color: #007f6a;
+}
+
+input, button {
+  height: 32px;
+  border: 1px solid #cefe74;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+table {
+  width: 100%;
+}
+
+td {
+  width: 25%;
+}
+
+.container {
+  position: relative;
+  margin: 20px auto;
+  left: 0; right: 0;
+}
+
+.text-center {
+  text-align: center;
+  margin: 20px auto;
+}
+
+.title {
+  font-family: helvetica;
+}
+
+#response-content table, #response-content a {
+  text-align: center;
+  color: white;
+}
+
+#url-input input {
+  width: 350px;
+  padding-left: 4px;
+}
+
+#url-input button {
+  width: 100px; margin: 10px;
+  background-color: #006570;
+  color: #cefe74;
+}
 
+#response-content {
+  position: absolute;
+  margin: auto;
+  left: 0; right: 0;
+}
+
+@media screen and (max-width: 767px) {
+  .container {
+    max-width: 500px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    width: 500px;
+  }
+}

shard.lock

@@ -14,5 +14,5 @@ shards:
 
   youtube_retriever:
     github: akiicat/youtube_retriever
-    commit: 3265128eb23c0c26cf677f085ff0de36b0996008
+    commit: 81e216fa5b780767d313a12a5e64fac1f1fd7368
 

src/views/index.ecr

@@ -2,6 +2,7 @@
   <head>
     <title>Youtube Retriever</title>
     <meta charset="utf-8">
+    <meta name="keywords" content="youtube, download, retriever">
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js"></script>