From f37bad639b36d35c29a464dc52123a1e7c9cd28a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 5 Apr 2018 17:06:59 +0200 Subject: Add ability to set a start time --- .../videos/+video-watch/video-watch.component.ts | 11 +++++++--- client/src/assets/player/peertube-player.ts | 6 ++++-- .../src/assets/player/peertube-videojs-plugin.ts | 24 +++++++++++++++------- .../src/assets/player/peertube-videojs-typings.ts | 1 + client/src/standalone/videos/embed.ts | 8 +++++++- 5 files changed, 37 insertions(+), 13 deletions(-) (limited to 'client') 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 b595ddcb7..df5b8d02d 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/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 diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts index 58a8aa26c..e8a258065 100644 --- a/client/src/assets/player/peertube-player.ts +++ b/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: { diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 2eddcb1d8..ddb73d074 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/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 } } diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts index a58fa6505..a66caa30b 100644 --- a/client/src/assets/player/peertube-videojs-typings.ts +++ b/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 diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 1efecd3f3..a99bc586f 100644 --- a/client/src/standalone/videos/embed.ts +++ b/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 -- cgit v1.2.3