aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/angular/videos/components/list
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-05-27 16:23:10 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-05-27 16:23:10 +0200
commit41a2aee38cf812510010da09de9bae53590ec119 (patch)
tree79d55d6ae0ef6f66ccb88890cf1ef1946dc65fb4 /client/angular/videos/components/list
parent157cb9c9713e08ff70078660a32dd77ecb87eabc (diff)
downloadPeerTube-41a2aee38cf812510010da09de9bae53590ec119.tar.gz
PeerTube-41a2aee38cf812510010da09de9bae53590ec119.tar.zst
PeerTube-41a2aee38cf812510010da09de9bae53590ec119.zip
Follow the angular styleguide for the directories structure
Diffstat (limited to 'client/angular/videos/components/list')
-rw-r--r--client/angular/videos/components/list/sort.ts3
-rw-r--r--client/angular/videos/components/list/video-miniature.component.html22
-rw-r--r--client/angular/videos/components/list/video-miniature.component.scss55
-rw-r--r--client/angular/videos/components/list/video-miniature.component.ts47
-rw-r--r--client/angular/videos/components/list/video-sort.component.html5
-rw-r--r--client/angular/videos/components/list/video-sort.component.ts36
-rw-r--r--client/angular/videos/components/list/videos-list.component.html18
-rw-r--r--client/angular/videos/components/list/videos-list.component.scss37
-rw-r--r--client/angular/videos/components/list/videos-list.component.ts100
9 files changed, 0 insertions, 323 deletions
diff --git a/client/angular/videos/components/list/sort.ts b/client/angular/videos/components/list/sort.ts
deleted file mode 100644
index 6e8cc7936..000000000
--- a/client/angular/videos/components/list/sort.ts
+++ /dev/null
@@ -1,3 +0,0 @@
1export type SortField = "name" | "-name"
2 | "duration" | "-duration"
3 | "createdDate" | "-createdDate";
diff --git a/client/angular/videos/components/list/video-miniature.component.html b/client/angular/videos/components/list/video-miniature.component.html
deleted file mode 100644
index 244254b5a..000000000
--- a/client/angular/videos/components/list/video-miniature.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
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/angular/videos/components/list/video-miniature.component.scss b/client/angular/videos/components/list/video-miniature.component.scss
deleted file mode 100644
index 4488abe22..000000000
--- a/client/angular/videos/components/list/video-miniature.component.scss
+++ /dev/null
@@ -1,55 +0,0 @@
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/angular/videos/components/list/video-miniature.component.ts b/client/angular/videos/components/list/video-miniature.component.ts
deleted file mode 100644
index 383c2c609..000000000
--- a/client/angular/videos/components/list/video-miniature.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
1import { Component, Input, Output, EventEmitter } from '@angular/core';
2import { DatePipe } from '@angular/common';
3import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
4
5import { Video } from '../../video';
6import { VideosService } from '../../videos.service';
7import { User } from '../../../users/models/user';
8
9@Component({
10 selector: 'my-video-miniature',
11 styleUrls: [ 'app/angular/videos/components/list/video-miniature.component.css' ],
12 templateUrl: 'app/angular/videos/components/list/video-miniature.component.html',
13 directives: [ ROUTER_DIRECTIVES ],
14 pipes: [ DatePipe ]
15})
16
17export class VideoMiniatureComponent {
18 @Output() removed = new EventEmitter<any>();
19
20 @Input() video: Video;
21 @Input() user: User;
22
23 hovering: boolean = false;
24
25 constructor(private _videosService: VideosService) {}
26
27 onHover() {
28 this.hovering = true;
29 }
30
31 onBlur() {
32 this.hovering = false;
33 }
34
35 displayRemoveIcon(): boolean {
36 return this.hovering && this.video.isRemovableBy(this.user);
37 }
38
39 removeVideo(id: string) {
40 if (confirm('Do you really want to remove this video?')) {
41 this._videosService.removeVideo(id).subscribe(
42 status => this.removed.emit(true),
43 error => alert(error)
44 );
45 }
46 }
47}
diff --git a/client/angular/videos/components/list/video-sort.component.html b/client/angular/videos/components/list/video-sort.component.html
deleted file mode 100644
index 3bece0b22..000000000
--- a/client/angular/videos/components/list/video-sort.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
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/angular/videos/components/list/video-sort.component.ts b/client/angular/videos/components/list/video-sort.component.ts
deleted file mode 100644
index 0373cea38..000000000
--- a/client/angular/videos/components/list/video-sort.component.ts
+++ /dev/null
@@ -1,36 +0,0 @@
1import { Component, Input, Output, EventEmitter } from '@angular/core';
2
3import { SortField } from './sort';
4
5@Component({
6 selector: 'my-video-sort',
7 // styleUrls: [ 'app/angular/videos/components/list/video-sort.component.css' ],
8 templateUrl: 'app/angular/videos/components/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/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
deleted file mode 100644
index edbbaf3ae..000000000
--- a/client/angular/videos/components/list/videos-list.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
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/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
deleted file mode 100644
index 9441d80c3..000000000
--- a/client/angular/videos/components/list/videos-list.component.scss
+++ /dev/null
@@ -1,37 +0,0 @@
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/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
deleted file mode 100644
index 56230e331..000000000
--- a/client/angular/videos/components/list/videos-list.component.ts
+++ /dev/null
@@ -1,100 +0,0 @@
1import { Component, OnInit } from '@angular/core';
2import { ROUTER_DIRECTIVES, RouteParams, Router } from '@angular/router-deprecated';
3
4import { PAGINATION_DIRECTIVES } from 'ng2-bootstrap/components/pagination';
5
6import { AuthService } from '../../../users/services/auth.service';
7import { Pagination } from '../../pagination';
8import { User } from '../../../users/models/user';
9import { VideosService } from '../../videos.service';
10import { Video } from '../../video';
11import { VideoMiniatureComponent } from './video-miniature.component';
12import { Search, SearchField } from '../../../app/search';
13import { VideoSortComponent } from './video-sort.component';
14import { SortField } from './sort';
15import { LoaderComponent } from '../../loader.component';
16
17@Component({
18 selector: 'my-videos-list',
19 styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
20 templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
21 directives: [ ROUTER_DIRECTIVES, PAGINATION_DIRECTIVES, VideoMiniatureComponent, VideoSortComponent, LoaderComponent ]
22})
23
24export class VideosListComponent implements OnInit {
25 user: User = null;
26 videos: Video[] = [];
27 pagination: Pagination = {
28 currentPage: 1,
29 itemsPerPage: 9,
30 total: 0
31 };
32 sort: SortField;
33 loading: boolean = false;
34
35 private search: Search;
36
37 constructor(
38 private _authService: AuthService,
39 private _videosService: VideosService,
40 private _routeParams: RouteParams,
41 private _router: Router
42 ) {
43 this.search = {
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
51 ngOnInit() {
52 if (this._authService.isLoggedIn()) {
53 this.user = User.load();
54 }
55
56 this.getVideos();
57 }
58
59 getVideos() {
60 this.loading = true;
61 this.videos = [];
62
63 let observable = null;
64
65 if (this.search.value !== null) {
66 observable = this._videosService.searchVideos(this.search, this.pagination, this.sort);
67 } else {
68 observable = this._videosService.getVideos(this.pagination, this.sort);
69 }
70
71 observable.subscribe(
72 ({ videos, totalVideos }) => {
73 this.videos = videos;
74 this.pagination.total = totalVideos;
75 this.loading = false;
76 },
77 error => alert(error)
78 );
79 }
80
81 onRemoved(video: Video): void {
82 this.videos.splice(this.videos.indexOf(video), 1);
83 }
84
85 onSort(sort: SortField) {
86 this.sort = sort;
87
88 const params: any = {
89 sort: this.sort
90 };
91
92 if (this.search.value) {
93 params.search = this.search.value;
94 params.field = this.search.field;
95 }
96
97 this._router.navigate(['VideosList', params]);
98 this.getVideos();
99 }
100}