Pause the video when a modal is opened

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 7f3e25d0aace4eb58f035545e6d585ea0ea5cfd5..80407098b4bc5d3e2afcc8f537ad8e72814ca655 100644 (file)
--- 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 647cc3c576472913bcbeab2f8d4ebac5374e65e2..38ad4e948e7ed3a070803be0f7b5939a122a35bb 100644 (file)
--- 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 80aa8ebe47685be3ded7bd7a41524a493585b0bc..0007331f8651d53a792b862ae7dc1cd68717439f 100644 (file)
--- 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()
+  }
 }