Pause the video when a modal is opened

3 files changed, 25 insertions, 1 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 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()
+  }
 }