From 689a4f6946e47ddf4871fd43bbd1284a4dc79e68 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 5 Dec 2019 09:21:09 +0100
Subject: [PATCH] Pause the video when a modal is opened

---
 .../video/video-actions-dropdown.component.ts      |  9 +++++++++
 .../videos/+video-watch/video-watch.component.html |  3 ++-
 .../videos/+video-watch/video-watch.component.ts   | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

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 7f3e25d0a..80407098b 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -57,6 +57,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
   @Output() videoRemoved = new EventEmitter()
   @Output() videoUnblacklisted = new EventEmitter()
   @Output() videoBlacklisted = new EventEmitter()
+  @Output() modalOpened = new EventEmitter()
 
   videoActions: DropdownAction<{ video: Video }>[][] = []
 
@@ -102,14 +103,20 @@ export class VideoActionsDropdownComponent implements OnChanges {
   /* Show modals */
 
   showDownloadModal () {
+    this.modalOpened.emit()
+
     this.videoDownloadModal.show(this.video as VideoDetails)
   }
 
   showReportModal () {
+    this.modalOpened.emit()
+
     this.videoReportModal.show()
   }
 
   showBlacklistModal () {
+    this.modalOpened.emit()
+
     this.videoBlacklistModal.show()
   }
 
@@ -160,6 +167,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
   }
 
   async removeVideo () {
+    this.modalOpened.emit()
+
     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
     if (res === false) return
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 647cc3c57..38ad4e948 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -98,7 +98,8 @@
                 </div>
 
                 <my-video-actions-dropdown
-                  placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video" (videoRemoved)="onVideoRemoved()"
+                  placement="top" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
+                  (videoRemoved)="onVideoRemoved()" (modalOpened)="onModalOpened()"
                 ></my-video-actions-dropdown>
               </div>
 
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 80aa8ebe4..0007331f8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -203,10 +203,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showSupportModal () {
+    this.pausePlayer()
+
     this.videoSupportModal.show()
   }
 
   showShareModal () {
+    this.pausePlayer()
+
     this.videoShareModal.show(this.currentTime)
   }
 
@@ -227,6 +231,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
   }
 
+  onModalOpened () {
+    this.pausePlayer()
+  }
+
   onVideoRemoved () {
     this.redirectService.redirectToHomepage()
   }
@@ -622,4 +630,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     ]
     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
   }
+
+  private pausePlayer () {
+    if (!this.player) return
+
+    this.player.pause()
+  }
 }