diff options
Diffstat (limited to 'client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts')
-rw-r--r-- | client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts | 69 |
1 files changed, 68 insertions, 1 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts index 76aff3d4f..4076a3721 100644 --- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts +++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts | |||
@@ -4,7 +4,7 @@ import { AuthService } from '../../core/auth' | |||
4 | import { ConfirmService } from '../../core/confirm' | 4 | import { ConfirmService } from '../../core/confirm' |
5 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | 5 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' |
6 | import { Video } from '@app/shared/video/video.model' | 6 | import { Video } from '@app/shared/video/video.model' |
7 | import { Subscription } from 'rxjs' | 7 | import { Subject, Subscription } from 'rxjs' |
8 | import { ActivatedRoute } from '@angular/router' | 8 | import { ActivatedRoute } from '@angular/router' |
9 | import { VideoService } from '@app/shared/video/video.service' | 9 | import { VideoService } from '@app/shared/video/video.service' |
10 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | 10 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' |
@@ -13,6 +13,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
13 | import { secondsToTime } from '../../../assets/player/utils' | 13 | import { secondsToTime } from '../../../assets/player/utils' |
14 | import { VideoPlaylistElementUpdate } from '@shared/models' | 14 | import { VideoPlaylistElementUpdate } from '@shared/models' |
15 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' | 15 | import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' |
16 | import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop' | ||
17 | import { throttleTime } from 'rxjs/operators' | ||
16 | 18 | ||
17 | @Component({ | 19 | @Component({ |
18 | selector: 'my-account-video-playlist-elements', | 20 | selector: 'my-account-video-playlist-elements', |
@@ -42,6 +44,7 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
42 | 44 | ||
43 | private videoPlaylistId: string | number | 45 | private videoPlaylistId: string | number |
44 | private paramsSub: Subscription | 46 | private paramsSub: Subscription |
47 | private dragMoveSubject = new Subject<number>() | ||
45 | 48 | ||
46 | constructor ( | 49 | constructor ( |
47 | private authService: AuthService, | 50 | private authService: AuthService, |
@@ -61,12 +64,66 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
61 | 64 | ||
62 | this.loadPlaylistInfo() | 65 | this.loadPlaylistInfo() |
63 | }) | 66 | }) |
67 | |||
68 | this.dragMoveSubject.asObservable() | ||
69 | .pipe(throttleTime(200)) | ||
70 | .subscribe(y => this.checkScroll(y)) | ||
64 | } | 71 | } |
65 | 72 | ||
66 | ngOnDestroy () { | 73 | ngOnDestroy () { |
67 | if (this.paramsSub) this.paramsSub.unsubscribe() | 74 | if (this.paramsSub) this.paramsSub.unsubscribe() |
68 | } | 75 | } |
69 | 76 | ||
77 | drop (event: CdkDragDrop<any>) { | ||
78 | const previousIndex = event.previousIndex | ||
79 | const newIndex = event.currentIndex | ||
80 | |||
81 | if (previousIndex === newIndex) return | ||
82 | |||
83 | const oldPosition = this.videos[previousIndex].playlistElement.position | ||
84 | const insertAfter = newIndex === 0 ? 0 : this.videos[newIndex].playlistElement.position | ||
85 | |||
86 | this.videoPlaylistService.reorderPlaylist(this.playlist.id, oldPosition, insertAfter) | ||
87 | .subscribe( | ||
88 | () => { /* nothing to do */ }, | ||
89 | |||
90 | err => this.notifier.error(err.message) | ||
91 | ) | ||
92 | |||
93 | const video = this.videos[previousIndex] | ||
94 | |||
95 | this.videos.splice(previousIndex, 1) | ||
96 | this.videos.splice(newIndex, 0, video) | ||
97 | |||
98 | this.reorderClientPositions() | ||
99 | } | ||
100 | |||
101 | onDragMove (event: CdkDragMove<any>) { | ||
102 | this.dragMoveSubject.next(event.pointerPosition.y) | ||
103 | } | ||
104 | |||
105 | checkScroll (pointerY: number) { | ||
106 | // FIXME: Uncomment when https://github.com/angular/material2/issues/14098 is fixed | ||
107 | // FIXME: Remove when https://github.com/angular/material2/issues/13588 is implemented | ||
108 | // if (pointerY < 150) { | ||
109 | // window.scrollBy({ | ||
110 | // left: 0, | ||
111 | // top: -20, | ||
112 | // behavior: 'smooth' | ||
113 | // }) | ||
114 | // | ||
115 | // return | ||
116 | // } | ||
117 | // | ||
118 | // if (window.innerHeight - pointerY <= 50) { | ||
119 | // window.scrollBy({ | ||
120 | // left: 0, | ||
121 | // top: 20, | ||
122 | // behavior: 'smooth' | ||
123 | // }) | ||
124 | // } | ||
125 | } | ||
126 | |||
70 | isVideoBlur (video: Video) { | 127 | isVideoBlur (video: Video) { |
71 | return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig()) | 128 | return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig()) |
72 | } | 129 | } |
@@ -78,6 +135,7 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
78 | this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName })) | 135 | this.notifier.success(this.i18n('Video removed from {{name}}', { name: this.playlist.displayName })) |
79 | 136 | ||
80 | this.videos = this.videos.filter(v => v.id !== video.id) | 137 | this.videos = this.videos.filter(v => v.id !== video.id) |
138 | this.reorderClientPositions() | ||
81 | }, | 139 | }, |
82 | 140 | ||
83 | err => this.notifier.error(err.message) | 141 | err => this.notifier.error(err.message) |
@@ -173,4 +231,13 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro | |||
173 | this.playlist = playlist | 231 | this.playlist = playlist |
174 | }) | 232 | }) |
175 | } | 233 | } |
234 | |||
235 | private reorderClientPositions () { | ||
236 | let i = 1 | ||
237 | |||
238 | for (const video of this.videos) { | ||
239 | video.playlistElement.position = i | ||
240 | i++ | ||
241 | } | ||
242 | } | ||
176 | } | 243 | } |