diff options
author | Julien Maulny <julien.maulny@protonmail.com> | 2019-10-23 18:12:22 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-10-23 18:12:22 +0200 |
commit | 0c695c5c96d98e2daf6f3e98676282a6d688e039 (patch) | |
tree | 4d4181ec77efa4716ff3d7f73651c229d8cb63dd /client/src/app | |
parent | 34398be4297852b6aecebe65dd33bded9187a0c9 (diff) | |
download | PeerTube-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>
Diffstat (limited to 'client/src/app')
2 files changed, 20 insertions, 1 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 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' | |||
8 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' | 8 | import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service' |
9 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' | 9 | import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' |
10 | import { I18n } from '@ngx-translate/i18n-polyfill' | 10 | import { I18n } from '@ngx-translate/i18n-polyfill' |
11 | import { ScreenService } from '@app/shared/misc/screen.service' | ||
11 | import { CdkDragDrop } from '@angular/cdk/drag-drop' | 12 | import { CdkDragDrop } from '@angular/cdk/drag-drop' |
12 | import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' | 13 | import { 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 }) => { |