|
|
|
@ -262,6 +262,81 @@ class Video extends React.PureComponent {
|
|
|
|
|
}
|
|
|
|
|
}, 60);
|
|
|
|
|
|
|
|
|
|
seekBy(time) {
|
|
|
|
|
const currentTime = this.video.currentTime + time;
|
|
|
|
|
|
|
|
|
|
if (!isNaN(currentTime)) {
|
|
|
|
|
this.setState({ currentTime }, () => {
|
|
|
|
|
this.video.currentTime = currentTime;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleVideoKeyDown = e => {
|
|
|
|
|
// On the video element or the seek bar, we can safely use the space bar
|
|
|
|
|
// for playback control because there are no buttons to press
|
|
|
|
|
|
|
|
|
|
if (e.key === ' ') {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.togglePlay();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleKeyDown = e => {
|
|
|
|
|
const frameTime = 1 / 25;
|
|
|
|
|
|
|
|
|
|
switch(e.key) {
|
|
|
|
|
case 'k':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.togglePlay();
|
|
|
|
|
break;
|
|
|
|
|
case 'm':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.toggleMute();
|
|
|
|
|
break;
|
|
|
|
|
case 'f':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.toggleFullscreen();
|
|
|
|
|
break;
|
|
|
|
|
case 'j':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.seekBy(-10);
|
|
|
|
|
break;
|
|
|
|
|
case 'l':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.seekBy(10);
|
|
|
|
|
break;
|
|
|
|
|
case ',':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.seekBy(-frameTime);
|
|
|
|
|
break;
|
|
|
|
|
case '.':
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
this.seekBy(frameTime);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// If we are in fullscreen mode, we don't want any hotkeys
|
|
|
|
|
// interacting with the UI that's not visible
|
|
|
|
|
|
|
|
|
|
if (this.state.fullscreen) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
|
|
|
|
if (e.key === 'Escape') {
|
|
|
|
|
exitFullscreen();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
togglePlay = () => {
|
|
|
|
|
if (this.state.paused) {
|
|
|
|
|
this.setState({ paused: false }, () => this.video.play());
|
|
|
|
@ -450,6 +525,7 @@ class Video extends React.PureComponent {
|
|
|
|
|
onMouseEnter={this.handleMouseEnter}
|
|
|
|
|
onMouseLeave={this.handleMouseLeave}
|
|
|
|
|
onClick={this.handleClickRoot}
|
|
|
|
|
onKeyDown={this.handleKeyDown}
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
>
|
|
|
|
|
<Blurhash
|
|
|
|
@ -472,6 +548,7 @@ class Video extends React.PureComponent {
|
|
|
|
|
height={height || 300}
|
|
|
|
|
volume={volume}
|
|
|
|
|
onClick={this.togglePlay}
|
|
|
|
|
onKeyDown={this.handleVideoKeyDown}
|
|
|
|
|
onPlay={this.handlePlay}
|
|
|
|
|
onPause={this.handlePause}
|
|
|
|
|
onTimeUpdate={this.handleTimeUpdate}
|
|
|
|
@ -495,6 +572,7 @@ class Video extends React.PureComponent {
|
|
|
|
|
className={classNames('video-player__seek__handle', { active: dragging })}
|
|
|
|
|
tabIndex='0'
|
|
|
|
|
style={{ left: `${progress}%` }}
|
|
|
|
|
onKeyDown={this.handleVideoKeyDown}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|