fix: fix time alignment in controller

packages/griffith/src/components/Controller.styles.ts

@@ -73,12 +73,12 @@ export default StyleSheet.create({
   },
 
   time: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: '0 0.5em',
     width: '100px',
-    whiteSpace: 'nowrap',
-    textAlign: 'center',
     fontSize: '0.875em',
-    lineHeight: 2.5,
     color: 'rgba(255, 255, 255, 0.9)',
   },
 

packages/griffith/src/components/Controller.tsx

@@ -340,7 +340,7 @@ class Controller extends Component<ControllerProps, State> {
             {hiddenTimeline && <div className={css(styles.timelineHolder)} />}
             {!hiddenTime && (
               <CombinedTimeItem
-                isFullScreen={isFullScreen}
+                isFullScreen={isFullScreen!}
                 currentTime={displayedCurrentTime}
                 duration={duration}
               />

packages/griffith/src/components/Player.tsx

@@ -22,7 +22,6 @@ import ObjectFitContext, {ObjectFit} from '../contexts/ObjectFitContext'
 import PositionProvider from '../contexts/PositionProvider'
 import ObjectFitProvider from '../contexts/ObjectFitProvider'
 import LocaleProvider from '../contexts/LocaleProvider'
-import Time from './Time'
 import Icon from './Icon'
 import * as icons from './icons/display/index'
 import Loader from './Loader'
@@ -31,6 +30,7 @@ import Controller, {ToggleType} from './Controller'
 import VolumeItem from './items/VolumeItem'
 import MinimalTimeline from './MinimalTimeline'
 import getBufferedTime from '../utils/getBufferedTime'
+import formatDuration from '../utils/formatDuration'
 import storage from '../utils/storage'
 import Pip from '../utils/pip'
 
@@ -629,7 +629,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
                 isMobile && styles.coverTimeMobile
               )}
             >
-              <Time value={duration} />
+              {formatDuration(duration)}
             </div>
           )}
           {/* 只有在第一次未播放时展示播放按钮，播放结束全部展示重播按钮 */}

packages/griffith/src/components/items/CombinedTimeItem.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import {css} from 'aphrodite/no-important'
+import formatDuration from '../../utils/formatDuration'
 import styles from '../Controller.styles'
-import Time from '../Time'
 
-const CombinedTimeItem = ({isFullScreen, currentTime, duration}: any) => (
+const CombinedTimeItem: React.FC<{
+  isFullScreen: boolean
+  currentTime: number
+  duration: number
+}> = ({isFullScreen, currentTime, duration}) => (
   <div className={css(styles.time, isFullScreen && styles.fullScreenedTime)}>
-    <div>
-      <Time value={currentTime} />
-      {' / '}
-      <Time value={duration} />
-    </div>
+    {`${formatDuration(currentTime)} / ${formatDuration(duration)}`}
   </div>
 )
 

packages/griffith/src/components/items/__tests__/__snapshots__/CombinedTimeItem.spec.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`CombinedTimeItem get CombinedTimeItem component 1`] = `
 <div>
-  <div class="time_kviad4-o_O-fullScreenedTime_1xxtrer">
-    <div><span>00:06</span> / <span>03:02</span></div>
-  </div>
+  <div class="time_1f7ddn0-o_O-fullScreenedTime_1xxtrer">00:06 / 03:02</div>
 </div>
 
 `;

packages/griffith/src/utils/__tests__/formatDuration.spec.ts

@@ -0,0 +1,31 @@
+import formatDuration from '../formatDuration'
+
+describe('format time', () => {
+  it('undefined', () => {
+    expect(formatDuration(undefined as never)).toBe('')
+  })
+
+  it('infinity', () => {
+    expect(formatDuration(Infinity)).toBe('')
+  })
+
+  it('zero', () => {
+    expect(formatDuration(0)).toBe('00:00')
+  })
+
+  it('x秒', () => {
+    expect(formatDuration(1.521073)).toBe('00:01')
+  })
+
+  it('x十秒', () => {
+    expect(formatDuration(35.733682147165254)).toBe('00:35')
+  })
+
+  it('x分钟', () => {
+    expect(formatDuration(107.755624)).toBe('01:47')
+  })
+
+  it('十x分钟', () => {
+    expect(formatDuration(707.755624)).toBe('11:47')
+  })
+})

packages/griffith/src/utils/formatTime.ts → packages/griffith/src/utils/formatDuration.ts

@@ -1,13 +1,13 @@
 // https://github.com/zloirock/core-js/issues/280
-function pad(number: any) {
+function pad(number: number) {
   let result = String(number)
   if (result.length < 2) {
     result = '0' + result
   }
   return result
 }
 
-export default function formatTime(time: any) {
+export default function formatDuration(time: number) {
   if (!Number.isFinite(time)) return ''
 
   time = Math.floor(time)