diff --git a/src/ui/page/settings/index.js b/src/ui/page/settings/index.js index 56a7c7a43..892448e80 100644 --- a/src/ui/page/settings/index.js +++ b/src/ui/page/settings/index.js @@ -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( diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx index c6dd6996e..d5f452eb0 100644 --- a/src/ui/page/settings/view.jsx +++ b/src/ui/page/settings/view.jsx @@ -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 { (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 { } } + 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 { userBlockedChannelsCount, floatingPlayer, clearPlayingUri, + darkModeTimes, } = this.props; const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0; @@ -177,6 +198,9 @@ class SettingsPage extends React.PureComponent { 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 ( @@ -420,36 +444,76 @@ class SettingsPage extends React.PureComponent { name="automatic_dark_mode" onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)} checked={automaticDarkModeEnabled} - label={__('Automatic dark mode (9pm to 8am)')} + label={__('Automatic dark mode')} /> - this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)} - // checked={automaticDarkModeEnabled} - disabled={!automaticDarkModeEnabled} - label={__('from:')} - > - {['18:00', '19:00', '20:00', '21:00'].map(time => ( - - ))} - - this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)} - // checked={automaticDarkModeEnabled} - disabled={!automaticDarkModeEnabled} - label={__('To:')} - > - {['5:00', '6:00', '7:00', '8:00'].map(time => ( - - ))} - + +

{__('From: ')}

+
+ this.onChangeTime(value, { fromTo: 'from', time: 'hour' })} + value={darkModeTimes.from.hour} + label={__('Hours:')} + > + {startHours.map(time => ( + + ))} + + this.onChangeTime(value, { fromTo: 'from', time: 'min' })} + value={darkModeTimes.from.min} + > + {enabledMinutes.map(time => ( + + ))} + +
+ +

{__('To: ')}

+
+ this.onChangeTime(value, { fromTo: 'to', time: 'hour' })} + value={darkModeTimes.to.hour} + > + {endHours.map(time => ( + + ))} + + this.onChangeTime(value, { fromTo: 'to', time: 'min' })} + value={darkModeTimes.to.min} + > + {enabledMinutes.map(time => ( + + ))} + +
diff --git a/src/ui/redux/actions/settings.js b/src/ui/redux/actions/settings.js index f6339e054..a5727f3d4 100644 --- a/src/ui/redux/actions/settings.js +++ b/src/ui/redux/actions/settings.js @@ -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()); + }; +} diff --git a/src/ui/redux/reducers/settings.js b/src/ui/redux/reducers/settings.js index 63994037a..5ca194b59 100644 --- a/src/ui/redux/reducers/settings.js +++ b/src/ui/redux/reducers/settings.js @@ -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, { diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss index 87dda2301..fdac30cad 100644 --- a/src/ui/scss/all.scss +++ b/src/ui/scss/all.scss @@ -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'; diff --git a/src/ui/scss/component/_settings.scss b/src/ui/scss/component/_settings.scss new file mode 100644 index 000000000..913d8f211 --- /dev/null +++ b/src/ui/scss/component/_settings.scss @@ -0,0 +1,9 @@ +.select-hours { + display: block; + float: left; + width: auto; +} + +.time-section { + display: flex; +}