diff --git a/ui/component/dateTime/index.js b/ui/component/dateTime/index.js index b6dcae093..0dacd1609 100644 --- a/ui/component/dateTime/index.js +++ b/ui/component/dateTime/index.js @@ -1,8 +1,10 @@ import { connect } from 'react-redux'; -import { makeSelectDateForUri } from 'lbry-redux'; +import { makeSelectDateForUri, SETTINGS } from 'lbry-redux'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; import DateTime from './view'; const select = (state, props) => ({ date: props.date || makeSelectDateForUri(props.uri)(state), + clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state), }); export default connect(select)(DateTime); diff --git a/ui/component/dateTime/view.jsx b/ui/component/dateTime/view.jsx index b37240f6e..2745db100 100644 --- a/ui/component/dateTime/view.jsx +++ b/ui/component/dateTime/view.jsx @@ -7,6 +7,7 @@ type Props = { timeAgo?: boolean, formatOptions: {}, show?: string, + clock24h: boolean, }; class DateTime extends React.PureComponent { @@ -45,20 +46,25 @@ class DateTime extends React.PureComponent { } render() { - const { date, timeAgo, show } = this.props; + const { date, timeAgo, show, clock24h } = this.props; + + let clockFormat = 'hh:mm A'; + if (clock24h) { + clockFormat = 'HH:mm'; + } if (timeAgo) { if (!date) { return null; } - return {DateTime.getTimeAgoStr(date)}; + return {DateTime.getTimeAgoStr(date)}; } return ( {date && show === DateTime.SHOW_DATE && moment(date).format('MMMM Do, YYYY')} - {date && show === DateTime.SHOW_TIME && moment(date).format('hh:mm A')} + {date && show === DateTime.SHOW_TIME && moment(date).format(clockFormat)} {!date && '...'} ); diff --git a/ui/constants/settings.js b/ui/constants/settings.js index ffb11e242..ca0e48c31 100644 --- a/ui/constants/settings.js +++ b/ui/constants/settings.js @@ -13,6 +13,7 @@ export const INSTANT_PURCHASE_MAX = 'instant_purchase_max'; export const THEME = 'theme'; export const THEMES = 'themes'; export const AUTOMATIC_DARK_MODE_ENABLED = 'automatic_dark_mode_enabled'; +export const CLOCK_24H = 'clock_24h'; export const AUTOPLAY = 'autoplay'; export const OS_NOTIFICATIONS_ENABLED = 'os_notifications_enabled'; export const AUTO_DOWNLOAD = 'auto_download'; diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js index 38668b95a..5718dfa04 100644 --- a/ui/page/settings/index.js +++ b/ui/page/settings/index.js @@ -28,6 +28,7 @@ const select = (state) => ({ currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state), themes: makeSelectClientSetting(SETTINGS.THEMES)(state), automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state), + clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state), autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state), walletEncrypted: selectWalletIsEncrypted(state), autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state), diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx index 3854fae9a..4cb05edcd 100644 --- a/ui/page/settings/view.jsx +++ b/ui/page/settings/view.jsx @@ -57,6 +57,7 @@ type Props = { currentTheme: string, themes: Array, automaticDarkModeEnabled: boolean, + clock24h: boolean, autoplay: boolean, updateWalletStatus: () => void, walletEncrypted: boolean, @@ -125,6 +126,10 @@ class SettingsPage extends React.PureComponent { this.props.setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, value); } + onClock24hChange(value: boolean) { + this.props.setClientSetting(SETTINGS.CLOCK_24H, value); + } + onConfirmForgetPassword() { const { confirmForgetPassword } = this.props; confirmForgetPassword({ @@ -165,6 +170,7 @@ class SettingsPage extends React.PureComponent { currentTheme, themes, automaticDarkModeEnabled, + clock24h, autoplay, walletEncrypted, // autoDownload, @@ -306,6 +312,15 @@ class SettingsPage extends React.PureComponent { )} + + this.onClock24hChange(!clock24h)} + checked={clock24h} + label={__('24-hour clock')} + /> + } /> diff --git a/ui/redux/reducers/settings.js b/ui/redux/reducers/settings.js index da5823b4f..b7d2d7fac 100644 --- a/ui/redux/reducers/settings.js +++ b/ui/redux/reducers/settings.js @@ -46,6 +46,7 @@ const defaultState = { [SETTINGS.HIDE_BALANCE]: false, [SETTINGS.OS_NOTIFICATIONS_ENABLED]: true, [SETTINGS.AUTOMATIC_DARK_MODE_ENABLED]: false, + [SETTINGS.CLOCK_24H]: false, [SETTINGS.TILE_LAYOUT]: true, [SETTINGS.VIDEO_THEATER_MODE]: false, [SETTINGS.VIDEO_PLAYBACK_RATE]: 1,