mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-24 21:45:59 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add ability to pause and play the stream by pressing the spacebar (#658)

Browse source 
* 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:
Thilo Billerbeck 2021-01-27 08:03:25 +01:00 committed by GitHub
parent cc391cae0b
commit 0225e341d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
webroot/js/app.js
View file

@ -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,