monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix various issues around OpenGraph representation of media 

Port audio player changes from 662a49dc3f to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2020-06-25 01:33:01 +02:00 committed by ThibG
parent e6dc2fd8eb
commit 8999eea707
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, width: PropTypes.number,
height: PropTypes.number, height: PropTypes.number,
editable: PropTypes.bool, editable: PropTypes.bool,
fullscreen: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
cacheWidth: PropTypes.func, cacheWidth: PropTypes.func,
}; };
@ -180,7 +181,7 @@ class Audio extends React.PureComponent {
_setDimensions () { _setDimensions () {
const width = this.player.offsetWidth; 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) { if (this.props.cacheWidth) {
this.props.cacheWidth(width); this.props.cacheWidth(width);
@ -289,8 +290,10 @@ class Audio extends React.PureComponent {
} }
handleProgress = () => { handleProgress = () => {
if (this.audio.buffered.length > 0) { const lastTimeRange = this.audio.buffered.length - 1;
this.setState({ buffer: this.audio.buffered.end(0) / this.audio.duration * 100 });
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 => { handleMouseMove = throttle(e => {
const { x } = getPointerPosition(this.seek, e); const { x } = getPointerPosition(this.seek, e);
const currentTime = Math.floor(this.audio.duration * x); const currentTime = this.audio.duration * x;
if (!isNaN(currentTime)) { if (!isNaN(currentTime)) {
this.setState({ currentTime }, () => { this.setState({ currentTime }, () => {
this.audio.currentTime = currentTime; this.audio.currentTime = currentTime;
}); });
} }
}, 60); }, 15);
handleTimeUpdate = () => { handleTimeUpdate = () => {
this.setState({ this.setState({
currentTime: Math.floor(this.audio.currentTime), currentTime: this.audio.currentTime,
duration: Math.floor(this.audio.duration), duration: Math.floor(this.audio.duration),
}); });
} }
@ -371,7 +374,7 @@ class Audio extends React.PureComponent {
this.audio.volume = x; this.audio.volume = x;
}); });
} }
}, 60); }, 15);
handleMouseEnter = () => { handleMouseEnter = () => {
this.setState({ hovered: true }); this.setState({ hovered: true });
@ -436,6 +439,7 @@ class Audio extends React.PureComponent {
_renderCanvas () { _renderCanvas () {
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.handleTimeUpdate();
this._clear(); this._clear();
this._draw(); this._draw();
@ -607,7 +611,7 @@ class Audio extends React.PureComponent {
const progress = (currentTime / duration) * 100; const progress = (currentTime / duration) * 100;
return ( 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 <audio
src={src} src={src}
ref={this.setAudioRef} ref={this.setAudioRef}
@ -615,7 +619,6 @@ class Audio extends React.PureComponent {
onPlay={this.handlePlay} onPlay={this.handlePlay}
onPause={this.handlePause} onPause={this.handlePause}
onProgress={this.handleProgress} onProgress={this.handleProgress}
onTimeUpdate={this.handleTimeUpdate}
crossOrigin='anonymous' crossOrigin='anonymous'
/> />
@ -676,7 +679,7 @@ class Audio extends React.PureComponent {
</div> </div>
<span className='video-player__time'> <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-sep'>/</span>
<span className='video-player__time-total'>{formatTime(this.state.duration || Math.floor(this.props.duration))}</span> <span className='video-player__time-total'>{formatTime(this.state.duration || Math.floor(this.props.duration))}</span>
</span> </span>