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

152 lines
5.2 KiB
React
Raw Normal View History

import React from 'react';
2017-05-15 05:50:59 +02:00
import {Icon,BusyMessage} from 'component/common';
import FilePrice from 'component/filePrice'
import {Modal} from 'component/modal';
import {FormField} from 'component/form';
2017-04-07 07:15:22 +02:00
import Link from 'component/link';
import {ToolTip} from 'component/tooltip';
import {DropDownMenu, DropDownMenuItem} from 'component/menu';
2017-05-15 05:50:59 +02:00
class FileActions extends React.Component {
constructor(props) {
super(props)
this.state = {
2017-05-15 05:50:59 +02:00
forceShowActions: false,
deleteChecked: false,
}
}
2017-05-15 05:50:59 +02:00
componentWillMount() {
this.checkAvailability(this.props.uri)
}
componentWillReceiveProps(nextProps) {
this.checkAvailability(nextProps.uri)
}
checkAvailability(uri) {
if (!this._uri || uri !== this._uri) {
this._uri = uri;
this.props.checkAvailability(uri)
}
}
onShowFileActionsRowClicked() {
this.setState({
forceShowActions: true,
});
}
handleDeleteCheckboxClicked(event) {
this.setState({
deleteChecked: event.target.checked,
})
}
onAffirmPurchase() {
this.props.closeModal()
2017-05-15 05:50:59 +02:00
this.props.loadVideo(this.props.uri)
}
render() {
const {
fileInfo,
2017-05-15 05:50:59 +02:00
isAvailable,
platform,
downloading,
uri,
deleteFile,
openInFolder,
openInShell,
modal,
openModal,
closeModal,
2017-05-15 05:50:59 +02:00
startDownload,
costInfo,
loading,
} = this.props
2017-05-15 05:50:59 +02:00
const deleteChecked = this.state.deleteChecked,
metadata = fileInfo ? fileInfo.metadata : null,
openInFolderMessage = platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
showMenu = fileInfo && Object.keys(fileInfo).length > 0,
title = metadata ? metadata.title : uri;
2017-05-15 05:50:59 +02:00
let content
if (loading || downloading) {
2017-05-15 18:34:33 +02:00
const
progress = (fileInfo && fileInfo.written_bytes) ? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0,
label = fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
labelWithIcon = <span className="button__content"><Icon icon="icon-download" /><span>{label}</span></span>;
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-05-15 05:50:59 +02:00
content = <BusyMessage message="Checking availability" />
2017-05-15 18:34:33 +02:00
} else if (!fileInfo && !isAvailable && !this.state.forceShowActions) {
2017-05-15 05:50:59 +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) {
content = <BusyMessage message="Fetching cost info" />
} else {
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) {
content = <Link label="Open" button="text" icon="icon-folder-open" onClick={() => openInShell(fileInfo)} />;
} else {
2017-05-15 05:50:59 +02:00
console.log('handle this case of file action props?');
}
return (
2017-05-15 05:50:59 +02:00
<section className="file-actions">
{ content }
{ showMenu ?
<DropDownMenu>
<DropDownMenuItem key={0} onClick={() => openInFolder(fileInfo)} label={openInFolderMessage} />
<DropDownMenuItem key={1} onClick={() => openModal('confirmRemove')} label="Remove..." />
</DropDownMenu> : '' }
<Modal type="confirm" isOpen={modal == 'affirmPurchase'}
2017-05-30 20:12:07 +02:00
contentLabel="Confirm Purchase" onConfirmed={this.onAffirmPurchase.bind(this)} onAborted={closeModal}>
2017-05-15 18:34:33 +02:00
This will purchase <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits.
2017-04-13 20:52:26 +02:00
</Modal>
<Modal isOpen={modal == 'notEnoughCredits'} contentLabel="Not enough credits"
onConfirmed={closeModal}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
<Modal isOpen={modal == 'timedOut'} contentLabel="Download failed"
onConfirmed={closeModal}>
2017-04-18 21:14:42 +02:00
LBRY was unable to download the stream <strong>{uri}</strong>.
</Modal>
<Modal isOpen={modal == 'confirmRemove'}
2017-05-15 05:50:59 +02:00
contentLabel="Not enough credits"
type="confirm"
confirmButtonLabel="Remove"
onConfirmed={() => deleteFile(fileInfo.outpoint, deleteChecked)}
2017-05-15 05:50:59 +02:00
onAborted={closeModal}>
<p>Are you sure you'd like to remove <cite>{title}</cite> from LBRY?</p>
<label><FormField type="checkbox" checked={deleteChecked} onClick={this.handleDeleteCheckboxClicked.bind(this)} /> Delete this file from my computer</label>
</Modal>
2017-05-15 05:50:59 +02:00
</section>
);
}
}
export default FileActions