170 lines
3.7 KiB
JavaScript
170 lines
3.7 KiB
JavaScript
|
|
const {
|
|
pick,
|
|
defaultTo,
|
|
} = require('ramda');
|
|
|
|
const React = require('react');
|
|
|
|
const r = require('r-dom');
|
|
|
|
const { connect } = require('react-redux');
|
|
const { bindActionCreators } = require('redux');
|
|
|
|
const { preferences: preferencesActions } = require('../../actions');
|
|
|
|
const Button = require('../button');
|
|
const Checkbox = require('../checkbox');
|
|
const NumberInput = require('../number-input');
|
|
|
|
class Preferences extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
open: false,
|
|
};
|
|
}
|
|
|
|
toggle() {
|
|
this.setState({ open: !this.state.open });
|
|
}
|
|
|
|
close() {
|
|
this.setState({ open: false });
|
|
}
|
|
|
|
render() {
|
|
const { open } = this.state;
|
|
const toggle = this.toggle.bind(this);
|
|
|
|
return r.div({
|
|
classSet: {
|
|
panel: true,
|
|
preferences: true,
|
|
open,
|
|
},
|
|
}, open ? [
|
|
r.div([
|
|
r(Button, {
|
|
style: { width: '100%' },
|
|
autoFocus: true,
|
|
onClick: toggle,
|
|
}, 'Close'),
|
|
]),
|
|
|
|
r.hr(),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideDisconnectedClients,
|
|
onChange: () => this.props.actions.toggle('hideDisconnectedClients'),
|
|
}, 'Hide disconnected clients'),
|
|
]),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideDisconnectedModules,
|
|
onChange: () => this.props.actions.toggle('hideDisconnectedModules'),
|
|
}, 'Hide disconnected modules'),
|
|
]),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideDisconnectedSource,
|
|
onChange: () => this.props.actions.toggle('hideDisconnectedSource'),
|
|
}, 'Hide disconnected source'),
|
|
]),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideDisconnectedSinks,
|
|
onChange: () => this.props.actions.toggle('hideDisconnectedSinks'),
|
|
}, 'Hide disconnected sinks'),
|
|
]),
|
|
|
|
r.hr(),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideMonitorSourceEdges,
|
|
onChange: () => this.props.actions.toggle('hideMonitorSourceEdges'),
|
|
}, 'Hide monitor source edges'),
|
|
]),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideMonitors,
|
|
onChange: () => this.props.actions.toggle('hideMonitors'),
|
|
}, 'Hide monitors'),
|
|
]),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hidePulseaudioApps,
|
|
onChange: () => this.props.actions.toggle('hidePulseaudioApps'),
|
|
}, 'Hide pulseaudio applications'),
|
|
]),
|
|
|
|
r.hr(),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.hideVolumeThumbnails,
|
|
onChange: () => this.props.actions.toggle('hideVolumeThumbnails'),
|
|
}, 'Hide volume thumbnails'),
|
|
]),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.lockChannelsTogether,
|
|
onChange: () => this.props.actions.toggle('lockChannelsTogether'),
|
|
}, 'Lock channels together'),
|
|
]),
|
|
|
|
r.div([
|
|
r(NumberInput, {
|
|
type: 'number',
|
|
value: defaultTo(150, Math.round(this.props.preferences.maxVolume * 100)),
|
|
onChange: e => {
|
|
const v = defaultTo(150, Math.max(0, parseInt(e.target.value, 10)));
|
|
this.props.actions.set({ maxVolume: v / 100 });
|
|
},
|
|
}, 'Maximum volume: '),
|
|
]),
|
|
|
|
r.hr(),
|
|
|
|
r.div([
|
|
r(Checkbox, {
|
|
checked: this.props.preferences.showDebugInfo,
|
|
onChange: () => this.props.actions.toggle('showDebugInfo'),
|
|
}, 'Show debug info'),
|
|
]),
|
|
|
|
r.hr(),
|
|
|
|
r.div([
|
|
r(Button, {
|
|
style: { width: '100%' },
|
|
onClick: this.props.actions.resetDefaults,
|
|
}, 'Reset to defaults'),
|
|
]),
|
|
] : [
|
|
r(Button, {
|
|
autoFocus: true,
|
|
onClick: toggle,
|
|
}, 'Preferences'),
|
|
]);
|
|
}
|
|
}
|
|
|
|
module.exports = connect(
|
|
state => pick([ 'preferences' ], state),
|
|
dispatch => ({
|
|
actions: bindActionCreators(preferencesActions, dispatch),
|
|
}),
|
|
null,
|
|
{ withRef: true },
|
|
)(Preferences);
|