Merge branch 'main' into i18n

components/Navbar.tsx

@@ -24,7 +24,10 @@ const Navbar = () => {
   const [searchOpen, setSearchOpen] = useState(false)
   const openSearchBox = () => setSearchOpen(true)
 
-  useHotkeys(`${os === 'mac' ? 'cmd' : 'ctrl'}+k`, openSearchBox)
+  useHotkeys(`${os === 'mac' ? 'cmd' : 'ctrl'}+k`, e => {
+    openSearchBox()
+    e.preventDefault()
+  })
 
   useEffect(() => {
     const storedToken = () => {

components/previews/AudioPreview.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'next-i18next'
 import DownloadButtonGroup from '../DownloadBtnGtoup'
 import { DownloadBtnContainer, PreviewContainer } from './Containers'
 import { LoadingIcon } from '../Loading'
+import { formatModifiedDateTime } from '../../utils/fileDetails'
 
 enum PlayerState {
   Loading,
@@ -39,11 +40,7 @@ const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
           <div className="flex w-full flex-col space-y-2">
             <div>{file.name}</div>
             <div className="pb-4 text-sm text-gray-500">
-              {t('Last modified:') + ' '}
+              {t('Last modified:') + ' ' + formatModifiedDateTime(file.lastModifiedDateTime)}
-              {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
-                dateStyle: 'short',
-                timeStyle: 'short',
-              })}
             </div>
 
             <ReactAudioPlayer

config/site.config.js

@@ -57,4 +57,9 @@ module.exports = {
       link: 'https://t.me/realSpencerWoo',
     },
   ],
+
+  // This is a day.js-style datetime format string to format datetimes in the app. Ref to
+  // https://day.js.org/docs/en/display/format for detailed specification. The default value is ISO 8601 full datetime
+  // without timezone and replacing T with space.
+  datetimeFormat: 'YYYY-MM-DD HH:mm:ss',
 }

package.json

@@ -22,6 +22,7 @@
     "axios": "^0.25.0",
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.10.7",
     "emoji-regex": "^10.0.0",
     "flv.js": "^1.6.2",
     "ioredis": "^4.28.2",

pnpm-lock.yaml

@@ -22,6 +22,7 @@ specifiers:
   axios: ^0.25.0
   cors: ^2.8.5
   crypto-js: ^4.1.1
+  dayjs: ^1.10.7
   emoji-regex: ^10.0.0
   eslint: 8.8.0
   eslint-config-next: 12.0.10
@@ -70,6 +71,7 @@ dependencies:
   axios: 0.25.0
   cors: 2.8.5
   crypto-js: 4.1.1
+  dayjs: 1.10.7
   emoji-regex: 10.0.0
   flv.js: 1.6.2
   ioredis: 4.28.3
@@ -1135,6 +1137,9 @@ packages:
   /de-indent/1.0.2:
     resolution: {integrity: sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=}
     dev: true
+  /dayjs/1.10.7:
+    resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
+    dev: false
 
   /debounce-promise/3.1.2:
     resolution: {integrity: sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg==}

utils/fileDetails.ts

@@ -1,3 +1,7 @@
+import dayjs from 'dayjs'
+
+import siteConfig from '../config/site.config'
+
 /**
  * Convert raw bits file/folder size into a human readable string
  *
@@ -20,12 +24,5 @@ export const humanFileSize = (size: number) => {
  * @returns Human readable form of the file or folder last modified date
  */
 export const formatModifiedDateTime = (lastModifedDateTime: string) => {
-  return new Date(lastModifedDateTime).toLocaleString('en-US', {
+  return dayjs(lastModifedDateTime).format(siteConfig.datetimeFormat)
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  })
 }