diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx
index fb297904a..d104fcdeb 100644
--- a/ui/js/component/video/internal/play-button.jsx
+++ b/ui/js/component/video/internal/play-button.jsx
@@ -4,12 +4,31 @@ import Link from "component/link";
import Modal from "component/modal";
class VideoPlayButton extends React.PureComponent {
+ componentDidMount() {
+ this.keyDownListener = this.onKeyDown.bind(this);
+ document.addEventListener("keydown", this.keyDownListener);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener("keydown", this.keyDownListener);
+ }
+
onPurchaseConfirmed() {
this.props.closeModal();
this.props.startPlaying();
this.props.loadVideo(this.props.uri);
}
+ onKeyDown(event) {
+ if (
+ "input" !== event.target.tagName.toLowerCase() &&
+ "Space" === event.code
+ ) {
+ event.preventDefault();
+ this.onWatchClick();
+ }
+ }
+
onWatchClick() {
this.props.purchaseUri(this.props.uri).then(() => {
if (!this.props.modal) {
@@ -73,9 +92,11 @@ class VideoPlayButton extends React.PureComponent {
onConfirmed={this.onPurchaseConfirmed.bind(this)}
onAborted={closeModal}
>
- {__("This will purchase")} {title} {__("for")}
- {" "}
- {" "}{__("credits")}.
+ {__("This will purchase")} {title} {__("for")}{" "}
+
+
+ {" "}
+ {__("credits")}.