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>
pull/2207/head
Julien Maulny 2019-10-23 18:12:22 +02:00 committed by Chocobozzz
parent 34398be429
commit 0c695c5c96
4 changed files with 22 additions and 3 deletions

View File

@ -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",

View File

@ -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"

View File

@ -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 }) => {

View File

@ -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==