Change style for card title

I think it looks better to not place the title within the card's border when there are multiple cards in a page, like in the case of the new Settings Layout. Otherwise, it's hard to differentiate between title and settings-row.

The proper method is to style Card itself, but this is a quick fix for the Settings Page PR. Will come back to it later.
This commit is contained in:
infinite-persistence 2021-08-09 10:22:16 +08:00
parent b3b4e54975
commit 9a17878661
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
4 changed files with 473 additions and 461 deletions

View file

@ -34,62 +34,65 @@ export default function SettingAccount(props: Props) {
}
});
}
// enterSettings(); @KP need to do this at each component, or just at Settings Page?
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<Card
id={SETTINGS_GRP.ACCOUNT}
title={__('Account')}
subtitle=""
isBodyList
body={
<>
{isAuthenticated && (
<>
<div className="card__title-section">
<h2 className="card__title">{__('Account')}</h2>
</div>
<Card
id={SETTINGS_GRP.ACCOUNT}
isBodyList
body={
<>
{isAuthenticated && (
<div className="card__main-actions">
<SettingAccountPassword />
</div>
)}
{/* @if TARGET='app' */}
<div className="card__main-actions">
<SettingAccountPassword />
<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
</div>
)}
{/* @endif */}
{/* @if TARGET='app' */}
<div className="card__main-actions">
<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
</div>
{/* @endif */}
{/* @if TARGET='web' */}
{user && getStripeEnvironment() && (
<SettingsRow
title={__('Bank Accounts')}
subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
/>
</SettingsRow>
)}
{/* @endif */}
{/* @if TARGET='web' */}
{user && getStripeEnvironment() && (
<SettingsRow
title={__('Bank Accounts')}
subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
/>
</SettingsRow>
)}
{/* @endif */}
{/* @if TARGET='web' */}
{isAuthenticated && getStripeEnvironment() && (
<SettingsRow
title={__('Payment Methods')}
subtitle={__('Add a credit card to tip creators in their local currency')}
>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
/>
</SettingsRow>
)}
{/* @endif */}
</>
}
/>
{/* @if TARGET='web' */}
{isAuthenticated && getStripeEnvironment() && (
<SettingsRow
title={__('Payment Methods')}
subtitle={__('Add a credit card to tip creators in their local currency')}
>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
/>
</SettingsRow>
)}
{/* @endif */}
</>
}
/>
</>
);
}

View file

@ -24,62 +24,65 @@ export default function SettingAppearance(props: Props) {
const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
return (
<Card
id={SETTINGS_GRP.APPEARANCE}
title={__('Appearance')}
subtitle=""
isBodyList
body={
<>
{homepages && Object.keys(homepages).length > 1 && (
<SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
<HomepageSelector />
<>
<div className="card__title-section">
<h2 className="card__title">{__('Appearance')}</h2>
</div>
<Card
id={SETTINGS_GRP.APPEARANCE}
isBodyList
body={
<>
{homepages && Object.keys(homepages).length > 1 && (
<SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
<HomepageSelector />
</SettingsRow>
)}
<SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
<SettingLanguage />
</SettingsRow>
)}
<SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
<SettingLanguage />
</SettingsRow>
<SettingsRow title={__('Search only in the selected language by default')}>
<FormField
name="search-in-language"
type="checkbox"
checked={searchInLanguage}
onChange={() => setSearchInLanguage(!searchInLanguage)}
/>
</SettingsRow>
<SettingsRow title={__('Theme')}>
<ThemeSelector />
</SettingsRow>
<SettingsRow title={__('24-hour clock')}>
<FormField
type="checkbox"
name="clock24h"
onChange={() => setClientSetting(SETTINGS.CLOCK_24H, !clock24h)}
checked={clock24h}
/>
</SettingsRow>
{(isAuthenticated || !IS_WEB) && (
<SettingsRow title={__('Hide wallet balance in header')}>
<SettingsRow title={__('Search only in the selected language by default')}>
<FormField
name="search-in-language"
type="checkbox"
name="hide_balance"
onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
checked={hideBalance}
checked={searchInLanguage}
onChange={() => setSearchInLanguage(!searchInLanguage)}
/>
</SettingsRow>
)}
</>
}
/>
<SettingsRow title={__('Theme')}>
<ThemeSelector />
</SettingsRow>
<SettingsRow title={__('24-hour clock')}>
<FormField
type="checkbox"
name="clock24h"
onChange={() => setClientSetting(SETTINGS.CLOCK_24H, !clock24h)}
checked={clock24h}
/>
</SettingsRow>
{(isAuthenticated || !IS_WEB) && (
<SettingsRow title={__('Hide wallet balance in header')}>
<FormField
type="checkbox"
name="hide_balance"
onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
checked={hideBalance}
/>
</SettingsRow>
)}
</>
}
/>
</>
);
}
// prettier-disable
// prettier-ignore
const HELP = {
LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
};

View file

@ -52,51 +52,53 @@ export default function SettingContent(props: Props) {
} = props;
return (
<Card
id={SETTINGS_GRP.CONTENT}
title={__('Content settings')}
subtitle=""
isBodyList
body={
<>
<SettingsRow title={__('Floating video player')} subtitle={__(HELP_FLOATING_PLAYER)}>
<FormField
type="checkbox"
name="floating_player"
onChange={() => {
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
clearPlayingUri();
}}
checked={floatingPlayer}
/>
</SettingsRow>
<>
<div className="card__title-section">
<h2 className="card__title">{__('Content settings')}</h2>
</div>
<Card
id={SETTINGS_GRP.CONTENT}
isBodyList
body={
<>
<SettingsRow title={__('Floating video player')} subtitle={__(HELP_FLOATING_PLAYER)}>
<FormField
type="checkbox"
name="floating_player"
onChange={() => {
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
clearPlayingUri();
}}
checked={floatingPlayer}
/>
</SettingsRow>
<SettingsRow title={__('Autoplay media files')} subtitle={__(HELP_AUTOPLAY)}>
<FormField
type="checkbox"
name="autoplay"
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
checked={autoplay}
/>
</SettingsRow>
<SettingsRow title={__('Autoplay media files')} subtitle={__(HELP_AUTOPLAY)}>
<FormField
type="checkbox"
name="autoplay"
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
checked={autoplay}
/>
</SettingsRow>
{!SIMPLE_SITE && (
<>
<SettingsRow title={__('Hide reposts')} subtitle={__(HELP_HIDE_REPOSTS)}>
<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);
}}
/>
</SettingsRow>
{!SIMPLE_SITE && (
<>
<SettingsRow title={__('Hide reposts')} subtitle={__(HELP_HIDE_REPOSTS)}>
<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);
}}
/>
</SettingsRow>
{/*
{/*
<SettingsRow title={__('Show anonymous content')} subtitle={__('Anonymous content is published without a channel.')} >
<FormField
type="checkbox"
@ -107,98 +109,99 @@ export default function SettingContent(props: Props) {
</SettingsRow>
*/}
<SettingsRow title={__('Show mature content')} subtitle={__(HELP_SHOW_MATURE)}>
<FormField
type="checkbox"
name="show_nsfw"
checked={showNsfw}
onChange={() =>
!IS_WEB || showNsfw
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
: openModal(MODALS.CONFIRM_AGE)
}
/>
</SettingsRow>
</>
)}
<SettingsRow title={__('Show mature content')} subtitle={__(HELP_SHOW_MATURE)}>
<FormField
type="checkbox"
name="show_nsfw"
checked={showNsfw}
onChange={() =>
!IS_WEB || showNsfw
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
: openModal(MODALS.CONFIRM_AGE)
}
/>
</SettingsRow>
</>
)}
{(isAuthenticated || !IS_WEB) && (
<>
<SettingsRow title={__('Notifications')}>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
/>
</SettingsRow>
<SettingsRow title={__('Blocked and muted channels')}>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
/>
</SettingsRow>
{myChannelUrls && myChannelUrls.length > 0 && (
<SettingsRow title={__('Creator settings')}>
{(isAuthenticated || !IS_WEB) && (
<>
<SettingsRow title={__('Notifications')}>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_CREATOR}`}
navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
/>
</SettingsRow>
)}
</>
)}
<SettingsRow title={__('Publish confirmation')} subtitle={__('Skip preview and confirmation')}>
<FormField
type="checkbox"
name="sync_toggle"
label={__('')}
checked={!enablePublishPreview}
onChange={() => setClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, !enablePublishPreview)}
/>
</SettingsRow>
<SettingsRow title={__('Blocked and muted channels')}>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
/>
</SettingsRow>
{/* @if TARGET='app' */}
<SettingsRow title={__('Max purchase price')} subtitle={__(HELP_MAX_PURCHASE_PRICE)} useVerticalSeparator>
<MaxPurchasePrice />
</SettingsRow>
{/* @endif */}
<SettingsRow title={__('Purchase and tip confirmations')} useVerticalSeparator>
<FormField
type="radio"
name="confirm_all_purchases"
checked={!instantPurchaseEnabled}
label={__('Always confirm before purchasing content or tipping')}
onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, false)}
/>
<FormField
type="radio"
name="instant_purchases"
checked={instantPurchaseEnabled}
label={__('Only confirm purchases or tips over a certain amount')}
helper={__(HELP_ONLY_CONFIRM_OVER_AMOUNT)}
onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, true)}
/>
{instantPurchaseEnabled && (
<FormFieldPrice
name="confirmation_price"
min={0.1}
onChange={(newValue) => setClientSetting(SETTINGS.INSTANT_PURCHASE_MAX, newValue)}
price={instantPurchaseMax}
/>
{myChannelUrls && myChannelUrls.length > 0 && (
<SettingsRow title={__('Creator settings')}>
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.SETTINGS_CREATOR}`}
/>
</SettingsRow>
)}
</>
)}
</SettingsRow>
</>
}
/>
<SettingsRow title={__('Publish confirmation')} subtitle={__('Skip preview and confirmation')}>
<FormField
type="checkbox"
name="sync_toggle"
label={__('')}
checked={!enablePublishPreview}
onChange={() => setClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, !enablePublishPreview)}
/>
</SettingsRow>
{/* @if TARGET='app' */}
<SettingsRow title={__('Max purchase price')} subtitle={__(HELP_MAX_PURCHASE_PRICE)} useVerticalSeparator>
<MaxPurchasePrice />
</SettingsRow>
{/* @endif */}
<SettingsRow title={__('Purchase and tip confirmations')} useVerticalSeparator>
<FormField
type="radio"
name="confirm_all_purchases"
checked={!instantPurchaseEnabled}
label={__('Always confirm before purchasing content or tipping')}
onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, false)}
/>
<FormField
type="radio"
name="instant_purchases"
checked={instantPurchaseEnabled}
label={__('Only confirm purchases or tips over a certain amount')}
helper={__(HELP_ONLY_CONFIRM_OVER_AMOUNT)}
onChange={() => setClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED, true)}
/>
{instantPurchaseEnabled && (
<FormFieldPrice
name="confirmation_price"
min={0.1}
onChange={(newValue) => setClientSetting(SETTINGS.INSTANT_PURCHASE_MAX, newValue)}
price={instantPurchaseMax}
/>
)}
</SettingsRow>
</>
}
/>
</>
);
}

View file

@ -121,222 +121,224 @@ export default function SettingSystem(props: Props) {
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<Card
id={SETTINGS_GRP.SYSTEM}
title={__('System')}
subtitle=""
isBodyList
body={
<>
{/* @if TARGET='app' */}
<SettingsRow title={__('Download directory')} subtitle={__('LBRY downloads will be saved here.')}>
<FileSelector
type="openDirectory"
currentPath={daemonSettings.download_dir}
onFileChosen={(newDirectory: WebFile) => {
setDaemonSetting('download_dir', newDirectory.path);
}}
/>
</SettingsRow>
{/* @endif */}
<>
<div className="card__title-section">
<h2 className="card__title">{__('System')}</h2>
</div>
<Card
id={SETTINGS_GRP.SYSTEM}
isBodyList
body={
<>
{/* @if TARGET='app' */}
<SettingsRow title={__('Download directory')} subtitle={__('LBRY downloads will be saved here.')}>
<FileSelector
type="openDirectory"
currentPath={daemonSettings.download_dir}
onFileChosen={(newDirectory: WebFile) => {
setDaemonSetting('download_dir', newDirectory.path);
}}
/>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow
title={__('Save all viewed content to your downloads directory')}
subtitle={__(
'Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.'
)}
>
<FormField
type="checkbox"
name="save_files"
onChange={() => setDaemonSetting('save_files', !daemonSettings.save_files)}
checked={daemonSettings.save_files}
/>
</SettingsRow>
<SettingsRow
title={__('Save hosting data to help the LBRY network')}
subtitle={
<React.Fragment>
{__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
</React.Fragment>
}
>
<FormField
type="checkbox"
name="save_blobs"
onChange={() => setDaemonSetting('save_blobs', !daemonSettings.save_blobs)}
checked={daemonSettings.save_blobs}
/>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow
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>
}
useVerticalSeparator
>
<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.')}
/>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
{/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
{!IS_MAC && (
{/* @if TARGET='app' */}
<SettingsRow
title={__('Start minimized')}
title={__('Save all viewed content to your downloads directory')}
subtitle={__(
'Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.'
'Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.'
)}
>
<SettingAutoLaunch noLabels />
<FormField
type="checkbox"
name="save_files"
onChange={() => setDaemonSetting('save_files', !daemonSettings.save_files)}
checked={daemonSettings.save_files}
/>
</SettingsRow>
)}
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow title={__('Leave app running in notification area when the window is closed')}>
<SettingClosingBehavior noLabels />
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow
title={
<span>
{__('Automatic transcoding')}
{findingFFmpeg && <Spinner type="small" />}
</span>
}
>
<FileSelector
type="openDirectory"
placeholder={__('A Folder containing FFmpeg')}
currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
onFileChosen={(newDirectory: WebFile) => {
// $FlowFixMe
setDaemonSetting('ffmpeg_path', newDirectory.path);
findFFmpeg();
}}
disabled={Boolean(ffmpegPath)}
/>
<p className="help">
{ffmpegAvailable ? (
<I18nMessage
tokens={{
learn_more: (
<Button
button="link"
label={__('Learn more')}
href="https://lbry.com/faq/video-publishing-guide#automatic"
/>
),
}}
>
FFmpeg is correctly configured. %learn_more%
</I18nMessage>
) : (
<I18nMessage
tokens={{
check_again: (
<Button
button="link"
label={__('Check again')}
onClick={() => findFFmpeg()}
disabled={findingFFmpeg}
/>
),
learn_more: (
<Button
button="link"
label={__('Learn more')}
href="https://lbry.com/faq/video-publishing-guide#automatic"
/>
),
}}
>
FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the app.
%learn_more%
</I18nMessage>
)}
</p>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow title={__('Wallet security')}>
<FormField
disabled
type="checkbox"
name="encrypt_wallet"
onChange={() => onChangeEncryptWallet()}
checked={walletEncrypted}
label={__('Encrypt my wallet with a custom password')}
helper={
<SettingsRow
title={__('Save hosting data to help the LBRY network')}
subtitle={
<React.Fragment>
{__("If disabled, LBRY will be very sad and you won't be helping improve the network.")}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/host-content" />.
</React.Fragment>
}
>
<FormField
type="checkbox"
name="save_blobs"
onChange={() => setDaemonSetting('save_blobs', !daemonSettings.save_blobs)}
checked={daemonSettings.save_blobs}
/>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow
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>
}
useVerticalSeparator
>
<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.')}
/>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
{/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
{!IS_MAC && (
<SettingsRow
title={__('Start minimized')}
subtitle={__(
'Improve view speed and help the LBRY network by allowing the app to cuddle up in your system tray.'
)}
>
<SettingAutoLaunch noLabels />
</SettingsRow>
)}
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow title={__('Leave app running in notification area when the window is closed')}>
<SettingClosingBehavior noLabels />
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow
title={
<span>
{__('Automatic transcoding')}
{findingFFmpeg && <Spinner type="small" />}
</span>
}
>
<FileSelector
type="openDirectory"
placeholder={__('A Folder containing FFmpeg')}
currentPath={ffmpegPath || daemonSettings.ffmpeg_path}
onFileChosen={(newDirectory: WebFile) => {
// $FlowFixMe
setDaemonSetting('ffmpeg_path', newDirectory.path);
findFFmpeg();
}}
disabled={Boolean(ffmpegPath)}
/>
<p className="help">
{ffmpegAvailable ? (
<I18nMessage
tokens={{
learn_more: (
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
<Button
button="link"
label={__('Learn more')}
href="https://lbry.com/faq/video-publishing-guide#automatic"
/>
),
}}
>
Wallet encryption is currently unavailable until it's supported for synced accounts. It will be
added back soon. %learn_more%.
FFmpeg is correctly configured. %learn_more%
</I18nMessage>
{/* {__('Secure your local wallet data with a custom password.')}{' '}
) : (
<I18nMessage
tokens={{
check_again: (
<Button
button="link"
label={__('Check again')}
onClick={() => findFFmpeg()}
disabled={findingFFmpeg}
/>
),
learn_more: (
<Button
button="link"
label={__('Learn more')}
href="https://lbry.com/faq/video-publishing-guide#automatic"
/>
),
}}
>
FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the
app. %learn_more%
</I18nMessage>
)}
</p>
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow title={__('Wallet security')}>
<FormField
disabled
type="checkbox"
name="encrypt_wallet"
onChange={() => onChangeEncryptWallet()}
checked={walletEncrypted}
label={__('Encrypt my wallet with a custom password')}
helper={
<React.Fragment>
<I18nMessage
tokens={{
learn_more: (
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
),
}}
>
Wallet encryption is currently unavailable until it's supported for synced accounts. It will be
added back soon. %learn_more%.
</I18nMessage>
{/* {__('Secure your local wallet data with a custom password.')}{' '}
<strong>{__('Lost passwords cannot be recovered.')} </strong>
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
</React.Fragment>
}
/>
{walletEncrypted && storedPassword && (
<FormField
type="checkbox"
name="save_password"
onChange={onConfirmForgetPassword}
checked={storedPassword}
label={__('Save Password')}
helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
</React.Fragment>
}
/>
)}
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow title={__('Experimental settings')} useVerticalSeparator>
{/* Disabling below until we get downloads to work with shared subscriptions code */}
{/*
{walletEncrypted && storedPassword && (
<FormField
type="checkbox"
name="save_password"
onChange={onConfirmForgetPassword}
checked={storedPassword}
label={__('Save Password')}
helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
/>
)}
</SettingsRow>
{/* @endif */}
{/* @if TARGET='app' */}
<SettingsRow title={__('Experimental settings')} useVerticalSeparator>
{/* Disabling below until we get downloads to work with shared subscriptions code */}
{/*
<FormField
type="checkbox"
name="auto_download"
@ -349,49 +351,50 @@ export default function SettingSystem(props: Props) {
/>
*/}
<fieldset-section>
<FormField
name="max_connections"
type="select"
label={__('Max Connections')}
helper={__(
'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
)}
min={1}
max={100}
onChange={(e) => setDaemonSetting('max_connections_per_download', e.target.value)}
value={daemonSettings.max_connections_per_download}
>
{[1, 2, 4, 6, 10, 20].map((connectionOption) => (
<option key={connectionOption} value={connectionOption}>
{connectionOption}
</option>
))}
</FormField>
</fieldset-section>
<fieldset-section>
<FormField
name="max_connections"
type="select"
label={__('Max Connections')}
helper={__(
'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
)}
min={1}
max={100}
onChange={(e) => setDaemonSetting('max_connections_per_download', e.target.value)}
value={daemonSettings.max_connections_per_download}
>
{[1, 2, 4, 6, 10, 20].map((connectionOption) => (
<option key={connectionOption} value={connectionOption}>
{connectionOption}
</option>
))}
</FormField>
</fieldset-section>
<SettingWalletServer />
<SettingCommentsServer />
</SettingsRow>
{/* @endif */}
<SettingWalletServer />
<SettingCommentsServer />
</SettingsRow>
{/* @endif */}
<SettingsRow
title={__('Clear application cache')}
subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}
>
<Button
button="secondary"
icon={ALERT}
label={clearingCache ? __('Clearing') : __('Clear Cache')}
onClick={() => {
setClearingCache(true);
clearCache();
}}
disabled={clearingCache}
/>
</SettingsRow>
</>
}
/>
<SettingsRow
title={__('Clear application cache')}
subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}
>
<Button
button="secondary"
icon={ALERT}
label={clearingCache ? __('Clearing') : __('Clear Cache')}
onClick={() => {
setClearingCache(true);
clearCache();
}}
disabled={clearingCache}
/>
</SettingsRow>
</>
}
/>
</>
);
}