474 lines
16 KiB
JavaScript
474 lines
16 KiB
JavaScript
// @flow
|
|
import * as PAGES from 'constants/pages';
|
|
import * as MODALS from 'constants/modal_types';
|
|
import * as ICONS from 'constants/icons';
|
|
import * as React from 'react';
|
|
import { SETTINGS } from 'lbry-redux';
|
|
|
|
import { FormField } from 'component/common/form';
|
|
import Button from 'component/button';
|
|
import Page from 'component/page';
|
|
import SettingLanguage from 'component/settingLanguage';
|
|
import FileSelector from 'component/common/file-selector';
|
|
import SyncToggle from 'component/syncToggle';
|
|
import Card from 'component/common/card';
|
|
import SettingAccountPassword from 'component/settingAccountPassword';
|
|
import { getPasswordFromCookie } from 'util/saved-passwords';
|
|
import { Lbryio } from 'lbryinc';
|
|
|
|
type Price = {
|
|
currency: string,
|
|
amount: number,
|
|
};
|
|
|
|
type SetDaemonSettingArg = boolean | string | number;
|
|
|
|
type DarkModeTimes = {
|
|
from: { hour: string, min: string, formattedTime: string },
|
|
to: { hour: string, min: string, formattedTime: string },
|
|
};
|
|
|
|
type OptionTimes = {
|
|
fromTo: string,
|
|
time: string,
|
|
};
|
|
|
|
type DaemonSettings = {
|
|
download_dir: string,
|
|
share_usage_data: boolean,
|
|
};
|
|
|
|
type Props = {
|
|
setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
|
|
clearDaemonSetting: string => void,
|
|
setClientSetting: (string, SetDaemonSettingArg) => void,
|
|
toggle3PAnalytics: boolean => void,
|
|
clearCache: () => Promise<any>,
|
|
daemonSettings: DaemonSettings,
|
|
allowAnalytics: boolean,
|
|
showNsfw: boolean,
|
|
isAuthenticated: boolean,
|
|
instantPurchaseEnabled: boolean,
|
|
instantPurchaseMax: Price,
|
|
currentTheme: string,
|
|
themes: Array<string>,
|
|
automaticDarkModeEnabled: boolean,
|
|
autoplay: boolean,
|
|
updateWalletStatus: () => void,
|
|
walletEncrypted: boolean,
|
|
userBlockedChannelsCount?: number,
|
|
confirmForgetPassword: ({}) => void,
|
|
floatingPlayer: boolean,
|
|
hideReposts: ?boolean,
|
|
clearPlayingUri: () => void,
|
|
darkModeTimes: DarkModeTimes,
|
|
setDarkTime: (string, {}) => void,
|
|
openModal: string => void,
|
|
language?: string,
|
|
syncEnabled: boolean,
|
|
};
|
|
|
|
type State = {
|
|
clearingCache: boolean,
|
|
storedPassword: boolean,
|
|
};
|
|
|
|
class SettingsPage extends React.PureComponent<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
clearingCache: false,
|
|
storedPassword: false,
|
|
};
|
|
|
|
(this: any).onThemeChange = this.onThemeChange.bind(this);
|
|
(this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
|
|
(this: any).onChangeTime = this.onChangeTime.bind(this);
|
|
(this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { isAuthenticated } = this.props;
|
|
|
|
if (isAuthenticated || !IS_WEB) {
|
|
this.props.updateWalletStatus();
|
|
getPasswordFromCookie().then(p => {
|
|
if (typeof p === 'string') {
|
|
this.setState({ storedPassword: true });
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
onThemeChange(event: SyntheticInputEvent<*>) {
|
|
const { value } = event.target;
|
|
|
|
if (value === 'dark') {
|
|
this.onAutomaticDarkModeChange(false);
|
|
}
|
|
|
|
this.props.setClientSetting(SETTINGS.THEME, value);
|
|
}
|
|
|
|
onAutomaticDarkModeChange(value: boolean) {
|
|
this.props.setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value);
|
|
}
|
|
|
|
onConfirmForgetPassword() {
|
|
const { confirmForgetPassword } = this.props;
|
|
confirmForgetPassword({
|
|
callback: () => {
|
|
this.setState({ storedPassword: false });
|
|
},
|
|
});
|
|
}
|
|
|
|
onChangeTime(event: SyntheticInputEvent<*>, options: OptionTimes) {
|
|
const { value } = event.target;
|
|
|
|
this.props.setDarkTime(value, options);
|
|
}
|
|
|
|
to12Hour(time: string) {
|
|
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 {
|
|
this.props.setDaemonSetting(name, value);
|
|
}
|
|
|
|
clearDaemonSetting(name: string): void {
|
|
this.props.clearDaemonSetting(name);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
daemonSettings,
|
|
allowAnalytics,
|
|
showNsfw,
|
|
isAuthenticated,
|
|
currentTheme,
|
|
themes,
|
|
automaticDarkModeEnabled,
|
|
autoplay,
|
|
walletEncrypted,
|
|
// autoDownload,
|
|
setDaemonSetting,
|
|
setClientSetting,
|
|
toggle3PAnalytics,
|
|
userBlockedChannelsCount,
|
|
floatingPlayer,
|
|
hideReposts,
|
|
clearPlayingUri,
|
|
darkModeTimes,
|
|
clearCache,
|
|
openModal,
|
|
} = this.props;
|
|
const { storedPassword } = this.state;
|
|
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
|
|
const startHours = ['18', '19', '20', '21'];
|
|
const endHours = ['5', '6', '7', '8'];
|
|
|
|
return (
|
|
<Page
|
|
noFooter
|
|
noSideNavigation
|
|
backout={{
|
|
title: __('Settings'),
|
|
backLabel: __('Done'),
|
|
}}
|
|
className="card-stack"
|
|
>
|
|
{!IS_WEB && noDaemonSettings ? (
|
|
<section className="card card--section">
|
|
<div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
|
|
</section>
|
|
) : (
|
|
<div>
|
|
<Card title={__('Language')} actions={<SettingLanguage />} />
|
|
{isAuthenticated && <SettingAccountPassword />}
|
|
{/* @if TARGET='app' */}
|
|
<Card
|
|
title={__('Download Directory')}
|
|
actions={
|
|
<React.Fragment>
|
|
<FileSelector
|
|
type="openDirectory"
|
|
currentPath={daemonSettings.download_dir}
|
|
onFileChosen={(newDirectory: WebFile) => {
|
|
setDaemonSetting('download_dir', newDirectory.path);
|
|
}}
|
|
/>
|
|
<p className="help">{__('LBRY downloads will be saved here.')}</p>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
<Card
|
|
title={__('Sync')}
|
|
subtitle={
|
|
walletEncrypted && !storedPassword
|
|
? __("To enable this feature, check 'Save Password' the next time you start the app.")
|
|
: null
|
|
}
|
|
actions={<SyncToggle disabled={walletEncrypted && !storedPassword} />}
|
|
/>
|
|
{/* @endif */}
|
|
|
|
<Card
|
|
title={__('Content Settings')}
|
|
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.')}
|
|
/>
|
|
|
|
<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.'
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
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);
|
|
}}
|
|
checked={hideReposts}
|
|
label={__('Hide reposts')}
|
|
helper={__('You will not see reposts by people you follow or receive email notifying about them.')}
|
|
/>
|
|
|
|
{/* <FormField
|
|
type="checkbox"
|
|
name="show_anonymous"
|
|
onChange={() => setClientSetting(SETTINGS.SHOW_ANONYMOUS, !showAnonymous)}
|
|
checked={showAnonymous}
|
|
label={__('Show anonymous content')}
|
|
helper={__('Anonymous content is published without a channel.')}
|
|
/> */}
|
|
|
|
<FormField
|
|
type="checkbox"
|
|
name="show_nsfw"
|
|
onChange={() =>
|
|
!IS_WEB || showNsfw
|
|
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
|
|
: openModal(MODALS.CONFIRM_AGE)
|
|
}
|
|
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>
|
|
}
|
|
/>
|
|
|
|
<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 => (
|
|
<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"
|
|
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
|
|
value={darkModeTimes.from.hour}
|
|
label={__('From')}
|
|
>
|
|
{startHours.map(time => (
|
|
<option key={time} value={time}>
|
|
{this.to12Hour(time)}
|
|
</option>
|
|
))}
|
|
</FormField>
|
|
<FormField
|
|
type="select"
|
|
name="automatic_dark_mode_range"
|
|
label={__('To')}
|
|
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
|
|
value={darkModeTimes.to.hour}
|
|
>
|
|
{endHours.map(time => (
|
|
<option key={time} value={time}>
|
|
{this.to12Hour(time)}
|
|
</option>
|
|
))}
|
|
</FormField>
|
|
</fieldset-group>
|
|
)}
|
|
</fieldset-section>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
|
|
{/* @if TARGET='app' */}
|
|
<Card
|
|
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 */}
|
|
|
|
{(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 Channels')}
|
|
subtitle={
|
|
userBlockedChannelsCount === 0
|
|
? __("You don't have blocked channels.")
|
|
: userBlockedChannelsCount === 1
|
|
? __('You have one blocked channel.')
|
|
: __('You have %channels% blocked channels.', { channels: userBlockedChannelsCount })
|
|
}
|
|
actions={
|
|
<div className="section__actions">
|
|
<Button
|
|
button="secondary"
|
|
label={__('Manage')}
|
|
icon={ICONS.SETTINGS}
|
|
navigate={`/$/${PAGES.BLOCKED}`}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
<Card
|
|
title={__('Advanced Settings')}
|
|
actions={
|
|
<div className="section__actions">
|
|
<Button
|
|
button="secondary"
|
|
label={__('Manage')}
|
|
icon={ICONS.SETTINGS}
|
|
navigate={`/$/${PAGES.SETTINGS_ADVANCED}`}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<Card
|
|
title={__('Application Cache')}
|
|
subtitle={
|
|
<p className="section__subtitle">
|
|
{__(
|
|
'This will clear the application cache, and might fix issues you are having. Your wallet will not be affected. '
|
|
)}
|
|
</p>
|
|
}
|
|
actions={
|
|
<Button
|
|
button="secondary"
|
|
icon={ICONS.ALERT}
|
|
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
|
|
onClick={clearCache}
|
|
disabled={this.state.clearingCache}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Page>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default SettingsPage;
|