diff options
Diffstat (limited to 'client/src/app/videos/video-list')
9 files changed, 11 insertions, 190 deletions
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html deleted file mode 100644 index bd4f6b1f8..000000000 --- a/client/src/app/videos/video-list/shared/abstract-video-list.html +++ /dev/null | |||
@@ -1,19 +0,0 @@ | |||
1 | <div class="margin-content"> | ||
2 | <div class="title-page title-page-single"> | ||
3 | {{ titlePage }} | ||
4 | </div> | ||
5 | |||
6 | <div | ||
7 | infiniteScroll | ||
8 | [infiniteScrollUpDistance]="1.5" | ||
9 | [infiniteScrollDistance]="0.5" | ||
10 | (scrolled)="onNearOfBottom()" | ||
11 | (scrolledUp)="onNearOfTop()" | ||
12 | > | ||
13 | <my-video-miniature | ||
14 | class="ng-animate" | ||
15 | *ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort" | ||
16 | > | ||
17 | </my-video-miniature> | ||
18 | </div> | ||
19 | </div> | ||
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss deleted file mode 100644 index e69de29bb..000000000 --- a/client/src/app/videos/video-list/shared/abstract-video-list.scss +++ /dev/null | |||
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts deleted file mode 100644 index a684ffef4..000000000 --- a/client/src/app/videos/video-list/shared/abstract-video-list.ts +++ /dev/null | |||
@@ -1,121 +0,0 @@ | |||
1 | import { OnDestroy, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | |||
4 | import { NotificationsService } from 'angular2-notifications' | ||
5 | import { Observable } from 'rxjs/Observable' | ||
6 | import { Subscription } from 'rxjs/Subscription' | ||
7 | |||
8 | import { SortField, Video, VideoPagination } from '../../shared' | ||
9 | |||
10 | export abstract class AbstractVideoList implements OnInit, OnDestroy { | ||
11 | pagination: VideoPagination = { | ||
12 | currentPage: 1, | ||
13 | itemsPerPage: 25, | ||
14 | totalItems: null | ||
15 | } | ||
16 | sort: SortField = '-createdAt' | ||
17 | videos: Video[] = [] | ||
18 | |||
19 | protected notificationsService: NotificationsService | ||
20 | protected router: Router | ||
21 | protected route: ActivatedRoute | ||
22 | protected subActivatedRoute: Subscription | ||
23 | |||
24 | protected abstract currentRoute: string | ||
25 | |||
26 | abstract titlePage: string | ||
27 | private loadedPages: { [ id: number ]: boolean } = {} | ||
28 | |||
29 | abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> | ||
30 | |||
31 | ngOnInit () { | ||
32 | // Subscribe to route changes | ||
33 | const routeParams = this.route.snapshot.params | ||
34 | this.loadRouteParams(routeParams) | ||
35 | this.loadMoreVideos('after') | ||
36 | } | ||
37 | |||
38 | ngOnDestroy () { | ||
39 | if (this.subActivatedRoute) { | ||
40 | this.subActivatedRoute.unsubscribe() | ||
41 | } | ||
42 | } | ||
43 | |||
44 | onNearOfTop () { | ||
45 | if (this.pagination.currentPage > 1) { | ||
46 | this.previousPage() | ||
47 | } | ||
48 | } | ||
49 | |||
50 | onNearOfBottom () { | ||
51 | if (this.hasMoreVideos()) { | ||
52 | this.nextPage() | ||
53 | } | ||
54 | } | ||
55 | |||
56 | loadMoreVideos (where: 'before' | 'after') { | ||
57 | if (this.loadedPages[this.pagination.currentPage] === true) return | ||
58 | |||
59 | const observable = this.getVideosObservable() | ||
60 | |||
61 | observable.subscribe( | ||
62 | ({ videos, totalVideos }) => { | ||
63 | this.loadedPages[this.pagination.currentPage] = true | ||
64 | this.pagination.totalItems = totalVideos | ||
65 | |||
66 | if (where === 'before') { | ||
67 | this.videos = videos.concat(this.videos) | ||
68 | } else { | ||
69 | this.videos = this.videos.concat(videos) | ||
70 | } | ||
71 | }, | ||
72 | error => this.notificationsService.error('Error', error.text) | ||
73 | ) | ||
74 | } | ||
75 | |||
76 | protected hasMoreVideos () { | ||
77 | if (!this.pagination.totalItems) return true | ||
78 | |||
79 | const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage | ||
80 | return maxPage > this.pagination.currentPage | ||
81 | } | ||
82 | |||
83 | protected previousPage () { | ||
84 | this.pagination.currentPage-- | ||
85 | |||
86 | this.setNewRouteParams() | ||
87 | this.loadMoreVideos('before') | ||
88 | } | ||
89 | |||
90 | protected nextPage () { | ||
91 | this.pagination.currentPage++ | ||
92 | |||
93 | this.setNewRouteParams() | ||
94 | this.loadMoreVideos('after') | ||
95 | } | ||
96 | |||
97 | protected buildRouteParams () { | ||
98 | // There is always a sort and a current page | ||
99 | const params = { | ||
100 | sort: this.sort, | ||
101 | page: this.pagination.currentPage | ||
102 | } | ||
103 | |||
104 | return params | ||
105 | } | ||
106 | |||
107 | protected loadRouteParams (routeParams: { [ key: string ]: any }) { | ||
108 | this.sort = routeParams['sort'] as SortField || '-createdAt' | ||
109 | |||
110 | if (routeParams['page'] !== undefined) { | ||
111 | this.pagination.currentPage = parseInt(routeParams['page'], 10) | ||
112 | } else { | ||
113 | this.pagination.currentPage = 1 | ||
114 | } | ||
115 | } | ||
116 | |||
117 | protected setNewRouteParams () { | ||
118 | const routeParams = this.buildRouteParams() | ||
119 | this.router.navigate([ this.currentRoute, routeParams ]) | ||
120 | } | ||
121 | } | ||
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts index 170ca4832..2778f2d9e 100644 --- a/client/src/app/videos/video-list/shared/index.ts +++ b/client/src/app/videos/video-list/shared/index.ts | |||
@@ -1,2 +1 @@ | |||
1 | export * from './abstract-video-list' | ||
2 | export * from './video-miniature.component' | export * from './video-miniature.component' | |
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html index aea85b6c6..f2756ca3d 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.html +++ b/client/src/app/videos/video-list/shared/video-miniature.component.html | |||
@@ -1,14 +1,5 @@ | |||
1 | <div class="video-miniature"> | 1 | <div class="video-miniature"> |
2 | <a | 2 | <my-video-thumbnail [video]="video" [nsfw]="isVideoNSFWForThisUser()"></my-video-thumbnail> |
3 | [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description" | ||
4 | class="video-miniature-thumbnail" | ||
5 | > | ||
6 | <img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }" /> | ||
7 | |||
8 | <div class="video-miniature-thumbnail-overlay"> | ||
9 | {{ video.durationLabel }} | ||
10 | </div> | ||
11 | </a> | ||
12 | 3 | ||
13 | <div class="video-miniature-information"> | 4 | <div class="video-miniature-information"> |
14 | <span class="video-miniature-name"> | 5 | <span class="video-miniature-name"> |
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss index ed15864d9..658d7af9d 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.scss +++ b/client/src/app/videos/video-list/shared/video-miniature.component.scss | |||
@@ -5,35 +5,6 @@ | |||
5 | height: 175px; | 5 | height: 175px; |
6 | vertical-align: top; | 6 | vertical-align: top; |
7 | 7 | ||
8 | .video-miniature-thumbnail { | ||
9 | display: inline-block; | ||
10 | position: relative; | ||
11 | border-radius: 4px; | ||
12 | overflow: hidden; | ||
13 | |||
14 | &:hover { | ||
15 | text-decoration: none !important; | ||
16 | } | ||
17 | |||
18 | img.blur-filter { | ||
19 | filter: blur(5px); | ||
20 | transform : scale(1.03); | ||
21 | } | ||
22 | |||
23 | .video-miniature-thumbnail-overlay { | ||
24 | position: absolute; | ||
25 | right: 5px; | ||
26 | bottom: 5px; | ||
27 | display: inline-block; | ||
28 | background-color: rgba(0, 0, 0, 0.7); | ||
29 | color: #fff; | ||
30 | font-size: 12px; | ||
31 | font-weight: $font-bold; | ||
32 | border-radius: 3px; | ||
33 | padding: 0 5px; | ||
34 | } | ||
35 | } | ||
36 | |||
37 | .video-miniature-information { | 8 | .video-miniature-information { |
38 | width: 200px; | 9 | width: 200px; |
39 | margin-top: 2px; | 10 | margin-top: 2px; |
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts index e5a87907b..e8fc8e911 100644 --- a/client/src/app/videos/video-list/shared/video-miniature.component.ts +++ b/client/src/app/videos/video-list/shared/video-miniature.component.ts | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component, Input } from '@angular/core' | 1 | import { Component, Input } from '@angular/core' |
2 | |||
3 | import { SortField, Video } from '../../shared' | ||
4 | import { User } from '../../../shared' | 2 | import { User } from '../../../shared' |
3 | import { SortField } from '../../../shared/video/sort-field.type' | ||
4 | import { Video } from '../../../shared/video/video.model' | ||
5 | 5 | ||
6 | @Component({ | 6 | @Component({ |
7 | selector: 'my-video-miniature', | 7 | selector: 'my-video-miniature', |
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts index 9bf69bd78..d48804414 100644 --- a/client/src/app/videos/video-list/video-recently-added.component.ts +++ b/client/src/app/videos/video-list/video-recently-added.component.ts | |||
@@ -1,13 +1,13 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | 1 | import { Component, OnDestroy, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { VideoService } from '../shared' | 4 | import { VideoService } from '../../shared/video/video.service' |
5 | import { AbstractVideoList } from './shared' | 5 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' |
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'my-videos-recently-added', | 8 | selector: 'my-videos-recently-added', |
9 | styleUrls: [ './shared/abstract-video-list.scss' ], | 9 | styleUrls: [ '../../shared/video/abstract-video-list.scss' ], |
10 | templateUrl: './shared/abstract-video-list.html' | 10 | templateUrl: '../../shared/video/abstract-video-list.html' |
11 | }) | 11 | }) |
12 | export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy { | 12 | export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy { |
13 | titlePage = 'Recently added' | 13 | titlePage = 'Recently added' |
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index a1df68711..9108289c9 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts | |||
@@ -1,13 +1,13 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | 1 | import { Component, OnDestroy, OnInit } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 2 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { NotificationsService } from 'angular2-notifications' | 3 | import { NotificationsService } from 'angular2-notifications' |
4 | import { VideoService } from '../shared' | 4 | import { VideoService } from '../../shared/video/video.service' |
5 | import { AbstractVideoList } from './shared' | 5 | import { AbstractVideoList } from 'app/shared/video/abstract-video-list' |
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'my-videos-trending', | 8 | selector: 'my-videos-trending', |
9 | styleUrls: [ './shared/abstract-video-list.scss' ], | 9 | styleUrls: [ '../../shared/video/abstract-video-list.scss' ], |
10 | templateUrl: './shared/abstract-video-list.html' | 10 | templateUrl: '../../shared/video/abstract-video-list.html' |
11 | }) | 11 | }) |
12 | export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { | 12 | export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy { |
13 | titlePage = 'Trending' | 13 | titlePage = 'Trending' |