Added requested event handling changes
This commit is contained in:
parent
fb3785feed
commit
49900e0cdf
2 changed files with 23 additions and 9 deletions
|
@ -5,7 +5,12 @@ import Modal from "component/modal";
|
|||
|
||||
class VideoPlayButton extends React.PureComponent {
|
||||
componentDidMount() {
|
||||
document.addEventListener("keydown", this.onKeyDown.bind(this));
|
||||
this.keyDownListener = this.onKeyDown.bind(this);
|
||||
document.addEventListener("keydown", this.keyDownListener);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("keydown", this.keyDownListener);
|
||||
}
|
||||
|
||||
onPurchaseConfirmed() {
|
||||
|
@ -15,7 +20,7 @@ class VideoPlayButton extends React.PureComponent {
|
|||
}
|
||||
|
||||
onKeyDown(event) {
|
||||
if (event.keyCode === 32) {
|
||||
if ("Space" === event.code) {
|
||||
event.preventDefault();
|
||||
this.onWatchClick();
|
||||
}
|
||||
|
@ -56,10 +61,9 @@ class VideoPlayButton extends React.PureComponent {
|
|||
isLoading ||
|
||||
fileInfo === undefined ||
|
||||
(fileInfo === null && (!costInfo || costInfo.cost === undefined));
|
||||
const icon =
|
||||
["audio", "video"].indexOf(mediaType) !== -1
|
||||
? "icon-play"
|
||||
: "icon-folder-o";
|
||||
const icon = ["audio", "video"].indexOf(mediaType) !== -1
|
||||
? "icon-play"
|
||||
: "icon-folder-o";
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
|
@ -13,6 +13,8 @@ class VideoPlayer extends React.PureComponent {
|
|||
startedPlaying: false,
|
||||
unplayable: false,
|
||||
};
|
||||
|
||||
this.togglePlayListener = this.togglePlay.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -33,7 +35,7 @@ class VideoPlayer extends React.PureComponent {
|
|||
renderMediaCallback.bind(this)
|
||||
);
|
||||
|
||||
document.addEventListener("keydown", this.togglePlay.bind(this));
|
||||
document.addEventListener("keydown", this.togglePlayListener);
|
||||
const mediaElement = this.refs.media.children[0];
|
||||
if (mediaElement) {
|
||||
mediaElement.addEventListener(
|
||||
|
@ -43,13 +45,21 @@ class VideoPlayer extends React.PureComponent {
|
|||
once: true,
|
||||
}
|
||||
);
|
||||
mediaElement.addEventListener("click", this.togglePlay.bind(this));
|
||||
mediaElement.addEventListener("click", this.togglePlayListener);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("keydown", this.togglePlayListener);
|
||||
const mediaElement = this.refs.media.children[0];
|
||||
if (mediaElement) {
|
||||
mediaElement.removeEventListener("click", this.togglePlayListener);
|
||||
}
|
||||
}
|
||||
|
||||
togglePlay(event) {
|
||||
// ignore all events except click and spacebar keydown
|
||||
if ("keydown" === event.type && event.keyCode !== 32) {
|
||||
if ("keydown" === event.type && "Space" !== event.code) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
|
|
Loading…
Reference in a new issue