finish issue-1922

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(

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<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')}
                   />
+
+                  <h3>{__('From: ')}</h3>
+                  <div className="time-section">
                     <FormField
+                      className="select-hours"
                       type="select"
                       name="automatic_dark_mode_range"
-                    // onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
-                    // checked={automaticDarkModeEnabled}
                       disabled={!automaticDarkModeEnabled}
-                    label={__('from:')}
+                      onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
+                      value={darkModeTimes.from.hour}
+                      label={__('Hours:')}
                     >
-                    {['18:00', '19:00', '20:00', '21:00'].map(time => (
+                      {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"
-                    // onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
-                    // checked={automaticDarkModeEnabled}
                       disabled={!automaticDarkModeEnabled}
-                    label={__('To:')}
+                      label={__('Hours:')}
+                      onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
+                      value={darkModeTimes.to.hour}
                     >
-                    {['5:00', '6:00', '7:00', '8:00'].map(time => (
+                      {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>

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());
+  };
+}

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.formattedTime, 'HH:mm');
-
+  const endNightMoment = moment(to.formattedTime, 'HH:mm');
-  const startNightMoment = moment(from, 'HH:mm');
-  const endNightMoment = moment(to, 'HH:mm');
-
   const isNight = !(momentNow.isAfter(endNightMoment) && momentNow.isBefore(startNightMoment));
 
   return Object.assign({}, state, {

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';

src/ui/scss/component/_settings.scss

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