lbry-desktop/ui/js/page/help/view.jsx

169 lines
5 KiB
React
Raw Normal View History

//@TODO: Customize advice based on OS
2017-06-06 23:19:12 +02:00
import React from "react";
import lbry from "lbry.js";
import Link from "component/link";
import SubHeader from "component/subHeader";
import { BusyMessage } from "component/common";
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 = {
versionInfo: null,
lbryId: null,
2017-05-31 18:22:50 +02:00
uiVersion: null,
2017-06-06 23:19:12 +02:00
upgradeAvailable: null,
};
2017-05-17 10:10:25 +02:00
}
componentWillMount() {
lbry
.getAppVersionInfo()
.then(({ remoteVersion, localVersion, upgradeAvailable }) => {
this.setState({
uiVersion: localVersion,
upgradeAvailable: upgradeAvailable,
});
});
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 => {
this.setState({
lbryId: info.lbry_id,
});
});
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-06-06 23:19:12 +02:00
const { navigate } = this.props;
2017-05-22 00:34:12 +02:00
if (this.state.versionInfo) {
ver = this.state.versionInfo;
2017-06-06 23:19:12 +02:00
if (ver.os_system == "Darwin") {
osName = parseInt(ver.os_release.match(/^\d+/)) < 16
? "Mac OS X"
: "Mac OS";
2017-06-06 23:19:12 +02:00
platform = `${osName} ${ver.os_release}`;
newVerLink = "https://lbry.io/get/lbry.dmg";
} else if (ver.os_system == "Linux") {
platform = `Linux (${ver.platform})`;
2017-06-06 23:19:12 +02:00
newVerLink = "https://lbry.io/get/lbry.deb";
} else {
platform = `Windows (${ver.platform})`;
2017-06-06 23:19:12 +02:00
newVerLink = "https://lbry.io/get/lbry.msi";
2016-08-27 00:06:22 +02:00
}
} else {
ver = null;
}
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-05-26 02:27:05 +02:00
<h3>{__("Read the FAQ")}</h3>
2017-05-04 05:44:08 +02:00
</div>
<div className="card__content">
2017-05-26 02:27:05 +02:00
<p>{__("Our FAQ answers many common questions.")}</p>
2017-06-06 23:19:12 +02:00
<p>
<Link
href="https://lbry.io/faq"
label={__("Read the FAQ")}
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-05-26 02:27:05 +02:00
<h3>{__("Get Live Help")}</h3>
2017-05-04 05:44:08 +02:00
</div>
<div className="card__content">
<p>
2017-06-06 23:19:12 +02:00
{__("Live help is available most hours in the")}
{" "}<strong>#help</strong>
{" "}{__("channel of our Slack chat room.")}
2017-05-04 05:44:08 +02:00
</p>
<p>
2017-06-06 23:19:12 +02:00
<Link
button="alt"
label={__("Join Our Slack")}
icon="icon-slack"
href="https://slack.lbry.io"
/>
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">
<h3>{__("Report a Bug")}</h3>
</div>
2017-05-04 05:44:08 +02:00
<div className="card__content">
2017-05-26 02:27:05 +02:00
<p>{__("Did you find something wrong?")}</p>
2017-06-06 23:19:12 +02:00
<p>
<Link
onClick={() => navigate("report")}
label={__("Submit a Bug Report")}
icon="icon-bug"
button="alt"
/>
</p>
<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-05-25 20:29:28 +02:00
<section className="card">
2017-06-06 23:19:12 +02:00
<div className="card__title-primary"><h3>{__("About")}</h3></div>
<div className="card__content">
{this.state.upgradeAvailable === null
? ""
: this.state.upgradeAvailable
? <p>
{__("A newer version of LBRY is available.")}
{" "}<Link href={newVerLink} label={__("Download now!")} />
</p>
: <p>{__("Your copy of LBRY is up to date.")}</p>}
{this.state.uiVersion && ver
? <table className="table-standard">
<tbody>
<tr>
<th>{__("daemon (lbrynet)")}</th>
<td>{ver.lbrynet_version}</td>
</tr>
<tr>
<th>{__("wallet (lbryum)")}</th>
<td>{ver.lbryum_version}</td>
</tr>
<tr>
<th>{__("interface")}</th>
<td>{this.state.uiVersion}</td>
</tr>
<tr>
<th>{__("Platform")}</th>
<td>{platform}</td>
</tr>
<tr>
<th>{__("Installation ID")}</th>
<td>{this.state.lbryId}</td>
</tr>
</tbody>
</table>
: <BusyMessage message={__("Looking up version info")} />}
</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;