Add 24-hour clock setting.

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

ui/component/dateTime/view.jsx

@@ -7,6 +7,7 @@ type Props = {
   timeAgo?: boolean,
   formatOptions: {},
   show?: string,
+  clock24h: boolean,
 };
 
 class DateTime extends React.PureComponent<Props> {
@@ -45,20 +46,25 @@ class DateTime extends React.PureComponent<Props> {
   }
 
   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 <span title={moment(date).format('MMMM Do, YYYY hh:mm A')}>{DateTime.getTimeAgoStr(date)}</span>;
+      return <span title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>{DateTime.getTimeAgoStr(date)}</span>;
     }
 
     return (
       <span>
         {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 && '...'}
       </span>
     );

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

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),

ui/page/settings/view.jsx

@@ -57,6 +57,7 @@ type Props = {
   currentTheme: string,
   themes: Array<string>,
   automaticDarkModeEnabled: boolean,
+  clock24h: boolean,
   autoplay: boolean,
   updateWalletStatus: () => void,
   walletEncrypted: boolean,
@@ -125,6 +126,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
     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<Props, State> {
       currentTheme,
       themes,
       automaticDarkModeEnabled,
+      clock24h,
       autoplay,
       walletEncrypted,
       // autoDownload,
@@ -306,6 +312,15 @@ class SettingsPage extends React.PureComponent<Props, State> {
                       </fieldset-group>
                     )}
                   </fieldset-section>
+                  <fieldset-section>
+                    <FormField
+                      type="checkbox"
+                      name="clock24h"
+                      onChange={() => this.onClock24hChange(!clock24h)}
+                      checked={clock24h}
+                      label={__('24-hour clock')}
+                    />
+                  </fieldset-section>
                 </React.Fragment>
               }
             />

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,