diff options
author | Chocobozzz <me@florianbigard.com> | 2018-05-15 11:55:51 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-05-16 09:42:54 +0200 |
commit | db400f447a9f7aae1c56fa25396e93069744483f (patch) | |
tree | f45af832a5d3f4eebafd2f885b7413d9f84fa374 /client/src/app/shared/video | |
parent | 54c3a22faa04bf13eea37f39be9149fc5eb95737 (diff) | |
download | PeerTube-db400f447a9f7aae1c56fa25396e93069744483f.tar.gz PeerTube-db400f447a9f7aae1c56fa25396e93069744483f.tar.zst PeerTube-db400f447a9f7aae1c56fa25396e93069744483f.zip |
Upgrade to rxjs 6
Diffstat (limited to 'client/src/app/shared/video')
-rw-r--r-- | client/src/app/shared/video/abstract-video-list.ts | 8 | ||||
-rw-r--r-- | client/src/app/shared/video/infinite-scroller.directive.ts | 68 | ||||
-rw-r--r-- | client/src/app/shared/video/video.service.ts | 89 |
3 files changed, 92 insertions, 73 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index d8a4b03af..d47df4da4 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts | |||
@@ -1,13 +1,11 @@ | |||
1 | import { debounceTime } from 'rxjs/operators' | ||
1 | import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' | 2 | import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' |
2 | import { ActivatedRoute, Router } from '@angular/router' | 3 | import { ActivatedRoute, Router } from '@angular/router' |
3 | import { Location } from '@angular/common' | 4 | import { Location } from '@angular/common' |
4 | import { isInMobileView } from '@app/shared/misc/utils' | 5 | import { isInMobileView } from '@app/shared/misc/utils' |
5 | import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' | 6 | import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' |
6 | import { NotificationsService } from 'angular2-notifications' | 7 | import { NotificationsService } from 'angular2-notifications' |
7 | import 'rxjs/add/operator/debounceTime' | 8 | import { fromEvent, Observable, Subscription } from 'rxjs' |
8 | import { Observable } from 'rxjs/Observable' | ||
9 | import { fromEvent } from 'rxjs/observable/fromEvent' | ||
10 | import { Subscription } from 'rxjs/Subscription' | ||
11 | import { AuthService } from '../../core/auth' | 9 | import { AuthService } from '../../core/auth' |
12 | import { ComponentPagination } from '../rest/component-pagination.model' | 10 | import { ComponentPagination } from '../rest/component-pagination.model' |
13 | import { VideoSortField } from './sort-field.type' | 11 | import { VideoSortField } from './sort-field.type' |
@@ -64,7 +62,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { | |||
64 | this.loadRouteParams(routeParams) | 62 | this.loadRouteParams(routeParams) |
65 | 63 | ||
66 | this.resizeSubscription = fromEvent(window, 'resize') | 64 | this.resizeSubscription = fromEvent(window, 'resize') |
67 | .debounceTime(500) | 65 | .pipe(debounceTime(500)) |
68 | .subscribe(() => this.calcPageSizes()) | 66 | .subscribe(() => this.calcPageSizes()) |
69 | 67 | ||
70 | this.calcPageSizes() | 68 | this.calcPageSizes() |
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts index e2730423f..0448e2c23 100644 --- a/client/src/app/shared/video/infinite-scroller.directive.ts +++ b/client/src/app/shared/video/infinite-scroller.directive.ts | |||
@@ -1,14 +1,6 @@ | |||
1 | import { distinct, distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators' | ||
1 | import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' | 2 | import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core' |
2 | import 'rxjs/add/operator/debounceTime' | 3 | import { fromEvent, Subscription } from 'rxjs' |
3 | import 'rxjs/add/operator/distinct' | ||
4 | import 'rxjs/add/operator/distinctUntilChanged' | ||
5 | import 'rxjs/add/operator/filter' | ||
6 | import 'rxjs/add/operator/map' | ||
7 | import 'rxjs/add/operator/share' | ||
8 | import 'rxjs/add/operator/startWith' | ||
9 | import 'rxjs/add/operator/throttleTime' | ||
10 | import { fromEvent } from 'rxjs/observable/fromEvent' | ||
11 | import { Subscription } from 'rxjs/Subscription' | ||
12 | 4 | ||
13 | @Directive({ | 5 | @Directive({ |
14 | selector: '[myInfiniteScroller]' | 6 | selector: '[myInfiniteScroller]' |
@@ -51,43 +43,51 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy { | |||
51 | const throttleOptions = { leading: true, trailing: true } | 43 | const throttleOptions = { leading: true, trailing: true } |
52 | 44 | ||
53 | const scrollObservable = fromEvent(window, 'scroll') | 45 | const scrollObservable = fromEvent(window, 'scroll') |
54 | .startWith(true) | 46 | .pipe( |
55 | .throttleTime(200, undefined, throttleOptions) | 47 | startWith(null), |
56 | .map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })) | 48 | throttleTime(200, undefined, throttleOptions), |
57 | .distinctUntilChanged((o1, o2) => o1.current === o2.current) | 49 | map(() => ({ current: window.scrollY, maximumScroll: document.body.clientHeight - window.innerHeight })), |
58 | .share() | 50 | distinctUntilChanged((o1, o2) => o1.current === o2.current), |
51 | share() | ||
52 | ) | ||
59 | 53 | ||
60 | // Scroll Down | 54 | // Scroll Down |
61 | this.scrollDownSub = scrollObservable | 55 | this.scrollDownSub = scrollObservable |
62 | // Check we scroll down | 56 | .pipe( |
63 | .filter(({ current }) => { | 57 | // Check we scroll down |
64 | const res = this.lastCurrentBottom < current | 58 | filter(({ current }) => { |
59 | const res = this.lastCurrentBottom < current | ||
65 | 60 | ||
66 | this.lastCurrentBottom = current | 61 | this.lastCurrentBottom = current |
67 | return res | 62 | return res |
68 | }) | 63 | }), |
69 | .filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) | 64 | filter(({ current, maximumScroll }) => maximumScroll <= 0 || (current / maximumScroll) > this.decimalLimit) |
65 | ) | ||
70 | .subscribe(() => this.nearOfBottom.emit()) | 66 | .subscribe(() => this.nearOfBottom.emit()) |
71 | 67 | ||
72 | // Scroll up | 68 | // Scroll up |
73 | this.scrollUpSub = scrollObservable | 69 | this.scrollUpSub = scrollObservable |
74 | // Check we scroll up | 70 | .pipe( |
75 | .filter(({ current }) => { | 71 | // Check we scroll up |
76 | const res = this.lastCurrentTop > current | 72 | filter(({ current }) => { |
73 | const res = this.lastCurrentTop > current | ||
77 | 74 | ||
78 | this.lastCurrentTop = current | 75 | this.lastCurrentTop = current |
79 | return res | 76 | return res |
80 | }) | 77 | }), |
81 | .filter(({ current, maximumScroll }) => { | 78 | filter(({ current, maximumScroll }) => { |
82 | return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit | 79 | return current !== 0 && (1 - (current / maximumScroll)) > this.decimalLimit |
83 | }) | 80 | }) |
81 | ) | ||
84 | .subscribe(() => this.nearOfTop.emit()) | 82 | .subscribe(() => this.nearOfTop.emit()) |
85 | 83 | ||
86 | // Page change | 84 | // Page change |
87 | this.pageChangeSub = scrollObservable | 85 | this.pageChangeSub = scrollObservable |
88 | .distinct() | 86 | .pipe( |
89 | .map(({ current }) => this.calculateCurrentPage(current)) | 87 | distinct(), |
90 | .distinctUntilChanged() | 88 | map(({ current }) => this.calculateCurrentPage(current)), |
89 | distinctUntilChanged() | ||
90 | ) | ||
91 | .subscribe(res => this.pageChanged.emit(res)) | 91 | .subscribe(res => this.pageChanged.emit(res)) |
92 | } | 92 | } |
93 | 93 | ||
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index cd8539b41..f57cb6d6d 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts | |||
@@ -1,8 +1,7 @@ | |||
1 | import { catchError, map } from 'rxjs/operators' | ||
1 | import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http' | 2 | import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http' |
2 | import { Injectable } from '@angular/core' | 3 | import { Injectable } from '@angular/core' |
3 | import 'rxjs/add/operator/catch' | 4 | import { Observable } from 'rxjs' |
4 | import 'rxjs/add/operator/map' | ||
5 | import { Observable } from 'rxjs/Observable' | ||
6 | import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } from '../../../../../shared' | 5 | import { Video as VideoServerModel, VideoDetails as VideoDetailsServerModel } from '../../../../../shared' |
7 | import { ResultList } from '../../../../../shared/models/result-list.model' | 6 | import { ResultList } from '../../../../../shared/models/result-list.model' |
8 | import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-video-rate-update.model' | 7 | import { UserVideoRateUpdate } from '../../../../../shared/models/videos/user-video-rate-update.model' |
@@ -43,14 +42,18 @@ export class VideoService { | |||
43 | 42 | ||
44 | getVideo (uuid: string): Observable<VideoDetails> { | 43 | getVideo (uuid: string): Observable<VideoDetails> { |
45 | return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + uuid) | 44 | return this.authHttp.get<VideoDetailsServerModel>(VideoService.BASE_VIDEO_URL + uuid) |
46 | .map(videoHash => new VideoDetails(videoHash)) | 45 | .pipe( |
47 | .catch((res) => this.restExtractor.handleError(res)) | 46 | map(videoHash => new VideoDetails(videoHash)), |
47 | catchError(res => this.restExtractor.handleError(res)) | ||
48 | ) | ||
48 | } | 49 | } |
49 | 50 | ||
50 | viewVideo (uuid: string): Observable<VideoDetails> { | 51 | viewVideo (uuid: string): Observable<VideoDetails> { |
51 | return this.authHttp.post(this.getVideoViewUrl(uuid), {}) | 52 | return this.authHttp.post(this.getVideoViewUrl(uuid), {}) |
52 | .map(this.restExtractor.extractDataBool) | 53 | .pipe( |
53 | .catch(this.restExtractor.handleError) | 54 | map(this.restExtractor.extractDataBool), |
55 | catchError(this.restExtractor.handleError) | ||
56 | ) | ||
54 | } | 57 | } |
55 | 58 | ||
56 | updateVideo (video: VideoEdit) { | 59 | updateVideo (video: VideoEdit) { |
@@ -79,16 +82,18 @@ export class VideoService { | |||
79 | const data = objectToFormData(body) | 82 | const data = objectToFormData(body) |
80 | 83 | ||
81 | return this.authHttp.put(VideoService.BASE_VIDEO_URL + video.id, data) | 84 | return this.authHttp.put(VideoService.BASE_VIDEO_URL + video.id, data) |
82 | .map(this.restExtractor.extractDataBool) | 85 | .pipe( |
83 | .catch(this.restExtractor.handleError) | 86 | map(this.restExtractor.extractDataBool), |
87 | catchError(this.restExtractor.handleError) | ||
88 | ) | ||
84 | } | 89 | } |
85 | 90 | ||
86 | uploadVideo (video: FormData) { | 91 | uploadVideo (video: FormData) { |
87 | const req = new HttpRequest('POST', VideoService.BASE_VIDEO_URL + 'upload', video, { reportProgress: true }) | 92 | const req = new HttpRequest('POST', VideoService.BASE_VIDEO_URL + 'upload', video, { reportProgress: true }) |
88 | 93 | ||
89 | return this.authHttp | 94 | return this.authHttp |
90 | .request(req) | 95 | .request(req) |
91 | .catch(this.restExtractor.handleError) | 96 | .pipe(catchError(this.restExtractor.handleError)) |
92 | } | 97 | } |
93 | 98 | ||
94 | getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField): Observable<{ videos: Video[], totalVideos: number}> { | 99 | getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField): Observable<{ videos: Video[], totalVideos: number}> { |
@@ -98,8 +103,10 @@ export class VideoService { | |||
98 | params = this.restService.addRestGetParams(params, pagination, sort) | 103 | params = this.restService.addRestGetParams(params, pagination, sort) |
99 | 104 | ||
100 | return this.authHttp.get(UserService.BASE_USERS_URL + '/me/videos', { params }) | 105 | return this.authHttp.get(UserService.BASE_USERS_URL + '/me/videos', { params }) |
101 | .map(this.extractVideos) | 106 | .pipe( |
102 | .catch((res) => this.restExtractor.handleError(res)) | 107 | map(this.extractVideos), |
108 | catchError(res => this.restExtractor.handleError(res)) | ||
109 | ) | ||
103 | } | 110 | } |
104 | 111 | ||
105 | getAccountVideos ( | 112 | getAccountVideos ( |
@@ -114,8 +121,10 @@ export class VideoService { | |||
114 | 121 | ||
115 | return this.authHttp | 122 | return this.authHttp |
116 | .get(AccountService.BASE_ACCOUNT_URL + account.id + '/videos', { params }) | 123 | .get(AccountService.BASE_ACCOUNT_URL + account.id + '/videos', { params }) |
117 | .map(this.extractVideos) | 124 | .pipe( |
118 | .catch((res) => this.restExtractor.handleError(res)) | 125 | map(this.extractVideos), |
126 | catchError(res => this.restExtractor.handleError(res)) | ||
127 | ) | ||
119 | } | 128 | } |
120 | 129 | ||
121 | getVideoChannelVideos ( | 130 | getVideoChannelVideos ( |
@@ -130,8 +139,10 @@ export class VideoService { | |||
130 | 139 | ||
131 | return this.authHttp | 140 | return this.authHttp |
132 | .get(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.uuid + '/videos', { params }) | 141 | .get(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.uuid + '/videos', { params }) |
133 | .map(this.extractVideos) | 142 | .pipe( |
134 | .catch((res) => this.restExtractor.handleError(res)) | 143 | map(this.extractVideos), |
144 | catchError(res => this.restExtractor.handleError(res)) | ||
145 | ) | ||
135 | } | 146 | } |
136 | 147 | ||
137 | getVideos ( | 148 | getVideos ( |
@@ -149,9 +160,11 @@ export class VideoService { | |||
149 | } | 160 | } |
150 | 161 | ||
151 | return this.authHttp | 162 | return this.authHttp |
152 | .get(VideoService.BASE_VIDEO_URL, { params }) | 163 | .get(VideoService.BASE_VIDEO_URL, { params }) |
153 | .map(this.extractVideos) | 164 | .pipe( |
154 | .catch((res) => this.restExtractor.handleError(res)) | 165 | map(this.extractVideos), |
166 | catchError(res => this.restExtractor.handleError(res)) | ||
167 | ) | ||
155 | } | 168 | } |
156 | 169 | ||
157 | buildBaseFeedUrls (params: HttpParams) { | 170 | buildBaseFeedUrls (params: HttpParams) { |
@@ -215,23 +228,29 @@ export class VideoService { | |||
215 | params = params.append('search', search) | 228 | params = params.append('search', search) |
216 | 229 | ||
217 | return this.authHttp | 230 | return this.authHttp |
218 | .get<ResultList<VideoServerModel>>(url, { params }) | 231 | .get<ResultList<VideoServerModel>>(url, { params }) |
219 | .map(this.extractVideos) | 232 | .pipe( |
220 | .catch((res) => this.restExtractor.handleError(res)) | 233 | map(this.extractVideos), |
234 | catchError(res => this.restExtractor.handleError(res)) | ||
235 | ) | ||
221 | } | 236 | } |
222 | 237 | ||
223 | removeVideo (id: number) { | 238 | removeVideo (id: number) { |
224 | return this.authHttp | 239 | return this.authHttp |
225 | .delete(VideoService.BASE_VIDEO_URL + id) | 240 | .delete(VideoService.BASE_VIDEO_URL + id) |
226 | .map(this.restExtractor.extractDataBool) | 241 | .pipe( |
227 | .catch((res) => this.restExtractor.handleError(res)) | 242 | map(this.restExtractor.extractDataBool), |
243 | catchError(res => this.restExtractor.handleError(res)) | ||
244 | ) | ||
228 | } | 245 | } |
229 | 246 | ||
230 | loadCompleteDescription (descriptionPath: string) { | 247 | loadCompleteDescription (descriptionPath: string) { |
231 | return this.authHttp | 248 | return this.authHttp |
232 | .get(environment.apiUrl + descriptionPath) | 249 | .get(environment.apiUrl + descriptionPath) |
233 | .map(res => res['description']) | 250 | .pipe( |
234 | .catch((res) => this.restExtractor.handleError(res)) | 251 | map(res => res[ 'description' ]), |
252 | catchError(res => this.restExtractor.handleError(res)) | ||
253 | ) | ||
235 | } | 254 | } |
236 | 255 | ||
237 | setVideoLike (id: number) { | 256 | setVideoLike (id: number) { |
@@ -250,8 +269,8 @@ export class VideoService { | |||
250 | const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating' | 269 | const url = UserService.BASE_USERS_URL + 'me/videos/' + id + '/rating' |
251 | 270 | ||
252 | return this.authHttp | 271 | return this.authHttp |
253 | .get(url) | 272 | .get(url) |
254 | .catch(res => this.restExtractor.handleError(res)) | 273 | .pipe(catchError(res => this.restExtractor.handleError(res))) |
255 | } | 274 | } |
256 | 275 | ||
257 | private setVideoRate (id: number, rateType: VideoRateType) { | 276 | private setVideoRate (id: number, rateType: VideoRateType) { |
@@ -261,9 +280,11 @@ export class VideoService { | |||
261 | } | 280 | } |
262 | 281 | ||
263 | return this.authHttp | 282 | return this.authHttp |
264 | .put(url, body) | 283 | .put(url, body) |
265 | .map(this.restExtractor.extractDataBool) | 284 | .pipe( |
266 | .catch(res => this.restExtractor.handleError(res)) | 285 | map(this.restExtractor.extractDataBool), |
286 | catchError(res => this.restExtractor.handleError(res)) | ||
287 | ) | ||
267 | } | 288 | } |
268 | 289 | ||
269 | private extractVideos (result: ResultList<VideoServerModel>) { | 290 | private extractVideos (result: ResultList<VideoServerModel>) { |