aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/app/videos')
-rw-r--r--client/app/videos/index.ts4
-rw-r--r--client/app/videos/shared/index.ts5
-rw-r--r--client/app/videos/shared/loader/index.ts1
-rw-r--r--client/app/videos/shared/loader/loader.component.html3
-rw-r--r--client/app/videos/shared/loader/loader.component.scss26
-rw-r--r--client/app/videos/shared/loader/loader.component.ts11
-rw-r--r--client/app/videos/shared/pagination.model.ts5
-rw-r--r--client/app/videos/shared/sort-field.type.ts3
-rw-r--r--client/app/videos/shared/video.model.ts63
-rw-r--r--client/app/videos/shared/video.service.ts79
-rw-r--r--client/app/videos/video-add/index.ts1
-rw-r--r--client/app/videos/video-add/video-add.component.html41
-rw-r--r--client/app/videos/video-add/video-add.component.scss33
-rw-r--r--client/app/videos/video-add/video-add.component.ts68
-rw-r--r--client/app/videos/video-list/index.ts3
-rw-r--r--client/app/videos/video-list/video-list.component.html18
-rw-r--r--client/app/videos/video-list/video-list.component.scss37
-rw-r--r--client/app/videos/video-list/video-list.component.ts101
-rw-r--r--client/app/videos/video-list/video-miniature.component.html22
-rw-r--r--client/app/videos/video-list/video-miniature.component.scss55
-rw-r--r--client/app/videos/video-list/video-miniature.component.ts46
-rw-r--r--client/app/videos/video-list/video-sort.component.html5
-rw-r--r--client/app/videos/video-list/video-sort.component.ts36
-rw-r--r--client/app/videos/video-watch/index.ts1
-rw-r--r--client/app/videos/video-watch/video-watch.component.html10
-rw-r--r--client/app/videos/video-watch/video-watch.component.scss13
-rw-r--r--client/app/videos/video-watch/video-watch.component.ts75
27 files changed, 765 insertions, 0 deletions
diff --git a/client/app/videos/index.ts b/client/app/videos/index.ts
new file mode 100644
index 000000000..1c80ac5e5
--- /dev/null
+++ b/client/app/videos/index.ts
@@ -0,0 +1,4 @@
1export * from './shared/index';
2export * from './video-add/index';
3export * from './video-list/index';
4export * from './video-watch/index';
diff --git a/client/app/videos/shared/index.ts b/client/app/videos/shared/index.ts
new file mode 100644
index 000000000..c535c46fc
--- /dev/null
+++ b/client/app/videos/shared/index.ts
@@ -0,0 +1,5 @@
1export * from './loader/index';
2export * from './pagination.model';
3export * from './sort-field.type';
4export * from './video.model';
5export * from './video.service';
diff --git a/client/app/videos/shared/loader/index.ts b/client/app/videos/shared/loader/index.ts
new file mode 100644
index 000000000..ab22584e4
--- /dev/null
+++ b/client/app/videos/shared/loader/index.ts
@@ -0,0 +1 @@
export * from './loader.component';
diff --git a/client/app/videos/shared/loader/loader.component.html b/client/app/videos/shared/loader/loader.component.html
new file mode 100644
index 000000000..d02296a2d
--- /dev/null
+++ b/client/app/videos/shared/loader/loader.component.html
@@ -0,0 +1,3 @@
1<div id="video-loading" class="col-md-12 text-center" *ngIf="loading">
2 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
3</div>
diff --git a/client/app/videos/shared/loader/loader.component.scss b/client/app/videos/shared/loader/loader.component.scss
new file mode 100644
index 000000000..454195811
--- /dev/null
+++ b/client/app/videos/shared/loader/loader.component.scss
@@ -0,0 +1,26 @@
1div {
2 margin-top: 150px;
3}
4
5// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
6.glyphicon-refresh-animate {
7 -animation: spin .7s infinite linear;
8 -ms-animation: spin .7s infinite linear;
9 -webkit-animation: spinw .7s infinite linear;
10 -moz-animation: spinm .7s infinite linear;
11}
12
13@keyframes spin {
14 from { transform: scale(1) rotate(0deg);}
15 to { transform: scale(1) rotate(360deg);}
16}
17
18@-webkit-keyframes spinw {
19 from { -webkit-transform: rotate(0deg);}
20 to { -webkit-transform: rotate(360deg);}
21}
22
23@-moz-keyframes spinm {
24 from { -moz-transform: rotate(0deg);}
25 to { -moz-transform: rotate(360deg);}
26}
diff --git a/client/app/videos/shared/loader/loader.component.ts b/client/app/videos/shared/loader/loader.component.ts
new file mode 100644
index 000000000..666d43bc3
--- /dev/null
+++ b/client/app/videos/shared/loader/loader.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core';
2
3@Component({
4 selector: 'my-loader',
5 styleUrls: [ 'client/app/videos/shared/loader/loader.component.css' ],
6 templateUrl: 'client/app/videos/shared/loader/loader.component.html'
7})
8
9export class LoaderComponent {
10 @Input() loading: boolean;
11}
diff --git a/client/app/videos/shared/pagination.model.ts b/client/app/videos/shared/pagination.model.ts
new file mode 100644
index 000000000..06f7a7875
--- /dev/null
+++ b/client/app/videos/shared/pagination.model.ts
@@ -0,0 +1,5 @@
1export interface Pagination {
2 currentPage: number;
3 itemsPerPage: number;
4 total: number;
5}
diff --git a/client/app/videos/shared/sort-field.type.ts b/client/app/videos/shared/sort-field.type.ts
new file mode 100644
index 000000000..6e8cc7936
--- /dev/null
+++ b/client/app/videos/shared/sort-field.type.ts
@@ -0,0 +1,3 @@
1export type SortField = "name" | "-name"
2 | "duration" | "-duration"
3 | "createdDate" | "-createdDate";
diff --git a/client/app/videos/shared/video.model.ts b/client/app/videos/shared/video.model.ts
new file mode 100644
index 000000000..eec537c9e
--- /dev/null
+++ b/client/app/videos/shared/video.model.ts
@@ -0,0 +1,63 @@
1export class Video {
2 id: string;
3 name: string;
4 description: string;
5 magnetUri: string;
6 podUrl: string;
7 isLocal: boolean;
8 thumbnailPath: string;
9 author: string;
10 createdDate: Date;
11 by: string;
12 duration: string;
13
14 private static createDurationString(duration: number): string {
15 const minutes = Math.floor(duration / 60);
16 const seconds = duration % 60;
17 const minutes_padding = minutes >= 10 ? '' : '0';
18 const seconds_padding = seconds >= 10 ? '' : '0';
19
20 return minutes_padding + minutes.toString() + ':' + seconds_padding + seconds.toString();
21 }
22
23 private static createByString(author: string, podUrl: string): string {
24 let [ host, port ] = podUrl.replace(/^https?:\/\//, '').split(':');
25
26 if (port === '80' || port === '443') {
27 port = '';
28 } else {
29 port = ':' + port;
30 }
31
32 return author + '@' + host + port;
33 }
34
35 constructor(hash: {
36 id: string,
37 name: string,
38 description: string,
39 magnetUri: string,
40 podUrl: string,
41 isLocal: boolean,
42 thumbnailPath: string,
43 author: string,
44 createdDate: string,
45 duration: number;
46 }) {
47 this.id = hash.id;
48 this.name = hash.name;
49 this.description = hash.description;
50 this.magnetUri = hash.magnetUri;
51 this.podUrl = hash.podUrl;
52 this.isLocal = hash.isLocal;
53 this.thumbnailPath = hash.thumbnailPath;
54 this.author = hash.author;
55 this.createdDate = new Date(hash.createdDate);
56 this.duration = Video.createDurationString(hash.duration);
57 this.by = Video.createByString(hash.author, hash.podUrl);
58 }
59
60 isRemovableBy(user): boolean {
61 return this.isLocal === true && user && this.author === user.username;
62 }
63}
diff --git a/client/app/videos/shared/video.service.ts b/client/app/videos/shared/video.service.ts
new file mode 100644
index 000000000..78789c3cc
--- /dev/null
+++ b/client/app/videos/shared/video.service.ts
@@ -0,0 +1,79 @@
1import { Injectable } from '@angular/core';
2import { Http, Response, URLSearchParams } from '@angular/http';
3import { Observable } from 'rxjs/Rx';
4
5import { Pagination } from './pagination.model';
6import { Search } from '../../shared/index';
7import { SortField } from './sort-field.type';
8import { AuthService } from '../../users/index';
9import { Video } from './video.model';
10
11@Injectable()
12export class VideoService {
13 private _baseVideoUrl = '/api/v1/videos/';
14
15 constructor (private http: Http, private _authService: AuthService) {}
16
17 getVideos(pagination: Pagination, sort: SortField) {
18 const params = this.createPaginationParams(pagination);
19
20 if (sort) params.set('sort', sort);
21
22 return this.http.get(this._baseVideoUrl, { search: params })
23 .map(res => res.json())
24 .map(this.extractVideos)
25 .catch(this.handleError);
26 }
27
28 getVideo(id: string) {
29 return this.http.get(this._baseVideoUrl + id)
30 .map(res => <Video> res.json())
31 .catch(this.handleError);
32 }
33
34 removeVideo(id: string) {
35 const options = this._authService.getAuthRequestOptions();
36 return this.http.delete(this._baseVideoUrl + id, options)
37 .map(res => <number> res.status)
38 .catch(this.handleError);
39 }
40
41 searchVideos(search: Search, pagination: Pagination, sort: SortField) {
42 const params = this.createPaginationParams(pagination);
43
44 if (search.field) params.set('field', search.field);
45 if (sort) params.set('sort', sort);
46
47 return this.http.get(this._baseVideoUrl + 'search/' + encodeURIComponent(search.value), { search: params })
48 .map(res => res.json())
49 .map(this.extractVideos)
50 .catch(this.handleError);
51 }
52
53 private extractVideos (body: any) {
54 const videos_json = body.data;
55 const totalVideos = body.total;
56 const videos = [];
57 for (const video_json of videos_json) {
58 videos.push(new Video(video_json));
59 }
60
61 return { videos, totalVideos };
62 }
63
64 private handleError (error: Response) {
65 console.error(error);
66 return Observable.throw(error.json().error || 'Server error');
67 }
68
69 private createPaginationParams(pagination: Pagination) {
70 const params = new URLSearchParams();
71 const start: number = (pagination.currentPage - 1) * pagination.itemsPerPage;
72 const count: number = pagination.itemsPerPage;
73
74 params.set('start', start.toString());
75 params.set('count', count.toString());
76
77 return params;
78 }
79}
diff --git a/client/app/videos/video-add/index.ts b/client/app/videos/video-add/index.ts
new file mode 100644
index 000000000..79488e851
--- /dev/null
+++ b/client/app/videos/video-add/index.ts
@@ -0,0 +1 @@
export * from './video-add.component';
diff --git a/client/app/videos/video-add/video-add.component.html b/client/app/videos/video-add/video-add.component.html
new file mode 100644
index 000000000..80d229cb8
--- /dev/null
+++ b/client/app/videos/video-add/video-add.component.html
@@ -0,0 +1,41 @@
1<h3>Upload a video</h3>
2
3<form (ngSubmit)="uploadFile()" #videoForm="ngForm">
4 <div class="form-group">
5 <label for="name">Video name</label>
6 <input
7 type="text" class="form-control" name="name" id="name" required
8 ngControl="name" #name="ngForm"
9 >
10 <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
11 Name is required
12 </div>
13 </div>
14
15 <div class="form-group">
16 <div class="btn btn-default btn-file">
17 <span>Select the video...</span>
18 <input type="file" name="videofile" id="videofile">
19 </div>
20
21 <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
22 </div>
23
24 <div class="form-group">
25 <label for="description">Description</label>
26 <textarea
27 name="description" id="description" class="form-control" placeholder="Description..." required
28 ngControl="description" #description="ngForm"
29 >
30 </textarea>
31 <div [hidden]="description.valid || description.pristine" class="alert alert-danger">
32 A description is required
33 </div>
34 </div>
35
36 <div id="progress" *ngIf="progressBar.max !== 0">
37 <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
38 </div>
39
40 <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
41</form>
diff --git a/client/app/videos/video-add/video-add.component.scss b/client/app/videos/video-add/video-add.component.scss
new file mode 100644
index 000000000..01195f017
--- /dev/null
+++ b/client/app/videos/video-add/video-add.component.scss
@@ -0,0 +1,33 @@
1.btn-file {
2 position: relative;
3 overflow: hidden;
4}
5
6.btn-file input[type=file] {
7 position: absolute;
8 top: 0;
9 right: 0;
10 min-width: 100%;
11 min-height: 100%;
12 font-size: 100px;
13 text-align: right;
14 filter: alpha(opacity=0);
15 opacity: 0;
16 outline: none;
17 background: white;
18 cursor: inherit;
19 display: block;
20}
21
22.name_file {
23 display: inline-block;
24 margin-left: 10px;
25}
26
27.form-group {
28 margin-bottom: 10px;
29}
30
31#progress {
32 margin-bottom: 10px;
33}
diff --git a/client/app/videos/video-add/video-add.component.ts b/client/app/videos/video-add/video-add.component.ts
new file mode 100644
index 000000000..ca583a103
--- /dev/null
+++ b/client/app/videos/video-add/video-add.component.ts
@@ -0,0 +1,68 @@
1import { Component, ElementRef, OnInit } from '@angular/core';
2import { Router } from '@angular/router-deprecated';
3
4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
5import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar';
6
7import { AuthService, User } from '../../users/index';
8
9// TODO: import it with systemjs
10declare var jQuery:any;
11
12@Component({
13 selector: 'my-videos-add',
14 styleUrls: [ 'client/app/videos/video-add/video-add.component.css' ],
15 templateUrl: 'client/app/videos/video-add/video-add.component.html',
16 directives: [ PROGRESSBAR_DIRECTIVES ],
17 pipes: [ BytesPipe ]
18})
19
20export class VideoAddComponent implements OnInit {
21 user: User;
22 fileToUpload: any;
23 progressBar: { value: number; max: number; } = { value: 0, max: 0 };
24
25 private _form: any;
26
27 constructor(
28 private _router: Router, private _elementRef: ElementRef,
29 private _authService: AuthService
30 ) {}
31
32 ngOnInit() {
33 this.user = User.load();
34 jQuery(this._elementRef.nativeElement).find('#videofile').fileupload({
35 url: '/api/v1/videos',
36 dataType: 'json',
37 singleFileUploads: true,
38 multipart: true,
39 autoupload: false,
40
41 add: (e, data) => {
42 this._form = data;
43 this.fileToUpload = data['files'][0];
44 },
45
46 progressall: (e, data) => {
47 this.progressBar.value = data.loaded;
48 // The server is a little bit slow to answer (has to seed the video)
49 // So we add more time to the progress bar (+10%)
50 this.progressBar.max = data.total + (0.1 * data.total);
51 },
52
53 done: (e, data) => {
54 this.progressBar.value = this.progressBar.max;
55 console.log('Video uploaded.');
56
57 // Print all the videos once it's finished
58 this._router.navigate(['VideosList']);
59 }
60 });
61 }
62
63 uploadFile() {
64 this._form.headers = this._authService.getRequestHeader().toJSON();
65 this._form.formData = jQuery(this._elementRef.nativeElement).find('form').serializeArray();
66 this._form.submit();
67 }
68}
diff --git a/client/app/videos/video-list/index.ts b/client/app/videos/video-list/index.ts
new file mode 100644
index 000000000..1f6d6a4e7
--- /dev/null
+++ b/client/app/videos/video-list/index.ts
@@ -0,0 +1,3 @@
1export * from './video-list.component';
2export * from './video-miniature.component';
3export * from './video-sort.component';
diff --git a/client/app/videos/video-list/video-list.component.html b/client/app/videos/video-list/video-list.component.html
new file mode 100644
index 000000000..edbbaf3ae
--- /dev/null
+++ b/client/app/videos/video-list/video-list.component.html
@@ -0,0 +1,18 @@
1<div class="row videos-info">
2 <div class="col-md-9 videos-total-results"> {{ pagination.total }} videos</div>
3 <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
4</div>
5
6<div class="videos-miniatures">
7 <my-loader [loading]="loading"></my-loader>
8
9 <div class="col-md-12 no-video" *ngIf="!loading && videos.length === 0">There is no video.</div>
10
11 <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" (removed)="onRemoved(video)">
12 </my-video-miniature>
13</div>
14
15<pagination
16 [totalItems]="pagination.total" [itemsPerPage]="pagination.itemsPerPage" [(ngModel)]="pagination.currentPage"
17 (ngModelChange)="getVideos()"
18></pagination>
diff --git a/client/app/videos/video-list/video-list.component.scss b/client/app/videos/video-list/video-list.component.scss
new file mode 100644
index 000000000..9441d80c3
--- /dev/null
+++ b/client/app/videos/video-list/video-list.component.scss
@@ -0,0 +1,37 @@
1.videos-info {
2
3 padding-bottom: 20px;
4 margin-bottom: 20px;
5 border-bottom: 1px solid #f1f1f1;
6 height: 40px;
7 line-height: 40px;
8 width: 765px;
9 margin-left: 15px;
10
11 my-video-sort {
12 padding-right: 0;
13 }
14
15 .videos-total-results {
16 font-size: 13px;
17 padding-left: 0;
18 }
19}
20
21.videos-miniatures {
22 min-height: 600px;
23
24 my-videos-miniature {
25 display: inline-block;
26 }
27
28 .no-video {
29 margin-top: 50px;
30 text-align: center;
31 }
32}
33
34pagination {
35 display: block;
36 text-align: center;
37}
diff --git a/client/app/videos/video-list/video-list.component.ts b/client/app/videos/video-list/video-list.component.ts
new file mode 100644
index 000000000..a88fb379a
--- /dev/null
+++ b/client/app/videos/video-list/video-list.component.ts
@@ -0,0 +1,101 @@
1import { Component, OnInit } from '@angular/core';
2import { Router, ROUTER_DIRECTIVES, RouteParams } from '@angular/router-deprecated';
3
4import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
5
6import {
7 LoaderComponent,
8 Pagination,
9 SortField,
10 Video,
11 VideoService
12} from '../shared/index';
13import { Search, SearchField } from '../../shared/index';
14import { AuthService, User } from '../../users/index';
15import { VideoMiniatureComponent } from './video-miniature.component';
16import { VideoSortComponent } from './video-sort.component';
17
18@Component({
19 selector: 'my-videos-list',
20 styleUrls: [ 'client/app/videos/video-list/video-list.component.css' ],
21 templateUrl: 'client/app/videos/video-list/video-list.component.html',
22 directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
23})
24
25export class VideoListComponent implements OnInit {
26 user: User = null;
27 videos: Video[] = [];
28 pagination: Pagination = {
29 currentPage: 1,
30 itemsPerPage: 9,
31 total: 0
32 };
33 sort: SortField;
34 loading: boolean = false;
35
36 private search: Search;
37
38 constructor(
39 private _authService: AuthService,
40 private _videoService: VideoService,
41 private _routeParams: RouteParams,
42 private _router: Router
43 ) {
44 this.search = {
45 value: this._routeParams.get('search'),
46 field: <SearchField>this._routeParams.get('field')
47 };
48
49 this.sort = <SortField>this._routeParams.get('sort') || '-createdDate';
50 }
51
52 ngOnInit() {
53 if (this._authService.isLoggedIn()) {
54 this.user = User.load();
55 }
56
57 this.getVideos();
58 }
59
60 getVideos() {
61 this.loading = true;
62 this.videos = [];
63
64 let observable = null;
65
66 if (this.search.value !== null) {
67 observable = this._videoService.searchVideos(this.search, this.pagination, this.sort);
68 } else {
69 observable = this._videoService.getVideos(this.pagination, this.sort);
70 }
71
72 observable.subscribe(
73 ({ videos, totalVideos }) => {
74 this.videos = videos;
75 this.pagination.total = totalVideos;
76 this.loading = false;
77 },
78 error => alert(error)
79 );
80 }
81
82 onRemoved(video: Video): void {
83 this.videos.splice(this.videos.indexOf(video), 1);
84 }
85
86 onSort(sort: SortField) {
87 this.sort = sort;
88
89 const params: any = {
90 sort: this.sort
91 };
92
93 if (this.search.value) {
94 params.search = this.search.value;
95 params.field = this.search.field;
96 }
97
98 this._router.navigate(['VideosList', params]);
99 this.getVideos();
100 }
101}
diff --git a/client/app/videos/video-list/video-miniature.component.html b/client/app/videos/video-list/video-miniature.component.html
new file mode 100644
index 000000000..244254b5a
--- /dev/null
+++ b/client/app/videos/video-list/video-miniature.component.html
@@ -0,0 +1,22 @@
1<div class="video-miniature col-md-4" (mouseenter)="onHover()" (mouseleave)="onBlur()">
2 <a
3 [routerLink]="['VideosWatch', { id: video.id }]" [attr.title]="video.description"
4 class="video-miniature-thumbnail"
5 >
6 <img [attr.src]="video.thumbnailPath" alt="video thumbnail" />
7 <span class="video-miniature-duration">{{ video.duration }}</span>
8 </a>
9 <span
10 *ngIf="displayRemoveIcon()" (click)="removeVideo(video.id)"
11 class="video-miniature-remove glyphicon glyphicon-remove"
12 ></span>
13
14 <div class="video-miniature-informations">
15 <a [routerLink]="['VideosWatch', { id: video.id }]" class="video-miniature-name">
16 <span>{{ video.name }}</span>
17 </a>
18
19 <span class="video-miniature-author">by {{ video.by }}</span>
20 <span class="video-miniature-created-date">on {{ video.createdDate | date:'short' }}</span>
21 </div>
22</div>
diff --git a/client/app/videos/video-list/video-miniature.component.scss b/client/app/videos/video-list/video-miniature.component.scss
new file mode 100644
index 000000000..4488abe22
--- /dev/null
+++ b/client/app/videos/video-list/video-miniature.component.scss
@@ -0,0 +1,55 @@
1.video-miniature {
2 height: 200px;
3 display: inline-block;
4 position: relative;
5
6 .video-miniature-thumbnail {
7 display: block;
8 position: relative;
9
10 .video-miniature-duration {
11 position: absolute;
12 right: 60px;
13 bottom: 2px;
14 display: inline-block;
15 background-color: rgba(0, 0, 0, 0.8);
16 color: rgba(255, 255, 255, 0.8);
17 padding: 2px;
18 font-size: 11px;
19 }
20 }
21
22 .video-miniature-remove {
23 display: inline-block;
24 position: absolute;
25 left: 16px;
26 background-color: rgba(0, 0, 0, 0.8);
27 color: rgba(255, 255, 255, 0.8);
28 padding: 2px;
29 cursor: pointer;
30
31 &:hover {
32 color: rgba(255, 255, 255, 0.9);
33 }
34 }
35
36 .video-miniature-informations {
37 margin-left: 3px;
38
39 .video-miniature-name {
40 display: block;
41 font-weight: bold;
42
43 &:hover {
44 text-decoration: none;
45 }
46 }
47
48 .video-miniature-author, .video-miniature-created-date {
49 display: block;
50 margin-left: 1px;
51 font-size: 11px;
52 color: rgba(0, 0, 0, 0.5);
53 }
54 }
55}
diff --git a/client/app/videos/video-list/video-miniature.component.ts b/client/app/videos/video-list/video-miniature.component.ts
new file mode 100644
index 000000000..817636768
--- /dev/null
+++ b/client/app/videos/video-list/video-miniature.component.ts
@@ -0,0 +1,46 @@
1import { DatePipe } from '@angular/common';
2import { Component, Input, Output, EventEmitter } from '@angular/core';
3import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
4
5import { Video, VideoService } from '../shared/index';
6import { User } from '../../users/index';
7
8@Component({
9 selector: 'my-video-miniature',
10 styleUrls: [ 'client/app/videos/video-list/video-miniature.component.css' ],
11 templateUrl: 'client/app/videos/video-list/video-miniature.component.html',
12 directives: [ ROUTER_DIRECTIVES ],
13 pipes: [ DatePipe ]
14})
15
16export class VideoMiniatureComponent {
17 @Output() removed = new EventEmitter<any>();
18
19 @Input() video: Video;
20 @Input() user: User;
21
22 hovering: boolean = false;
23
24 constructor(private _videoService: VideoService) {}
25
26 onHover() {
27 this.hovering = true;
28 }
29
30 onBlur() {
31 this.hovering = false;
32 }
33
34 displayRemoveIcon(): boolean {
35 return this.hovering && this.video.isRemovableBy(this.user);
36 }
37
38 removeVideo(id: string) {
39 if (confirm('Do you really want to remove this video?')) {
40 this._videoService.removeVideo(id).subscribe(
41 status => this.removed.emit(true),
42 error => alert(error)
43 );
44 }
45 }
46}
diff --git a/client/app/videos/video-list/video-sort.component.html b/client/app/videos/video-list/video-sort.component.html
new file mode 100644
index 000000000..3bece0b22
--- /dev/null
+++ b/client/app/videos/video-list/video-sort.component.html
@@ -0,0 +1,5 @@
1<select class="form-control input-sm" [(ngModel)]="currentSort" (ngModelChange)="onSortChange()">
2 <option *ngFor="let choice of choiceKeys" [value]="choice">
3 {{ getStringChoice(choice) }}
4 </option>
5</select>
diff --git a/client/app/videos/video-list/video-sort.component.ts b/client/app/videos/video-list/video-sort.component.ts
new file mode 100644
index 000000000..d00d7ed49
--- /dev/null
+++ b/client/app/videos/video-list/video-sort.component.ts
@@ -0,0 +1,36 @@
1import { Component, EventEmitter, Input, Output } from '@angular/core';
2
3import { SortField } from '../shared/index';
4
5@Component({
6 selector: 'my-video-sort',
7 // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ],
8 templateUrl: 'client/app/videos/video-list/video-sort.component.html'
9})
10
11export class VideoSortComponent {
12 @Output() sort = new EventEmitter<any>();
13
14 @Input() currentSort: SortField;
15
16 sortChoices = {
17 'name': 'Name - Asc',
18 '-name': 'Name - Desc',
19 'duration': 'Duration - Asc',
20 '-duration': 'Duration - Desc',
21 'createdDate': 'Created Date - Asc',
22 '-createdDate': 'Created Date - Desc'
23 };
24
25 get choiceKeys() {
26 return Object.keys(this.sortChoices);
27 }
28
29 getStringChoice(choiceKey: SortField): string {
30 return this.sortChoices[choiceKey];
31 }
32
33 onSortChange() {
34 this.sort.emit(this.currentSort);
35 }
36}
diff --git a/client/app/videos/video-watch/index.ts b/client/app/videos/video-watch/index.ts
new file mode 100644
index 000000000..2228b6ed7
--- /dev/null
+++ b/client/app/videos/video-watch/index.ts
@@ -0,0 +1 @@
export * from './video-watch.component';
diff --git a/client/app/videos/video-watch/video-watch.component.html b/client/app/videos/video-watch/video-watch.component.html
new file mode 100644
index 000000000..6c36b27e2
--- /dev/null
+++ b/client/app/videos/video-watch/video-watch.component.html
@@ -0,0 +1,10 @@
1<my-loader [loading]="loading"></my-loader>
2
3<div class="embed-responsive embed-responsive-19by9">
4</div>
5
6<div id="torrent-info">
7 <div id="torrent-info-download">Download: {{ downloadSpeed | bytes }}/s</div>
8 <div id="torrent-info-upload">Upload: {{ uploadSpeed | bytes }}/s</div>
9 <div id="torrent-info-peers">Number of peers: {{ numPeers }}</div>
10<div>
diff --git a/client/app/videos/video-watch/video-watch.component.scss b/client/app/videos/video-watch/video-watch.component.scss
new file mode 100644
index 000000000..1228d42f4
--- /dev/null
+++ b/client/app/videos/video-watch/video-watch.component.scss
@@ -0,0 +1,13 @@
1.embed-responsive {
2 height: 500px;
3}
4
5#torrent-info {
6 font-size: 10px;
7
8 div {
9 display: inline-block;
10 width: 33%;
11 text-align: center;
12 }
13}
diff --git a/client/app/videos/video-watch/video-watch.component.ts b/client/app/videos/video-watch/video-watch.component.ts
new file mode 100644
index 000000000..891e6563f
--- /dev/null
+++ b/client/app/videos/video-watch/video-watch.component.ts
@@ -0,0 +1,75 @@
1import { Component, ElementRef, OnInit } from '@angular/core';
2import { CanDeactivate, ComponentInstruction, RouteParams } from '@angular/router-deprecated';
3
4import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
5
6import { LoaderComponent, Video, VideoService } from '../shared/index';
7
8// TODO import it with systemjs
9declare var WebTorrent: any;
10
11@Component({
12 selector: 'my-video-watch',
13 templateUrl: 'client/app/videos/video-watch/video-watch.component.html',
14 styleUrls: [ 'client/app/videos/video-watch/video-watch.component.css' ],
15 directives: [ LoaderComponent ],
16 pipes: [ BytesPipe ]
17})
18
19export class VideoWatchComponent implements OnInit, CanDeactivate {
20 video: Video;
21 downloadSpeed: number;
22 uploadSpeed: number;
23 numPeers: number;
24 loading: boolean = false;
25
26 private _interval: NodeJS.Timer;
27 private client: any;
28
29 constructor(
30 private _videoService: VideoService,
31 private _routeParams: RouteParams,
32 private _elementRef: ElementRef
33 ) {
34 // TODO: use a service
35 this.client = new WebTorrent({ dht: false });
36 }
37
38 ngOnInit() {
39 let id = this._routeParams.get('id');
40 this._videoService.getVideo(id).subscribe(
41 video => this.loadVideo(video),
42 error => alert(error)
43 );
44 }
45
46 loadVideo(video: Video) {
47 this.loading = true;
48 this.video = video;
49 console.log('Adding ' + this.video.magnetUri + '.');
50 this.client.add(this.video.magnetUri, (torrent) => {
51 this.loading = false;
52 console.log('Added ' + this.video.magnetUri + '.');
53 torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => {
54 if (err) {
55 alert('Cannot append the file.');
56 console.error(err);
57 }
58 });
59
60 // Refresh each second
61 this._interval = setInterval(() => {
62 this.downloadSpeed = torrent.downloadSpeed;
63 this.uploadSpeed = torrent.uploadSpeed;
64 this.numPeers = torrent.numPeers;
65 }, 1000);
66 });
67 }
68
69 routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any {
70 console.log('Removing video from webtorrent.');
71 clearInterval(this._interval);
72 this.client.remove(this.video.magnetUri);
73 return true;
74 }
75}
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-18 08:16:42 +0000