diff options
author | Chocobozzz <me@florianbigard.com> | 2018-04-05 17:06:59 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-04-05 17:12:22 +0200 |
commit | f37bad639b36d35c29a464dc52123a1e7c9cd28a (patch) | |
tree | 376ff9d09b091610cb943ee5fd4eebc7a17e4c22 /client/src | |
parent | 7ee4a4af0b01040e3896453ee68b3d429dc45cd4 (diff) | |
download | PeerTube-f37bad639b36d35c29a464dc52123a1e7c9cd28a.tar.gz PeerTube-f37bad639b36d35c29a464dc52123a1e7c9cd28a.tar.zst PeerTube-f37bad639b36d35c29a464dc52123a1e7c9cd28a.zip |
Add ability to set a start time
Diffstat (limited to 'client/src')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.ts | 11 | ||||
-rw-r--r-- | client/src/assets/player/peertube-player.ts | 6 | ||||
-rw-r--r-- | client/src/assets/player/peertube-videojs-plugin.ts | 24 | ||||
-rw-r--r-- | client/src/assets/player/peertube-videojs-typings.ts | 1 | ||||
-rw-r--r-- | client/src/standalone/videos/embed.ts | 8 |
5 files changed, 37 insertions, 13 deletions
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 { | |||
102 | if (this.video && this.video.uuid === uuid) return | 102 | if (this.video && this.video.uuid === uuid) return |
103 | 103 | ||
104 | this.videoService.getVideo(uuid).subscribe( | 104 | this.videoService.getVideo(uuid).subscribe( |
105 | video => this.onVideoFetched(video), | 105 | video => { |
106 | const startTime = this.route.snapshot.queryParams.start | ||
107 | this.onVideoFetched(video, startTime) | ||
108 | .catch(err => this.handleError(err)) | ||
109 | }, | ||
106 | 110 | ||
107 | error => { | 111 | error => { |
108 | this.videoNotFound = true | 112 | this.videoNotFound = true |
@@ -315,7 +319,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
315 | ) | 319 | ) |
316 | } | 320 | } |
317 | 321 | ||
318 | private async onVideoFetched (video: VideoDetails) { | 322 | private async onVideoFetched (video: VideoDetails, startTime = 0) { |
319 | this.video = video | 323 | this.video = video |
320 | 324 | ||
321 | // Re init attributes | 325 | // Re init attributes |
@@ -350,7 +354,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
350 | videoDuration: this.video.duration, | 354 | videoDuration: this.video.duration, |
351 | enableHotkeys: true, | 355 | enableHotkeys: true, |
352 | peertubeLink: false, | 356 | peertubeLink: false, |
353 | poster: this.video.previewUrl | 357 | poster: this.video.previewUrl, |
358 | startTime | ||
354 | }) | 359 | }) |
355 | 360 | ||
356 | const self = this | 361 | 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: { | |||
21 | enableHotkeys: boolean, | 21 | enableHotkeys: boolean, |
22 | inactivityTimeout: number, | 22 | inactivityTimeout: number, |
23 | peertubeLink: boolean, | 23 | peertubeLink: boolean, |
24 | poster: string | 24 | poster: string, |
25 | startTime: number | ||
25 | }) { | 26 | }) { |
26 | const videojsOptions = { | 27 | const videojsOptions = { |
27 | controls: true, | 28 | controls: true, |
@@ -34,7 +35,8 @@ function getVideojsOptions (options: { | |||
34 | videoFiles: options.videoFiles, | 35 | videoFiles: options.videoFiles, |
35 | playerElement: options.playerElement, | 36 | playerElement: options.playerElement, |
36 | videoViewUrl: options.videoViewUrl, | 37 | videoViewUrl: options.videoViewUrl, |
37 | videoDuration: options.videoDuration | 38 | videoDuration: options.videoDuration, |
39 | startTime: options.startTime | ||
38 | } | 40 | } |
39 | }, | 41 | }, |
40 | controlBar: { | 42 | 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 { | |||
36 | private readonly playerElement: HTMLVideoElement | 36 | private readonly playerElement: HTMLVideoElement |
37 | 37 | ||
38 | private readonly autoplay: boolean = false | 38 | private readonly autoplay: boolean = false |
39 | private readonly startTime: number = 0 | ||
39 | private readonly savePlayerSrcFunction: Function | 40 | private readonly savePlayerSrcFunction: Function |
40 | private readonly videoFiles: VideoFile[] | 41 | private readonly videoFiles: VideoFile[] |
41 | private readonly videoViewUrl: string | 42 | private readonly videoViewUrl: string |
@@ -71,6 +72,7 @@ class PeerTubePlugin extends Plugin { | |||
71 | this.autoplay = this.player.options_.autoplay | 72 | this.autoplay = this.player.options_.autoplay |
72 | this.player.options_.autoplay = false | 73 | this.player.options_.autoplay = false |
73 | 74 | ||
75 | this.startTime = options.startTime | ||
74 | this.videoFiles = options.videoFiles | 76 | this.videoFiles = options.videoFiles |
75 | this.videoViewUrl = options.videoViewUrl | 77 | this.videoViewUrl = options.videoViewUrl |
76 | this.videoDuration = options.videoDuration | 78 | this.videoDuration = options.videoDuration |
@@ -94,7 +96,7 @@ class PeerTubePlugin extends Plugin { | |||
94 | this.runViewAdd() | 96 | this.runViewAdd() |
95 | 97 | ||
96 | this.player.one('play', () => { | 98 | this.player.one('play', () => { |
97 | // Don't run immediately scheduler, wait some seconds the TCP connections are maid | 99 | // Don't run immediately scheduler, wait some seconds the TCP connections are made |
98 | this.runAutoQualitySchedulerTimer = setTimeout(() => { | 100 | this.runAutoQualitySchedulerTimer = setTimeout(() => { |
99 | this.runAutoQualityScheduler() | 101 | this.runAutoQualityScheduler() |
100 | }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER) | 102 | }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER) |
@@ -234,10 +236,7 @@ class PeerTubePlugin extends Plugin { | |||
234 | } | 236 | } |
235 | 237 | ||
236 | const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId) | 238 | const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId) |
237 | this.updateVideoFile(newVideoFile, delay, () => { | 239 | this.updateVideoFile(newVideoFile, delay, () => this.seek(currentTime)) |
238 | this.player.currentTime(currentTime) | ||
239 | this.player.handleTechSeeked_() | ||
240 | }) | ||
241 | } | 240 | } |
242 | 241 | ||
243 | flushVideoFile (videoFile: VideoFile, destroyRenderer = true) { | 242 | flushVideoFile (videoFile: VideoFile, destroyRenderer = true) { |
@@ -263,6 +262,11 @@ class PeerTubePlugin extends Plugin { | |||
263 | this.trigger('autoResolutionUpdate') | 262 | this.trigger('autoResolutionUpdate') |
264 | } | 263 | } |
265 | 264 | ||
265 | private seek (time: number) { | ||
266 | this.player.currentTime(time) | ||
267 | this.player.handleTechSeeked_() | ||
268 | } | ||
269 | |||
266 | private getAppropriateFile (averageDownloadSpeed?: number): VideoFile { | 270 | private getAppropriateFile (averageDownloadSpeed?: number): VideoFile { |
267 | if (this.videoFiles === undefined || this.videoFiles.length === 0) return undefined | 271 | if (this.videoFiles === undefined || this.videoFiles.length === 0) return undefined |
268 | if (this.videoFiles.length === 1) return this.videoFiles[0] | 272 | if (this.videoFiles.length === 1) return this.videoFiles[0] |
@@ -310,12 +314,18 @@ class PeerTubePlugin extends Plugin { | |||
310 | 314 | ||
311 | if (this.autoplay === true) { | 315 | if (this.autoplay === true) { |
312 | this.player.posterImage.hide() | 316 | this.player.posterImage.hide() |
313 | this.updateVideoFile(undefined, 0, () => this.player.play()) | 317 | this.updateVideoFile(undefined, 0, () => { |
318 | this.seek(this.startTime) | ||
319 | this.player.play() | ||
320 | }) | ||
314 | } else { | 321 | } else { |
315 | // Proxy first play | 322 | // Proxy first play |
316 | const oldPlay = this.player.play.bind(this.player) | 323 | const oldPlay = this.player.play.bind(this.player) |
317 | this.player.play = () => { | 324 | this.player.play = () => { |
318 | this.updateVideoFile(undefined, 0, () => oldPlay) | 325 | this.updateVideoFile(undefined, 0, () => { |
326 | this.seek(this.startTime) | ||
327 | oldPlay() | ||
328 | }) | ||
319 | this.player.play = oldPlay | 329 | this.player.play = oldPlay |
320 | } | 330 | } |
321 | } | 331 | } |
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 = { | |||
21 | playerElement: HTMLVideoElement | 21 | playerElement: HTMLVideoElement |
22 | videoViewUrl: string | 22 | videoViewUrl: string |
23 | videoDuration: number | 23 | videoDuration: number |
24 | startTime: number | ||
24 | } | 25 | } |
25 | 26 | ||
26 | // videojs typings don't have some method we need | 27 | // 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) | |||
23 | 23 | ||
24 | const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement | 24 | const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement |
25 | let autoplay = false | 25 | let autoplay = false |
26 | let startTime = 0 | ||
26 | 27 | ||
27 | try { | 28 | try { |
28 | let params = new URL(window.location.toString()).searchParams | 29 | let params = new URL(window.location.toString()).searchParams |
29 | autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true') | 30 | autoplay = params.has('autoplay') && (params.get('autoplay') === '1' || params.get('autoplay') === 'true') |
31 | |||
32 | const startTimeParamString = params.get('start') | ||
33 | const startTimeParamNumber = parseInt(startTimeParamString, 10) | ||
34 | if (isNaN(startTimeParamNumber) === false) startTime = startTimeParamNumber | ||
30 | } catch (err) { | 35 | } catch (err) { |
31 | console.error('Cannot get params from URL.', err) | 36 | console.error('Cannot get params from URL.', err) |
32 | } | 37 | } |
@@ -40,7 +45,8 @@ loadVideoInfo(videoId) | |||
40 | videoDuration: videoInfo.duration, | 45 | videoDuration: videoInfo.duration, |
41 | enableHotkeys: true, | 46 | enableHotkeys: true, |
42 | peertubeLink: true, | 47 | peertubeLink: true, |
43 | poster: window.location.origin + videoInfo.previewPath | 48 | poster: window.location.origin + videoInfo.previewPath, |
49 | startTime | ||
44 | }) | 50 | }) |
45 | videojs(videoContainerId, videojsOptions, function () { | 51 | videojs(videoContainerId, videojsOptions, function () { |
46 | const player = this | 52 | const player = this |