lbry-desktop/ui/js/component/fileActions/view.jsx

229 lines
6.2 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import { Icon, BusyMessage } from "component/common";
import FilePrice from "component/filePrice";
import { Modal } from "modal/modal";
2017-06-06 23:19:12 +02:00
import Link from "component/link";
import { ToolTip } from "component/tooltip";
import { DropDownMenu, DropDownMenuItem } from "component/menu";
import ModalRemoveFile from "modal/modalRemoveFile";
2017-07-02 20:23:38 +02:00
import * as modals from "constants/modal_types";
2017-06-08 06:42:19 +02:00
class FileActions extends React.PureComponent {
constructor(props) {
2017-06-06 23:19:12 +02:00
super(props);
this.state = {
2017-05-15 05:50:59 +02:00
forceShowActions: false,
2017-06-06 23:19:12 +02:00
};
}
2017-05-15 05:50:59 +02:00
componentWillMount() {
2017-06-06 23:19:12 +02:00
this.checkAvailability(this.props.uri);
2017-05-15 05:50:59 +02:00
}
componentWillReceiveProps(nextProps) {
2017-06-06 23:19:12 +02:00
this.checkAvailability(nextProps.uri);
this.restartDownload(nextProps);
}
restartDownload(props) {
const { downloading, fileInfo, uri, restartDownload } = props;
if (
!downloading &&
fileInfo &&
2017-07-26 10:44:05 +02:00
!fileInfo.completed &&
fileInfo.written_bytes !== false &&
fileInfo.written_bytes < fileInfo.total_bytes
) {
restartDownload(uri, fileInfo.outpoint);
}
2017-05-15 05:50:59 +02:00
}
checkAvailability(uri) {
if (!this._uri || uri !== this._uri) {
this._uri = uri;
2017-06-06 23:19:12 +02:00
this.props.checkAvailability(uri);
2017-05-15 05:50:59 +02:00
}
}
onShowFileActionsRowClicked() {
this.setState({
forceShowActions: true,
});
}
onAffirmPurchase() {
2017-06-06 23:19:12 +02:00
this.props.closeModal();
this.props.loadVideo(this.props.uri);
}
2017-08-25 20:03:33 +02:00
handleSupportButtonClicked() {
this.props.onTipShow();
}
render() {
const {
fileInfo,
2017-05-15 05:50:59 +02:00
isAvailable,
platform,
downloading,
uri,
openInFolder,
openInShell,
modal,
openModal,
closeModal,
2017-05-15 05:50:59 +02:00
startDownload,
costInfo,
loading,
claimIsMine,
claimInfo,
2017-06-06 23:19:12 +02:00
} = this.props;
2017-07-02 20:23:38 +02:00
const metadata = fileInfo ? fileInfo.metadata : null,
2017-06-06 23:19:12 +02:00
openInFolderMessage = platform.startsWith("Mac")
? __("Open in Finder")
: __("Open in Folder"),
showMenu = fileInfo && Object.keys(fileInfo).length > 0,
title = metadata ? metadata.title : uri;
2017-06-06 23:19:12 +02:00
let content;
if (loading || downloading) {
2017-07-02 20:23:38 +02:00
const progress = fileInfo && fileInfo.written_bytes
? fileInfo.written_bytes / fileInfo.total_bytes * 100
: 0,
2017-06-06 23:19:12 +02:00
label = fileInfo
? progress.toFixed(0) + __("% complete")
: __("Connecting..."),
labelWithIcon = (
<span className="button__content">
<Icon icon="icon-download" />
<span>
{label}
</span>
2017-06-06 23:19:12 +02:00
</span>
);
2017-06-06 06:21:55 +02:00
2017-06-06 23:19:12 +02:00
content = (
<div className="faux-button-block file-actions__download-status-bar button-set-item">
<div
className="faux-button-block file-actions__download-status-bar-overlay"
style={{ width: progress + "%" }}
>
{labelWithIcon}
</div>
{labelWithIcon}
</div>
);
} else if (!fileInfo && isAvailable === undefined) {
2017-06-06 23:19:12 +02:00
content = <BusyMessage message={__("Checking availability")} />;
2017-05-15 18:34:33 +02:00
} else if (!fileInfo && !isAvailable && !this.state.forceShowActions) {
2017-06-06 23:19:12 +02:00
content = (
<div>
<div className="button-set-item empty">
{__("Content unavailable.")}
</div>
<ToolTip
label={__("Why?")}
body={__(
"The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
)}
className="button-set-item"
/>
<Link
label={__("Try Anyway")}
onClick={this.onShowFileActionsRowClicked.bind(this)}
className="button-text button-set-item"
/>
</div>
);
} else if (fileInfo === null && !downloading) {
if (!costInfo) {
2017-06-06 23:19:12 +02:00
content = <BusyMessage message={__("Fetching cost info")} />;
} else {
2017-06-06 23:19:12 +02:00
content = (
<Link
button="text"
label={__("Download")}
icon="icon-download"
onClick={() => {
startDownload(uri);
}}
/>
);
}
2017-05-15 05:50:59 +02:00
} else if (fileInfo && fileInfo.download_path) {
2017-06-06 23:19:12 +02:00
content = (
<Link
label={__("Open")}
button="text"
icon="icon-folder-open"
onClick={() => openInShell(fileInfo)}
/>
);
2017-07-19 08:12:01 +02:00
} else if (!fileInfo) {
content = <BusyMessage message={__("Fetching file info")} />;
} else {
2017-06-06 23:19:12 +02:00
console.log("handle this case of file action props?");
}
return (
2017-05-15 05:50:59 +02:00
<section className="file-actions">
2017-08-25 20:41:31 +02:00
{content}
2017-08-25 20:03:33 +02:00
<Link
label={__("Support")}
button="text"
icon="icon-gift"
onClick={this.handleSupportButtonClicked.bind(this)}
/>
2017-08-25 20:41:31 +02:00
{showMenu
2017-08-26 05:21:26 +02:00
? <div className="button-set-item">
<DropDownMenu>
<DropDownMenuItem
key={0}
onClick={() => openInFolder(fileInfo)}
label={openInFolderMessage}
/>
<DropDownMenuItem
key={1}
onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)}
label={__("Remove...")}
/>
</DropDownMenu>
</div>
2017-06-06 23:19:12 +02:00
: ""}
<Modal
type="confirm"
isOpen={modal == "affirmPurchase"}
contentLabel={__("Confirm Purchase")}
onConfirmed={this.onAffirmPurchase.bind(this)}
onAborted={closeModal}
>
{__("This will purchase")} <strong>{title}</strong> {__("for")}{" "}
<strong>
<FilePrice uri={uri} showFullPrice={true} look="plain" />
</strong>{" "}
{__("credits")}.
2017-04-13 20:52:26 +02:00
</Modal>
2017-06-06 23:19:12 +02:00
<Modal
isOpen={modal == "timedOut"}
contentLabel={__("Download failed")}
onConfirmed={closeModal}
>
{__("LBRY was unable to download the stream")}{" "}{" "}
<strong>{title}</strong>.
</Modal>
2017-07-02 20:23:38 +02:00
{modal == modals.CONFIRM_FILE_REMOVE &&
<ModalRemoveFile
uri={uri}
outpoint={fileInfo.outpoint}
title={title}
/>}
2017-05-15 05:50:59 +02:00
</section>
);
}
}
2017-06-06 06:21:55 +02:00
export default FileActions;