2017-12-21 22:08:54 +01:00
|
|
|
// @TODO: Customize advice based on OS
|
|
|
|
import React from 'react';
|
|
|
|
import lbry from 'lbry.js';
|
|
|
|
import Link from 'component/link';
|
|
|
|
import SubHeader from 'component/subHeader';
|
2018-01-04 23:05:29 +01:00
|
|
|
import { BusyMessage } from 'component/common';
|
2018-01-09 02:15:44 +01:00
|
|
|
import Icon from 'component/icon';
|
2016-04-24 11:00:13 +02:00
|
|
|
|
2017-06-08 06:42:19 +02:00
|
|
|
class HelpPage extends React.PureComponent {
|
2017-05-17 10:10:25 +02:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
2016-08-22 11:42:01 +02:00
|
|
|
versionInfo: null,
|
2016-11-30 06:23:57 +01:00
|
|
|
lbryId: null,
|
2017-05-31 18:22:50 +02:00
|
|
|
uiVersion: null,
|
2017-06-06 23:19:12 +02:00
|
|
|
upgradeAvailable: null,
|
2017-07-21 08:23:39 +02:00
|
|
|
accessTokenHidden: true,
|
2016-08-22 11:42:01 +02:00
|
|
|
};
|
2017-05-17 10:10:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
2017-12-21 22:08:54 +01:00
|
|
|
lbry.getAppVersionInfo().then(({ remoteVersion, localVersion, upgradeAvailable }) => {
|
|
|
|
this.setState({
|
|
|
|
uiVersion: localVersion,
|
|
|
|
upgradeAvailable,
|
2016-08-22 11:42:01 +02:00
|
|
|
});
|
2017-12-21 22:08:54 +01:00
|
|
|
});
|
2017-06-15 02:21:31 +02:00
|
|
|
lbry.version().then(info => {
|
2017-05-25 20:29:28 +02:00
|
|
|
this.setState({
|
2017-06-06 23:19:12 +02:00
|
|
|
versionInfo: info,
|
|
|
|
});
|
|
|
|
});
|
2017-06-15 02:21:31 +02:00
|
|
|
lbry.status({ session_status: true }).then(info => {
|
2016-11-30 06:23:57 +01:00
|
|
|
this.setState({
|
|
|
|
lbryId: info.lbry_id,
|
|
|
|
});
|
|
|
|
});
|
2017-07-21 08:23:39 +02:00
|
|
|
|
|
|
|
if (!this.props.accessToken) this.props.fetchAccessToken();
|
|
|
|
}
|
|
|
|
|
|
|
|
showAccessToken() {
|
|
|
|
this.setState({
|
|
|
|
accessTokenHidden: false,
|
|
|
|
});
|
2017-05-17 10:10:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-02-24 05:36:19 +01:00
|
|
|
let ver, osName, platform, newVerLink;
|
2017-05-22 00:34:12 +02:00
|
|
|
|
2017-09-03 17:28:16 +02:00
|
|
|
const { accessToken, doAuth, user } = this.props;
|
2017-05-22 00:34:12 +02:00
|
|
|
|
2016-11-24 01:55:36 +01:00
|
|
|
if (this.state.versionInfo) {
|
|
|
|
ver = this.state.versionInfo;
|
2017-12-21 22:08:54 +01:00
|
|
|
if (ver.os_system == 'Darwin') {
|
|
|
|
osName = parseInt(ver.os_release.match(/^\d+/)) < 16 ? 'Mac OS X' : 'Mac OS';
|
2016-08-22 11:42:01 +02:00
|
|
|
|
2017-06-06 23:19:12 +02:00
|
|
|
platform = `${osName} ${ver.os_release}`;
|
2017-12-21 22:08:54 +01:00
|
|
|
newVerLink = 'https://lbry.io/get/lbry.dmg';
|
|
|
|
} else if (ver.os_system == 'Linux') {
|
2016-11-24 01:55:36 +01:00
|
|
|
platform = `Linux (${ver.platform})`;
|
2017-12-21 22:08:54 +01:00
|
|
|
newVerLink = 'https://lbry.io/get/lbry.deb';
|
2016-08-22 11:42:01 +02:00
|
|
|
} else {
|
2016-11-24 01:55:36 +01:00
|
|
|
platform = `Windows (${ver.platform})`;
|
2017-12-21 22:08:54 +01:00
|
|
|
newVerLink = 'https://lbry.io/get/lbry.msi';
|
2016-08-27 00:06:22 +02:00
|
|
|
}
|
2016-11-24 01:55:36 +01:00
|
|
|
} else {
|
|
|
|
ver = null;
|
2016-08-22 11:42:01 +02:00
|
|
|
}
|
2016-08-27 00:06:22 +02:00
|
|
|
|
2016-04-20 12:28:13 +02:00
|
|
|
return (
|
2017-04-22 15:17:01 +02:00
|
|
|
<main className="main--single-column">
|
2017-05-05 07:28:28 +02:00
|
|
|
<SubHeader />
|
2016-08-08 00:45:26 +02:00
|
|
|
<section className="card">
|
2017-05-04 05:44:08 +02:00
|
|
|
<div className="card__title-primary">
|
2017-12-21 22:08:54 +01:00
|
|
|
<h3>{__('Read the FAQ')}</h3>
|
2017-05-04 05:44:08 +02:00
|
|
|
</div>
|
|
|
|
<div className="card__content">
|
2017-12-21 22:08:54 +01:00
|
|
|
<p>{__('Our FAQ answers many common questions.')}</p>
|
2017-06-06 23:19:12 +02:00
|
|
|
<p>
|
|
|
|
<Link
|
|
|
|
href="https://lbry.io/faq"
|
2017-12-21 22:08:54 +01:00
|
|
|
label={__('Read the FAQ')}
|
2017-06-06 23:19:12 +02:00
|
|
|
icon="icon-question"
|
|
|
|
button="alt"
|
|
|
|
/>
|
|
|
|
</p>
|
2017-05-04 05:44:08 +02:00
|
|
|
</div>
|
2016-08-08 00:45:26 +02:00
|
|
|
</section>
|
|
|
|
<section className="card">
|
2017-05-04 05:44:08 +02:00
|
|
|
<div className="card__title-primary">
|
2017-12-21 22:08:54 +01:00
|
|
|
<h3>{__('Get Live Help')}</h3>
|
2017-05-04 05:44:08 +02:00
|
|
|
</div>
|
|
|
|
<div className="card__content">
|
|
|
|
<p>
|
2017-12-21 22:08:54 +01:00
|
|
|
{__('Live help is available most hours in the')} <strong>#help</strong>{' '}
|
|
|
|
{__('channel of our Discord chat room.')}
|
2017-05-04 05:44:08 +02:00
|
|
|
</p>
|
|
|
|
<p>
|
2017-06-06 23:19:12 +02:00
|
|
|
<Link
|
|
|
|
button="alt"
|
2017-12-21 22:08:54 +01:00
|
|
|
label={__('Join Our Chat')}
|
2017-10-25 23:45:47 +02:00
|
|
|
icon="icon-comments"
|
|
|
|
href="https://chat.lbry.io"
|
2017-06-06 23:19:12 +02:00
|
|
|
/>
|
2017-05-04 05:44:08 +02:00
|
|
|
</p>
|
|
|
|
</div>
|
2016-08-08 00:45:26 +02:00
|
|
|
</section>
|
|
|
|
<section className="card">
|
2017-06-06 23:19:12 +02:00
|
|
|
<div className="card__title-primary">
|
2017-12-21 22:08:54 +01:00
|
|
|
<h3>{__('Report a Bug')}</h3>
|
2017-06-06 23:19:12 +02:00
|
|
|
</div>
|
2017-05-04 05:44:08 +02:00
|
|
|
<div className="card__content">
|
2017-12-21 22:08:54 +01:00
|
|
|
<p>{__('Did you find something wrong?')}</p>
|
2017-06-06 23:19:12 +02:00
|
|
|
<p>
|
|
|
|
<Link
|
2017-08-26 05:21:26 +02:00
|
|
|
navigate="/report"
|
2017-12-21 22:08:54 +01:00
|
|
|
label={__('Submit a Bug Report')}
|
2017-06-06 23:19:12 +02:00
|
|
|
icon="icon-bug"
|
|
|
|
button="alt"
|
|
|
|
/>
|
|
|
|
</p>
|
2017-12-21 22:08:54 +01:00
|
|
|
<div className="meta">{__('Thanks! LBRY is made by its users.')}</div>
|
2017-05-04 05:44:08 +02:00
|
|
|
</div>
|
2016-04-20 12:28:13 +02:00
|
|
|
</section>
|
2017-07-21 08:23:39 +02:00
|
|
|
|
2017-05-25 20:29:28 +02:00
|
|
|
<section className="card">
|
2017-11-24 15:31:05 +01:00
|
|
|
<div className="card__title-primary">
|
2017-12-21 22:08:54 +01:00
|
|
|
<h3>{__('About')}</h3>
|
2017-11-24 15:31:05 +01:00
|
|
|
</div>
|
2017-06-06 23:19:12 +02:00
|
|
|
<div className="card__content">
|
2017-11-24 15:31:05 +01:00
|
|
|
{this.state.upgradeAvailable === null ? (
|
2017-12-21 22:08:54 +01:00
|
|
|
''
|
2017-11-24 15:31:05 +01:00
|
|
|
) : this.state.upgradeAvailable ? (
|
|
|
|
<p>
|
2017-12-21 22:08:54 +01:00
|
|
|
{__('A newer version of LBRY is available.')}{' '}
|
|
|
|
<Link href={newVerLink} label={__('Download now!')} />
|
2017-11-24 15:31:05 +01:00
|
|
|
</p>
|
|
|
|
) : (
|
2017-12-21 22:08:54 +01:00
|
|
|
<p>{__('Your copy of LBRY is up to date.')}</p>
|
2017-11-24 15:31:05 +01:00
|
|
|
)}
|
|
|
|
{this.state.uiVersion && ver ? (
|
|
|
|
<table className="table-standard table-stretch table-standard--definition-list">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('App')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>{this.state.uiVersion}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Daemon (lbrynet)')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>{ver.lbrynet_version}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Wallet (lbryum)')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>{ver.lbryum_version}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Connected Email')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>
|
|
|
|
{user && user.primary_email ? (
|
|
|
|
user.primary_email
|
|
|
|
) : (
|
|
|
|
<span>
|
2017-12-21 22:08:54 +01:00
|
|
|
<span className="empty">{__('none')} </span>
|
|
|
|
(<Link onClick={() => doAuth()} label={__('set email')} />)
|
2017-11-24 15:31:05 +01:00
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Reward Eligible')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>
|
|
|
|
{user && user.is_reward_approved ? (
|
|
|
|
<Icon icon="icon-check" />
|
|
|
|
) : (
|
|
|
|
<Icon icon="icon-ban" />
|
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Platform')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>{platform}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Installation ID')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>{this.state.lbryId}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2017-12-21 22:08:54 +01:00
|
|
|
<th>{__('Access Token')}</th>
|
2017-11-24 15:31:05 +01:00
|
|
|
<td>
|
|
|
|
{this.state.accessTokenHidden && (
|
2017-12-21 22:08:54 +01:00
|
|
|
<Link label={__('show')} onClick={this.showAccessToken.bind(this)} />
|
2017-11-24 15:31:05 +01:00
|
|
|
)}
|
|
|
|
{!this.state.accessTokenHidden &&
|
|
|
|
accessToken && (
|
2017-09-03 17:28:16 +02:00
|
|
|
<div>
|
|
|
|
<p>{accessToken}</p>
|
|
|
|
<div className="help">
|
2017-12-21 22:08:54 +01:00
|
|
|
{__('This is equivalent to a password. Do not post or share this.')}
|
2017-09-03 17:28:16 +02:00
|
|
|
</div>
|
2017-11-24 15:31:05 +01:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
) : (
|
2017-12-21 22:08:54 +01:00
|
|
|
<BusyMessage message={__('Looking up version info')} />
|
2017-11-24 15:31:05 +01:00
|
|
|
)}
|
2017-06-06 23:19:12 +02:00
|
|
|
</div>
|
2017-05-25 20:29:28 +02:00
|
|
|
</section>
|
2016-04-20 12:28:13 +02:00
|
|
|
</main>
|
|
|
|
);
|
|
|
|
}
|
2017-05-17 10:10:25 +02:00
|
|
|
}
|
2016-11-22 21:19:08 +01:00
|
|
|
|
2017-04-07 07:15:22 +02:00
|
|
|
export default HelpPage;
|