From 743f023c5361af1428e927171effb2616d4e0245 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 26 Apr 2019 10:47:07 +0200
Subject: [PATCH] Fix videos more dropdown position/loading

---
 .../shared/video/video-actions-dropdown.component.ts  | 11 +++++++++--
 .../app/shared/video/video-miniature.component.scss   | 11 ++++++++---
 .../src/app/shared/video/video-miniature.component.ts |  2 +-
 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()
     }
   }
 
-- 
2.25.1