[Glitch] Fix various issues around OpenGraph representation of media
Port audio player changes from 12ac904a33
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
lolsob-rspec
parent
05f2993e3b
commit
b907cc66e1
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue