feat: display time in seconds

src/components/viewport/Viewport.module.scss

@@ -37,3 +37,8 @@
   line-height: 24px;
   text-align: right;
 }
+
+.frames {
+  margin: 0 8px;
+  color: rgba(255, 255, 255, 0.32);
+}

src/components/viewport/Viewport.tsx

@@ -3,9 +3,10 @@ import styles from './Viewport.module.scss';
 import {PlaybackControls, PlaybackProgress} from '../playback';
 import {View} from './View';
 import {CurrentTime} from '../playback/CurrentTime';
-import {usePlayerState} from '../../hooks';
+import {usePlayer, usePlayerState} from '../../hooks';
 
 export function Viewport() {
+  const player = usePlayer();
   const state = usePlayerState();
   return (
     <div className={styles.root}>
@@ -13,11 +14,28 @@ export function Viewport() {
       <PlaybackProgress />
       <div className={styles.playback}>
         <CurrentTime
-          render={time => <div className={styles.time}>{time}</div>}
+          render={time => (
+            <div className={styles.time}>
+              {formatFrames(player.project.framesToSeconds(time))}
+              <span className={styles.frames}>[{time}]</span>
+            </div>
+          )}
         />
         <PlaybackControls />
-        <div className={styles.duration}>{state.duration}</div>
+        <div className={styles.duration}>
+          <span className={styles.frames}>[{state.duration}]</span>
+          {formatFrames(player.project.framesToSeconds(state.duration))}
+        </div>
       </div>
     </div>
   );
 }
+
+function formatFrames(duration: number) {
+  const minutes = Math.floor(duration / 60) % 60;
+  const seconds = Math.floor(duration % 60);
+
+  return `${minutes.toString().padStart(2, '0')}:${seconds
+    .toString()
+    .padStart(2, '0')}`;
+}