Add a drag&drop delay on playlist videos to allow user scroll on small screens (...

* 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>

diff --git a/client/package.json b/client/package.json
index 5514b91bd3a8eb6aa570331a82068d60a4c563d9..a45f2b8c7583c583f048f6a18a080bfcbb4120c7 100644 (file)
--- a/client/package.json
+++ b/client/package.json
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.803.12",
     "@angular/animations": "~8.2.0",
-    "@angular/cdk": "^8.1.1",
+    "@angular/cdk": "^8.2.3",
     "@angular/cli": "~8.3.0",
     "@angular/common": "~8.2.0",
     "@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 a3de3da4a27a9531e5231f1ae538d341c2e4c1d2..2bfdf5c436cc026193c711aaeba1457925d5bcfe 100644 (file)
--- 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 @@
       class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
       cdkDropList (cdkDropListDropped)="drop($event)" [dataObservable]="onDataSubject.asObservable()"
     >
-      <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag>
+      <div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag [cdkDragStartDelay]="getDragStartDelay()">
         <my-video-playlist-element-miniature
           [playlistElement]="playlistElement" [playlist]="playlist" [owned]="true" (elementRemoved)="onElementRemoved($event)"
           [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 22c9af566b5984910b62bf507fee4a0f3cc64f96..366640618d54e3c198e4da9f6ec4e3cad0b9b993 100644 (file)
--- 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'
 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ScreenService } from '@app/shared/misc/screen.service'
 import { CdkDragDrop } from '@angular/cdk/drag-drop'
 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 
@@ -38,6 +39,7 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     private confirmService: ConfirmService,
     private route: ActivatedRoute,
     private i18n: I18n,
+    private screenService: ScreenService,
     private videoPlaylistService: VideoPlaylistService
   ) {}
 
@@ -99,6 +101,23 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
     return elem.id
   }
 
+  /**
+   * Returns null to not have drag and drop delay.
+   * In small views, where elements are about 100% wide,
+   * we add a delay to prevent unwanted drag&drop.
+   *
+   * @see {@link https://github.com/Chocobozzz/PeerTube/issues/2078}
+   *
+   * @returns {null|number} Null for no delay, or a number in milliseconds.
+   */
+  getDragStartDelay (): null | number {
+    if (this.screenService.isInTouchScreen()) {
+      return 500
+    }
+
+    return null
+  }
+
   private loadElements () {
     this.videoPlaylistService.getPlaylistVideos(this.videoPlaylistId, this.pagination)
         .subscribe(({ total, data }) => {

diff --git a/client/yarn.lock b/client/yarn.lock
index 620d12bb2ac9b6ec88cbb3b4474913efc1cf4adf..8e1f28c7561c0c643337d5c8ad3b3cd7bd265fc3 100644 (file)
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -118,7 +118,7 @@
   dependencies:
     tslib "^1.9.0"
 
-"@angular/cdk@^8.1.1":
+"@angular/cdk@^8.2.3":
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-8.2.3.tgz#16b96ffa935cbf5a646757ecaf2b19c434678f72"
   integrity sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA==