LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

finish issue-1922

Browse source
This commit is contained in:
Oscar Dominguez 2019-08-18 13:54:55 -03:00 committed by Sean Yesmunt
parent 1d0ac2fec8
commit a52d7df06f
6 changed files with 142 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/ui/page/settings/index.js
View file

@ -1,7 +1,13 @@
import { connect } from 'react-redux';
import * as settings from 'constants/settings';
import { doClearCache, doNotifyEncryptWallet, doNotifyDecryptWallet } from 'redux/actions/app';
import { doSetDaemonSetting, doSetClientSetting, doGetThemes, doChangeLanguage } from 'redux/actions/settings';
import {
doSetDaemonSetting,
doSetClientSetting,
doGetThemes,
doChangeLanguage,
doSetDarkTime,
} from 'redux/actions/settings';
import { doSetPlayingUri } from 'redux/actions/content';
import {
makeSelectClientSetting,
@ -30,6 +36,7 @@ const select = state => ({
userBlockedChannelsCount: selectBlockedChannelsCount(state),
hideBalance: makeSelectClientSetting(settings.HIDE_BALANCE)(state),
floatingPlayer: makeSelectClientSetting(settings.FLOATING_PLAYER)(state),
darkModeTimes: makeSelectClientSetting(settings.DARK_MODE_TIMES)(state),
});
const perform = dispatch => ({
@ -42,6 +49,7 @@ const perform = dispatch => ({
decryptWallet: () => dispatch(doNotifyDecryptWallet()),
updateWalletStatus: () => dispatch(doWalletStatus()),
clearPlayingUri: () => dispatch(doSetPlayingUri(null)),
setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
});
export default connect(

122
src/ui/page/settings/view.jsx
View file

@ -52,6 +52,11 @@ type Props = {
hideBalance: boolean,
floatingPlayer: boolean,
clearPlayingUri: () => void,
darkModeTimes: {
from: { hour: string, min: string, formattedTime: string },
to: { hour: string, min: string, formattedTime: string },
},
setDarkTime: (string, {}) => void,
};
type State = {
@ -74,6 +79,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
(this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
(this: any).onLanguageChange = this.onLanguageChange.bind(this);
(this: any).clearCache = this.clearCache.bind(this);
(this: any).onChangeTime = this.onChangeTime.bind(this);
}
componentDidMount() {
@ -130,6 +136,20 @@ class SettingsPage extends React.PureComponent<Props, State> {
}
}
onChangeTime(event: SyntheticInputEvent<*>, options: Object) {
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);
}
@ -169,6 +189,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
userBlockedChannelsCount,
floatingPlayer,
clearPlayingUri,
darkModeTimes,
} = this.props;
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
@ -177,6 +198,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
const disableMaxKeyFee = !(daemonSettings && daemonSettings.max_key_fee);
const connectionOptions = [1, 2, 4, 6, 10, 20];
const startHours = ['18', '19', '20', '21'];
const endHours = ['5', '6', '7', '8'];
const enabledMinutes = ['00', '15', '30', '45'];
return (
<Page>
@ -420,36 +444,76 @@ class SettingsPage extends React.PureComponent<Props, State> {
name="automatic_dark_mode"
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
checked={automaticDarkModeEnabled}
label={__('Automatic dark mode (9pm to 8am)')}
label={__('Automatic dark mode')}
/>
<FormField
type="select"
name="automatic_dark_mode_range"
// onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
// checked={automaticDarkModeEnabled}
disabled={!automaticDarkModeEnabled}
label={__('from:')}
>
{['18:00', '19:00', '20:00', '21:00'].map(time => (
<option key={time} value={time}>
{time}
</option>
))}
</FormField>
<FormField
type="select"
name="automatic_dark_mode_range"
// onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
// checked={automaticDarkModeEnabled}
disabled={!automaticDarkModeEnabled}
label={__('To:')}
>
{['5:00', '6:00', '7:00', '8:00'].map(time => (
<option key={time} value={time}>
{time}
</option>
))}
</FormField>
<h3>{__('From: ')}</h3>
<div className="time-section">
<FormField
className="select-hours"
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
value={darkModeTimes.from.hour}
label={__('Hours:')}
>
{startHours.map(time => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
))}
</FormField>
<FormField
className="select-hours"
label={__('minutes')}
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'min' })}
value={darkModeTimes.from.min}
>
{enabledMinutes.map(time => (
<option key={time} value={time}>
{time}
</option>
))}
</FormField>
</div>
<h3>{__('To: ')}</h3>
<div className="time-section">
<FormField
className="select-hours"
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
label={__('Hours:')}
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>
<FormField
className="select-hours"
label={__('minutes')}
type="select"
name="automatic_dark_mode_range"
disabled={!automaticDarkModeEnabled}
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'min' })}
value={darkModeTimes.to.min}
>
{enabledMinutes.map(time => (
<option key={time} value={time}>
{time}
</option>
))}
</FormField>
</div>
</fieldset-section>
</Form>
</section>

24
src/ui/redux/actions/settings.js
View file

@ -6,7 +6,7 @@ import { Lbry, ACTIONS, SETTINGS } from 'lbry-redux';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import analytics from 'analytics';
const UPDATE_IS_NIGHT_INTERVAL = 10 * 60 * 1000;
const UPDATE_IS_NIGHT_INTERVAL = 5 * 60 * 1000;
export function doFetchDaemonSettings() {
return dispatch => {
@ -138,3 +138,25 @@ export function doChangeLanguage(language) {
i18n.setLocale(language);
};
}
export function doSetDarkTime(value, options) {
const { fromTo, time } = options;
return (dispatch, getState) => {
const state = getState();
const { darkModeTimes } = state.settings.clientSettings;
const { hour, min } = darkModeTimes[fromTo];
const newHour = time === 'hour' ? value : hour;
const newMin = time === 'min' ? value : min;
const modifiedTimes = {
[fromTo]: {
hour: newHour,
min: newMin,
formattedTime: newHour + ':' + newMin,
},
};
const mergedTimes = { ...darkModeTimes, ...modifiedTimes };
dispatch(doSetClientSetting(SETTINGS.DARK_MODE_TIMES, mergedTimes));
dispatch(doUpdateIsNight());
};
}

13
src/ui/redux/reducers/settings.js
View file

@ -33,7 +33,10 @@ const defaultState = {
[SETTINGS.HIDE_BALANCE]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_BALANCE, false)),
[SETTINGS.HIDE_SPLASH_ANIMATION]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_SPLASH_ANIMATION, false)),
[SETTINGS.FLOATING_PLAYER]: Boolean(getLocalStorageSetting(SETTINGS.FLOATING_PLAYER, true)),
[SETTINGS.DARK_MODE_TIMES]: getLocalStorageSetting(SETTINGS.DARK_MODE_TIMES, { from: '21:00', to: '8:00' }),
[SETTINGS.DARK_MODE_TIMES]: getLocalStorageSetting(SETTINGS.DARK_MODE_TIMES, {
from: { hour: '21', min: '00', formattedTime: '21:00' },
to: { hour: '8', min: '00', formattedTime: '8:00' },
}),
},
isNight: false,
languages: { en: 'English', pl: 'Polish', id: 'Bahasa Indonesia' }, // temporarily hard code these so we can advance i18n testing
@ -62,12 +65,10 @@ reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => {
};
reducers[ACTIONS.UPDATE_IS_NIGHT] = state => {
const { from, to } = state.clientSettings.darkModeTimes;
const momentNow = moment();
const { from, to } = state.settings.clientSettings.darkModeTimes;
const startNightMoment = moment(from, 'HH:mm');
const endNightMoment = moment(to, 'HH:mm');
const startNightMoment = moment(from.formattedTime, 'HH:mm');
const endNightMoment = moment(to.formattedTime, 'HH:mm');
const isNight = !(momentNow.isAfter(endNightMoment) && momentNow.isBefore(startNightMoment));
return Object.assign({}, state, {

1
src/ui/scss/all.scss
View file

@ -34,6 +34,7 @@
@import 'component/pagination';
@import 'component/placeholder';
@import 'component/search';
@import 'component/settings';
@import 'component/snack-bar';
@import 'component/spinner';
@import 'component/splash';

9
src/ui/scss/component/_settings.scss Normal file
View file

@ -0,0 +1,9 @@
.select-hours {
display: block;
float: left;
width: auto;
}
.time-section {
display: flex;
}