aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorJulien Maulny <julien.maulny@protonmail.com>2019-10-23 18:12:22 +0200
committerChocobozzz <me@florianbigard.com>2019-10-23 18:12:22 +0200
commit0c695c5c96d98e2daf6f3e98676282a6d688e039 (patch)
tree4d4181ec77efa4716ff3d7f73651c229d8cb63dd
parent34398be4297852b6aecebe65dd33bded9187a0c9 (diff)
downloadPeerTube-0c695c5c96d98e2daf6f3e98676282a6d688e039.tar.gz
PeerTube-0c695c5c96d98e2daf6f3e98676282a6d688e039.tar.zst
PeerTube-0c695c5c96d98e2daf6f3e98676282a6d688e039.zip
Add a drag&drop delay on playlist videos to allow user scroll on small screens (#2154)
* Add delay on playlist element reordering to fix user scroll on mobile Signed-off-by: Julien Maulny <julien.maulny@protonmail.com> * Upgrade @angular/cdk to include bugfix about drag&drop Signed-off-by: Julien Maulny <julien.maulny@protonmail.com> * add delay on playlist drag&drop on all touch screens Signed-off-by: Julien Maulny <julien.maulny@protonmail.com>
-rw-r--r--client/package.json2
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.html2
-rw-r--r--client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.ts19
-rw-r--r--client/yarn.lock2
4 files changed, 22 insertions, 3 deletions
diff --git a/client/package.json b/client/package.json
index 5514b91bd..a45f2b8c7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,7 +33,7 @@
33 "devDependencies": { 33 "devDependencies": {
34 "@angular-devkit/build-angular": "~0.803.12", 34 "@angular-devkit/build-angular": "~0.803.12",
35 "@angular/animations": "~8.2.0", 35 "@angular/animations": "~8.2.0",
36 "@angular/cdk": "^8.1.1", 36 "@angular/cdk": "^8.2.3",
37 "@angular/cli": "~8.3.0", 37 "@angular/cli": "~8.3.0",
38 "@angular/common": "~8.2.0", 38 "@angular/common": "~8.2.0",
39 "@angular/compiler": "~8.2.0", 39 "@angular/compiler": "~8.2.0",
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 a3de3da4a..2bfdf5c43 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,7 +14,7 @@
14 class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" 14 class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
15 cdkDropList (cdkDropListDropped)="drop($event)" [dataObservable]="onDataSubject.asObservable()" 15 cdkDropList (cdkDropListDropped)="drop($event)" [dataObservable]="onDataSubject.asObservable()"
16 > 16 >
17 <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag> 17 <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag [cdkDragStartDelay]="getDragStartDelay()">
18 <my-video-playlist-element-miniature 18 <my-video-playlist-element-miniature
19 [playlistElement]="playlistElement" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)" 19 [playlistElement]="playlistElement" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
20 [position]="playlistElement.position" 20 [position]="playlistElement.position"
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 22c9af566..366640618 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
@@ -8,6 +8,7 @@ import { ActivatedRoute } from '@angular/router'
8import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' 8import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
9import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' 9import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
10import { I18n } from '@ngx-translate/i18n-polyfill' 10import { I18n } from '@ngx-translate/i18n-polyfill'
11import { ScreenService } from '@app/shared/misc/screen.service'
11import { CdkDragDrop } from '@angular/cdk/drag-drop' 12import { CdkDragDrop } from '@angular/cdk/drag-drop'
12import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' 13import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
13 14
@@ -38,6 +39,7 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
38 private confirmService: ConfirmService, 39 private confirmService: ConfirmService,
39 private route: ActivatedRoute, 40 private route: ActivatedRoute,
40 private i18n: I18n, 41 private i18n: I18n,
42 private screenService: ScreenService,
41 private videoPlaylistService: VideoPlaylistService 43 private videoPlaylistService: VideoPlaylistService
42 ) {} 44 ) {}
43 45
@@ -99,6 +101,23 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
99 return elem.id 101 return elem.id
100 } 102 }
101 103
104 /**
105 * Returns null to not have drag and drop delay.
106 * In small views, where elements are about 100% wide,
107 * we add a delay to prevent unwanted drag&drop.
108 *
109 * @see {@link https://github.com/Chocobozzz/PeerTube/issues/2078}
110 *
111 * @returns {null|number} Null for no delay, or a number in milliseconds.
112 */
113 getDragStartDelay (): null | number {
114 if (this.screenService.isInTouchScreen()) {
115 return 500
116 }
117
118 return null
119 }
120
102 private loadElements () { 121 private loadElements () {
103 this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination) 122 this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
104 .subscribe(({ total, data }) => { 123 .subscribe(({ total, data }) => {
diff --git a/client/yarn.lock b/client/yarn.lock
index 620d12bb2..8e1f28c75 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -118,7 +118,7 @@
118 dependencies: 118 dependencies:
119 tslib "^1.9.0" 119 tslib "^1.9.0"
120 120
121"@angular/cdk@^8.1.1": 121"@angular/cdk@^8.2.3":
122 version "8.2.3" 122 version "8.2.3"
123 resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.2.3.tgz#16b96ffa935cbf5a646757ecaf2b19c434678f72" 123 resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.2.3.tgz#16b96ffa935cbf5a646757ecaf2b19c434678f72"
124 integrity sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA== 124 integrity sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA==