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
parent
b3b4e54975
commit
9a17878661
4 changed files with 473 additions and 461 deletions
|
|
@ -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
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<>
|
||||||
id={SETTINGS_GRP.ACCOUNT}
|
<div className="card__title-section">
|
||||||
title={__('Account')}
|
<h2 className="card__title">{__('Account')}</h2>
|
||||||
subtitle=""
|
</div>
|
||||||
isBodyList
|
|
||||||
body={
|
<Card
|
||||||
<>
|
id={SETTINGS_GRP.ACCOUNT}
|
||||||
{isAuthenticated && (
|
isBodyList
|
||||||
|
body={
|
||||||
|
<>
|
||||||
|
{isAuthenticated && (
|
||||||
|
<div className="card__main-actions">
|
||||||
|
<SettingAccountPassword />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* @if TARGET='app' */}
|
||||||
<div className="card__main-actions">
|
<div className="card__main-actions">
|
||||||
<SettingAccountPassword />
|
<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
{/* @endif */}
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
{/* @if TARGET='web' */}
|
||||||
<div className="card__main-actions">
|
{user && getStripeEnvironment() && (
|
||||||
<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
|
<SettingsRow
|
||||||
</div>
|
title={__('Bank Accounts')}
|
||||||
{/* @endif */}
|
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' */}
|
{/* @if TARGET='web' */}
|
||||||
{user && getStripeEnvironment() && (
|
{isAuthenticated && getStripeEnvironment() && (
|
||||||
<SettingsRow
|
<SettingsRow
|
||||||
title={__('Bank Accounts')}
|
title={__('Payment Methods')}
|
||||||
subtitle={__('Connect a bank account to receive tips and compensation in your local currency')}
|
subtitle={__('Add a credit card to tip creators in their local currency')}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
button="secondary"
|
button="secondary"
|
||||||
label={__('Manage')}
|
label={__('Manage')}
|
||||||
icon={ICONS.SETTINGS}
|
icon={ICONS.SETTINGS}
|
||||||
navigate={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`}
|
navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`}
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
)}
|
)}
|
||||||
{/* @endif */}
|
{/* @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 */}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,62 +24,65 @@ export default function SettingAppearance(props: Props) {
|
||||||
const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
|
const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<>
|
||||||
id={SETTINGS_GRP.APPEARANCE}
|
<div className="card__title-section">
|
||||||
title={__('Appearance')}
|
<h2 className="card__title">{__('Appearance')}</h2>
|
||||||
subtitle=""
|
</div>
|
||||||
isBodyList
|
<Card
|
||||||
body={
|
id={SETTINGS_GRP.APPEARANCE}
|
||||||
<>
|
isBodyList
|
||||||
{homepages && Object.keys(homepages).length > 1 && (
|
body={
|
||||||
<SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
|
<>
|
||||||
<HomepageSelector />
|
{homepages && Object.keys(homepages).length > 1 && (
|
||||||
|
<SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
|
||||||
|
<HomepageSelector />
|
||||||
|
</SettingsRow>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
|
||||||
|
<SettingLanguage />
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
)}
|
|
||||||
|
|
||||||
<SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
|
<SettingsRow title={__('Search only in the selected language by default')}>
|
||||||
<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')}>
|
|
||||||
<FormField
|
<FormField
|
||||||
|
name="search-in-language"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="hide_balance"
|
checked={searchInLanguage}
|
||||||
onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
|
onChange={() => setSearchInLanguage(!searchInLanguage)}
|
||||||
checked={hideBalance}
|
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</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 = {
|
const HELP = {
|
||||||
LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
|
LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -52,51 +52,53 @@ export default function SettingContent(props: Props) {
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<>
|
||||||
id={SETTINGS_GRP.CONTENT}
|
<div className="card__title-section">
|
||||||
title={__('Content settings')}
|
<h2 className="card__title">{__('Content settings')}</h2>
|
||||||
subtitle=""
|
</div>
|
||||||
isBodyList
|
<Card
|
||||||
body={
|
id={SETTINGS_GRP.CONTENT}
|
||||||
<>
|
isBodyList
|
||||||
<SettingsRow title={__('Floating video player')} subtitle={__(HELP_FLOATING_PLAYER)}>
|
body={
|
||||||
<FormField
|
<>
|
||||||
type="checkbox"
|
<SettingsRow title={__('Floating video player')} subtitle={__(HELP_FLOATING_PLAYER)}>
|
||||||
name="floating_player"
|
<FormField
|
||||||
onChange={() => {
|
type="checkbox"
|
||||||
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
|
name="floating_player"
|
||||||
clearPlayingUri();
|
onChange={() => {
|
||||||
}}
|
setClientSetting(SETTINGS.FLOATING_PLAYER, !floatingPlayer);
|
||||||
checked={floatingPlayer}
|
clearPlayingUri();
|
||||||
/>
|
}}
|
||||||
</SettingsRow>
|
checked={floatingPlayer}
|
||||||
|
/>
|
||||||
|
</SettingsRow>
|
||||||
|
|
||||||
<SettingsRow title={__('Autoplay media files')} subtitle={__(HELP_AUTOPLAY)}>
|
<SettingsRow title={__('Autoplay media files')} subtitle={__(HELP_AUTOPLAY)}>
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="autoplay"
|
name="autoplay"
|
||||||
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
|
onChange={() => setClientSetting(SETTINGS.AUTOPLAY, !autoplay)}
|
||||||
checked={autoplay}
|
checked={autoplay}
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
|
|
||||||
{!SIMPLE_SITE && (
|
{!SIMPLE_SITE && (
|
||||||
<>
|
<>
|
||||||
<SettingsRow title={__('Hide reposts')} subtitle={__(HELP_HIDE_REPOSTS)}>
|
<SettingsRow title={__('Hide reposts')} subtitle={__(HELP_HIDE_REPOSTS)}>
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="hide_reposts"
|
name="hide_reposts"
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
if (isAuthenticated) {
|
if (isAuthenticated) {
|
||||||
let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
|
let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
|
||||||
Lbryio.call('user_tag', 'edit', param);
|
Lbryio.call('user_tag', 'edit', param);
|
||||||
}
|
}
|
||||||
setClientSetting(SETTINGS.HIDE_REPOSTS, !hideReposts);
|
setClientSetting(SETTINGS.HIDE_REPOSTS, !hideReposts);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
|
|
||||||
{/*
|
{/*
|
||||||
<SettingsRow title={__('Show anonymous content')} subtitle={__('Anonymous content is published without a channel.')} >
|
<SettingsRow title={__('Show anonymous content')} subtitle={__('Anonymous content is published without a channel.')} >
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
|
|
@ -107,98 +109,99 @@ export default function SettingContent(props: Props) {
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
<SettingsRow title={__('Show mature content')} subtitle={__(HELP_SHOW_MATURE)}>
|
<SettingsRow title={__('Show mature content')} subtitle={__(HELP_SHOW_MATURE)}>
|
||||||
<FormField
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="show_nsfw"
|
name="show_nsfw"
|
||||||
checked={showNsfw}
|
checked={showNsfw}
|
||||||
onChange={() =>
|
onChange={() =>
|
||||||
!IS_WEB || showNsfw
|
!IS_WEB || showNsfw
|
||||||
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
|
? setClientSetting(SETTINGS.SHOW_MATURE, !showNsfw)
|
||||||
: openModal(MODALS.CONFIRM_AGE)
|
: openModal(MODALS.CONFIRM_AGE)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(isAuthenticated || !IS_WEB) && (
|
{(isAuthenticated || !IS_WEB) && (
|
||||||
<>
|
<>
|
||||||
<SettingsRow title={__('Notifications')}>
|
<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')}>
|
|
||||||
<Button
|
<Button
|
||||||
button="secondary"
|
button="secondary"
|
||||||
label={__('Manage')}
|
label={__('Manage')}
|
||||||
icon={ICONS.SETTINGS}
|
icon={ICONS.SETTINGS}
|
||||||
navigate={`/$/${PAGES.SETTINGS_CREATOR}`}
|
navigate={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`}
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<SettingsRow title={__('Publish confirmation')} subtitle={__('Skip preview and confirmation')}>
|
<SettingsRow title={__('Blocked and muted channels')}>
|
||||||
<FormField
|
<Button
|
||||||
type="checkbox"
|
button="secondary"
|
||||||
name="sync_toggle"
|
label={__('Manage')}
|
||||||
label={__('')}
|
icon={ICONS.SETTINGS}
|
||||||
checked={!enablePublishPreview}
|
navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
|
||||||
onChange={() => setClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW, !enablePublishPreview)}
|
/>
|
||||||
/>
|
</SettingsRow>
|
||||||
</SettingsRow>
|
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
{myChannelUrls && myChannelUrls.length > 0 && (
|
||||||
<SettingsRow title={__('Max purchase price')} subtitle={__(HELP_MAX_PURCHASE_PRICE)} useVerticalSeparator>
|
<SettingsRow title={__('Creator settings')}>
|
||||||
<MaxPurchasePrice />
|
<Button
|
||||||
</SettingsRow>
|
button="secondary"
|
||||||
{/* @endif */}
|
label={__('Manage')}
|
||||||
|
icon={ICONS.SETTINGS}
|
||||||
<SettingsRow title={__('Purchase and tip confirmations')} useVerticalSeparator>
|
navigate={`/$/${PAGES.SETTINGS_CREATOR}`}
|
||||||
<FormField
|
/>
|
||||||
type="radio"
|
</SettingsRow>
|
||||||
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>
|
|
||||||
</>
|
<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>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -121,222 +121,224 @@ export default function SettingSystem(props: Props) {
|
||||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<>
|
||||||
id={SETTINGS_GRP.SYSTEM}
|
<div className="card__title-section">
|
||||||
title={__('System')}
|
<h2 className="card__title">{__('System')}</h2>
|
||||||
subtitle=""
|
</div>
|
||||||
isBodyList
|
<Card
|
||||||
body={
|
id={SETTINGS_GRP.SYSTEM}
|
||||||
<>
|
isBodyList
|
||||||
{/* @if TARGET='app' */}
|
body={
|
||||||
<SettingsRow title={__('Download directory')} subtitle={__('LBRY downloads will be saved here.')}>
|
<>
|
||||||
<FileSelector
|
{/* @if TARGET='app' */}
|
||||||
type="openDirectory"
|
<SettingsRow title={__('Download directory')} subtitle={__('LBRY downloads will be saved here.')}>
|
||||||
currentPath={daemonSettings.download_dir}
|
<FileSelector
|
||||||
onFileChosen={(newDirectory: WebFile) => {
|
type="openDirectory"
|
||||||
setDaemonSetting('download_dir', newDirectory.path);
|
currentPath={daemonSettings.download_dir}
|
||||||
}}
|
onFileChosen={(newDirectory: WebFile) => {
|
||||||
/>
|
setDaemonSetting('download_dir', newDirectory.path);
|
||||||
</SettingsRow>
|
}}
|
||||||
{/* @endif */}
|
/>
|
||||||
|
</SettingsRow>
|
||||||
|
{/* @endif */}
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
{/* @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 && (
|
|
||||||
<SettingsRow
|
<SettingsRow
|
||||||
title={__('Start minimized')}
|
title={__('Save all viewed content to your downloads directory')}
|
||||||
subtitle={__(
|
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>
|
</SettingsRow>
|
||||||
)}
|
<SettingsRow
|
||||||
{/* @endif */}
|
title={__('Save hosting data to help the LBRY network')}
|
||||||
|
subtitle={
|
||||||
{/* @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={
|
|
||||||
<React.Fragment>
|
<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
|
<I18nMessage
|
||||||
tokens={{
|
tokens={{
|
||||||
learn_more: (
|
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
|
FFmpeg is correctly configured. %learn_more%
|
||||||
added back soon. %learn_more%.
|
|
||||||
</I18nMessage>
|
</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>
|
<strong>{__('Lost passwords cannot be recovered.')} </strong>
|
||||||
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
|
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
|
||||||
</React.Fragment>
|
</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>}
|
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</SettingsRow>
|
|
||||||
{/* @endif */}
|
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
{walletEncrypted && storedPassword && (
|
||||||
<SettingsRow title={__('Experimental settings')} useVerticalSeparator>
|
<FormField
|
||||||
{/* Disabling below until we get downloads to work with shared subscriptions code */}
|
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
|
<FormField
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="auto_download"
|
name="auto_download"
|
||||||
|
|
@ -349,49 +351,50 @@ export default function SettingSystem(props: Props) {
|
||||||
/>
|
/>
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
<fieldset-section>
|
<fieldset-section>
|
||||||
<FormField
|
<FormField
|
||||||
name="max_connections"
|
name="max_connections"
|
||||||
type="select"
|
type="select"
|
||||||
label={__('Max Connections')}
|
label={__('Max Connections')}
|
||||||
helper={__(
|
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.'
|
'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}
|
min={1}
|
||||||
max={100}
|
max={100}
|
||||||
onChange={(e) => setDaemonSetting('max_connections_per_download', e.target.value)}
|
onChange={(e) => setDaemonSetting('max_connections_per_download', e.target.value)}
|
||||||
value={daemonSettings.max_connections_per_download}
|
value={daemonSettings.max_connections_per_download}
|
||||||
>
|
>
|
||||||
{[1, 2, 4, 6, 10, 20].map((connectionOption) => (
|
{[1, 2, 4, 6, 10, 20].map((connectionOption) => (
|
||||||
<option key={connectionOption} value={connectionOption}>
|
<option key={connectionOption} value={connectionOption}>
|
||||||
{connectionOption}
|
{connectionOption}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</FormField>
|
</FormField>
|
||||||
</fieldset-section>
|
</fieldset-section>
|
||||||
|
|
||||||
<SettingWalletServer />
|
<SettingWalletServer />
|
||||||
<SettingCommentsServer />
|
<SettingCommentsServer />
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
{/* @endif */}
|
{/* @endif */}
|
||||||
|
|
||||||
<SettingsRow
|
<SettingsRow
|
||||||
title={__('Clear application cache')}
|
title={__('Clear application cache')}
|
||||||
subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}
|
subtitle={__('This might fix issues that you are having. Your wallet will not be affected.')}
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
button="secondary"
|
button="secondary"
|
||||||
icon={ALERT}
|
icon={ALERT}
|
||||||
label={clearingCache ? __('Clearing') : __('Clear Cache')}
|
label={clearingCache ? __('Clearing') : __('Clear Cache')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setClearingCache(true);
|
setClearingCache(true);
|
||||||
clearCache();
|
clearCache();
|
||||||
}}
|
}}
|
||||||
disabled={clearingCache}
|
disabled={clearingCache}
|
||||||
/>
|
/>
|
||||||
</SettingsRow>
|
</SettingsRow>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue