Implemented the ability for the spacebar to initiate video playback

This commit is contained in:
Akinwale Ariwodola 2017-07-01 21:48:12 +01:00
parent b43ed0b64f
commit fb3785feed
2 changed files with 21 additions and 7 deletions

View file

@ -4,12 +4,23 @@ import Link from "component/link";
import Modal from "component/modal"; import Modal from "component/modal";
class VideoPlayButton extends React.PureComponent { class VideoPlayButton extends React.PureComponent {
componentDidMount() {
document.addEventListener("keydown", this.onKeyDown.bind(this));
}
onPurchaseConfirmed() { onPurchaseConfirmed() {
this.props.closeModal(); this.props.closeModal();
this.props.startPlaying(); this.props.startPlaying();
this.props.loadVideo(this.props.uri); this.props.loadVideo(this.props.uri);
} }
onKeyDown(event) {
if (event.keyCode === 32) {
event.preventDefault();
this.onWatchClick();
}
}
onWatchClick() { onWatchClick() {
this.props.purchaseUri(this.props.uri).then(() => { this.props.purchaseUri(this.props.uri).then(() => {
if (!this.props.modal) { if (!this.props.modal) {
@ -45,7 +56,8 @@ 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 = ["audio", "video"].indexOf(mediaType) !== -1 const icon =
["audio", "video"].indexOf(mediaType) !== -1
? "icon-play" ? "icon-play"
: "icon-folder-o"; : "icon-folder-o";
@ -73,9 +85,11 @@ class VideoPlayButton extends React.PureComponent {
onConfirmed={this.onPurchaseConfirmed.bind(this)} onConfirmed={this.onPurchaseConfirmed.bind(this)}
onAborted={closeModal} onAborted={closeModal}
> >
{__("This will purchase")} <strong>{title}</strong> {__("for")} {__("This will purchase")} <strong>{title}</strong> {__("for")}{" "}
{" "}<strong><FilePrice uri={uri} look="plain" /></strong> <strong>
{" "}{__("credits")}. <FilePrice uri={uri} look="plain" />
</strong>{" "}
{__("credits")}.
</Modal> </Modal>
<Modal <Modal
isOpen={modal == "timedOut"} isOpen={modal == "timedOut"}

View file

@ -29,7 +29,7 @@ class VideoPlayer extends React.PureComponent {
player.append( player.append(
this.file(), this.file(),
container, container,
{ autoplay: false, controls: true }, { autoplay: false, controls: true, enableKeyboard: true },
renderMediaCallback.bind(this) renderMediaCallback.bind(this)
); );