From fb3785feed9552c271442007ba43073676b1b0ec Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Sat, 1 Jul 2017 21:48:12 +0100
Subject: [PATCH] Implemented the ability for the spacebar to initiate video
 playback

---
 .../component/video/internal/play-button.jsx  | 26 ++++++++++++++-----
 ui/js/component/video/internal/player.jsx     |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx
index fb297904a..f696ab539 100644
--- a/ui/js/component/video/internal/play-button.jsx
+++ b/ui/js/component/video/internal/play-button.jsx
@@ -4,12 +4,23 @@ import Link from "component/link";
 import Modal from "component/modal";
 
 class VideoPlayButton extends React.PureComponent {
+  componentDidMount() {
+    document.addEventListener("keydown", this.onKeyDown.bind(this));
+  }
+
   onPurchaseConfirmed() {
     this.props.closeModal();
     this.props.startPlaying();
     this.props.loadVideo(this.props.uri);
   }
 
+  onKeyDown(event) {
+    if (event.keyCode === 32) {
+      event.preventDefault();
+      this.onWatchClick();
+    }
+  }
+
   onWatchClick() {
     this.props.purchaseUri(this.props.uri).then(() => {
       if (!this.props.modal) {
@@ -45,9 +56,10 @@ 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>
@@ -73,9 +85,11 @@ class VideoPlayButton extends React.PureComponent {
           onConfirmed={this.onPurchaseConfirmed.bind(this)}
           onAborted={closeModal}
         >
-          {__("This will purchase")} <strong>{title}</strong> {__("for")}
-          {" "}<strong><FilePrice uri={uri} look="plain" /></strong>
-          {" "}{__("credits")}.
+          {__("This will purchase")} <strong>{title}</strong> {__("for")}{" "}
+          <strong>
+            <FilePrice uri={uri} look="plain" />
+          </strong>{" "}
+          {__("credits")}.
         </Modal>
         <Modal
           isOpen={modal == "timedOut"}
diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx
index 4385278c0..6b7c04eed 100644
--- a/ui/js/component/video/internal/player.jsx
+++ b/ui/js/component/video/internal/player.jsx
@@ -29,7 +29,7 @@ class VideoPlayer extends React.PureComponent {
     player.append(
       this.file(),
       container,
-      { autoplay: false, controls: true },
+      { autoplay: false, controls: true, enableKeyboard: true },
       renderMediaCallback.bind(this)
     );