diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/audio/index.js | 23 |
1 files changed, 13 insertions, 10 deletions
diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js index 9d81fbff7..dfe058f6a 100644 --- a/app/javascript/flavours/glitch/features/audio/index.js +++ b/app/javascript/flavours/glitch/features/audio/index.js @@ -154,6 +154,7 @@ class Audio extends React.PureComponent { width: PropTypes.number, height: PropTypes.number, editable: PropTypes.bool, + fullscreen: PropTypes.bool, intl: PropTypes.object.isRequired, cacheWidth: PropTypes.func, }; @@ -180,7 +181,7 @@ class Audio extends React.PureComponent { _setDimensions () { const width = this.player.offsetWidth; - const height = width / (16/9); + const height = this.props.fullscreen ? this.player.offsetHeight : (width / (16/9)); if (this.props.cacheWidth) { this.props.cacheWidth(width); @@ -289,8 +290,10 @@ class Audio extends React.PureComponent { } handleProgress = () => { - if (this.audio.buffered.length > 0) { - this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 }); + const lastTimeRange = this.audio.buffered.length - 1; + + if (lastTimeRange > -1) { + this.setState({ buffer: Math.ceil(this.audio.buffered.end(lastTimeRange) / this.audio.duration * 100) }); } } @@ -347,18 +350,18 @@ class Audio extends React.PureComponent { handleMouseMove = throttle(e => { const { x } = getPointerPosition(this.seek, e); - const currentTime = Math.floor(this.audio.duration * x); + const currentTime = this.audio.duration * x; if (!isNaN(currentTime)) { this.setState({ currentTime }, () => { this.audio.currentTime = currentTime; }); } - }, 60); + }, 15); handleTimeUpdate = () => { this.setState({ - currentTime: Math.floor(this.audio.currentTime), + currentTime: this.audio.currentTime, duration: Math.floor(this.audio.duration), }); } @@ -371,7 +374,7 @@ class Audio extends React.PureComponent { this.audio.volume = x; }); } - }, 60); + }, 15); handleMouseEnter = () => { this.setState({ hovered: true }); @@ -436,6 +439,7 @@ class Audio extends React.PureComponent { _renderCanvas () { requestAnimationFrame(() => { + this.handleTimeUpdate(); this._clear(); this._draw(); @@ -607,7 +611,7 @@ class Audio extends React.PureComponent { const progress = (currentTime / duration) * 100; return ( - <div className={classNames('audio-player', { editable, 'with-light-background': darkText })} ref={this.setPlayerRef} style={{ width: '100%', height: this.state.height || this.props.height }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> + <div className={classNames('audio-player', { editable, 'with-light-background': darkText })} ref={this.setPlayerRef} style={{ width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <audio src={src} ref={this.setAudioRef} @@ -615,7 +619,6 @@ class Audio extends React.PureComponent { onPlay={this.handlePlay} onPause={this.handlePause} onProgress={this.handleProgress} - onTimeUpdate={this.handleTimeUpdate} crossOrigin='anonymous' /> @@ -676,7 +679,7 @@ class Audio extends React.PureComponent { </div> <span className='video-player__time'> - <span className='video-player__time-current'>{formatTime(currentTime)}</span> + <span className='video-player__time-current'>{formatTime(Math.floor(currentTime))}</span> <span className='video-player__time-sep'>/</span> <span className='video-player__time-total'>{formatTime(this.state.duration || Math.floor(this.props.duration))}</span> </span> |