X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-watch%2Fvideo-watch.component.ts;h=7a98cab3b09f5f1b03e17355b6b702df7c365f94;hb=db8b2f56c014a3fa207501f74e0bb5088ea41719;hp=7eb56eb48121d00ea432d092278d075898257d99;hpb=a800dbf345e856ab790e7b3ab9a97e8c5dfa0a32;p=github%2FChocobozzz%2FPeerTube.git

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 7eb56eb48..7a98cab3b 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -12,6 +12,7 @@ import {
   Notifier,
   PeerTubeSocket,
   RestExtractor,
+  ScreenService,
   ServerService,
   UserService
 } from '@app/core'
@@ -59,9 +60,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   player: any
   playerElement: HTMLVideoElement
+
   theaterEnabled = false
+
   userRating: UserVideoRateType = null
-  descriptionLoading = false
+
+  playerPlaceholderImgSrc: string
 
   video: VideoDetails = null
   videoCaptions: VideoCaption[] = []
@@ -69,13 +73,17 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   playlistPosition: number
   playlist: VideoPlaylist = null
 
+  descriptionLoading = false
   completeDescriptionShown = false
   completeVideoDescription: string
   shortVideoDescription: string
   videoHTMLDescription = ''
+
   likesBarTooltipText = ''
+
   hasAlreadyAcceptedPrivacyConcern = false
   remoteServerDown = false
+
   hotkeys: Hotkey[] = []
 
   tooltipLike = ''
@@ -126,14 +134,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private hotkeysService: HotkeysService,
     private hooks: HooksService,
     private peertubeSocket: PeerTubeSocket,
+    private screenService: ScreenService,
     private location: PlatformLocation,
     @Inject(LOCALE_ID) private localeId: string
-  ) {
-    this.tooltipLike = $localize`Like this video`
-    this.tooltipDislike = $localize`Dislike this video`
-    this.tooltipSupport = $localize`Support options for this video`
-    this.tooltipSaveToPlaylist = $localize`Save to playlist`
-  }
+  ) { }
 
   get user () {
     return this.authService.getUser()
@@ -144,6 +148,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   async ngOnInit () {
+    // Hide the tooltips for unlogged users in mobile view, this adds confusion with the popover
+    if (this.user || !this.screenService.isInMobileView()) {
+      this.tooltipLike = $localize`Like this video`
+      this.tooltipDislike = $localize`Dislike this video`
+      this.tooltipSupport = $localize`Support options for this video`
+      this.tooltipSaveToPlaylist = $localize`Save to playlist`
+    }
+
     PeertubePlayerManager.initState()
 
     this.serverConfig = this.serverService.getTmpConfig()
@@ -358,7 +370,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   handleTimestampClicked (timestamp: number) {
-    if (this.player) this.player.currentTime(timestamp)
+    if (!this.player || this.video.isLive) return
+
+    this.player.currentTime(timestamp)
     scrollToTop()
   }
 
@@ -402,7 +416,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.videoCaptionService.listCaptions(videoId)
     ])
       .pipe(
-        // If 401, the video is private or blocked so redirect to 404
+        // If 400, 403 or 404, the video is private or blocked so redirect to 404
         catchError(err => {
           if (err.body.errorCode === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && err.body.originUrl) {
             const search = window.location.search
@@ -414,9 +428,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
               $localize`Redirection`
             ).then(res => {
               if (res === false) {
-                return this.restExtractor.redirectTo404IfNotFound(err, [
+                return this.restExtractor.redirectTo404IfNotFound(err, 'video', [
                   HttpStatusCode.BAD_REQUEST_400,
-                  HttpStatusCode.UNAUTHORIZED_401,
                   HttpStatusCode.FORBIDDEN_403,
                   HttpStatusCode.NOT_FOUND_404
                 ])
@@ -426,9 +439,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
             })
           }
 
-          return this.restExtractor.redirectTo404IfNotFound(err, [
+          return this.restExtractor.redirectTo404IfNotFound(err, 'video', [
             HttpStatusCode.BAD_REQUEST_400,
-            HttpStatusCode.UNAUTHORIZED_401,
             HttpStatusCode.FORBIDDEN_403,
             HttpStatusCode.NOT_FOUND_404
           ])
@@ -462,10 +474,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.playlistService.getVideoPlaylist(playlistId)
       .pipe(
-        // If 401, the video is private or blocked so redirect to 404
-        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [
+        // If 400 or 403, the video is private or blocked so redirect to 404
+        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'video', [
           HttpStatusCode.BAD_REQUEST_400,
-          HttpStatusCode.UNAUTHORIZED_401,
           HttpStatusCode.FORBIDDEN_403,
           HttpStatusCode.NOT_FOUND_404
         ]))
@@ -535,8 +546,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.videoCaptions = videoCaptions
 
     // Re init attributes
+    this.playerPlaceholderImgSrc = undefined
     this.descriptionLoading = false
     this.completeDescriptionShown = false
+    this.completeVideoDescription = undefined
     this.remoteServerDown = false
     this.currentTime = undefined
 
@@ -548,12 +561,28 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (res === false) return this.location.back()
     }
 
-    const videoState = this.video.state.id
-    if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) return
+    this.buildPlayer(urlOptions)
+      .catch(err => console.error('Cannot build the player', err))
+
+    this.setVideoDescriptionHTML()
+    this.setVideoLikesBarTooltipText()
+
+    this.setOpenGraphTags()
+    this.checkUserRating()
+
+    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs })
+  }
 
+  private async buildPlayer (urlOptions: URLOptions) {
     // Flush old player if needed
     this.flushPlayer()
 
+    const videoState = this.video.state.id
+    if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) {
+      this.playerPlaceholderImgSrc = this.video.previewPath
+      return
+    }
+
     // Build video element, because videojs removes it on dispose
     const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
     this.playerElement = document.createElement('video')
@@ -563,7 +592,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     const params = {
       video: this.video,
-      videoCaptions,
+      videoCaptions: this.videoCaptions,
       urlOptions,
       user: this.user
     }
@@ -637,14 +666,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player, videojs, video: this.video })
     })
-
-    this.setVideoDescriptionHTML()
-    this.setVideoLikesBarTooltipText()
-
-    this.setOpenGraphTags()
-    this.checkUserRating()
-
-    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs })
   }
 
   private autoplayNext () {
@@ -907,6 +928,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       return
     }
 
+    console.log('Updating live views.')
+
     this.video.views = newViews
   }