Use HTML config when possible

[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 7f3ceeebc3fca93b1c39493f1d2119efea13ff74..51d486ea5d664f63b1ab6bb905b189d5913ef240 100644 (file)
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -9,6 +9,7 @@ import {
   AuthUser,
   ConfirmService,
   MarkdownService,
+  MetaService,
   Notifier,
   PeerTubeSocket,
   RestExtractor,
@@ -25,10 +26,17 @@ import { SupportModalComponent } from '@app/shared/shared-support-modal'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { VideoActionsDisplayType, VideoDownloadComponent } from '@app/shared/shared-video-miniature'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
-import { MetaService } from '@ngx-meta/core'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
-import { ServerConfig, ServerErrorCode, UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '@shared/models'
+import {
+  HTMLServerConfig,
+  PeerTubeProblemDocument,
+  ServerErrorCode,
+  UserVideoRateType,
+  VideoCaption,
+  VideoPrivacy,
+  VideoState
+} from '@shared/models'
 import {
   cleanupVideoWatch,
   getStoredP2PEnabled,
@@ -116,7 +124,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private configSub: Subscription
   private liveVideosSub: Subscription
 
-  private serverConfig: ServerConfig
+  private serverConfig: HTMLServerConfig
 
   constructor (
     private elementRef: ElementRef,
@@ -163,21 +171,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     PeertubePlayerManager.initState()
 
-    this.serverConfig = this.serverService.getTmpConfig()
-
-    this.configSub = this.serverService.getConfig()
-        .subscribe(config => {
-          this.serverConfig = config
+    this.serverConfig = this.serverService.getHTMLConfig()
+    if (
+      isWebRTCDisabled() ||
+      this.serverConfig.tracker.enabled === false ||
+      getStoredP2PEnabled() === false ||
+      peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
+    ) {
+      this.hasAlreadyAcceptedPrivacyConcern = true
+    }
 
-          if (
-            isWebRTCDisabled() ||
-            this.serverConfig.tracker.enabled === false ||
-            getStoredP2PEnabled() === false ||
-            peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
-          ) {
-            this.hasAlreadyAcceptedPrivacyConcern = true
-          }
-        })
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const videoId = routeParams[ 'videoId' ]
@@ -188,7 +191,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     })
 
     this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
-      this.playlistPosition = queryParams[ 'playlistPosition' ]
+      // Handle the ?playlistPosition
+      const positionParam = queryParams[ 'playlistPosition' ] ?? 1
+
+      this.playlistPosition = positionParam === 'last'
+        ? -1 // Handle the "last" index
+        : parseInt(positionParam + '', 10)
+
+      if (isNaN(this.playlistPosition)) {
+        console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
+        this.playlistPosition = 1
+      }
+
       this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
 
       const start = queryParams[ 'start' ]
@@ -284,23 +298,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showSupportModal () {
-    // Check video was playing before opening support modal
-    const isVideoPlaying = this.isPlaying()
-
-    this.pausePlayer()
-
-    const modalRef = this.supportModal.show()
-
-    modalRef.result.then(() => {
-      if (isVideoPlaying) {
-        this.resumePlayer()
-      }
-    })
+    this.supportModal.show()
   }
 
   showShareModal () {
-    this.pausePlayer()
-
     this.videoShareModal.show(this.currentTime, this.videoWatchPlaylist.currentPlaylistPosition)
   }
 
@@ -308,6 +309,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn()
   }
 
+  getVideoUrl () {
+    if (!this.video.url) {
+      return this.video.originInstanceUrl + VideoDetails.buildClientUrl(this.video.uuid)
+    }
+    return this.video.url
+  }
+
   getVideoTags () {
     if (!this.video || Array.isArray(this.video.tags) === false) return []
 
@@ -323,10 +331,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     }
   }
 
-  onModalOpened () {
-    this.pausePlayer()
-  }
-
   onVideoRemoved () {
     this.redirectService.redirectToHomepage()
   }
@@ -430,9 +434,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       .pipe(
         // 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 errorBody = err.body as PeerTubeProblemDocument
+
+          if (errorBody.code === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && errorBody.originUrl) {
             const search = window.location.search
-            let originUrl = err.body.originUrl
+            let originUrl = errorBody.originUrl
             if (search) originUrl += search
 
             this.confirmService.confirm(
@@ -508,7 +514,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   private async setVideoDescriptionHTML () {
     const html = await this.markdownService.textMarkdownToHTML(this.video.description)
-    this.videoHTMLDescription = await this.markdownService.processVideoTimestamps(html)
+    this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html)
   }
 
   private setVideoLikesBarTooltipText () {
@@ -582,7 +588,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.setOpenGraphTags()
     this.checkUserRating()
 
-    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', { videojs })
+    const hookOptions = {
+      videojs,
+      video: this.video,
+      playlist: this.playlist
+    }
+    this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
   }
 
   private async buildPlayer (urlOptions: URLOptions) {
@@ -668,7 +679,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       this.player.one('ended', () => {
         if (this.video.isLive) {
-          this.video.state.id = VideoState.LIVE_ENDED
+          this.zone.run(() => this.video.state.id = VideoState.LIVE_ENDED)
         }
       })
 
@@ -684,7 +695,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (this.playlist) {
       this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
     } else if (this.nextVideoUuid) {
-      this.router.navigate([ '/videos/watch', this.nextVideoUuid ])
+      this.router.navigate([ '/w', this.nextVideoUuid ])
     }
   }
 
@@ -852,6 +863,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       }
     }
 
+    // Only set this if we're in a playlist
+    if (this.playlist) {
+      options.common.previousVideo = () => {
+        this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
+      }
+    }
+
     let mode: PlayerMode
 
     if (urlOptions.playerMode) {
@@ -884,24 +902,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return { playerMode: mode, playerOptions: options }
   }
 
-  private pausePlayer () {
-    if (!this.player) return
-
-    this.player.pause()
-  }
-
-  private resumePlayer () {
-    if (!this.player) return
-
-    this.player.play()
-  }
-
-  private isPlaying () {
-    if (!this.player) return
-
-    return !this.player.paused()
-  }
-
   private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
     if (!this.liveVideosSub) {
       this.liveVideosSub = this.buildLiveEventsSubscription()