Add ability to set a start time

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -102,7 +102,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (this.video && this.video.uuid === uuid) return
 
       this.videoService.getVideo(uuid).subscribe(
-        video => this.onVideoFetched(video),
+        video => {
+          const startTime = this.route.snapshot.queryParams.start
+          this.onVideoFetched(video, startTime)
+            .catch(err => this.handleError(err))
+        },
 
         error => {
           this.videoNotFound = true
@@ -315,7 +319,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                       )
   }
 
-  private async onVideoFetched (video: VideoDetails) {
+  private async onVideoFetched (video: VideoDetails, startTime = 0) {
     this.video = video
 
     // Re init attributes
@@ -350,7 +354,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       videoDuration: this.video.duration,
       enableHotkeys: true,
       peertubeLink: false,
-      poster: this.video.previewUrl
+      poster: this.video.previewUrl,
+      startTime
     })
 
     const self = this

client/src/assets/player/peertube-player.ts

@@ -21,7 +21,8 @@ function getVideojsOptions (options: {
   enableHotkeys: boolean,
   inactivityTimeout: number,
   peertubeLink: boolean,
-  poster: string
+  poster: string,
+  startTime: number
 }) {
   const videojsOptions = {
     controls: true,
@@ -34,7 +35,8 @@ function getVideojsOptions (options: {
         videoFiles: options.videoFiles,
         playerElement: options.playerElement,
         videoViewUrl: options.videoViewUrl,
-        videoDuration: options.videoDuration
+        videoDuration: options.videoDuration,
+        startTime: options.startTime
       }
     },
     controlBar: {

client/src/assets/player/peertube-videojs-plugin.ts

@@ -36,6 +36,7 @@ class PeerTubePlugin extends Plugin {
   private readonly playerElement: HTMLVideoElement
 
   private readonly autoplay: boolean = false
+  private readonly startTime: number = 0
   private readonly savePlayerSrcFunction: Function
   private readonly videoFiles: VideoFile[]
   private readonly videoViewUrl: string
@@ -71,6 +72,7 @@ class PeerTubePlugin extends Plugin {
     this.autoplay = this.player.options_.autoplay
     this.player.options_.autoplay = false
 
+    this.startTime = options.startTime
     this.videoFiles = options.videoFiles
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
@@ -94,7 +96,7 @@ class PeerTubePlugin extends Plugin {
       this.runViewAdd()
 
       this.player.one('play', () => {
-        // Don't run immediately scheduler, wait some seconds the TCP connections are maid
+        // Don't run immediately scheduler, wait some seconds the TCP connections are made
         this.runAutoQualitySchedulerTimer = setTimeout(() => {
           this.runAutoQualityScheduler()
         }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
@@ -234,10 +236,7 @@ class PeerTubePlugin extends Plugin {
     }
 
     const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
-    this.updateVideoFile(newVideoFile, delay, () => {
-      this.player.currentTime(currentTime)
-      this.player.handleTechSeeked_()
-    })
+    this.updateVideoFile(newVideoFile, delay, () => this.seek(currentTime))
   }
 
   flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
@@ -263,6 +262,11 @@ class PeerTubePlugin extends Plugin {
     this.trigger('autoResolutionUpdate')
   }
 
+  private seek (time: number) {
+    this.player.currentTime(time)
+    this.player.handleTechSeeked_()
+  }
+
   private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
     if (this.videoFiles === undefined || this.videoFiles.length === 0) return undefined
     if (this.videoFiles.length === 1) return this.videoFiles[0]
@@ -310,12 +314,18 @@ class PeerTubePlugin extends Plugin {
 
     if (this.autoplay === true) {
       this.player.posterImage.hide()
-      this.updateVideoFile(undefined, 0, () => this.player.play())
+      this.updateVideoFile(undefined, 0, () => {
+        this.seek(this.startTime)
+        this.player.play()
+      })
     } else {
       // Proxy first play
       const oldPlay = this.player.play.bind(this.player)
       this.player.play = () => {
-        this.updateVideoFile(undefined, 0, () => oldPlay)
+        this.updateVideoFile(undefined, 0, () => {
+          this.seek(this.startTime)
+          oldPlay()
+        })
         this.player.play = oldPlay
       }
     }

client/src/assets/player/peertube-videojs-typings.ts

@@ -21,6 +21,7 @@ type PeertubePluginOptions = {
   playerElement: HTMLVideoElement
   videoViewUrl: string
   videoDuration: number
+  startTime: number
 }
 
 // videojs typings don't have some method we need

client/src/standalone/videos/embed.ts

@@ -23,10 +23,15 @@ loadVideoInfo(videoId)
 
     const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
     let autoplay = false
+    let startTime = 0
 
     try {
       let params = new URL(window.location.toString()).searchParams
       autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true')
+
+      const startTimeParamString = params.get('start')
+      const startTimeParamNumber = parseInt(startTimeParamString, 10)
+      if (isNaN(startTimeParamNumber) === false) startTime = startTimeParamNumber
     } catch (err) {
       console.error('Cannot get params from URL.', err)
     }
@@ -40,7 +45,8 @@ loadVideoInfo(videoId)
       videoDuration: videoInfo.duration,
       enableHotkeys: true,
       peertubeLink: true,
-      poster: window.location.origin + videoInfo.previewPath
+      poster: window.location.origin + videoInfo.previewPath,
+      startTime
     })
     videojs(videoContainerId, videojsOptions, function () {
       const player = this