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

321 lines
9.8 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import { FormField, FormRow } from "component/form.js";
import SubHeader from "component/subHeader";
import lbry from "lbry.js";
import Link from "component/link";
const { remote } = require("electron");
2017-06-08 06:42:19 +02:00
class SettingsPage extends React.PureComponent {
2017-05-17 10:10:25 +02:00
constructor(props) {
super(props);
2017-06-06 23:19:12 +02:00
const daemonSettings = this.props.daemonSettings;
2017-05-17 10:10:25 +02:00
this.state = {
2017-05-17 10:10:25 +02:00
isMaxUpload: daemonSettings && daemonSettings.max_upload != 0,
isMaxDownload: daemonSettings && daemonSettings.max_download != 0,
2017-06-06 23:19:12 +02:00
showNsfw: lbry.getClientSetting("showNsfw"),
showUnavailable: lbry.getClientSetting("showUnavailable"),
language: lbry.getClientSetting("language"),
clearingCache: false,
2017-06-06 23:19:12 +02:00
};
2017-05-17 10:10:25 +02:00
}
clearCache() {
this.setState({
clearingCache: true,
});
const success = () => {
this.setState({ clearingCache: false });
window.location.href = `${remote.app.getAppPath()}/dist/index.html`;
};
const clear = () => this.props.clearCache().then(success.bind(this));
setTimeout(clear, 1000, { once: true });
}
2017-05-17 10:10:25 +02:00
setDaemonSetting(name, value) {
2017-06-06 23:19:12 +02:00
this.props.setDaemonSetting(name, value);
2017-05-17 10:10:25 +02:00
}
setClientSetting(name, value) {
2017-06-06 23:19:12 +02:00
lbry.setClientSetting(name, value);
this._onSettingSaveSuccess();
2017-05-17 10:10:25 +02:00
}
onRunOnStartChange(event) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("run_on_startup", event.target.checked);
2017-05-17 10:10:25 +02:00
}
onShareDataChange(event) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("share_usage_data", event.target.checked);
2017-05-17 10:10:25 +02:00
}
onDownloadDirChange(event) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("download_directory", event.target.value);
2017-05-17 10:10:25 +02:00
}
onMaxUploadPrefChange(isLimited) {
2016-04-10 02:00:56 +02:00
if (!isLimited) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("max_upload", 0.0);
2016-04-10 02:00:56 +02:00
}
this.setState({
2017-06-06 23:19:12 +02:00
isMaxUpload: isLimited,
2016-04-10 02:00:56 +02:00
});
2017-05-17 10:10:25 +02:00
}
onMaxUploadFieldChange(event) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("max_upload", Number(event.target.value));
2017-05-17 10:10:25 +02:00
}
onMaxDownloadPrefChange(isLimited) {
2016-04-10 02:00:56 +02:00
if (!isLimited) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("max_download", 0.0);
2016-04-10 02:00:56 +02:00
}
this.setState({
2017-06-06 23:19:12 +02:00
isMaxDownload: isLimited,
2016-04-10 02:00:56 +02:00
});
2017-05-17 10:10:25 +02:00
}
onMaxDownloadFieldChange(event) {
2017-06-06 23:19:12 +02:00
this.setDaemonSetting("max_download", Number(event.target.value));
2017-05-17 10:10:25 +02:00
}
2017-05-17 10:10:25 +02:00
onShowNsfwChange(event) {
2017-06-06 23:19:12 +02:00
lbry.setClientSetting("showNsfw", event.target.checked);
2017-05-17 10:10:25 +02:00
}
// onLanguageChange(language) {
// lbry.setClientSetting('language', language);
// i18n.setLocale(language);
// this.setState({language: language})
// }
2017-06-06 23:19:12 +02:00
onShowUnavailableChange(event) {}
2017-04-12 16:55:19 +02:00
2017-05-17 10:10:25 +02:00
render() {
2017-06-06 23:19:12 +02:00
const { daemonSettings } = this.props;
if (!daemonSettings) {
2017-06-06 23:19:12 +02:00
return (
<main className="main--single-column">
<span className="empty">{__("Failed to load settings.")}</span>
</main>
);
2016-04-10 02:00:56 +02:00
}
2017-06-06 23:19:12 +02:00
/*
2017-04-12 22:23:20 +02:00
<section className="card">
<div className="card__content">
<h3>Run on Startup</h3>
</div>
<div className="card__content">
<FormRow type="checkbox"
onChange={this.onRunOnStartChange}
defaultChecked={daemonSettings.run_on_startup}
2017-04-12 22:23:20 +02:00
label="Run LBRY automatically when I start my computer" />
</div>
</section>
*/
2016-04-10 02:00:56 +02:00
return (
<main className="main--single-column">
2017-05-05 07:48:15 +02:00
<SubHeader />
2016-08-08 00:45:26 +02:00
<section className="card">
2017-04-10 14:32:40 +02:00
<div className="card__content">
<h3>{__("Download Directory")}</h3>
2017-04-10 14:32:40 +02:00
</div>
<div className="card__content">
2017-06-06 23:19:12 +02:00
<FormRow
type="directory"
name="download_directory"
defaultValue={daemonSettings.download_directory}
helper={__("LBRY downloads will be saved here.")}
onChange={this.onDownloadDirChange.bind(this)}
/>
2017-04-10 14:32:40 +02:00
</div>
2016-04-10 02:00:56 +02:00
</section>
2016-08-08 00:45:26 +02:00
<section className="card">
2017-04-10 14:32:40 +02:00
<div className="card__content">
2017-06-06 23:19:12 +02:00
<h3>{__("Bandwidth Limits")}</h3>
2017-04-10 14:32:40 +02:00
</div>
<div className="card__content">
2017-06-06 23:19:12 +02:00
<div className="form-row__label-row">
<div className="form-field__label">{__("Max Upload")}</div>
</div>
<FormRow
type="radio"
name="max_upload_pref"
onChange={() => {
this.onMaxUploadPrefChange(false);
}}
defaultChecked={!this.state.isMaxUpload}
label={__("Unlimited")}
/>
2017-04-12 16:55:19 +02:00
<div className="form-row">
2017-06-06 23:19:12 +02:00
<FormField
type="radio"
name="max_upload_pref"
onChange={() => {
this.onMaxUploadPrefChange(true);
}}
defaultChecked={this.state.isMaxUpload}
label={
this.state.isMaxUpload ? __("Up to") : __("Choose limit...")
}
/>
{this.state.isMaxUpload
? <FormField
type="number"
min="0"
step=".5"
defaultValue={daemonSettings.max_upload}
placeholder="10"
className="form-field__input--inline"
onChange={this.onMaxUploadFieldChange.bind(this)}
2017-04-12 16:55:19 +02:00
/>
2017-06-06 23:19:12 +02:00
: ""}
{this.state.isMaxUpload
? <span className="form-field__label">MB/s</span>
: ""}
2017-04-12 16:55:19 +02:00
</div>
2016-08-08 05:31:21 +02:00
</div>
2017-04-10 14:32:40 +02:00
<div className="card__content">
2017-06-06 23:19:12 +02:00
<div className="form-row__label-row">
<div className="form-field__label">{__("Max Download")}</div>
</div>
<FormRow
label={__("Unlimited")}
type="radio"
name="max_download_pref"
onChange={() => {
this.onMaxDownloadPrefChange(false);
}}
defaultChecked={!this.state.isMaxDownload}
/>
2017-04-12 16:55:19 +02:00
<div className="form-row">
2017-06-06 23:19:12 +02:00
<FormField
type="radio"
name="max_download_pref"
onChange={() => {
this.onMaxDownloadPrefChange(true);
}}
defaultChecked={this.state.isMaxDownload}
label={
this.state.isMaxDownload ? __("Up to") : __("Choose limit...")
}
/>
{this.state.isMaxDownload
? <FormField
type="number"
min="0"
step=".5"
defaultValue={daemonSettings.max_download}
placeholder="10"
className="form-field__input--inline"
onChange={this.onMaxDownloadFieldChange.bind(this)}
/>
: ""}
{this.state.isMaxDownload
? <span className="form-field__label">MB/s</span>
: ""}
2017-04-12 16:55:19 +02:00
</div>
2016-08-08 05:31:21 +02:00
</div>
2016-04-10 02:00:56 +02:00
</section>
2016-08-22 21:19:04 +02:00
<section className="card">
2017-04-10 14:32:40 +02:00
<div className="card__content">
<h3>{__("Content")}</h3>
</div>
2017-04-10 20:12:07 +02:00
<div className="card__content">
2017-06-06 23:19:12 +02:00
<FormRow
type="checkbox"
onChange={this.onShowUnavailableChange.bind(this)}
defaultChecked={this.state.showUnavailable}
label={__("Show unavailable content in search results")}
/>
</div>
2017-04-10 14:32:40 +02:00
<div className="card__content">
2017-06-06 23:19:12 +02:00
<FormRow
label={__("Show NSFW content")}
type="checkbox"
onChange={this.onShowNsfwChange.bind(this)}
defaultChecked={this.state.showNsfw}
helper={__(
"NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction. "
)}
/>
</div>
</section>
2017-06-06 06:21:55 +02:00
<section className="card">
<div className="card__content">
<h3>{__("Language")}</h3>
</div>
<div className="card__content">
<div className="form-row">
2017-06-08 02:56:52 +02:00
<FormField
type="radio"
name="language"
label={__("English")}
onChange={() => {
this.onLanguageChange("en");
}}
defaultChecked={this.state.language == "en"}
/>
</div>
<div className="form-row">
2017-06-08 02:56:52 +02:00
<FormField
type="radio"
name="language"
label="Serbian"
onChange={() => {
this.onLanguageChange("rs");
}}
defaultChecked={this.state.language == "rs"}
/>
</div>
</div>
2017-06-09 23:23:08 +02:00
</section>
2016-08-08 00:45:26 +02:00
<section className="card">
2017-04-10 14:32:40 +02:00
<div className="card__content">
<h3>{__("Share Diagnostic Data")}</h3>
2017-04-10 14:32:40 +02:00
</div>
2017-04-10 20:12:07 +02:00
<div className="card__content">
2017-06-06 23:19:12 +02:00
<FormRow
type="checkbox"
onChange={this.onShareDataChange.bind(this)}
defaultChecked={daemonSettings.share_usage_data}
label={__(
"Help make LBRY better by contributing diagnostic data about my usage"
)}
/>
2017-04-10 14:32:40 +02:00
</div>
2016-04-10 02:00:56 +02:00
</section>
<section className="card">
<div className="card__content">
<h3>{__("Application Cache")}</h3>
</div>
<div className="card__content">
<p>
<Link
label={
this.state.clearingCache
? __("Clearing")
: __("Clear the cache")
}
icon="icon-trash"
button="alt"
onClick={this.clearCache.bind(this)}
disabled={this.state.clearingCache}
/>
</p>
</div>
</section>
2017-06-06 23:19:12 +02:00
</main>
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;