aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-06-10 17:43:40 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-06-10 17:46:29 +0200
commit00a446454d4721fc49517815655f6b4f8a17b554 (patch)
tree26f41fc11c059d5b051a98099857db971623b5d9 /client
parente822fdaeee90cb7c70d5678f19249198cd7aae8c (diff)
downloadPeerTube-00a446454d4721fc49517815655f6b4f8a17b554.tar.gz
PeerTube-00a446454d4721fc49517815655f6b4f8a17b554.tar.zst
PeerTube-00a446454d4721fc49517815655f6b4f8a17b554.zip
Add tags support to the video list
Diffstat (limited to 'client')
-rw-r--r--client/src/app/app.component.html24
-rw-r--r--client/src/app/app.component.scss4
-rw-r--r--client/src/app/app.component.ts19
-rw-r--r--client/src/app/login/login.component.ts4
-rw-r--r--client/src/app/shared/search/index.ts1
-rw-r--r--client/src/app/shared/search/search.component.ts21
-rw-r--r--client/src/app/shared/search/search.service.ts15
-rw-r--r--client/src/app/videos/shared/video.model.ts3
-rw-r--r--client/src/app/videos/video-add/video-add.component.html4
-rw-r--r--client/src/app/videos/video-add/video-add.component.ts2
-rw-r--r--client/src/app/videos/video-list/video-list.component.ts36
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.html14
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.scss42
-rw-r--r--client/src/app/videos/video-list/video-miniature.component.ts2
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts10
-rw-r--r--client/src/vendor.ts2
-rw-r--r--client/tsconfig.json1
17 files changed, 140 insertions, 64 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 48e97d523..7e2a0c5f6 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -14,40 +14,40 @@
14 <div class="row"> 14 <div class="row">
15 15
16 <menu class="col-md-2 col-xs-3"> 16 <menu class="col-md-2 col-xs-3">
17 <div class="panel_block"> 17 <div class="panel-block">
18 <div id="panel_user_login" class="panel_button"> 18 <div id="panel-user-login" class="panel-button">
19 <span class="glyphicon glyphicon-user"></span> 19 <span class="glyphicon glyphicon-user"></span>
20 <a *ngIf="!isLoggedIn" [routerLink]="['UserLogin']">Login</a> 20 <a *ngIf="!isLoggedIn" [routerLink]="['/users/login']">Login</a>
21 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a> 21 <a *ngIf="isLoggedIn" (click)="logout()">Logout</a>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <div class="panel_block"> 25 <div class="panel-block">
26 <div id="panel_get_videos" class="panel_button"> 26 <div id="panel-get-videos" class="panel-button">
27 <span class="glyphicon glyphicon-list"></span> 27 <span class="glyphicon glyphicon-list"></span>
28 <a [routerLink]="['VideosList']">Get videos</a> 28 <a [routerLink]="['/videos/list']">Get videos</a>
29 </div> 29 </div>
30 30
31 <div id="panel_upload_video" class="panel_button" *ngIf="isLoggedIn"> 31 <div id="panel-upload-video" class="panel-button" *ngIf="isLoggedIn">
32 <span class="glyphicon glyphicon-cloud-upload"></span> 32 <span class="glyphicon glyphicon-cloud-upload"></span>
33 <a [routerLink]="['VideosAdd']">Upload a video</a> 33 <a [routerLink]="['/videos/add']">Upload a video</a>
34 </div> 34 </div>
35 </div> 35 </div>
36 36
37 <div class="panel_block" *ngIf="isLoggedIn"> 37 <div class="panel-block" *ngIf="isLoggedIn">
38 <div id="panel_make_friends" class="panel_button"> 38 <div id="panel-make-friends" class="panel-button">
39 <span class="glyphicon glyphicon-cloud"></span> 39 <span class="glyphicon glyphicon-cloud"></span>
40 <a (click)='makeFriends()'>Make friends</a> 40 <a (click)='makeFriends()'>Make friends</a>
41 </div> 41 </div>
42 42
43 <div id="panel_quit_friends" class="panel_button"> 43 <div id="panel-quit-friends" class="panel-button">
44 <span class="glyphicon glyphicon-plane"></span> 44 <span class="glyphicon glyphicon-plane"></span>
45 <a (click)='quitFriends()'>Quit friends</a> 45 <a (click)='quitFriends()'>Quit friends</a>
46 </div> 46 </div>
47 </div> 47 </div>
48 </menu> 48 </menu>
49 49
50 <div class="col-md-9 col-xs-8 router_outler_container"> 50 <div class="col-md-9 col-xs-8 router-outler-container">
51 <router-outlet></router-outlet> 51 <router-outlet></router-outlet>
52 </div> 52 </div>
53 53
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e02c2d5b0..1a9a196ff 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -8,7 +8,7 @@ menu {
8 margin-right: 20px; 8 margin-right: 20px;
9 border-right: 1px solid rgba(0, 0, 0, 0.2); 9 border-right: 1px solid rgba(0, 0, 0, 0.2);
10 10
11 .panel_button { 11 .panel-button {
12 margin: 8px; 12 margin: 8px;
13 cursor: pointer; 13 cursor: pointer;
14 transition: margin 0.2s; 14 transition: margin 0.2s;
@@ -27,6 +27,6 @@ menu {
27 } 27 }
28} 28}
29 29
30.panel_block:not(:last-child) { 30.panel-block:not(:last-child) {
31 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 31 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
32} 32}
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 81b700a21..2a1486fb2 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,6 +1,6 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { HTTP_PROVIDERS } from '@angular/http'; 2import { HTTP_PROVIDERS } from '@angular/http';
3import { RouteConfig, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; 3import { Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Routes } from '@angular/router';
4 4
5import { FriendService } from './friends'; 5import { FriendService } from './friends';
6import { LoginComponent } from './login'; 6import { LoginComponent } from './login';
@@ -16,27 +16,23 @@ import {
16 VideoWatchComponent, 16 VideoWatchComponent,
17 VideoService 17 VideoService
18} from './videos'; 18} from './videos';
19import { SearchService } from './shared'; // Temporary
19 20
20@RouteConfig([ 21@Routes([
21 { 22 {
22 path: '/users/login', 23 path: '/users/login',
23 name: 'UserLogin',
24 component: LoginComponent 24 component: LoginComponent
25 }, 25 },
26 { 26 {
27 path: '/videos/list', 27 path: '/videos/list',
28 name: 'VideosList', 28 component: VideoListComponent
29 component: VideoListComponent,
30 useAsDefault: true
31 }, 29 },
32 { 30 {
33 path: '/videos/watch/:id', 31 path: '/videos/watch/:id',
34 name: 'VideosWatch',
35 component: VideoWatchComponent 32 component: VideoWatchComponent
36 }, 33 },
37 { 34 {
38 path: '/videos/add', 35 path: '/videos/add',
39 name: 'VideosAdd',
40 component: VideoAddComponent 36 component: VideoAddComponent
41 } 37 }
42]) 38])
@@ -46,7 +42,7 @@ import {
46 template: require('./app.component.html'), 42 template: require('./app.component.html'),
47 styles: [ require('./app.component.scss') ], 43 styles: [ require('./app.component.scss') ],
48 directives: [ ROUTER_DIRECTIVES, SearchComponent ], 44 directives: [ ROUTER_DIRECTIVES, SearchComponent ],
49 providers: [ AuthService, FriendService, HTTP_PROVIDERS, ROUTER_PROVIDERS, VideoService ] 45 providers: [ AuthService, FriendService, HTTP_PROVIDERS, ROUTER_PROVIDERS, VideoService, SearchService ]
50}) 46})
51 47
52export class AppComponent { 48export class AppComponent {
@@ -75,12 +71,13 @@ export class AppComponent {
75 field: search.field, 71 field: search.field,
76 search: search.value 72 search: search.value
77 }; 73 };
78 this.router.navigate(['VideosList', params]); 74 this.router.navigate(['/videos/list', params]);
79 } else { 75 } else {
80 this.router.navigate(['VideosList']); 76 this.router.navigate(['/videos/list']);
81 } 77 }
82 } 78 }
83 79
80 // FIXME
84 logout() { 81 logout() {
85 // this._authService.logout(); 82 // this._authService.logout();
86 } 83 }
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 768594ac4..bcfa021fa 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -1,5 +1,5 @@
1import { Component } from '@angular/core'; 1import { Component } from '@angular/core';
2import { Router } from '@angular/router-deprecated'; 2import { Router } from '@angular/router';
3 3
4import { AuthService, AuthStatus, User } from '../shared'; 4import { AuthService, AuthStatus, User } from '../shared';
5 5
@@ -26,7 +26,7 @@ export class LoginComponent {
26 26
27 this.authService.setStatus(AuthStatus.LoggedIn); 27 this.authService.setStatus(AuthStatus.LoggedIn);
28 28
29 this.router.navigate(['VideosList']); 29 this.router.navigate(['/videos/list']);
30 }, 30 },
31 error => { 31 error => {
32 if (error.error === 'invalid_grant') { 32 if (error.error === 'invalid_grant') {
diff --git a/client/src/app/shared/search/index.ts b/client/src/app/shared/search/index.ts
index a49a4f1a9..a897ed099 100644
--- a/client/src/app/shared/search/index.ts
+++ b/client/src/app/shared/search/index.ts
@@ -1,3 +1,4 @@
1export * from './search-field.type'; 1export * from './search-field.type';
2export * from './search.component'; 2export * from './search.component';
3export * from './search.model'; 3export * from './search.model';
4export * from './search.service';
diff --git a/client/src/app/shared/search/search.component.ts b/client/src/app/shared/search/search.component.ts
index c14c2d99c..ed1ce807a 100644
--- a/client/src/app/shared/search/search.component.ts
+++ b/client/src/app/shared/search/search.component.ts
@@ -1,9 +1,10 @@
1import { Component, EventEmitter, Output } from '@angular/core'; 1import { Component, EventEmitter, Output, OnInit } from '@angular/core';
2 2
3import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown'; 3import { DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/components/dropdown';
4 4
5import { Search } from './search.model'; 5import { Search } from './search.model';
6import { SearchField } from './search-field.type'; 6import { SearchField } from './search-field.type';
7import { SearchService } from './search.service'; // Temporary
7 8
8@Component({ 9@Component({
9 selector: 'my-search', 10 selector: 'my-search',
@@ -11,7 +12,7 @@ import { SearchField } from './search-field.type';
11 directives: [ DROPDOWN_DIRECTIVES ] 12 directives: [ DROPDOWN_DIRECTIVES ]
12}) 13})
13 14
14export class SearchComponent { 15export class SearchComponent implements OnInit {
15 @Output() search = new EventEmitter<Search>(); 16 @Output() search = new EventEmitter<Search>();
16 17
17 fieldChoices = { 18 fieldChoices = {
@@ -26,6 +27,21 @@ export class SearchComponent {
26 value: '' 27 value: ''
27 }; 28 };
28 29
30 constructor(private searchService: SearchService) {}
31
32 ngOnInit() {
33 this.searchService.searchChanged.subscribe(
34 newSearchCriterias => {
35 // Put a field by default
36 if (!newSearchCriterias.field) {
37 newSearchCriterias.field = 'name';
38 }
39
40 this.searchCriterias = newSearchCriterias;
41 }
42 );
43 }
44
29 get choiceKeys() { 45 get choiceKeys() {
30 return Object.keys(this.fieldChoices); 46 return Object.keys(this.fieldChoices);
31 } 47 }
@@ -35,6 +51,7 @@ export class SearchComponent {
35 $event.stopPropagation(); 51 $event.stopPropagation();
36 52
37 this.searchCriterias.field = choice; 53 this.searchCriterias.field = choice;
54 this.doSearch();
38 } 55 }
39 56
40 doSearch() { 57 doSearch() {
diff --git a/client/src/app/shared/search/search.service.ts b/client/src/app/shared/search/search.service.ts
new file mode 100644
index 000000000..787c02d2b
--- /dev/null
+++ b/client/src/app/shared/search/search.service.ts
@@ -0,0 +1,15 @@
1import { Injectable } from '@angular/core';
2import { Subject } from 'rxjs/Subject';
3
4import { Search } from './search.model';
5
6// This class is needed to communicate between videos/list and search component
7// Remove it when we'll be able to subscribe to router changes
8@Injectable()
9export class SearchService {
10 searchChanged: Subject<Search>;
11
12 constructor() {
13 this.searchChanged = new Subject<Search>();
14 }
15}
diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/videos/shared/video.model.ts
index 614403d79..65417f751 100644
--- a/client/src/app/videos/shared/video.model.ts
+++ b/client/src/app/videos/shared/video.model.ts
@@ -9,6 +9,7 @@ export class Video {
9 magnetUri: string; 9 magnetUri: string;
10 name: string; 10 name: string;
11 podUrl: string; 11 podUrl: string;
12 tags: string[];
12 thumbnailPath: string; 13 thumbnailPath: string;
13 14
14 private static createByString(author: string, podUrl: string) { 15 private static createByString(author: string, podUrl: string) {
@@ -42,6 +43,7 @@ export class Video {
42 magnetUri: string, 43 magnetUri: string,
43 name: string, 44 name: string,
44 podUrl: string, 45 podUrl: string,
46 tags: string[],
45 thumbnailPath: string 47 thumbnailPath: string
46 }) { 48 }) {
47 this.author = hash.author; 49 this.author = hash.author;
@@ -53,6 +55,7 @@ export class Video {
53 this.magnetUri = hash.magnetUri; 55 this.magnetUri = hash.magnetUri;
54 this.name = hash.name; 56 this.name = hash.name;
55 this.podUrl = hash.podUrl; 57 this.podUrl = hash.podUrl;
58 this.tags = hash.tags;
56 this.thumbnailPath = hash.thumbnailPath; 59 this.thumbnailPath = hash.thumbnailPath;
57 60
58 this.by = Video.createByString(hash.author, hash.podUrl); 61 this.by = Video.createByString(hash.author, hash.podUrl);
diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
index 6b2eb9377..bcd78c7cb 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -21,12 +21,12 @@
21 ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag" 21 ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
22 > 22 >
23 <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning"> 23 <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning">
24 A tag should be between 2 and 10 characters long 24 A tag should be between 2 and 10 characters (alphanumeric) long
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="tags"> 28 <div class="tags">
29 <div class="label label-info tag" *ngFor="let tag of video.tags"> 29 <div class="label label-primary tag" *ngFor="let tag of video.tags">
30 {{ tag }} 30 {{ tag }}
31 <span class="remove" (click)="removeTag(tag)">x</span> 31 <span class="remove" (click)="removeTag(tag)">x</span>
32 </div> 32 </div>
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 2b45ea125..7d8fbdc29 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -1,6 +1,6 @@
1import { Control, ControlGroup, Validators } from '@angular/common'; 1import { Control, ControlGroup, Validators } from '@angular/common';
2import { Component, ElementRef, OnInit } from '@angular/core'; 2import { Component, ElementRef, OnInit } from '@angular/core';
3import { Router } from '@angular/router-deprecated'; 3import { Router } from '@angular/router';
4 4
5import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 5import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
6import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; 6import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index 059317383..46263eb65 100644
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/client/src/app/videos/video-list/video-list.component.ts
@@ -1,5 +1,5 @@
1import { Component, OnInit } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated'; 2import { Router, ROUTER_DIRECTIVES, RouteSegment } from '@angular/router';
3 3
4import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination'; 4import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
5 5
@@ -13,6 +13,7 @@ import {
13import { AuthService, Search, SearchField, User } from '../../shared'; 13import { AuthService, Search, SearchField, User } from '../../shared';
14import { VideoMiniatureComponent } from './video-miniature.component'; 14import { VideoMiniatureComponent } from './video-miniature.component';
15import { VideoSortComponent } from './video-sort.component'; 15import { VideoSortComponent } from './video-sort.component';
16import { SearchService } from '../../shared';
16 17
17@Component({ 18@Component({
18 selector: 'my-videos-list', 19 selector: 'my-videos-list',
@@ -37,22 +38,26 @@ export class VideoListComponent implements OnInit {
37 constructor( 38 constructor(
38 private authService: AuthService, 39 private authService: AuthService,
39 private router: Router, 40 private router: Router,
40 private routeParams: RouteParams, 41 private routeSegment: RouteSegment,
41 private videoService: VideoService 42 private videoService: VideoService,
42 ) { 43 private searchService: SearchService // Temporary
43 this.search = { 44 ) {}
44 value: this.routeParams.get('search'),
45 field: <SearchField>this.routeParams.get('field')
46 };
47
48 this.sort = <SortField>this.routeParams.get('sort') || '-createdDate';
49 }
50 45
51 ngOnInit() { 46 ngOnInit() {
52 if (this.authService.isLoggedIn()) { 47 if (this.authService.isLoggedIn()) {
53 this.user = User.load(); 48 this.user = User.load();
54 } 49 }
55 50
51 this.search = {
52 value: this.routeSegment.getParam('search'),
53 field: <SearchField>this.routeSegment.getParam('field')
54 };
55
56 // Temporary
57 this.searchChanged(this.search);
58
59 this.sort = <SortField>this.routeSegment.getParam('sort') || '-createdDate';
60
56 this.getVideos(); 61 this.getVideos();
57 } 62 }
58 63
@@ -62,7 +67,7 @@ export class VideoListComponent implements OnInit {
62 67
63 let observable = null; 68 let observable = null;
64 69
65 if (this.search.value !== null) { 70 if (this.search.value) {
66 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort); 71 observable = this.videoService.searchVideos(this.search, this.pagination, this.sort);
67 } else { 72 } else {
68 observable = this.videoService.getVideos(this.pagination, this.sort); 73 observable = this.videoService.getVideos(this.pagination, this.sort);
@@ -99,7 +104,10 @@ export class VideoListComponent implements OnInit {
99 params.search = this.search.value; 104 params.search = this.search.value;
100 } 105 }
101 106
102 this.router.navigate(['VideosList', params]); 107 this.router.navigate(['/videos/list', params]);
103 this.getVideos(); 108 }
109
110 searchChanged(search: Search) {
111 this.searchService.searchChanged.next(search);
104 } 112 }
105} 113}
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 244254b5a..92e19bb8b 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -1,6 +1,6 @@
1<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()"> 1<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()">
2 <a 2 <a
3 [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description" 3 [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
4 class="video-miniature-thumbnail" 4 class="video-miniature-thumbnail"
5 > 5 >
6 <img [attr.src]="video.thumbnailPath" alt="video thumbnail" /> 6 <img [attr.src]="video.thumbnailPath" alt="video thumbnail" />
@@ -12,11 +12,15 @@
12 ></span> 12 ></span>
13 13
14 <div class="video-miniature-informations"> 14 <div class="video-miniature-informations">
15 <a [routerLink]="['VideosWatch', { id: video.id }]" class="video-miniature-name"> 15 <span class="video-miniature-name-tags">
16 <span>{{ video.name }}</span> 16 <a [routerLink]="['/videos/watch', video.id]" class="video-miniature-name">{{ video.name }}</a>
17 </a>
18 17
19 <span class="video-miniature-author">by {{ video.by }}</span> 18 <span *ngFor="let tag of video.tags" class="video-miniature-tag">
19 <a [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">{{ tag }}</a>
20 </span>
21 </span>
22
23 <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author">by {{ video.by }}</a>
20 <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span> 24 <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span>
21 </div> 25 </div>
22</div> 26</div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 3aa0ca63b..40d37b83f 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -1,5 +1,5 @@
1.video-miniature { 1.video-miniature {
2 height: 200px; 2 margin-top: 30px;
3 display: inline-block; 3 display: inline-block;
4 position: relative; 4 position: relative;
5 5
@@ -35,13 +35,34 @@
35 35
36 .video-miniature-informations { 36 .video-miniature-informations {
37 margin-left: 3px; 37 margin-left: 3px;
38 width: 200px;
38 39
39 .video-miniature-name { 40 .video-miniature-name-tags {
40 display: block; 41 display: block;
41 font-weight: bold;
42 42
43 &:hover { 43 .video-miniature-name {
44 text-decoration: none; 44 font-weight: bold;
45
46 &:hover {
47 text-decoration: none;
48 }
49
50 &::after {
51 content: '\002022';
52 margin-left: 3px;
53 }
54 }
55
56 .video-miniature-tag {
57 font-size: 12px;
58 cursor: pointer;
59 transition: opacity 0.5s;
60 position: relative;
61 top: -2px;
62
63 &:hover {
64 opacity: 0.9;
65 }
45 } 66 }
46 } 67 }
47 68
@@ -49,7 +70,16 @@
49 display: block; 70 display: block;
50 margin-left: 1px; 71 margin-left: 1px;
51 font-size: 11px; 72 font-size: 11px;
52 color: rgba(0, 0, 0, 0.5); 73 color: rgb(54, 118, 173);
74 }
75
76 .video-miniature-author {
77 transition: opacity 0.5s;
78
79 &:hover {
80 text-decoration: none;
81 opacity: 0.9;
82 }
53 } 83 }
54 } 84 }
55} 85}
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index 639339b44..90645d67f 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -1,6 +1,6 @@
1import { DatePipe } from '@angular/common'; 1import { DatePipe } from '@angular/common';
2import { Component, Input, Output, EventEmitter } from '@angular/core'; 2import { Component, Input, Output, EventEmitter } from '@angular/core';
3import { ROUTER_DIRECTIVES } from '@angular/router-deprecated'; 3import { ROUTER_DIRECTIVES } from '@angular/router';
4 4
5import { Video, VideoService } from '../shared'; 5import { Video, VideoService } from '../shared';
6import { User } from '../../shared'; 6import { User } from '../../shared';
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 05e844f60..99188bfb3 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,5 +1,5 @@
1import { Component, ElementRef, OnInit } from '@angular/core'; 1import { Component, ElementRef, OnInit } from '@angular/core';
2import { CanDeactivate, ComponentInstruction, RouteParams } from '@angular/router-deprecated'; 2import { CanDeactivate, RouteSegment } from '@angular/router';
3 3
4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
5 5
@@ -30,7 +30,7 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
30 30
31 constructor( 31 constructor(
32 private elementRef: ElementRef, 32 private elementRef: ElementRef,
33 private routeParams: RouteParams, 33 private routeSegment: RouteSegment,
34 private videoService: VideoService, 34 private videoService: VideoService,
35 private webTorrentService: WebTorrentService 35 private webTorrentService: WebTorrentService
36 ) {} 36 ) {}
@@ -74,7 +74,7 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
74 } 74 }
75 75
76 ngOnInit() { 76 ngOnInit() {
77 let id = this.routeParams.get('id'); 77 let id = this.routeSegment.getParam('id');
78 this.videoService.getVideo(id).subscribe( 78 this.videoService.getVideo(id).subscribe(
79 video => { 79 video => {
80 this.video = video; 80 this.video = video;
@@ -84,11 +84,11 @@ export class VideoWatchComponent implements OnInit, CanDeactivate {
84 ); 84 );
85 } 85 }
86 86
87 routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { 87 routerCanDeactivate() {
88 console.log('Removing video from webtorrent.'); 88 console.log('Removing video from webtorrent.');
89 clearInterval(this.torrentInfosInterval); 89 clearInterval(this.torrentInfosInterval);
90 this.webTorrentService.remove(this.video.magnetUri); 90 this.webTorrentService.remove(this.video.magnetUri);
91 return true; 91 return Promise.resolve(true);
92 } 92 }
93 93
94 private loadTooLong() { 94 private loadTooLong() {
diff --git a/client/src/vendor.ts b/client/src/vendor.ts
index 437d05822..cf1524578 100644
--- a/client/src/vendor.ts
+++ b/client/src/vendor.ts
@@ -9,7 +9,7 @@ import '@angular/platform-browser-dynamic';
9import '@angular/core'; 9import '@angular/core';
10import '@angular/common'; 10import '@angular/common';
11import '@angular/http'; 11import '@angular/http';
12import '@angular/router-deprecated'; 12import '@angular/router';
13 13
14// RxJS 14// RxJS
15import 'rxjs/Observable'; 15import 'rxjs/Observable';
diff --git a/client/tsconfig.json b/client/tsconfig.json
index fdcf742ea..54b931ba6 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -37,6 +37,7 @@
37 "src/app/shared/search/search-field.type.ts", 37 "src/app/shared/search/search-field.type.ts",
38 "src/app/shared/search/search.component.ts", 38 "src/app/shared/search/search.component.ts",
39 "src/app/shared/search/search.model.ts", 39 "src/app/shared/search/search.model.ts",
40 "src/app/shared/search/search.service.ts",
40 "src/app/shared/users/auth-status.model.ts", 41 "src/app/shared/users/auth-status.model.ts",
41 "src/app/shared/users/auth.service.ts", 42 "src/app/shared/users/auth.service.ts",
42 "src/app/shared/users/index.ts", 43 "src/app/shared/users/index.ts",