1 files changed, 245 insertions, 0 deletions

diff --git a/client/app/javascripts/index.js b/client/app/javascripts/index.js
new file mode 100644
index 000000000..4910e4540
--- /dev/null
+++ b/client/app/javascripts/index.js
@@ -0,0 +1,245 @@
+;(function () {
+  'use strict'
+
+  var $ = require('jquery')
+  require('blueimp-file-upload')
+
+  var WebTorrent = require('webtorrent')
+  var client = new WebTorrent({ dht: false })
+
+  var $content = $('#ajax_load')
+
+  // Webtorrent events
+  client.on('error', function (err) {
+    console.error(err)
+  })
+
+  client.on('warning', function (err) {
+    console.warning(err)
+  })
+
+  // Events of the panel
+  $('#panel_get_videos').on('click', function () {
+    getVideos()
+  })
+
+  $('#panel_upload_video').on('click', function () {
+    uploadVideo()
+  })
+
+  $('#panel_make_friends').on('click', function () {
+    makeFriends()
+  })
+
+  $('#panel_quit_friends').on('click', function () {
+    quitFriends()
+  })
+
+  $('#search-video').on('keyup', function (e) {
+    var search = $(this).val()
+
+    if (search === '') return
+
+    if (e.keyCode === 13) {
+      $.ajax({
+        url: '/api/v1/videos/search/' + search,
+        type: 'GET',
+        dataType: 'json',
+        success: function (videos) {
+          printVideos(videos)
+        }
+      })
+    }
+  })
+
+  // Join a new network
+  function makeFriends () {
+    $.ajax({
+      url: '/api/v1/pods/makefriends',
+      type: 'GET',
+      dataType: 'json',
+      statusCode: {
+        409: function () {
+          alert('Already made friends.')
+        }
+      },
+      success: function () {
+        alert('Made friends!')
+      }
+    })
+  }
+
+  function quitFriends () {
+    $.ajax({
+      url: '/api/v1/pods/quitfriends',
+      type: 'GET',
+      dataType: 'json',
+      success: function () {
+        alert('Quit friends!')
+      }
+    })
+  }
+
+  function printVideos (videos) {
+    $content.empty()
+
+    if (videos.length === 0) {
+      $content.text('There is no videos.')
+    }
+
+    videos.forEach(function (video) {
+      var $video = $('<div></div>').addClass('video')
+
+      var $video_name = $('<span></span>').addClass('video_name').text(video.name)
+      var $video_pod = $('<span></span>').addClass('video_pod_url').text(video.podUrl)
+      var $header = $('<div></div>').append([ $video_name, $video_pod ])
+
+      if (video.namePath !== null) {
+        var $remove = $('<span></span>').addClass('span_action glyphicon glyphicon-remove')
+
+        // Remove the video
+        $remove.on('click', function () {
+          if (!confirm('Are you sure ?')) return
+
+          removeVideo(video)
+        })
+
+        $header.append($remove)
+      }
+
+      var $video_description = $('<div></div>').addClass('video_description').text(video.description)
+
+      // Get the video
+      $video_name.on('click', function () {
+        getVideo(video)
+      })
+
+      if (!video.magnetUri) {
+        $remove.css('display', 'none')
+      }
+
+      $video.append([ $header, $video_description ])
+      $content.append($video)
+    })
+  }
+
+  // Upload the video, the server will seed it
+  function uploadVideo () {
+    // Creating all the elements
+    var $video_label = $('<label></label>').attr('for', 'name').text('Video name')
+    var $video_name = $('<input></input>').addClass('form-control').attr({
+      name: 'name',
+      id: 'name'
+    })
+    var $video_block = $('<div></div>').addClass('form-group').append([ $video_label, $video_name ])
+
+    var $title = $('<h3></h3>').text('Upload a video')
+
+    var $button_text = $('<span></span>').text('Select the video...')
+    var $input_video = $('<input></input>').attr({
+      type: 'file',
+      name: 'input_video',
+      id: 'input_video'
+    })
+    var $button = $('<div></div>').addClass('btn btn-default btn-file').append([ $button_text, $input_video ])
+
+    var $description_label = $('<label></label>').attr('for', 'description').text('Description')
+    var $description_text = $('<textarea></textarea>').addClass('form-control').attr({
+      name: 'description',
+      id: 'description',
+      placeholder: 'Description...'
+    })
+    var $description = $('<div></div>').addClass('form-group').append([ $description_label, $description_text ])
+
+    var $bar = $('<progress></progress').attr('value', '0').css('display', 'none')
+    var $progress_bar = $('<div><div>').attr('id', 'progress').append($bar)
+
+    var $input_submit = $('<input></input>').addClass('btn btn-default').attr({
+      type: 'button',
+      value: 'Upload'
+    })
+
+    // JQuery plugin
+    var $form_video = $('<form></form>').append([ $video_block, $button, $progress_bar, $description, $input_submit ])
+    $form_video.fileupload({
+      singleFileUploads: true,
+      multipart: true,
+      url: '/api/v1/videos',
+      autoupload: false,
+      add: function (e, data) {
+        var $text = $('<span></span>').addClass('name_file').text(data['files'][0]['name'])
+        $text.insertAfter($button)
+        $input_submit.off('click').on('click', function () {
+          $bar.css('display', 'block')
+          data.formData = $form_video.serializeArray()
+          data.submit()
+        })
+      },
+      progressall: function (e, data) {
+        $bar.attr({
+          value: data.loaded,
+          max: data.total
+        })
+      },
+      done: function (e, data) {
+        // Print all the videos once it's finished
+        getVideos()
+      }
+    })
+
+    $content.empty()
+    $content.append([ $title, $form_video ])
+  }
+
+  // Print the list of all the videos
+  function getVideos () {
+    $.ajax({
+      url: '/api/v1/videos/',
+      dataType: 'json',
+      type: 'GET',
+      success: function (videos) {
+        printVideos(videos)
+      }
+    })
+  }
+
+  function removeVideo (video) {
+    $.ajax({
+      url: '/api/v1/videos/' + video._id,
+      type: 'DELETE',
+      success: function (response, status) {
+        getVideos()
+      }
+    })
+  }
+
+  // Get the video: add the torrent file and stream it into a video tag
+  function getVideo (video) {
+    var $waiting = $('<img></img>').addClass('center-block loading').attr('src', '/images/loading.gif')
+    $content.empty()
+    $content.append($waiting)
+
+    console.log('Getting ' + video)
+    client.add(video.magnetUri, function (torrent) {
+      var $embed = $('<div></div>').addClass('embed-responsive embed-responsive-16by9')
+
+      $content.empty()
+      $content.append($embed)
+
+      // Got torrent metadata!
+      console.log('Torrent info hash:', torrent.infoHash)
+
+      // Let's say the first file is a webm (vp8) or mp4 (h264) video...
+      var file = torrent.files[0]
+
+      file.appendTo($embed.get(0), function (err) {
+        if (err) {
+          alert('Cannot append the file.')
+          console.error(err)
+        }
+      })
+    })
+  }
+
+  getVideos()
+})()