Implemented the ability for the spacebar to initiate video playback
This commit is contained in:
parent
b43ed0b64f
commit
fb3785feed
2 changed files with 21 additions and 7 deletions
|
@ -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"}
|
||||||
|
|
|
@ -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)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue