diff --git a/src/ui/constants/settings.js b/src/ui/constants/settings.js index 419550f10..b01839277 100644 --- a/src/ui/constants/settings.js +++ b/src/ui/constants/settings.js @@ -20,3 +20,4 @@ export const SUPPORT_OPTION = 'supportOption'; export const HIDE_BALANCE = 'hideBalance'; export const HIDE_SPLASH_ANIMATION = 'hideSplashAnimation'; export const FLOATING_PLAYER = 'floatingPlayer'; +export const DARK_MODE_TIMES = 'darkModeTimes'; diff --git a/src/ui/page/settings/view.jsx b/src/ui/page/settings/view.jsx index 06feac772..c6dd6996e 100644 --- a/src/ui/page/settings/view.jsx +++ b/src/ui/page/settings/view.jsx @@ -422,6 +422,34 @@ class SettingsPage extends React.PureComponent { checked={automaticDarkModeEnabled} label={__('Automatic dark mode (9pm to 8am)')} /> + 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 => ( + + ))} + diff --git a/src/ui/redux/actions/settings.js b/src/ui/redux/actions/settings.js index 94d0ef630..f6339e054 100644 --- a/src/ui/redux/actions/settings.js +++ b/src/ui/redux/actions/settings.js @@ -4,7 +4,6 @@ import http from 'http'; // @endif import { Lbry, ACTIONS, SETTINGS } from 'lbry-redux'; import { makeSelectClientSetting } from 'redux/selectors/settings'; -import moment from 'moment'; import analytics from 'analytics'; const UPDATE_IS_NIGHT_INTERVAL = 10 * 60 * 1000; @@ -60,16 +59,8 @@ export function doGetThemes() { } export function doUpdateIsNight() { - const momentNow = moment(); return { type: ACTIONS.UPDATE_IS_NIGHT, - data: { - isNight: (() => { - const startNightMoment = moment('21:00', 'HH:mm'); - const endNightMoment = moment('8:00', 'HH:mm'); - return !(momentNow.isAfter(endNightMoment) && momentNow.isBefore(startNightMoment)); - })(), - }, }; } diff --git a/src/ui/redux/reducers/settings.js b/src/ui/redux/reducers/settings.js index 61fe0c576..63994037a 100644 --- a/src/ui/redux/reducers/settings.js +++ b/src/ui/redux/reducers/settings.js @@ -1,6 +1,7 @@ import * as ACTIONS from 'constants/action_types'; import LANGUAGES from 'constants/languages'; import * as SETTINGS from 'constants/settings'; +import moment from 'moment'; function getLocalStorageSetting(setting, fallback) { const localStorageVal = localStorage.getItem(`setting_${setting}`); @@ -32,6 +33,7 @@ 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' }), }, isNight: false, languages: { en: 'English', pl: 'Polish', id: 'Bahasa Indonesia' }, // temporarily hard code these so we can advance i18n testing @@ -59,10 +61,19 @@ reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => { }); }; -reducers[ACTIONS.UPDATE_IS_NIGHT] = (state, action) => - Object.assign({}, state, { - isNight: action.data.isNight, +reducers[ACTIONS.UPDATE_IS_NIGHT] = state => { + const momentNow = moment(); + const { from, to } = state.settings.clientSettings.darkModeTimes; + + const startNightMoment = moment(from, 'HH:mm'); + const endNightMoment = moment(to, 'HH:mm'); + + const isNight = !(momentNow.isAfter(endNightMoment) && momentNow.isBefore(startNightMoment)); + + return Object.assign({}, state, { + isNight, }); +}; reducers[ACTIONS.DOWNLOAD_LANGUAGE_SUCCEEDED] = (state, action) => { const languages = Object.assign({}, state.languages);