Fix videos more dropdown position/loading

3 files changed, 18 insertions, 6 deletions

diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index 787ef1188..b2d77a9e6 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { AfterContentInit, AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { DropdownAction, DropdownButtonSize, DropdownDirection } from '@app/shared/buttons/action-dropdown.component'
 import { AuthService, ConfirmService, Notifier, ServerService } from '@app/core'
@@ -28,7 +28,7 @@ export type VideoActionsDisplayType = {
   templateUrl: './video-actions-dropdown.component.html',
   styleUrls: [ './video-actions-dropdown.component.scss' ]
 })
-export class VideoActionsDropdownComponent implements OnChanges {
+export class VideoActionsDropdownComponent implements AfterViewInit, OnChanges {
   @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
   @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
 
@@ -78,6 +78,13 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.authService.getUser()
   }
 
+  ngAfterViewInit () {
+    // We rely on mouseenter to lazy load actions
+    if (this.screenService.isInTouchScreen()) {
+      this.loadDropdownInformation()
+    }
+  }
+
   ngOnChanges () {
     this.buildActions()
   }
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 6e173af99..d665ce021 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -2,6 +2,9 @@
 @import '_mixins';
 @import '_miniature';
 
+$more-button-width: 41px;
+$more-margin-right: 10px;
+
 .video-miniature {
   width: $video-miniature-width;
   display: inline-flex;
@@ -14,7 +17,7 @@
     display: flex;
 
     .video-miniature-information {
-      width: 200px;
+      width: $video-miniature-width - $more-button-width - $more-margin-right;
       line-height: normal;
 
       .video-miniature-name {
@@ -61,7 +64,9 @@
 
     .video-actions {
       margin-top: 3px;
-      margin-right: 10px;
+      margin-right: $more-margin-right;
+      width: $more-button-width;
+      height: 30px;
 
       /deep/ .dropdown-root:not(.show) {
         opacity: 0;
@@ -86,7 +91,7 @@
         top: -3px;
 
         /deep/ .dropdown-root {
-          display: block !important;
+          opacity: 1 !important;
         }
       }
     }
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index e32b8cbc5..48475033c 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -74,7 +74,7 @@ export class VideoMiniatureComponent implements OnInit {
 
     // We rely on mouseenter to lazy load actions
     if (this.screenService.isInTouchScreen()) {
-      this.showActions = true
+      this.loadActions()
     }
   }