mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-25 07:23:43 +01:00
Various fixes regarding the video position slider (#8201)
* Prevent default event handling when clicking on the video position slider This prevents accidental text selection when clicking on the position slider. * Fix bug when clicking on video position slider before starting the video * Slightly more aggressive video preloading - Preload video metadata if the video is loaded in detailed view, as it is likely to get played, and metadata is useful for seeking in the video. - Preload video data if it's fullscreen as it is extremely likely to get played right after being put in fullscreen (although those are two steps). - Preload video data if the user has clicked the position slider, as the video will play as soon as the mouse button is released, and video metadata is needed to properly seek into the video.
This commit is contained in:
parent
464daffdf9
commit
ec2c516ab8
1 changed files with 17 additions and 3 deletions
|
@ -158,6 +158,9 @@ export default class Video extends React.PureComponent {
|
||||||
this.setState({ dragging: true });
|
this.setState({ dragging: true });
|
||||||
this.video.pause();
|
this.video.pause();
|
||||||
this.handleMouseMove(e);
|
this.handleMouseMove(e);
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMouseUp = () => {
|
handleMouseUp = () => {
|
||||||
|
@ -174,8 +177,10 @@ export default class Video extends React.PureComponent {
|
||||||
const { x } = getPointerPosition(this.seek, e);
|
const { x } = getPointerPosition(this.seek, e);
|
||||||
const currentTime = Math.floor(this.video.duration * x);
|
const currentTime = Math.floor(this.video.duration * x);
|
||||||
|
|
||||||
this.video.currentTime = currentTime;
|
if (!isNaN(currentTime)) {
|
||||||
this.setState({ currentTime });
|
this.video.currentTime = currentTime;
|
||||||
|
this.setState({ currentTime });
|
||||||
|
}
|
||||||
}, 60);
|
}, 60);
|
||||||
|
|
||||||
togglePlay = () => {
|
togglePlay = () => {
|
||||||
|
@ -281,6 +286,15 @@ export default class Video extends React.PureComponent {
|
||||||
playerStyle.height = height;
|
playerStyle.height = height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let preload;
|
||||||
|
if (startTime || fullscreen || dragging) {
|
||||||
|
preload = 'auto';
|
||||||
|
} else if (detailed) {
|
||||||
|
preload = 'metadata';
|
||||||
|
} else {
|
||||||
|
preload = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
role='menuitem'
|
role='menuitem'
|
||||||
|
@ -296,7 +310,7 @@ export default class Video extends React.PureComponent {
|
||||||
ref={this.setVideoRef}
|
ref={this.setVideoRef}
|
||||||
src={src}
|
src={src}
|
||||||
poster={preview}
|
poster={preview}
|
||||||
preload={startTime ? 'auto' : 'none'}
|
preload={preload}
|
||||||
loop
|
loop
|
||||||
role='button'
|
role='button'
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
|
|
Loading…
Reference in a new issue