Fix infinite scroll on big screens

[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 cf9dc8f9ce6327e89d5dbe74f71174a93524979e..d7c7b74971dfd1ad8f67cc73e79c5d7defa071d6 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -31,6 +31,9 @@ import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.
 import { Video } from '@app/shared/video/video.model'
 import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
 import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
+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'
 
 @Component({
   selector: 'my-video-watch',
@@ -40,18 +43,20 @@ import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watc
 export class VideoWatchComponent implements OnInit, OnDestroy {
   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
 
-  @ViewChild('videoWatchPlaylist') videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
+  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
+  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
+  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
 
   player: any
   playerElement: HTMLVideoElement
   theaterEnabled = false
   userRating: UserVideoRateType = null
-  video: VideoDetails = null
   descriptionLoading = false
 
+  video: VideoDetails = null
+  videoCaptions: VideoCaption[] = []
+
   playlist: VideoPlaylist = null
 
   completeDescriptionShown = false
@@ -82,12 +87,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private serverService: ServerService,
     private restExtractor: RestExtractor,
     private notifier: Notifier,
+    private pluginService: PluginService,
     private markdownService: MarkdownService,
     private zone: NgZone,
     private redirectService: RedirectService,
     private videoCaptionService: VideoCaptionService,
     private i18n: I18n,
     private hotkeysService: HotkeysService,
+    private hooks: HooksService,
     @Inject(LOCALE_ID) private localeId: string
   ) {}
 
@@ -95,7 +102,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.getUser()
   }
 
-  ngOnInit () {
+  async ngOnInit () {
     this.configSub = this.serverService.configLoaded
         .subscribe(() => {
           if (
@@ -121,6 +128,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     })
 
     this.initHotkeys()
+
+    this.theaterEnabled = getStoredTheater()
+
+    this.hooks.runAction('action:video-watch.init', 'video-watch')
   }
 
   ngOnDestroy () {
@@ -235,11 +246,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     if (this.player) this.player.pause()
 
+    const videoObs = this.hooks.wrapObsFun(
+      this.videoService.getVideo.bind(this.videoService),
+      { videoId },
+      'video-watch',
+      'filter:api.video-watch.video.get.params',
+      'filter:api.video-watch.video.get.result'
+    )
+
     // Video did change
-    forkJoin(
-      this.videoService.getVideo(videoId),
+    forkJoin([
+      videoObs,
       this.videoCaptionService.listCaptions(videoId)
-    )
+    ])
       .pipe(
         // If 401, the video is private or blacklisted so redirect to 404
         catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
@@ -336,6 +355,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     urlOptions: CustomizationOptions & { playerMode: PlayerMode }
   ) {
     this.video = video
+    this.videoCaptions = videoCaptions
 
     // Re init attributes
     this.descriptionLoading = false
@@ -444,8 +464,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
 
     this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize(mode, options)
-      this.theaterEnabled = this.player.theaterEnabled
+      this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player)
 
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
 
@@ -475,6 +494,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.setOpenGraphTags()
     this.checkUserRating()
+
+    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch')
   }
 
   private setRating (nextRating: UserVideoRateType) {