Add 24-hour clock setting.

This commit is contained in:
Stefan Sundin 2021-04-02 22:26:05 -07:00 committed by Sean Yesmunt
parent f3869ddb78
commit 039264531f
6 changed files with 30 additions and 4 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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>
}
/>

View file

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