prototype: add kemal and send ajax request

akiicat · Apr 25, 2017 · cee024e · cee024e
1 parent 3aa51c2
commit cee024e
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 3 deletions.
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -0,0 +1,48 @@
+var YoutubeRetriever = React.createClass({
+  getInitialState: function () {
+    return {
+    };
+  },
+
+  getVideoId: function() {
+    var video_url = document.getElementById('video_url').value
+    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
+  },
+
+  sendVideoUrl: function() {
+    var xhr = null;
+    if(window.XMLHttpRequest){
+      xhr = new XMLHttpRequest();
+    } else {
+      xhr = new ActiveXObject('Microsoft.XMLHTTP');
+    }
+
+    xhr.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        document.getElementById('video_info').innerHTML = this.responseText;
+      }
+    };
+
+    video_id = this.getVideoId()
+    xhr.open('GET', '/watch?v=' + video_id,  true);
+    xhr.send();
+  },
+
+  sendVideoUrlWithEnter: function (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)
+    );
+  }
+});
+
+ReactDOM.render(React.createElement(YoutubeRetriever, null), document.getElementById('youtube-retriever'));
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
@@ -0,0 +1,6 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+
diff --git a/shard.lock b/shard.lock
@@ -0,0 +1,18 @@
+version: 1.0
+shards:
+  kemal:
+    github: kemalcr/kemal
+    commit: 0b4856b7417592743a27fc3e30867fd141395bf6
+
+  kilt:
+    github: jeromegn/kilt
+    version: 0.3.3
+
+  radix:
+    github: luislavena/radix
+    version: 0.3.8
+
+  youtube_retriever:
+    github: akiicat/youtube_retriever
+    commit: 3265128eb23c0c26cf677f085ff0de36b0996008
+
diff --git a/shard.yml b/shard.yml
@@ -8,6 +8,14 @@ targets:
   kemal_youtube_retiever:
     main: src/kemal_youtube_retiever.cr
 
+dependencies:
+  youtube_retriever:
+    github: akiicat/youtube_retriever
+    branch: master
+  kemal:
+    github: kemalcr/kemal
+    branch: master
+
 crystal: 0.22.0
 
 license: MIT
diff --git a/src/kemal_youtube_retiever.cr b/src/kemal_youtube_retiever.cr
@@ -1,5 +1,37 @@
-require "./kemal_youtube_retiever/*"
+require "kemal"
+require "youtube_retriever"
 
-module KemalYoutubeRetiever
-  # TODO Put your code here
+BAD_REQUEST = {
+  :status => "404",
+  :message => "bad request"
+}
+
+get "/" do |env|
+  render "src/views/index.ecr"
+end
+
+get "/watch" do |env|
+  env.response.content_type = "application/json; charset=utf-8"
+  begin
+    request = env.request.resource.match(/\?(?<video_url>.+)/).try(&.["video_url"]).to_s
+    video_url = URI.decode_www_form(request)["v"]
+    YoutubeRetriever.dump_json(video_url).to_json
+  rescue
+    BAD_REQUEST
+  end
 end
+
+get "/youtube-dl" do |env|
+  env.response.content_type = "application/json; charset=utf-8"
+  begin
+    request = env.request.resource.match(/\?(?<video_url>.+)/).try(&.["video_url"]).to_s
+    video_url = URI.decode_www_form(request)["v"]
+    io = IO::Memory.new
+    Process.run("youtube-dl", ["-j", video_url], output: io)
+    JSON.parse(io.to_s).to_json
+  rescue
+    BAD_REQUEST
+  end
+end
+
+Kemal.run
diff --git a/src/views/index.ecr b/src/views/index.ecr
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <title>Youtube Retriever</title>
+    <meta charset="utf-8">
+    <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>
+    <link rel="stylesheet" href="/stylesheets/application.css">
+  </head>
+  <body>
+    <div id="youtube-retriever"></div>
+    <script src="/javascripts/application.js"></script>
+  </body>
+</html>