Add channel hooks

[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 067d3bc841d303821b6323e4e5cc502c3ea31387..8d9c08ab36edf9659f617443b64bb1bdd5656850 100644 (file)
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -1,6 +1,6 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { forkJoin, map, Observable, of, Subscription, switchMap } from 'rxjs'
-import { isP2PEnabled } from 'src/assets/player/utils'
+import { VideoJsPlayer } from 'video.js'
 import { PlatformLocation } from '@angular/common'
 import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -24,6 +24,8 @@ import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/sha
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
+import { logger } from '@root-helpers/logger'
+import { isP2PEnabled } from '@root-helpers/video'
 import { timeToInt } from '@shared/core-utils'
 import {
   HTMLServerConfig,
@@ -58,7 +60,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
-  player: any
+  player: VideoJsPlayer
   playerElement: HTMLVideoElement
   playerPlaceholderImgSrc: string
   theaterEnabled = false
@@ -71,6 +73,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   playlist: VideoPlaylist = null
 
   remoteServerDown = false
+  noPlaylistVideoFound = false
 
   private nextVideoUUID = ''
   private nextVideoTitle = ''
@@ -177,6 +180,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.loadVideo(videoId)
   }
 
+  onPlaylistNoVideoFound () {
+    this.noPlaylistVideoFound = true
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
@@ -219,7 +226,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         : parseInt(positionParam + '', 10)
 
       if (isNaN(this.playlistPosition)) {
-        console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
+        logger.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
         this.playlistPosition = 1
       }
 
@@ -235,6 +242,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     if (this.player) this.player.pause()
 
+    this.video = undefined
+
     const videoObs = this.hooks.wrapObsFun(
       this.videoService.getVideo.bind(this.videoService),
       { videoId },
@@ -285,6 +294,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private loadPlaylist (playlistId: string) {
     if (this.isSameElement(this.playlist, playlistId)) return
 
+    this.noPlaylistVideoFound = false
+
     this.playlistService.getVideoPlaylist(playlistId)
       .subscribe({
         next: playlist => {
@@ -370,7 +381,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
 
     this.buildPlayer(urlOptions, loggedInOrAnonymousUser)
-      .catch(err => console.error('Cannot build the player', err))
+      .catch(err => logger.error('Cannot build the player', err))
 
     this.setOpenGraphTags()
 
@@ -418,8 +429,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.zone.runOutsideAngular(async () => {
       this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
 
-      this.player.on('customError', ({ err }: { err: any }) => {
-        this.zone.run(() => this.handleGlobalError(err))
+      this.player.on('customError', (_e, data: any) => {
+        this.zone.run(() => this.handleGlobalError(data.err))
       })
 
       this.player.on('timeupdate', () => {
@@ -458,7 +469,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         suspended: () => {
           return (
-            !isXPercentInViewport(this.player.el(), 80) ||
+            !isXPercentInViewport(this.player.el() as HTMLElement, 80) ||
             !document.getElementById('content').contains(document.activeElement)
           )
         }
@@ -542,7 +553,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.player.dispose()
       this.player = undefined
     } catch (err) {
-      console.error('Cannot dispose player.', err)
+      logger.error('Cannot dispose player.', err)
     }
   }
 
@@ -552,9 +563,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     videoCaptions: VideoCaption[]
     urlOptions: CustomizationOptions & { playerMode: PlayerMode }
     loggedInOrAnonymousUser: User
-    user?: AuthUser
+    user?: AuthUser // Keep for plugins
   }) {
-    const { video, liveVideo, videoCaptions, urlOptions, loggedInOrAnonymousUser, user } = params
+    const { video, liveVideo, videoCaptions, urlOptions, loggedInOrAnonymousUser } = params
 
     const getStartTime = () => {
       const byUrl = urlOptions.startTime !== undefined
@@ -601,6 +612,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         startTime,
         stopTime: urlOptions.stopTime,
+        controlBar: urlOptions.controlBar,
         controls: urlOptions.controls,
         muted: urlOptions.muted,
         loop: urlOptions.loop,
@@ -614,21 +626,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
           ? this.videoService.getVideoViewUrl(video.uuid)
           : null,
+        authorizationHeader: this.authService.getRequestHeaderValue(),
+
         embedUrl: video.embedUrl,
         embedTitle: video.name,
+        instanceName: this.serverConfig.instance.name,
 
         isLive: video.isLive,
         liveOptions,
 
         language: this.localeId,
 
-        userWatching: user && user.videosHistoryEnabled === true
-          ? {
-            url: this.videoService.getUserWatchingVideoUrl(video.uuid),
-            authorizationHeader: this.authService.getRequestHeaderValue()
-          }
-          : undefined,
-
         serverUrl: environment.apiUrl,
 
         videoCaptions: playerCaptions,
@@ -712,7 +720,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private handleLiveStateChange (newState: VideoState) {
     if (newState !== VideoState.PUBLISHED) return
 
-    console.log('Loading video after live update.')
+    logger.info('Loading video after live update.')
 
     const videoUUID = this.video.uuid
 
@@ -723,11 +731,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private handleLiveViewsChange (newViewers: number) {
     if (!this.video) {
-      console.error('Cannot update video live views because video is no defined.')
+      logger.error('Cannot update video live views because video is no defined.')
       return
     }
 
-    console.log('Updating live views.')
+    logger.info('Updating live views.')
 
     this.video.viewers = newViewers
   }