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 @@
-
+
+
@@ -82,8 +84,9 @@
- Delete from {{ playlist?.displayName }}
-
+
+ Delete from {{ playlist?.displayName }}
+
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()
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 @@