From e11c8e9232e1aa15c8f85938a2c2e99a115b3a29 Mon Sep 17 00:00:00 2001 From: markveronich Date: Thu, 27 Jul 2017 14:32:52 +0100 Subject: [PATCH] Allow seekTo to accept number of seconds Fixes https://github.com/CookPete/react-player/issues/75 --- README.md | 2 +- src/players/Base.js | 12 +++++++++--- src/players/DailyMotion.js | 6 +++--- src/players/Facebook.js | 6 +++--- src/players/FilePlayer.js | 9 +++------ src/players/Vimeo.js | 6 +++--- src/players/Wistia.js | 6 +++--- src/players/YouTube.js | 6 +++--- 8 files changed, 28 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index a10db18..45475fb 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,7 @@ Use [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to call Prop | Description ---- | ----------- -`seekTo(fraction)` | Seek to the specified fraction (from 0 to 1) of the currently playing media +`seekTo(amount)` | Seek to the given number of seconds, or fraction if `amount` is between `0` and `1`. `getCurrentTime()` | Returns the number of seconds that has been played.
Returns `null` if duration is unavailable. `getDuration()` | Returns the duration (in seconds) of the currently playing media.
Returns `null` if duration is unavailable. diff --git a/src/players/Base.js b/src/players/Base.js index 789b0dd..41f985b 100644 --- a/src/players/Base.js +++ b/src/players/Base.js @@ -45,14 +45,20 @@ export default class Base extends Component { shouldComponentUpdate (nextProps) { return this.props.url !== nextProps.url } - seekTo (fraction) { + seekTo (amount) { // When seeking before player is ready, store value and seek later - if (!this.isReady && fraction !== 0) { - this.seekOnPlay = fraction + if (!this.isReady && amount !== 0) { + this.seekOnPlay = amount setTimeout(() => { this.seekOnPlay = null }, SEEK_ON_PLAY_EXPIRY) } + // Return the seconds to seek to + if (amount > 0 && amount < 1) { + // Convert fraction to seconds based on duration + return this.getDuration() * amount + } + return amount } onPlay = () => { const { volume, onStart, onPlay, onDuration, playbackRate } = this.props diff --git a/src/players/DailyMotion.js b/src/players/DailyMotion.js index e2efc05..0ad06d1 100644 --- a/src/players/DailyMotion.js +++ b/src/players/DailyMotion.js @@ -116,10 +116,10 @@ export default class DailyMotion extends Base { stop () { // Nothing to do } - seekTo (fraction) { - super.seekTo(fraction) + seekTo (amount) { + const seconds = super.seekTo(amount) if (!this.isReady || !this.player.seek) return - this.player.seek(this.getDuration() * fraction) + this.player.seek(seconds) } setVolume (fraction) { if (!this.isReady || !this.player.setVolume) return diff --git a/src/players/Facebook.js b/src/players/Facebook.js index f187592..9c928bb 100644 --- a/src/players/Facebook.js +++ b/src/players/Facebook.js @@ -72,10 +72,10 @@ export default class YouTube extends Base { stop () { // No need to stop } - seekTo (fraction) { - super.seekTo(fraction) + seekTo (amount) { + const seconds = super.seekTo(amount) if (!this.isReady) return - this.player.seek(this.getDuration() * fraction) + this.player.seek(seconds) } setVolume (fraction) { if (!this.isReady) return diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js index a160e2d..3a7a25e 100644 --- a/src/players/FilePlayer.js +++ b/src/players/FilePlayer.js @@ -75,12 +75,9 @@ export default class FilePlayer extends Base { this.hls.detachMedia() } } - seekTo (fraction) { - if (fraction === 1) { - this.pause() - } - super.seekTo(fraction) - this.player.currentTime = this.getDuration() * fraction + seekTo (amount) { + const seconds = super.seekTo(amount) + this.player.currentTime = seconds } setVolume (fraction) { this.player.volume = fraction diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js index eb80423..9621a72 100644 --- a/src/players/Vimeo.js +++ b/src/players/Vimeo.js @@ -92,10 +92,10 @@ export default class Vimeo extends Base { if (!this.isReady) return this.player.unload() } - seekTo (fraction) { - super.seekTo(fraction) + seekTo (amount) { + const seconds = super.seekTo(amount) if (!this.isReady || !this.player.setCurrentTime) return - this.player.setCurrentTime(this.duration * fraction) + this.player.setCurrentTime(seconds) } setVolume (fraction) { this.player.setVolume(fraction) diff --git a/src/players/Wistia.js b/src/players/Wistia.js index 5de2412..ecebea6 100644 --- a/src/players/Wistia.js +++ b/src/players/Wistia.js @@ -66,10 +66,10 @@ export default class Wistia extends Base { if (!this.isReady || !this.player) return this.player.pause() } - seekTo (fraction) { - super.seekTo(fraction) + seekTo (amount) { + const seconds = super.seekTo(amount) if (!this.isReady || !this.player) return - this.player.time(this.getDuration() * fraction) + this.player.time(seconds) } setVolume (fraction) { if (!this.isReady || !this.player || !this.player.volume) return diff --git a/src/players/YouTube.js b/src/players/YouTube.js index 37da8f9..6596ad2 100644 --- a/src/players/YouTube.js +++ b/src/players/YouTube.js @@ -110,10 +110,10 @@ export default class YouTube extends Base { if (!document.body.contains(this.player.getIframe())) return this.player.stopVideo() } - seekTo (fraction) { - super.seekTo(fraction) + seekTo (amount) { + const seconds = super.seekTo(amount) if (!this.isReady || !this.player.seekTo) return - this.player.seekTo(this.getDuration() * fraction) + this.player.seekTo(seconds) } setVolume (fraction) { if (!this.isReady || !this.player.setVolume) return