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

304 lines
9.4 KiB
React
Raw Normal View History

// @flow
2020-06-22 15:48:35 +02:00
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as React from 'react';
import { SITE_HELP_EMAIL } from 'config';
2019-03-05 05:46:57 +01:00
// @if TARGET='app'
import { shell } from 'electron';
2020-03-23 17:06:43 +01:00
import WalletBackup from 'component/walletBackup';
2019-03-05 05:46:57 +01:00
// @endif
2018-04-18 06:03:01 +02:00
import { Lbry } from 'lbry-redux';
import Native from 'native';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import Page from 'component/page';
2019-09-27 22:03:05 +02:00
import Card from 'component/common/card';
2019-10-01 06:53:33 +02:00
import I18nMessage from 'component/i18nMessage';
type DeamonSettings = {
2018-06-10 01:19:04 +02:00
data_dir: string | any,
};
type Props = {
deamonSettings: DeamonSettings,
accessToken: string,
fetchAccessToken: () => void,
doAuth: () => void,
user: any,
};
2018-06-10 01:19:04 +02:00
type VersionInfo = {
os_system: string,
os_release: string,
platform: string,
lbrynet_version: string,
};
type State = {
2018-06-10 01:19:04 +02:00
versionInfo: VersionInfo | any,
lbryId: String | any,
2018-06-10 01:19:04 +02:00
uiVersion: ?string,
upgradeAvailable: ?boolean,
accessTokenHidden: ?boolean,
};
class HelpPage extends React.PureComponent<Props, State> {
constructor(props: Props) {
2017-05-17 10:10:25 +02:00
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-07-21 08:23:39 +02:00
accessTokenHidden: true,
};
2018-03-26 23:32:43 +02:00
(this: any).showAccessToken = this.showAccessToken.bind(this);
(this: any).openLogFile = this.openLogFile.bind(this);
2017-05-17 10:10:25 +02:00
}
2018-03-26 23:32:43 +02:00
componentDidMount() {
// @if TARGET='app'
Native.getAppVersionInfo().then(({ localVersion, upgradeAvailable }) => {
this.setState({
uiVersion: localVersion,
upgradeAvailable,
});
});
if (!this.props.accessToken) this.props.fetchAccessToken();
// @endif
Lbry.version().then((info) => {
2017-05-25 20:29:28 +02:00
this.setState({
2017-06-06 23:19:12 +02:00
versionInfo: info,
});
});
Lbry.status().then((info) => {
this.setState({
2018-08-13 18:53:31 +02:00
lbryId: info.installation_id,
});
});
2017-07-21 08:23:39 +02:00
}
showAccessToken() {
this.setState({
accessTokenHidden: false,
});
2017-05-17 10:10:25 +02:00
}
openLogFile(userHomeDirectory: string) {
const logFileName = 'lbrynet.log';
const os = this.state.versionInfo.os_system;
if (os === 'Darwin' || os === 'Linux') {
2020-10-16 01:06:05 +02:00
shell.openPath(`${userHomeDirectory}/${logFileName}`);
} else {
2020-10-16 01:06:05 +02:00
shell.openPath(`${userHomeDirectory}\\${logFileName}`);
}
}
2017-05-17 10:10:25 +02:00
render() {
2018-04-18 06:03:01 +02:00
let ver;
let osName;
let platform;
let newVerLink;
2017-05-22 00:34:12 +02:00
const { accessToken, doAuth, user, deamonSettings } = this.props;
const { data_dir: dataDirectory } = deamonSettings;
2017-05-22 00:34:12 +02:00
if (this.state.versionInfo) {
ver = this.state.versionInfo;
2018-04-18 06:03:01 +02:00
if (ver.os_system === 'Darwin') {
osName = parseInt(ver.os_release.match(/^\d+/), 10) < 16 ? 'Mac OS X' : 'Mac OS';
2017-06-06 23:19:12 +02:00
platform = `${osName} ${ver.os_release}`;
2019-03-20 22:43:00 +01:00
newVerLink = 'https://lbry.com/get/lbry.dmg';
} else if (process.env.APPIMAGE !== undefined) {
platform = `Linux (AppImage)`;
newVerLink = 'https://lbry.com/get/lbry.AppImage';
2018-04-18 06:03:01 +02:00
} else if (ver.os_system === 'Linux') {
platform = `Linux (${ver.platform})`;
2019-03-20 22:43:00 +01:00
newVerLink = 'https://lbry.com/get/lbry.deb';
} else {
platform = `Windows (${ver.platform})`;
2019-03-20 22:43:00 +01:00
newVerLink = 'https://lbry.com/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 (
<Page className="card-stack">
2019-09-27 22:03:05 +02:00
<Card
title={__('Read the FAQ')}
subtitle={__('Our FAQ answers many common questions.')}
actions={
<div className="section__actions">
<Button
href="https://lbry.com/faq/lbry-basics"
label={__('Read the App Basics FAQ')}
2020-06-22 15:48:35 +02:00
icon={ICONS.HELP}
2019-11-22 22:13:00 +01:00
button="secondary"
/>
<Button
href="https://lbry.com/faq"
label={__('View all LBRY FAQs')}
2020-06-22 15:48:35 +02:00
icon={ICONS.HELP}
2019-11-22 22:13:00 +01:00
button="secondary"
2019-09-27 22:03:05 +02:00
/>
</div>
}
/>
2018-03-26 23:32:43 +02:00
<Card
2020-08-25 20:15:51 +02:00
title={__('Find assistance')}
2019-09-27 22:03:05 +02:00
subtitle={
<I18nMessage tokens={{ channel: <strong>#help</strong>, help_email: SITE_HELP_EMAIL }}>
2019-10-01 06:53:33 +02:00
Live help is available most hours in the %channel% channel of our Discord chat room. Or you can always
email us at %help_email%.
2019-10-01 06:53:33 +02:00
</I18nMessage>
2019-09-27 22:03:05 +02:00
}
actions={
<div className="section__actions">
2020-06-22 15:48:35 +02:00
<Button button="secondary" label={__('Join Our Chat')} icon={ICONS.CHAT} href="https://chat.lbry.com" />
<Button button="secondary" label={__('Email Us')} icon={ICONS.WEB} href="mailto:help@lbry.com" />
2019-09-27 22:03:05 +02:00
</div>
}
/>
2019-09-27 22:03:05 +02:00
<Card
2020-08-25 20:15:51 +02:00
title={__('Report a bug or suggest something')}
2019-09-27 22:03:05 +02:00
subtitle={
2019-11-22 22:13:00 +01:00
<React.Fragment>
2020-08-25 20:15:51 +02:00
{__('Did you find something wrong? Think LBRY could add something useful and cool?')}
2019-11-22 22:13:00 +01:00
</React.Fragment>
2019-09-27 22:03:05 +02:00
}
actions={
<div className="section__actions">
2020-06-22 23:50:20 +02:00
<Button navigate="/$/report" label={__('Submit Feedback')} icon={ICONS.FEEDBACK} button="secondary" />
2019-09-27 22:03:05 +02:00
</div>
}
/>
2019-04-11 20:17:23 +02:00
{/* @if TARGET='app' */}
2019-09-27 22:03:05 +02:00
<Card
2020-08-26 22:28:33 +02:00
title={__('View your log')}
2019-09-27 22:03:05 +02:00
subtitle={
2020-01-03 23:07:57 +01:00
<I18nMessage
tokens={{
support_link: <Button button="link" label={__('support')} href="https://lbry.com/faq/support" />,
}}
>
Did something go wrong? Have a look in your log file, or send it to %support_link%.
</I18nMessage>
2019-09-27 22:03:05 +02:00
}
actions={
<div className="section__actions">
2020-06-22 23:50:20 +02:00
<Button
button="secondary"
label={__('Open Log')}
icon={ICONS.OPEN_LOG}
onClick={() => this.openLogFile(dataDirectory)}
/>
<Button
button="secondary"
label={__('Open Log Folder')}
icon={ICONS.OPEN_LOG_FOLDER}
2020-10-16 01:06:05 +02:00
onClick={() => shell.openPath(dataDirectory)}
2020-06-22 23:50:20 +02:00
/>
2019-09-27 22:03:05 +02:00
</div>
}
/>
2017-07-21 08:23:39 +02:00
2020-03-23 17:06:43 +01:00
<WalletBackup />
2019-05-14 04:51:33 +02:00
{/* @endif */}
<Card
Support for multiple string context + "About" as initial example. ## Issue 4796 - i18n: Allow support for string overloading (multiple contexts) ## Approach - Minimal code and process change. - Handle on a case-by-case basis when reported by translators. - Split the affected key in the string json by appending the context. - Translators need to be aware of the new format and not translate context itself. Code is added to detect bad translations and will revert to English. Sample in json: "About --[About section in Help Page]--": "About", "About --[tab title in Channel Page]--": "About", Sample in client code: title={__('About --[About section in Help Page]--')} - "--[ ]--" was chosen as it's unique enough (unlikely for real strings to use it) and hopefully not that distracting in the client code. - In the key itself, spaces are allowed after the string (i.e. before '--[') for neatness. It will be trimmed by the system. ## First example "About" is used in 3 places: - Channel Page - Help Page - Footer (in Odysee branch) For Russian, the word "About" is "O" and is usually not used standalone, but requires something behind it. A translator said so, and seems to be the case in other sites as well. "O xxx" "O yyy" ## Other languages For other languages that are not impacted, they can just clone the same translation for each of the split keys, just like in English. ## Possible enhancement in Transifex I see that Transifex's API includes a `context` entry. It might be possible to move the context-metadata there during the upload, so translators will never see the "--[]--" messiness (it will be shown as "Context: xxx" in the Transifex GUI). I'm not sure how to test the Transifex side, so I did not investigate further.
2020-10-09 07:38:03 +02:00
title={__('About --[About section in Help Page]--')}
subtitle={
this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? (
<span>
2020-06-11 09:17:13 +02:00
{__('A newer version of LBRY is available.')}{' '}
<Button button="link" href={newVerLink} label={__('Download now!')} />
</span>
) : null
}
2020-04-29 21:31:11 +02:00
isBodyList
body={
<div className="table__wrapper">
<table className="table table--stretch">
<tbody>
<tr>
<td>{__('App')}</td>
<td>
{this.state.uiVersion ? this.state.uiVersion + ' - ' : ''}
<Button
button="link"
label={__('Changelog')}
href="https://github.com/lbryio/lbry-desktop/blob/master/CHANGELOG.md"
/>
</td>
</tr>
<tr>
<td>{__('Daemon (lbrynet)')}</td>
<td>{ver ? ver.lbrynet_version : __('Loading...')}</td>
</tr>
<tr>
<td>{__('Connected Email')}</td>
<td>
{user && user.primary_email ? (
<React.Fragment>
{user.primary_email}{' '}
<Button
button="link"
2020-06-22 15:48:35 +02:00
navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
label={__('Update mailing preferences')}
/>
</React.Fragment>
) : (
<React.Fragment>
<span className="empty">{__('none')} </span>
<Button button="link" onClick={() => doAuth()} label={__('set email')} />
</React.Fragment>
)}
</td>
</tr>
<tr>
<td>{__('Reward Eligible')}</td>
<td>{user && user.is_reward_approved ? __('Yes') : __('No')}</td>
</tr>
<tr>
<td>{__('Platform')}</td>
<td>{platform}</td>
</tr>
<tr>
<td>{__('Installation ID')}</td>
<td>{this.state.lbryId}</td>
</tr>
<tr>
<td>{__('Access Token')}</td>
<td>
{this.state.accessTokenHidden && (
<Button button="link" label={__('View')} onClick={this.showAccessToken} />
)}
{!this.state.accessTokenHidden && accessToken && (
<div>
<p>{accessToken}</p>
<div className="help--warning">
{__('This is equivalent to a password. Do not post or share this.')}
</div>
2019-12-18 06:27:08 +01:00
</div>
)}
</td>
</tr>
</tbody>
</table>
</div>
}
/>
2018-03-26 23:32:43 +02:00
</Page>
2016-04-20 12:28:13 +02:00
);
}
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;