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

514 lines
18 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
2018-03-26 23:32:43 +02:00
import * as React from 'react';
import { SETTINGS } from 'lbry-redux';
import { FormField } from 'component/common/form';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
import Page from 'component/page';
import SettingLanguage from 'component/settingLanguage';
2018-03-26 23:32:43 +02:00
import FileSelector from 'component/common/file-selector';
2019-10-15 23:23:51 +02:00
import SyncToggle from 'component/syncToggle';
import HomepageSelector from 'component/homepageSelector';
2019-09-27 22:03:05 +02:00
import Card from 'component/common/card';
import SettingAccountPassword from 'component/settingAccountPassword';
2020-11-10 06:21:04 +01:00
import classnames from 'classnames';
import { getPasswordFromCookie } from 'util/saved-passwords';
// $FlowFixMe
import homepages from 'homepages';
import { Lbryio } from 'lbryinc';
2020-11-10 06:21:04 +01:00
import Yrbl from 'component/yrbl';
2019-11-18 19:30:15 +01:00
2019-04-24 16:02:08 +02:00
type Price = {
2018-03-26 23:32:43 +02:00
currency: string,
amount: number,
};
type SetDaemonSettingArg = boolean | string | number;
2019-08-18 19:01:04 +02:00
type DarkModeTimes = {
from: { hour: string, min: string, formattedTime: string },
to: { hour: string, min: string, formattedTime: string },
};
type OptionTimes = {
fromTo: string,
time: string,
};
2018-03-26 23:32:43 +02:00
type DaemonSettings = {
download_dir: string,
2018-03-26 23:32:43 +02:00
share_usage_data: boolean,
};
type Props = {
setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
clearDaemonSetting: (string) => void,
setClientSetting: (string, SetDaemonSettingArg) => void,
toggle3PAnalytics: (boolean) => void,
2018-03-26 23:32:43 +02:00
clearCache: () => Promise<any>,
daemonSettings: DaemonSettings,
allowAnalytics: boolean,
2018-03-26 23:32:43 +02:00
showNsfw: boolean,
2019-11-22 22:13:00 +01:00
isAuthenticated: boolean,
2018-03-26 23:32:43 +02:00
instantPurchaseEnabled: boolean,
instantPurchaseMax: Price,
currentTheme: string,
themes: Array<string>,
automaticDarkModeEnabled: boolean,
2021-04-03 07:26:05 +02:00
clock24h: boolean,
2018-05-30 05:18:41 +02:00
autoplay: boolean,
2018-10-13 17:49:47 +02:00
updateWalletStatus: () => void,
2018-07-18 21:48:30 +02:00
walletEncrypted: boolean,
confirmForgetPassword: ({}) => void,
2019-08-13 07:35:13 +02:00
floatingPlayer: boolean,
hideReposts: ?boolean,
2019-08-13 07:35:13 +02:00
clearPlayingUri: () => void,
2019-08-18 19:01:04 +02:00
darkModeTimes: DarkModeTimes,
2019-08-18 18:54:55 +02:00
setDarkTime: (string, {}) => void,
openModal: (string) => void,
language?: string,
2020-09-04 17:02:30 +02:00
enterSettings: () => void,
exitSettings: () => void,
2018-03-26 23:32:43 +02:00
};
type State = {
clearingCache: boolean,
2019-08-20 14:29:59 +02:00
storedPassword: boolean,
2018-03-26 23:32:43 +02:00
};
class SettingsPage extends React.PureComponent<Props, State> {
constructor(props: Props) {
2017-05-17 10:10:25 +02:00
super(props);
this.state = {
clearingCache: false,
2019-08-20 14:29:59 +02:00
storedPassword: false,
2017-06-06 23:19:12 +02:00
};
2018-03-26 23:32:43 +02:00
(this: any).onThemeChange = this.onThemeChange.bind(this);
(this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
2019-08-18 18:54:55 +02:00
(this: any).onChangeTime = this.onChangeTime.bind(this);
2019-08-28 04:35:07 +02:00
(this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
}
2018-03-26 23:32:43 +02:00
componentDidMount() {
2020-09-04 17:02:30 +02:00
const { isAuthenticated, enterSettings } = this.props;
if (isAuthenticated || !IS_WEB) {
this.props.updateWalletStatus();
getPasswordFromCookie().then((p) => {
if (typeof p === 'string') {
this.setState({ storedPassword: true });
}
});
}
2020-09-04 17:02:30 +02:00
enterSettings();
}
componentWillUnmount() {
const { exitSettings } = this.props;
exitSettings();
2017-05-17 10:10:25 +02:00
}
2018-03-26 23:32:43 +02:00
onThemeChange(event: SyntheticInputEvent<*>) {
const { value } = event.target;
if (value === 'dark') {
this.onAutomaticDarkModeChange(false);
}
2018-11-26 02:21:25 +01:00
this.props.setClientSetting(SETTINGS.THEME, value);
2017-08-05 03:36:36 +02:00
}
2018-03-26 23:32:43 +02:00
onAutomaticDarkModeChange(value: boolean) {
2018-11-26 02:21:25 +01:00
this.props.setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value);
2018-01-14 10:14:15 +01:00
}
2021-04-03 07:26:05 +02:00
onClock24hChange(value: boolean) {
this.props.setClientSetting(SETTINGS.CLOCK_24H, value);
}
2019-08-20 14:29:59 +02:00
onConfirmForgetPassword() {
const { confirmForgetPassword } = this.props;
confirmForgetPassword({
callback: () => {
this.setState({ storedPassword: false });
},
});
2019-08-20 14:29:59 +02:00
}
2019-08-18 19:01:04 +02:00
onChangeTime(event: SyntheticInputEvent<*>, options: OptionTimes) {
2019-08-18 18:54:55 +02:00
const { value } = event.target;
this.props.setDarkTime(value, options);
}
formatHour(time: string, clock24h: boolean) {
if (clock24h) {
return `${time}:00`;
}
2019-08-18 18:54:55 +02:00
const now = new Date(0, 0, 0, Number(time));
const hour = now.toLocaleTimeString('en-US', { hour12: true, hour: '2-digit' });
return hour;
}
setDaemonSetting(name: string, value: ?SetDaemonSettingArg): void {
2018-10-13 17:49:47 +02:00
this.props.setDaemonSetting(name, value);
}
clearDaemonSetting(name: string): void {
this.props.clearDaemonSetting(name);
}
2017-05-17 10:10:25 +02:00
render() {
2017-09-07 03:53:42 +02:00
const {
daemonSettings,
allowAnalytics,
2017-09-07 03:53:42 +02:00
showNsfw,
2019-11-22 22:13:00 +01:00
isAuthenticated,
2018-03-26 23:32:43 +02:00
currentTheme,
2017-09-07 03:53:42 +02:00
themes,
2018-01-14 10:14:15 +01:00
automaticDarkModeEnabled,
2021-04-03 07:26:05 +02:00
clock24h,
2018-05-30 05:18:41 +02:00
autoplay,
2018-07-18 21:48:30 +02:00
walletEncrypted,
2019-10-15 06:20:12 +02:00
// autoDownload,
2019-02-13 17:27:20 +01:00
setDaemonSetting,
setClientSetting,
toggle3PAnalytics,
2019-08-13 07:35:13 +02:00
floatingPlayer,
hideReposts,
2019-08-14 05:04:08 +02:00
clearPlayingUri,
2019-08-18 18:54:55 +02:00
darkModeTimes,
clearCache,
openModal,
2017-09-07 03:53:42 +02:00
} = this.props;
const { storedPassword } = this.state;
2018-03-26 23:32:43 +02:00
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
2019-08-18 18:54:55 +02:00
const startHours = ['18', '19', '20', '21'];
const endHours = ['5', '6', '7', '8'];
2016-04-10 02:00:56 +02:00
return (
<Page
noFooter
noSideNavigation
backout={{
title: __('Settings'),
backLabel: __('Done'),
}}
className="card-stack"
>
<Card title={__('Language')} actions={<SettingLanguage />} />
{homepages && Object.keys(homepages).length > 1 && (
<Card title={__('Homepage')} actions={<HomepageSelector />} />
)}
2020-11-10 06:21:04 +01:00
{!isAuthenticated && IS_WEB && (
<div className="main--empty">
<Yrbl
type="happy"
title={__('Sign up for full control')}
subtitle={__('Unlock new buttons that change things.')}
actions={
<div className="section__actions">
<Button button="primary" icon={ICONS.SIGN_UP} label={__('Sign Up')} navigate={`/$/${PAGES.AUTH}`} />
</div>
}
/>
</div>
)}
2019-08-26 20:32:45 +02:00
{!IS_WEB && noDaemonSettings ? (
2018-03-26 23:32:43 +02:00
<section className="card card--section">
Changed how 'Blocked channels' are displayed on settings and a small typo Problems solved (second attempt): A. Small typo for <div className="card__title card__t itle--deprecated"> (extra space in the word **t itle**) B. More details about problems with languages: 1. The word blocked has two forms in other languages (one for plural and one for singular) and therefore must be put together with channel and channels words. Currently it can be translated in only one form. 2. In the case there are no blocked channels there is no need to show the 0 value and is more elegant the message 'You do not have blocked channels' 3. The link to manage the channels should not be visible in the case that there is no channel blocked, because there is no channel that need to be managed. And about your statement: "Your change would make it harder for other languages to change this sentence." It's quite the opossite, it's very clear and easy. They just have to translate (with examples in Romanian): '%count% %channels%. ', (leave it as it is) 'You don't have' = 'Nu aveți' 'You have' = 'Aveți' 'blocked channel' = 'canal blocat' 'blocked channels' = 'canale blocat**e**' (see the change for plural forms for the word blocked, not only for channels word?) I hope this time I explained better the need for the changes. Thanks Messages displayed: Case with 0 blocked channels: You don't have blocked channels. (No Manage button displayed) Case with 1 blocked channel: You have 1 blocked channel. **Manage** (manage link) Case with 2 or more blocked channels: You have 2 blocked channels. **Manage** (manage link)
2020-05-18 23:17:26 +02:00
<div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
2018-03-26 23:32:43 +02:00
</section>
) : (
2020-11-13 19:10:47 +01:00
<div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
{isAuthenticated && <SettingAccountPassword />}
2019-10-23 20:59:33 +02:00
{/* @if TARGET='app' */}
2019-09-27 22:03:05 +02:00
<Card
2020-08-26 22:28:33 +02:00
title={__('Download directory')}
2019-09-27 22:03:05 +02:00
actions={
<React.Fragment>
<FileSelector
type="openDirectory"
currentPath={daemonSettings.download_dir}
onFileChosen={(newDirectory: WebFile) => {
setDaemonSetting('download_dir', newDirectory.path);
2019-09-27 22:03:05 +02:00
}}
/>
<p className="help">{__('LBRY downloads will be saved here.')}</p>
</React.Fragment>
}
/>
<Card
title={__('Sync')}
subtitle={
2020-09-04 17:02:30 +02:00
walletEncrypted && !storedPassword && storedPassword !== ''
? __("To enable Sync, close LBRY completely and check 'Remember Password' during wallet unlock.")
: null
2019-09-27 22:03:05 +02:00
}
2020-09-04 17:02:30 +02:00
actions={<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />}
2019-09-27 22:03:05 +02:00
/>
{/* @endif */}
2019-09-27 22:03:05 +02:00
2020-11-10 21:27:39 +01:00
<Card
title={__('Appearance')}
actions={
<React.Fragment>
<fieldset-section>
<FormField
name="theme_select"
type="select"
label={__('Theme')}
onChange={this.onThemeChange}
value={currentTheme}
disabled={automaticDarkModeEnabled}
>
{themes.map((theme) => (
2020-11-10 21:27:39 +01:00
<option key={theme} value={theme}>
{theme === 'light' ? __('Light') : __('Dark')}
</option>
))}
</FormField>
</fieldset-section>
<fieldset-section>
<FormField
type="checkbox"
name="automatic_dark_mode"
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
checked={automaticDarkModeEnabled}
label={__('Automatic dark mode')}
/>
{automaticDarkModeEnabled && (
<fieldset-group class="fieldset-group--smushed">
<FormField
type="select"
name="automatic_dark_mode_range_start"
onChange={(value) => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
2020-11-10 21:27:39 +01:00
value={darkModeTimes.from.hour}
label={__('From --[initial time]--')}
>
{startHours.map((time) => (
2020-11-10 21:27:39 +01:00
<option key={time} value={time}>
{this.formatHour(time, clock24h)}
2020-11-10 21:27:39 +01:00
</option>
))}
</FormField>
<FormField
type="select"
name="automatic_dark_mode_range_end"
2020-11-10 21:27:39 +01:00
label={__('To --[final time]--')}
onChange={(value) => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
2020-11-10 21:27:39 +01:00
value={darkModeTimes.to.hour}
>
{endHours.map((time) => (
2020-11-10 21:27:39 +01:00
<option key={time} value={time}>
{this.formatHour(time, clock24h)}
2020-11-10 21:27:39 +01:00
</option>
))}
</FormField>
</fieldset-group>
)}
</fieldset-section>
2021-04-03 07:26:05 +02:00
<fieldset-section>
<FormField
type="checkbox"
name="clock24h"
onChange={() => this.onClock24hChange(!clock24h)}
checked={clock24h}
label={__('24-hour clock')}
/>
</fieldset-section>
2020-11-10 21:27:39 +01:00
</React.Fragment>
}
/>
2019-09-27 22:03:05 +02:00
<Card
2020-08-26 22:28:33 +02:00
title={__('Content settings')}
2019-09-27 22:03:05 +02:00
actions={
<React.Fragment>
<FormField
type="checkbox"
name="floating_player"
onChange={() => {
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
clearPlayingUri();
}}
checked={floatingPlayer}
label={__('Floating video player')}
helper={__('Keep content playing in the corner when navigating to a different page.')}
/>
2019-02-20 06:20:29 +01:00
2019-09-27 22:03:05 +02:00
<FormField
type="checkbox"
name="autoplay"
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
checked={autoplay}
label={__('Autoplay media files')}
helper={__(
'Autoplay video and audio files when navigating to a file, as well as the next related item when a file finishes playing.'
)}
2018-04-11 00:05:30 +02:00
/>
<FormField
2020-02-20 13:30:27 +01:00
type="checkbox"
name="hide_reposts"
onChange={(e) => {
if (isAuthenticated) {
let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
Lbryio.call('user_tag', 'edit', param);
}
setClientSetting(SETTINGS.HIDE_REPOSTS, !hideReposts);
2020-02-20 13:30:27 +01:00
}}
checked={hideReposts}
label={__('Hide reposts')}
helper={__('You will not see reposts by people you follow or receive email notifying about them.')}
/>
2020-02-20 13:30:27 +01:00
2019-10-17 18:58:28 +02:00
{/* <FormField
2019-10-08 18:25:33 +02:00
type="checkbox"
name="show_anonymous"
onChange={() => setClientSetting(SETTINGS.SHOW_ANONYMOUS, !showAnonymous)}
checked={showAnonymous}
label={__('Show anonymous content')}
2019-10-15 19:29:27 +02:00
helper={__('Anonymous content is published without a channel.')}
2019-10-17 18:58:28 +02:00
/> */}
2019-10-08 18:25:33 +02:00
2019-09-27 22:03:05 +02:00
<FormField
type="checkbox"
name="show_nsfw"
onChange={() =>
!IS_WEB || showNsfw
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
: openModal(MODALS.CONFIRM_AGE)
}
2019-09-27 22:03:05 +02:00
checked={showNsfw}
label={__('Show mature content')}
helper={__(
'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
)}
/>
</React.Fragment>
}
/>
{/* @if TARGET='app' */}
<Card
2020-08-26 22:28:33 +02:00
title={__('Share usage and diagnostic data')}
subtitle={
<React.Fragment>
{__(
`This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
)}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
</React.Fragment>
}
actions={
<>
<FormField
type="checkbox"
name="share_internal"
onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
checked={daemonSettings.share_usage_data}
label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
helper={
isAuthenticated
? __('Internal sharing is required while signed in.')
: __('Internal sharing is required to participate in rewards programs.')
}
disabled={isAuthenticated && daemonSettings.share_usage_data}
/>
<FormField
type="checkbox"
name="share_third_party"
onChange={(e) => toggle3PAnalytics(e.target.checked)}
checked={allowAnalytics}
label={__('Allow the app to access third party analytics platforms')}
helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
/>
</>
}
/>
{/* @endif */}
2019-09-27 22:03:05 +02:00
{(isAuthenticated || !IS_WEB) && (
<>
<Card
title={__('Notifications')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
/>
</div>
}
/>
<Card
title={__('Blocked and muted channels')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
/>
</div>
}
/>
<Card
2020-08-26 22:28:33 +02:00
title={__('Advanced settings')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_ADVANCED}`}
/>
</div>
}
/>
</>
)}
2019-11-18 19:30:15 +01:00
2019-09-27 22:03:05 +02:00
<Card
2020-08-26 22:28:33 +02:00
title={__('Application cache')}
2019-09-27 22:03:05 +02:00
subtitle={
2019-11-22 22:13:00 +01:00
<p className="section__subtitle">
2019-09-27 22:03:05 +02:00
{__(
2019-11-22 22:13:00 +01:00
'This will clear the application cache, and might fix issues you are having. Your wallet will not be affected. '
2019-09-27 22:03:05 +02:00
)}
2019-10-16 03:14:21 +02:00
</p>
2019-09-27 22:03:05 +02:00
}
actions={
<Button
2019-11-22 22:13:00 +01:00
button="secondary"
icon={ICONS.ALERT}
2019-09-27 22:03:05 +02:00
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
onClick={clearCache}
2019-09-27 22:03:05 +02:00
disabled={this.state.clearingCache}
/>
}
/>
2019-03-18 06:06:41 +01:00
</div>
2018-03-26 23:32:43 +02:00
)}
</Page>
2016-04-10 02:00:56 +02:00
);
}
2017-05-17 10:10:25 +02:00
}
2016-11-22 21:19:08 +01:00
export default SettingsPage;