Improve 4k resolution bitrate

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.ts

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 21a24113fa9c0ae4916155b4fed508ec2cede124..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
@@ -20,6 +20,7 @@ import { environment } from '../../../environments/environment'
 import { VideoCaptionService } from '@app/shared/video-caption'
 import { MarkdownService } from '@app/shared/renderer'
 import {
+  videojs,
   CustomizationOptions,
   P2PMediaLoaderOptions,
   PeertubePlayerManager,
@@ -35,6 +36,7 @@ import { getStoredTheater } from '../../../assets/player/peertube-player-local-s
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PlatformLocation } from '@angular/common'
+import { randomInt } from '@shared/core-utils/miscs/miscs'
 
 @Component({
   selector: 'my-video-watch',
@@ -69,6 +71,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
   hotkeys: Hotkey[]
 
+  private nextVideoUuid = ''
   private currentTime: number
   private paramsSub: Subscription
   private queryParamsSub: Subscription
@@ -200,10 +203,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showSupportModal () {
+    this.pausePlayer()
+
     this.videoSupportModal.show()
   }
 
   showShareModal () {
+    this.pausePlayer()
+
     this.videoShareModal.show(this.currentTime)
   }
 
@@ -217,6 +224,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.tags
   }
 
+  onRecommendations (videos: Video[]) {
+    if (videos.length > 0) {
+      // Pick a random video until the recommendations are improved
+      this.nextVideoUuid = videos[randomInt(0,videos.length - 1)].uuid
+    }
+  }
+
+  onModalOpened () {
+    this.pausePlayer()
+  }
+
   onVideoRemoved () {
     this.redirectService.redirectToHomepage()
   }
@@ -459,7 +477,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
         redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
         trackerAnnounce: this.video.trackerUrls,
-        videoFiles: this.video.files
+        videoFiles: hlsPlaylist.files
       } as P2PMediaLoaderOptions
 
       Object.assign(options, { p2pMediaLoader })
@@ -467,6 +485,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.zone.runOutsideAngular(async () => {
       this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player)
+      this.player.focus()
 
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
 
@@ -477,6 +496,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player.one('ended', () => {
         if (this.playlist) {
           this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
+        } else if (this.user && this.user.autoPlayNextVideo) {
+          this.zone.run(() => this.autoplayNext())
         }
       })
 
@@ -489,6 +510,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player.on('theaterChange', (_: any, enabled: boolean) => {
         this.zone.run(() => this.theaterEnabled = enabled)
       })
+
+      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player })
     })
 
     this.setVideoDescriptionHTML()
@@ -497,7 +520,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setOpenGraphTags()
     this.checkUserRating()
 
-    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch')
+    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs })
+  }
+
+  private autoplayNext () {
+    if (this.nextVideoUuid) {
+      this.router.navigate([ '/videos/watch', this.nextVideoUuid ])
+    }
   }
 
   private setRating (nextRating: UserVideoRateType) {
@@ -601,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()
+  }
 }