[Glitch] Fix various issues around OpenGraph representation of media

Port front-end changes (except for audio player) from 662a49dc3f to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1364/head
Eugen Rochko 2020-06-25 01:33:01 +02:00 committed by Thibaut Girka
parent dc99608bcf
commit 2bb25c7730
2 changed files with 52 additions and 10 deletions

View File

@ -185,15 +185,26 @@ class Video extends React.PureComponent {
handlePlay = () => {
this.setState({ paused: false });
this._updateTime();
}
handlePause = () => {
this.setState({ paused: true });
}
_updateTime () {
requestAnimationFrame(() => {
this.handleTimeUpdate();
if (!this.state.paused) {
this._updateTime();
}
});
}
handleTimeUpdate = () => {
this.setState({
currentTime: Math.floor(this.video.currentTime),
currentTime: this.video.currentTime,
duration: Math.floor(this.video.duration),
});
}
@ -231,7 +242,7 @@ class Video extends React.PureComponent {
this.video.volume = slideamt;
this.setState({ volume: slideamt });
}
}, 60);
}, 15);
handleMouseDown = e => {
document.addEventListener('mousemove', this.handleMouseMove, true);
@ -259,13 +270,14 @@ class Video extends React.PureComponent {
handleMouseMove = throttle(e => {
const { x } = getPointerPosition(this.seek, e);
const currentTime = Math.floor(this.video.duration * x);
const currentTime = this.video.duration * x;
if (!isNaN(currentTime)) {
this.video.currentTime = currentTime;
this.setState({ currentTime });
this.setState({ currentTime }, () => {
this.video.currentTime = currentTime;
});
}
}, 60);
}, 15);
togglePlay = () => {
if (this.state.paused) {
@ -374,8 +386,10 @@ class Video extends React.PureComponent {
}
handleProgress = () => {
if (this.video.buffered.length > 0) {
this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 });
const lastTimeRange = this.video.buffered.length - 1;
if (lastTimeRange > -1) {
this.setState({ buffer: Math.ceil(this.video.buffered.end(lastTimeRange) / this.video.duration * 100) });
}
}
@ -477,7 +491,6 @@ class Video extends React.PureComponent {
onClick={this.togglePlay}
onPlay={this.handlePlay}
onPause={this.handlePause}
onTimeUpdate={this.handleTimeUpdate}
onLoadedData={this.handleLoadedData}
onProgress={this.handleProgress}
onVolumeChange={this.handleVolumeChange}
@ -518,7 +531,7 @@ class Video extends React.PureComponent {
{(detailed || fullscreen) && (
<span>
<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(duration)}</span>
</span>

View File

@ -66,6 +66,35 @@ body {
}
}
&.player {
padding: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
& > div {
height: 100%;
}
.video-player video {
width: 100%;
height: 100%;
max-height: 100vh;
}
.media-gallery {
margin-top: 0;
height: 100% !important;
border-radius: 0;
}
.media-gallery__item {
border-radius: 0;
}
}
&.embed {
background: lighten($ui-base-color, 4%);
margin: 0;