fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-30 16:41:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Fix various issues around OpenGraph representation of media

Browse source 
Port front-end changes (except for audio player) 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 Thibaut Girka
parent dc99608bcf
commit 2bb25c7730
2 changed files with 52 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/javascript/flavours/glitch/features/video/index.js
View file

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

29
app/javascript/flavours/glitch/styles/basics.scss
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 { &.embed {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
margin: 0; margin: 0;