treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[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
Eugen Rochko 2020-06-25 01:33:01 +02:00 committed by ThibG
parent 05f2993e3b
commit b907cc66e1
1 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/javascript/flavours/glitch/features/audio/index.js
View File

@ -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>