From b43ed0b64f6b89d0d2fd289d1d929439e3f72645 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Sat, 1 Jul 2017 21:33:23 +0100 Subject: [PATCH 1/3] Issue #311 playback input improvements --- ui/js/component/video/internal/player.jsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index 1a86c3b20..4385278c0 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -33,6 +33,7 @@ class VideoPlayer extends React.PureComponent { renderMediaCallback.bind(this) ); + document.addEventListener("keydown", this.togglePlay.bind(this)); const mediaElement = this.refs.media.children[0]; if (mediaElement) { mediaElement.addEventListener( @@ -42,6 +43,23 @@ class VideoPlayer extends React.PureComponent { once: true, } ); + mediaElement.addEventListener("click", this.togglePlay.bind(this)); + } + } + + togglePlay(event) { + // ignore all events except click and spacebar keydown + if ("keydown" === event.type && event.keyCode !== 32) { + return; + } + event.preventDefault(); + const mediaElement = this.refs.media.children[0]; + if (mediaElement) { + if (!mediaElement.paused) { + mediaElement.pause(); + } else { + mediaElement.play(); + } } } From fb3785feed9552c271442007ba43073676b1b0ec Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Sat, 1 Jul 2017 21:48:12 +0100 Subject: [PATCH 2/3] 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 (
@@ -73,9 +85,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")}. Date: Sat, 1 Jul 2017 22:57:14 +0100 Subject: [PATCH 3/3] Added requested event handling changes --- ui/js/component/video/internal/play-button.jsx | 16 ++++++++++------ ui/js/component/video/internal/player.jsx | 16 +++++++++++++--- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx index f696ab539..aa352ddf7 100644 --- a/ui/js/component/video/internal/play-button.jsx +++ b/ui/js/component/video/internal/play-button.jsx @@ -5,7 +5,12 @@ import Modal from "component/modal"; class VideoPlayButton extends React.PureComponent { 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() { @@ -15,7 +20,7 @@ class VideoPlayButton extends React.PureComponent { } onKeyDown(event) { - if (event.keyCode === 32) { + if ("Space" === event.code) { event.preventDefault(); this.onWatchClick(); } @@ -56,10 +61,9 @@ 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 (
diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index 6b7c04eed..bf2a6dcc3 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -13,6 +13,8 @@ class VideoPlayer extends React.PureComponent { startedPlaying: false, unplayable: false, }; + + this.togglePlayListener = this.togglePlay.bind(this); } componentDidMount() { @@ -33,7 +35,7 @@ class VideoPlayer extends React.PureComponent { renderMediaCallback.bind(this) ); - document.addEventListener("keydown", this.togglePlay.bind(this)); + document.addEventListener("keydown", this.togglePlayListener); const mediaElement = this.refs.media.children[0]; if (mediaElement) { mediaElement.addEventListener( @@ -43,13 +45,21 @@ class VideoPlayer extends React.PureComponent { 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) { // ignore all events except click and spacebar keydown - if ("keydown" === event.type && event.keyCode !== 32) { + if ("keydown" === event.type && "Space" !== event.code) { return; } event.preventDefault();