Angular 2 : draft 2

.travis.yml

@@ -21,7 +21,6 @@ services:
 
 before_script:
   - npm install electron-prebuilt -g
-  - npm install grunt-cli -g
 
 after_failure:
   - cat test1/logs/all-logs.log

client/angular/app/app.component.html

@@ -1,5 +1,19 @@
 <div class="container">
 
+  <header class="row">
+    <div class="col-md-2">
+      <h4>PeerTube</h4>
+    </div>
+
+    <div class="col-md-8">
+      <input
+        type="text" id="search_video" name="search_video" class="form-control" placeholder="Search a video..."
+        #search (keyup.enter)="doSearch(search.value)"
+      >
+    </div>
+  </header>
+
+
   <div class="row">
 
     <menu class="col-md-2">

client/angular/app/app.component.scss

@@ -1,3 +1,9 @@
+header div {
+  height: 50px;
+  line-height: 25px;
+  margin-bottom: 30px;
+}
+
 menu {
   min-height: 300px;
   height: 100%;

client/angular/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef } from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from 'angular2/router';
+import { HTTP_PROVIDERS } from 'angular2/http';
 
 import { VideosAddComponent } from '../videos/components/add/videos-add.component';
 import { VideosListComponent } from '../videos/components/list/videos-list.component';
@@ -36,15 +36,22 @@ import { FriendsService } from '../friends/services/friends.service';
 })
 
 export class AppComponent {
-  constructor(private _friendsService: FriendsService) {}
+  constructor(private _friendsService: FriendsService, private _router: Router) {}
+
+  doSearch(search: string) {
+    if (search !== '') {
+      this._router.navigate(['VideosList', { search: search }]);
+    } else {
+      this._router.navigate(['VideosList']);
+    }
+  }
 
   makeFriends() {
     this._friendsService.makeFriends().subscribe(
       status => {
         if (status === 409) {
           alert('Already made friends!');
-        }
-        else {
+        } else {
           alert('Made friends!');
         }
       },

client/angular/videos/components/add/videos-add.component.ts

@@ -1,9 +1,10 @@
-import {Component, ElementRef, Inject, OnInit} from 'angular2/core';
-import {Router} from 'angular2/router';
-import {NgForm} from 'angular2/common';
+import { Component, ElementRef, Inject, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
+import { NgForm } from 'angular2/common';
 
-import {Video} from '../../models/video';
+import { Video } from '../../models/video';
 
+// TODO: import it with systemjs
 declare var jQuery:any;
 
 @Component({
@@ -22,9 +23,10 @@ export class VideosAddComponent implements OnInit {
 
   ngOnInit() {
     jQuery(this._elementRef.nativeElement).find('#input_video').fileupload({
+      url: '/api/v1/videos',
+      dataType: 'json',
       singleFileUploads: true,
       multipart: true,
-      url: '/api/v1/videos',
       autoupload: false,
 
       add: (e, data) => {
@@ -38,7 +40,8 @@ export class VideosAddComponent implements OnInit {
       },
 
       done: (e, data) => {
-        console.log('finished');
+        console.log('Video uploaded.');
+
         // Print all the videos once it's finished
         this._router.navigate(['VideosList']);
       }

client/angular/videos/components/list/videos-list.component.ts

@@ -1,8 +1,8 @@
-import {Component, OnInit} from 'angular2/core';
-import {ROUTER_DIRECTIVES} from 'angular2/router';
+import { Component, OnInit } from 'angular2/core';
+import { ROUTER_DIRECTIVES, RouteParams } from 'angular2/router';
 
-import {VideosService} from '../../services/videos.service';
-import {Video} from '../../models/video';
+import { VideosService } from '../../services/videos.service';
+import { Video } from '../../models/video';
 
 @Component({
   selector: 'my-videos-list',
@@ -14,16 +14,29 @@ import {Video} from '../../models/video';
 export class VideosListComponent implements OnInit {
   videos: Video[];
 
+  private search: string;
+
   constructor(
-    private _videosService: VideosService
-  ) { }
+    private _videosService: VideosService,
+    routeParams: RouteParams
+  ) {
+    this.search = routeParams.get('search');
+  }
 
   ngOnInit() {
     this.getVideos();
   }
 
   getVideos() {
-    this._videosService.getVideos().subscribe(
+    let observable = null;
+
+    if (this.search !== null) {
+      observable = this._videosService.searchVideos(this.search);
+    } else {
+      observable = this._videosService.getVideos()
+    }
+
+    observable.subscribe(
       videos => this.videos = videos,
       error => alert(error)
     );

client/angular/videos/components/watch/videos-watch.component.ts

@@ -1,8 +1,9 @@
 /// <reference path='../../../../typings/browser/ambient/webtorrent/webtorrent.d.ts' />
 
 import { Component, OnInit, ElementRef } from 'angular2/core';
-import { RouteParams } from 'angular2/router';
+import { RouteParams, CanDeactivate, ComponentInstruction } from 'angular2/router';
 
+// TODO import it with systemjs
 declare var WebTorrent: any;
 
 import { Video } from '../../models/video';
@@ -14,7 +15,7 @@ import { VideosService } from '../../services/videos.service';
   styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ]
 })
 
-export class VideosWatchComponent {
+export class VideosWatchComponent implements OnInit, CanDeactivate {
   video: Video;
 
   private client: any;
@@ -24,6 +25,7 @@ export class VideosWatchComponent {
     private _routeParams: RouteParams,
     private _elementRef: ElementRef
   ) {
+    // TODO: use a service
     this.client = new WebTorrent({ dht: false });
   }
 
@@ -47,4 +49,10 @@ export class VideosWatchComponent {
       })
     })
   }
+
+  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any {
+    console.log('Removing video from webtorrent.');
+    this.client.remove(this.video.magnetUri);
+    return true;
+  }
 }

client/angular/videos/services/videos.service.ts

@@ -30,6 +30,12 @@ export class VideosService {
     }
   }
 
+  searchVideos(search: string) {
+    return this.http.get(this._baseVideoUrl + 'search/' + search)
+                    .map(res => <Video> res.json())
+                    .catch(this.handleError);
+  }
+
   private handleError (error: Response) {
     console.error(error);
     return Observable.throw(error.json().error || 'Server error');

client/package.json

@@ -30,7 +30,6 @@
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "systemjs": "0.19.22",
-    "webtorrent": "^0.85.1",
     "zone.js": "0.5.15"
   },
   "devDependencies": {

client/stylesheets/application.scss

@@ -3,4 +3,3 @@ $icon-font-path: "/app/node_modules/bootstrap-sass/assets/fonts/bootstrap/";
 @import "bootstrap-variables";
 @import "_bootstrap";
 @import "base.scss";
-@import "index.scss";

client/stylesheets/index.scss

@@ -1,5 +0,0 @@
-header div {
-  height: 50px;
-  line-height: 25px;
-  margin-bottom: 50px;
-}

package.json

@@ -40,7 +40,9 @@
     "dev": "npm run build && concurrently \"npm run livereload\" \"npm run client:tsc:watch\" \"npm run client:sass:watch\" \"npm start\"",
     "livereload": "livereload ./client",
     "start": "node server",
-    "test": "standard && mocha server/tests"
+    "test": "standard && mocha server/tests",
+
+    "postinstall": "cd client && npm install"
   },
   "dependencies": {
     "async": "^1.2.1",

server/controllers/api/v1/videos.js

@@ -76,8 +76,8 @@ function addVideo (req, res, next) {
       // Now we'll add the video's meta data to our friends
       friends.addVideoToFriends(video_data)
 
-      // TODO : include Location of the new video
-      res.type('json').status(201).end()
+      // TODO : include Location of the new video -> 201
+      res.type('json').status(204).end()
     })
   })
 }