lbry-desktop/ui/js/component/video/internal/play-button.jsx

103 lines
2.4 KiB
React
Raw Normal View History

import React from "react";
import FilePrice from "component/filePrice";
import Link from "component/link";
import Modal from "modal/modal";
2017-06-09 01:41:44 +02:00
class VideoPlayButton extends React.PureComponent {
componentDidMount() {
2017-07-01 23:57:14 +02:00
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) {
this.props.startPlaying();
}
});
}
render() {
const {
button,
label,
metadata,
metadata: { title },
uri,
modal,
closeModal,
isLoading,
fileInfo,
mediaType,
} = this.props;
/*
title={
isLoading ? "Video is Loading" :
!costInfo ? "Waiting on cost info..." :
fileInfo === undefined ? "Waiting on file info..." : ""
}
*/
2017-07-30 21:57:22 +02:00
const disabled = isLoading || fileInfo === undefined;
2017-07-01 23:57:14 +02:00
const icon = ["audio", "video"].indexOf(mediaType) !== -1
? "icon-play"
: "icon-folder-o";
return (
<div>
<Link
button={button ? button : null}
disabled={disabled}
label={label ? label : ""}
className="video__play-button"
icon={icon}
onClick={this.onWatchClick.bind(this)}
/>
<Modal
type="confirm"
isOpen={modal == "affirmPurchaseAndPlay"}
contentLabel={__("Confirm Purchase")}
onConfirmed={this.onPurchaseConfirmed.bind(this)}
onAborted={closeModal}
>
{__("This will purchase")} <strong>{title}</strong> {__("for")}{" "}
<strong>
<FilePrice uri={uri} showFullPrice={true} look="plain" />
</strong>{" "}
{__("credits")}.
</Modal>
<Modal
isOpen={modal == "timedOut"}
onConfirmed={closeModal}
contentLabel={__("Timed Out")}
>
{__("Sorry, your download timed out :(")}
</Modal>
</div>
);
}
}
export default VideoPlayButton;