mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 21:45:59 +03:00
Add ability to pause and play the stream by pressing the spacebar (#658)
* make spacebar control the play state * improved keyboard handling * only allow pause and play when stream is online * some formatting fixes * remove event listener on destruction
This commit is contained in:
parent
cc391cae0b
commit
0225e341d1
1 changed files with 25 additions and 0 deletions
|
@ -91,6 +91,8 @@ export default class App extends Component {
|
|||
this.disableChatInput = this.disableChatInput.bind(this);
|
||||
this.setCurrentStreamDuration = this.setCurrentStreamDuration.bind(this);
|
||||
|
||||
this.handleKeyPressed = this.handleKeyPressed.bind(this);
|
||||
|
||||
// player events
|
||||
this.handlePlayerReady = this.handlePlayerReady.bind(this);
|
||||
this.handlePlayerPlaying = this.handlePlayerPlaying.bind(this);
|
||||
|
@ -112,6 +114,7 @@ export default class App extends Component {
|
|||
if (this.hasTouchScreen) {
|
||||
window.addEventListener('orientationchange', this.handleWindowResize);
|
||||
}
|
||||
window.addEventListener('keypress', this.handleKeyPressed);
|
||||
this.player = new OwncastPlayer();
|
||||
this.player.setupPlayerCallbacks({
|
||||
onReady: this.handlePlayerReady,
|
||||
|
@ -132,6 +135,7 @@ export default class App extends Component {
|
|||
window.removeEventListener('resize', this.handleWindowResize);
|
||||
window.removeEventListener('blur', this.handleWindowBlur);
|
||||
window.removeEventListener('focus', this.handleWindowFocus);
|
||||
window.removeEventListener('keypress', this.handleKeyPressed);
|
||||
if (this.hasTouchScreen) {
|
||||
window.removeEventListener('orientationchange', this.handleWindowResize);
|
||||
}
|
||||
|
@ -361,6 +365,27 @@ export default class App extends Component {
|
|||
window.document.title = this.state.configData && this.state.configData.title;
|
||||
}
|
||||
|
||||
handleSpaceBarPressed(e) {
|
||||
e.preventDefault();
|
||||
if(this.state.isPlaying) {
|
||||
this.setState({
|
||||
isPlaying: false,
|
||||
});
|
||||
this.player.vjsPlayer.pause();
|
||||
} else {
|
||||
this.setState({
|
||||
isPlaying: true,
|
||||
});
|
||||
this.player.vjsPlayer.play();
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyPressed(e) {
|
||||
if (e.code === 'Space' && e.target === document.body && this.state.streamOnline) {
|
||||
this.handleSpaceBarPressed(e);
|
||||
}
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const {
|
||||
chatInputEnabled,
|
||||
|
|
Loading…
Reference in a new issue