aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html6
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts66
2 files changed, 19 insertions, 53 deletions
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
index 284694b7f..4de4e69da 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html
@@ -14,10 +14,10 @@
14 class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" 14 class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
15 cdkDropList (cdkDropListDropped)="drop($event)" 15 cdkDropList (cdkDropListDropped)="drop($event)"
16 > 16 >
17 <div class="video" *ngFor="let video of videos; trackBy: trackByFn" cdkDrag (cdkDragMoved)="onDragMove($event)"> 17 <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag>
18 <my-video-playlist-element-miniature 18 <my-video-playlist-element-miniature
19 [video]="video" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)" 19 [playlistElement]="playlistElement" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
20 [position]="video.playlistElement.position" 20 [position]="playlistElement.position"
21 > 21 >
22 </my-video-playlist-element-miniature> 22 </my-video-playlist-element-miniature>
23 </div> 23 </div>
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 d5122aeba..6434b9e50 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
@@ -3,15 +3,13 @@ import { Notifier, ServerService } from '@app/core'
3import { AuthService } from '../../core/auth' 3import { AuthService } from '../../core/auth'
4import { ConfirmService } from '../../core/confirm' 4import { ConfirmService } from '../../core/confirm'
5import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 5import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
6import { Video } from '@app/shared/video/video.model' 6import { Subscription } from 'rxjs'
7import { Subject, Subscription } from 'rxjs'
8import { ActivatedRoute } from '@angular/router' 7import { ActivatedRoute } from '@angular/router'
9import { VideoService } from '@app/shared/video/video.service'
10import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 8import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
11import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' 9import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
12import { I18n } from '@ngx-translate/i18n-polyfill' 10import { I18n } from '@ngx-translate/i18n-polyfill'
13import { CdkDragDrop, CdkDragMove } from '@angular/cdk/drag-drop' 11import { CdkDragDrop } from '@angular/cdk/drag-drop'
14import { throttleTime } from 'rxjs/operators' 12import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
15 13
16@Component({ 14@Component({
17 selector: 'my-account-video-playlist-elements', 15 selector: 'my-account-video-playlist-elements',
@@ -19,7 +17,7 @@ import { throttleTime } from 'rxjs/operators'
19 styleUrls: [ './my-account-video-playlist-elements.component.scss' ] 17 styleUrls: [ './my-account-video-playlist-elements.component.scss' ]
20}) 18})
21export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy { 19export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestroy {
22 videos: Video[] = [] 20 playlistElements: VideoPlaylistElement[] = []
23 playlist: VideoPlaylist 21 playlist: VideoPlaylist
24 22
25 pagination: ComponentPagination = { 23 pagination: ComponentPagination = {
@@ -30,7 +28,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
30 28
31 private videoPlaylistId: string | number 29 private videoPlaylistId: string | number
32 private paramsSub: Subscription 30 private paramsSub: Subscription
33 private dragMoveSubject = new Subject<number>()
34 31
35 constructor ( 32 constructor (
36 private authService: AuthService, 33 private authService: AuthService,
@@ -39,7 +36,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
39 private confirmService: ConfirmService, 36 private confirmService: ConfirmService,
40 private route: ActivatedRoute, 37 private route: ActivatedRoute,
41 private i18n: I18n, 38 private i18n: I18n,
42 private videoService: VideoService,
43 private videoPlaylistService: VideoPlaylistService 39 private videoPlaylistService: VideoPlaylistService
44 ) {} 40 ) {}
45 41
@@ -50,10 +46,6 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
50 46
51 this.loadPlaylistInfo() 47 this.loadPlaylistInfo()
52 }) 48 })
53
54 this.dragMoveSubject.asObservable()
55 .pipe(throttleTime(200))
56 .subscribe(y => this.checkScroll(y))
57 } 49 }
58 50
59 ngOnDestroy () { 51 ngOnDestroy () {
@@ -66,8 +58,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
66 58
67 if (previousIndex === newIndex) return 59 if (previousIndex === newIndex) return
68 60
69 const oldPosition = this.videos[previousIndex].playlistElement.position 61 const oldPosition = this.playlistElements[previousIndex].position
70 let insertAfter = this.videos[newIndex].playlistElement.position 62 let insertAfter = this.playlistElements[newIndex].position
71 63
72 if (oldPosition > insertAfter) insertAfter-- 64 if (oldPosition > insertAfter) insertAfter--
73 65
@@ -78,42 +70,16 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
78 err => this.notifier.error(err.message) 70 err => this.notifier.error(err.message)
79 ) 71 )
80 72
81 const video = this.videos[previousIndex] 73 const element = this.playlistElements[previousIndex]
82 74
83 this.videos.splice(previousIndex, 1) 75 this.playlistElements.splice(previousIndex, 1)
84 this.videos.splice(newIndex, 0, video) 76 this.playlistElements.splice(newIndex, 0, element)
85 77
86 this.reorderClientPositions() 78 this.reorderClientPositions()
87 } 79 }
88 80
89 onDragMove (event: CdkDragMove<any>) { 81 onElementRemoved (element: VideoPlaylistElement) {
90 this.dragMoveSubject.next(event.pointerPosition.y) 82 this.playlistElements = this.playlistElements.filter(v => v.id !== element.id)
91 }
92
93 checkScroll (pointerY: number) {
94 // FIXME: Uncomment when https://github.com/angular/material2/issues/14098 is fixed
95 // FIXME: Remove when https://github.com/angular/material2/issues/13588 is implemented
96 // if (pointerY < 150) {
97 // window.scrollBy({
98 // left: 0,
99 // top: -20,
100 // behavior: 'smooth'
101 // })
102 //
103 // return
104 // }
105 //
106 // if (window.innerHeight - pointerY <= 50) {
107 // window.scrollBy({
108 // left: 0,
109 // top: 20,
110 // behavior: 'smooth'
111 // })
112 // }
113 }
114
115 onElementRemoved (video: Video) {
116 this.videos = this.videos.filter(v => v.id !== video.id)
117 this.reorderClientPositions() 83 this.reorderClientPositions()
118 } 84 }
119 85
@@ -125,14 +91,14 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
125 this.loadElements() 91 this.loadElements()
126 } 92 }
127 93
128 trackByFn (index: number, elem: Video) { 94 trackByFn (index: number, elem: VideoPlaylistElement) {
129 return elem.id 95 return elem.id
130 } 96 }
131 97
132 private loadElements () { 98 private loadElements () {
133 this.videoService.getPlaylistVideos(this.videoPlaylistId, this.pagination) 99 this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
134 .subscribe(({ total, data }) => { 100 .subscribe(({ total, data }) => {
135 this.videos = this.videos.concat(data) 101 this.playlistElements = this.playlistElements.concat(data)
136 this.pagination.totalItems = total 102 this.pagination.totalItems = total
137 }) 103 })
138 } 104 }
@@ -147,8 +113,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
147 private reorderClientPositions () { 113 private reorderClientPositions () {
148 let i = 1 114 let i = 1
149 115
150 for (const video of this.videos) { 116 for (const element of this.playlistElements) {
151 video.playlistElement.position = i 117 element.position = i
152 i++ 118 i++
153 } 119 }
154 } 120 }