From 98b01bac2c2c4536aa97d826b61516657f4d15f5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 14 Mar 2016 22:16:43 +0100 Subject: Angular 2 : draft 2 --- client/angular/app/app.component.html | 14 +++++++++++ client/angular/app/app.component.scss | 6 +++++ client/angular/app/app.component.ts | 17 ++++++++++---- .../videos/components/add/videos-add.component.ts | 15 +++++++----- .../components/list/videos-list.component.ts | 27 ++++++++++++++++------ .../components/watch/videos-watch.component.ts | 12 ++++++++-- client/angular/videos/services/videos.service.ts | 6 +++++ client/package.json | 1 - client/stylesheets/application.scss | 1 - client/stylesheets/index.scss | 5 ---- 10 files changed, 77 insertions(+), 27 deletions(-) delete mode 100644 client/stylesheets/index.scss (limited to 'client') diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html index 590efa0d6..af41f8686 100644 --- a/client/angular/app/app.component.html +++ b/client/angular/app/app.component.html @@ -1,5 +1,19 @@
+
+
+

PeerTube

+
+ +
+ +
+
+ +
diff --git a/client/angular/app/app.component.scss b/client/angular/app/app.component.scss index 03ecba8f2..346460a31 100644 --- a/client/angular/app/app.component.scss +++ b/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%; diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts index 3d41183f2..cb961a3c8 100644 --- a/client/angular/app/app.component.ts +++ b/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!'); } }, diff --git a/client/angular/videos/components/add/videos-add.component.ts b/client/angular/videos/components/add/videos-add.component.ts index 97e3bb3b5..8ff6cfec8 100644 --- a/client/angular/videos/components/add/videos-add.component.ts +++ b/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']); } diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts index e5af87448..eb23ed1ff 100644 --- a/client/angular/videos/components/list/videos-list.component.ts +++ b/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) ); diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts index e3a973820..da7f942db 100644 --- a/client/angular/videos/components/watch/videos-watch.component.ts +++ b/client/angular/videos/components/watch/videos-watch.component.ts @@ -1,8 +1,9 @@ /// 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; + } } diff --git a/client/angular/videos/services/videos.service.ts b/client/angular/videos/services/videos.service.ts index 784eec68d..17ae89c8b 100644 --- a/client/angular/videos/services/videos.service.ts +++ b/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 =>