Add edit button to scroll watch playlist on touchscreens

4 files changed, 94 insertions, 5 deletions

diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
index 25d4783fb..c956e6cd2 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.html
@@ -36,7 +36,9 @@
     </div>
   </a>
 
-  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom-right"
+  <my-edit-button *ngIf="owned && touchScreenEditButton" [routerLink]="[ '/my-account', 'video-playlists', playlist.uuid ]"></my-edit-button>
+
+  <div *ngIf="owned" class="more" ngbDropdown #moreDropdown="ngbDropdown" placement="bottom auto"
        (openChange)="onDropdownOpenChange()" autoClose="outside"
   >
     <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button" class="icon-more" (click)="$event.preventDefault()"></my-global-icon>
@@ -82,8 +84,9 @@
       </ng-container>
 
       <span class="dropdown-item" (click)="removeFromPlaylist(playlistElement)">
-            <my-global-icon iconName="delete"></my-global-icon> <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
-          </span>
+        <my-global-icon iconName="delete"></my-global-icon>
+        <ng-container i18n>Delete from {{ playlist?.displayName }}</ng-container>
+      </span>
     </div>
   </div>
 </div>
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 4d9d249d9..4fba2344b 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -88,12 +88,15 @@ my-video-thumbnail,
     @include ellipsis;
   }
 
-  .more {
+  .more, my-edit-button {
     justify-self: flex-end;
     margin-left: auto;
     cursor: pointer;
-    opacity: 0;
     min-width: 24px;
+  }
+
+  .more {
+    opacity: 0;
 
     &.show {
       opacity: 1;
@@ -132,3 +135,84 @@ my-video-thumbnail,
     }
   }
 }
+
+@mixin more-dropdown-control {
+  .video {
+    my-edit-button {
+      display: none;
+
+      + .more {
+        display: inline-flex;
+      }
+    }
+  }
+}
+
+@mixin edit-button-control {
+  .video {
+    my-edit-button {
+      display: none;
+    }
+
+    &.playing {
+      my-edit-button {
+        display: inline-flex;
+        height: max-content;
+      }
+    }
+
+    my-edit-button + .more {
+      display: none;
+    }
+  }
+}
+
+@mixin edit-button-in-mobile-view {
+  .video {
+    my-edit-button {
+      ::ng-deep .action-button-edit {
+        padding: 0 13px;
+
+        .button-label {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $small-view) {
+  :host-context(.expanded) {
+    @include more-dropdown-control();
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  :host-context(.expanded) {
+    @include edit-button-control();
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  :host-context(.expanded) {
+    @include edit-button-in-mobile-view();
+  }
+}
+
+@media screen and (min-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include more-dropdown-control();
+  }
+}
+
+@media screen and (max-width: #{$small-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include edit-button-control();
+  }
+}
+
+@media screen and (max-width: #{$mobile-view + $menu-width}) {
+  :host-context(.main-col:not(.expanded)) {
+    @include edit-button-in-mobile-view();
+  }
+}
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index a2c0724cd..fad03e045 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -27,6 +27,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
   @Input() rowLink = false
   @Input() accountLink = true
   @Input() position: number // Keep this property because we're in the OnPush change detection strategy
+  @Input() touchScreenEditButton = false
 
   @Output() elementRemoved = new EventEmitter<VideoPlaylistElement>()
 
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
index d43dcec93..246ef83cf 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.html
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
@@ -40,6 +40,7 @@
     <my-video-playlist-element-miniature
       [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
       [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
+      [touchScreenEditButton]="true"
     ></my-video-playlist-element-miniature>
   </div>
 </div>