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 d7c7b74971dfd1ad8f67cc73e79c5d7defa071d6..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,
@@ -34,6 +35,8 @@ import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watc
 import { getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
 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',
@@ -68,6 +71,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
   hotkeys: Hotkey[]
 
+  private nextVideoUuid = ''
   private currentTime: number
   private paramsSub: Subscription
   private queryParamsSub: Subscription
@@ -95,6 +99,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private i18n: I18n,
     private hotkeysService: HotkeysService,
     private hooks: HooksService,
+    private location: PlatformLocation,
     @Inject(LOCALE_ID) private localeId: string
   ) {}
 
@@ -198,10 +203,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showSupportModal () {
+    this.pausePlayer()
+
     this.videoSupportModal.show()
   }
 
   showShareModal () {
+    this.pausePlayer()
+
     this.videoShareModal.show(this.currentTime)
   }
 
@@ -215,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()
   }
@@ -374,13 +394,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
         this.i18n('Mature or explicit content')
       )
-      if (res === false) return this.redirectService.redirectToHomepage()
+      if (res === false) return this.location.back()
     }
 
     // Flush old player if needed
     this.flushPlayer()
 
-    // Build video element, because videojs remove it on dispose
+    // Build video element, because videojs removes it on dispose
     const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
     this.playerElement = document.createElement('video')
     this.playerElement.className = 'video-js vjs-peertube-skin'
@@ -457,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 })
@@ -465,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))
 
@@ -475,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())
         }
       })
 
@@ -487,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()
@@ -495,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) {
@@ -599,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()
+  }
 }