Prepare Angular routes

16 files changed, 120 insertions, 245 deletions

diff --git a/client/.gitignore b/client/.gitignore
new file mode 100644
index 000000000..ec79762bb
--- /dev/null
+++ b/client/.gitignore
@@ -0,0 +1,3 @@
+typings
+app/**/*.js
+app/**/*.map
diff --git a/client/app/app.component.css b/client/app/app.component.css
new file mode 100644
index 000000000..d627027e4
--- /dev/null
+++ b/client/app/app.component.css
@@ -0,0 +1,3 @@
+h1 {
+  font-size: 80px;
+}
diff --git a/client/app/app.component.html b/client/app/app.component.html
new file mode 100644
index 000000000..4bcdd569c
--- /dev/null
+++ b/client/app/app.component.html
@@ -0,0 +1 @@
+<h1>My First Angular 2 App</h1>
diff --git a/client/app/app.component.ts b/client/app/app.component.ts
new file mode 100644
index 000000000..f0ea272af
--- /dev/null
+++ b/client/app/app.component.ts
@@ -0,0 +1,8 @@
+import {Component} from 'angular2/core';
+
+@Component({
+    selector: 'my-app',
+    templateUrl: 'app/app.component.html',
+    styleUrls: [ 'app/app.component.css' ]
+})
+export class AppComponent { }
diff --git a/client/app/javascripts/index.js b/client/app/javascripts/index.js
deleted file mode 100644
index 4910e4540..000000000
--- a/client/app/javascripts/index.js
+++ /dev/null
@@ -1,245 +0,0 @@
-;(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()
-})()
diff --git a/client/app/main.ts b/client/app/main.ts
new file mode 100644
index 000000000..034c15573
--- /dev/null
+++ b/client/app/main.ts
@@ -0,0 +1,4 @@
+import {bootstrap}    from 'angular2/platform/browser'
+import {AppComponent} from './app.component'
+
+bootstrap(AppComponent);
diff --git a/client/app/images/favicon.png b/client/images/favicon.png
index bb57ee6b0..bb57ee6b0 100644
--- a/client/app/images/favicon.png
+++ b/client/images/favicon.png
diff --git a/client/app/images/loading.gif b/client/images/loading.gif
index f2a1bc0c6..f2a1bc0c6 100644
--- a/client/app/images/loading.gif
+++ b/client/images/loading.gif
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 000000000..15ccedb74
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,40 @@
+<html>
+  <head>
+    <title>Angular 2 QuickStart</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- 1. Load libraries -->
+    <!-- IE required polyfills, in this exact order -->
+    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+
+    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+
+    <!-- 2. Configure SystemJS -->
+    <script>
+      System.config({
+        packages: {
+          app: {
+            format: 'register',
+            defaultExtension: 'js'
+          }
+        }
+      });
+      System.import('app/main')
+            .then(null, console.error.bind(console));
+    </script>
+
+    <base href="/">
+  </head>
+
+  <!-- 3. Display the application -->
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
new file mode 100644
index 000000000..171c39edf
--- /dev/null
+++ b/client/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "peertube-client",
+  "version": "0.0.1",
+  "private": true,
+  "licence": "GPLv3",
+  "author": {
+    "name": "Florian Bigard",
+    "email": "florian.bigard@gmail.com",
+    "url": "http://github.com/Chocobozzz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Chocobozzz/PeerTube.git"
+  },
+  "scripts": {
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "typings": "typings",
+    "postinstall": "typings install"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "angular2": "2.0.0-beta.8",
+    "systemjs": "0.19.22",
+    "es6-promise": "^3.0.2",
+    "es6-shim": "^0.33.3",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.2",
+    "zone.js": "0.5.15"
+  },
+  "devDependencies": {
+    "concurrently": "^2.0.0",
+    "lite-server": "^2.1.0",
+    "typescript": "^1.8.2",
+    "typings":"^0.6.8"
+  }
+}
diff --git a/client/app/stylesheets/application.scss b/client/stylesheets/application.scss
index bf9ec90ab..bf9ec90ab 100644
--- a/client/app/stylesheets/application.scss
+++ b/client/stylesheets/application.scss
diff --git a/client/app/stylesheets/base.scss b/client/stylesheets/base.scss
index 37bdade1e..37bdade1e 100644
--- a/client/app/stylesheets/base.scss
+++ b/client/stylesheets/base.scss
diff --git a/client/app/stylesheets/bootstrap-variables.scss b/client/stylesheets/bootstrap-variables.scss
index 5a49649f9..5a49649f9 100644
--- a/client/app/stylesheets/bootstrap-variables.scss
+++ b/client/stylesheets/bootstrap-variables.scss
diff --git a/client/app/stylesheets/index.scss b/client/stylesheets/index.scss
index d13dcfa90..d13dcfa90 100644
--- a/client/app/stylesheets/index.scss
+++ b/client/stylesheets/index.scss
diff --git a/client/tsconfig.json b/client/tsconfig.json
new file mode 100644
index 000000000..ca58ddb89
--- /dev/null
+++ b/client/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "system",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  },
+  "exclude": [
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
+  ],
+  "compileOnSave": false
+}
diff --git a/client/typings.json b/client/typings.json
new file mode 100644
index 000000000..f10b7c541
--- /dev/null
+++ b/client/typings.json
@@ -0,0 +1,6 @@
+{
+  "ambientDependencies": {
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#bc92442c075929849ec41d28ab618892ba493504"
+  }
+}