Merge pull request #317 from akinwale/issue311

Issue #311 playback input improvements

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")} <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"}

ui/js/component/video/internal/player.jsx

@@ -15,6 +15,8 @@ class VideoPlayer extends React.PureComponent {
       startedPlaying: false,
       unplayable: false,
     };
+
+    this.togglePlayListener = this.togglePlay.bind(this);
   }
 
   componentDidMount() {
@@ -40,12 +42,14 @@ class VideoPlayer extends React.PureComponent {
     player.append(
       this.file(),
       container,
-      { autoplay: false, controls: true },
+      { autoplay: false, controls: true, enableKeyboard: true },
       renderMediaCallback.bind(this)
     );
 
+    document.addEventListener("keydown", this.togglePlayListener);
     const mediaElement = this.refs.media.children[0];
     if (mediaElement) {
+      mediaElement.addEventListener("click", this.togglePlayListener);
       mediaElement.addEventListener(
         "loadedmetadata",
         loadedMetadata.bind(this),
@@ -53,7 +57,6 @@ class VideoPlayer extends React.PureComponent {
           once: true,
         }
       );
-
       mediaElement.addEventListener(
         "webkitfullscreenchange",
         win32FullScreenChange.bind(this)
@@ -65,6 +68,33 @@ class VideoPlayer extends React.PureComponent {
     }
   }
 
+  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, or input events in a form control
+    if (
+      "keydown" === event.type &&
+      ("Space" !== event.code || "input" === event.target.tagName.toLowerCase())
+    ) {
+      return;
+    }
+    event.preventDefault();
+    const mediaElement = this.refs.media.children[0];
+    if (mediaElement) {
+      if (!mediaElement.paused) {
+        mediaElement.pause();
+      } else {
+        mediaElement.play();
+      }
+    }
+  }
+
   getPreferredVolume() {
     const volumePreference = parseFloat(getSession("prefs_volume"));
     return isNaN(volumePreference) ? 1 : volumePreference;