LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Added requested event handling changes

Browse source
This commit is contained in:
Akinwale Ariwodola 2017-07-01 22:57:14 +01:00
parent fb3785feed
commit 49900e0cdf
2 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/js/component/video/internal/play-button.jsx
View file

@ -5,7 +5,12 @@ import Modal from "component/modal";
class VideoPlayButton extends React.PureComponent { class VideoPlayButton extends React.PureComponent {
componentDidMount() { 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() { onPurchaseConfirmed() {
@ -15,7 +20,7 @@ class VideoPlayButton extends React.PureComponent {
} }
onKeyDown(event) { onKeyDown(event) {
if (event.keyCode === 32) { if ("Space" === event.code) {
event.preventDefault(); event.preventDefault();
this.onWatchClick(); this.onWatchClick();
} }
@ -56,10 +61,9 @@ class VideoPlayButton extends React.PureComponent {
isLoading || isLoading ||
fileInfo === undefined || fileInfo === undefined ||
(fileInfo === null && (!costInfo || costInfo.cost === undefined)); (fileInfo === null && (!costInfo || costInfo.cost === undefined));
const icon = const icon = ["audio", "video"].indexOf(mediaType) !== -1
["audio", "video"].indexOf(mediaType) !== -1 ? "icon-play"
? "icon-play" : "icon-folder-o";
: "icon-folder-o";
return ( return (
<div> <div>

16
ui/js/component/video/internal/player.jsx
View file

@ -13,6 +13,8 @@ class VideoPlayer extends React.PureComponent {
startedPlaying: false, startedPlaying: false,
unplayable: false, unplayable: false,
}; };
this.togglePlayListener = this.togglePlay.bind(this);
} }
componentDidMount() { componentDidMount() {
@ -33,7 +35,7 @@ class VideoPlayer extends React.PureComponent {
renderMediaCallback.bind(this) renderMediaCallback.bind(this)
); );
document.addEventListener("keydown", this.togglePlay.bind(this)); document.addEventListener("keydown", this.togglePlayListener);
const mediaElement = this.refs.media.children[0]; const mediaElement = this.refs.media.children[0];
if (mediaElement) { if (mediaElement) {
mediaElement.addEventListener( mediaElement.addEventListener(
@ -43,13 +45,21 @@ class VideoPlayer extends React.PureComponent {
once: true, 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) { togglePlay(event) {
// ignore all events except click and spacebar keydown // ignore all events except click and spacebar keydown
if ("keydown" === event.type && event.keyCode !== 32) { if ("keydown" === event.type && "Space" !== event.code) {
return; return;
} }
event.preventDefault(); event.preventDefault();