feat: make it possible to choose time display format in player (#270)

* feat: make it possible to choose time display format in player

* chore: remove log

packages/player-react/src/controls.tsx

@@ -55,18 +55,22 @@ export function Controls({
   setPlaying,
   currentTime,
   setForcedTime,
+  timeDisplayFormat,
 }: {
   duration: number;
   playing: boolean;
   setPlaying: (playing: boolean) => void;
   currentTime: number;
   setForcedTime: (currentTime: number) => void;
+  timeDisplayFormat: 'MM:SS' | 'MM:SS.m' | 'MM:SS.mm';
 }) {
   return (
     <div className="p-text-white p-p-4 p-flex-col p-space-y-2 p-bg-gradient-to-t p-from-gray-500 p-to-transparent">
       <div className="p-flex p-space-x-3 p-items-center">
         <PlayPause playing={playing} setPlaying={setPlaying} />
-        <span>{getFormattedTime(currentTime, duration)}</span>
+        <span>
+          {getFormattedTime(currentTime, duration, timeDisplayFormat)}
+        </span>
       </div>
       <Timeline
         currentTime={currentTime}

packages/player-react/src/index.tsx

@@ -37,6 +37,7 @@ interface PlayerProps {
   width?: number;
   height?: number;
   quality?: number;
+  timeDisplayFormat?: 'MM:SS' | 'MM:SS.mm' | 'MM:SS.m';
 
   onDurationChange?: (duration: number) => void;
   onTimeUpdate?: (currentTime: number) => void;
@@ -55,6 +56,7 @@ export function Player({
   width = undefined,
   height = undefined,
   quality = undefined,
+  timeDisplayFormat = 'MM:SS',
 
   onDurationChange = () => {},
   onTimeUpdate = () => {},
@@ -79,7 +81,7 @@ export function Player({
    */
   useEffect(() => {
     const diff = Math.abs(currentTime - currentTimeState);
-    if (diff > 0.05) {
+    if (diff > 0.03) {
       setForcedTime(currentTime);
     }
   }, [currentTime]);
@@ -180,6 +182,7 @@ export function Player({
               setPlaying={setPlaying}
               currentTime={currentTimeState}
               setForcedTime={setForcedTime}
+              timeDisplayFormat={timeDisplayFormat}
             />
           </div>
         </div>

packages/player-react/src/utils.ts

@@ -1,18 +1,31 @@
 export function getFormattedTime(
   timeInSeconds: number,
   absoluteTimeInSeconds: number,
+  timeDisplayFormat: 'MM:SS' | 'MM:SS.mm' | 'MM:SS.m',
 ) {
   function toFormattedTime(timeInSeconds: number) {
     const minutes = Math.floor(timeInSeconds / 60);
     const seconds = Math.floor(timeInSeconds % 60)
       .toString()
       .padStart(2, '0');
-    return `${minutes}:${seconds}`;
+    const milliseconds = Math.floor((timeInSeconds % 1) * 1000)
+      .toString()
+      .padStart(3, '0');
+
+    if (timeDisplayFormat === 'MM:SS') {
+      return `${minutes}:${seconds}`;
+    }
+
+    if (timeDisplayFormat === 'MM:SS.m') {
+      return `${minutes}:${seconds}.${milliseconds[0]}`;
+    }
+
+    if (timeDisplayFormat === 'MM:SS.mm') {
+      return `${minutes}:${seconds}.${milliseconds.slice(0, 2)}`;
+    }
   }
 
-  return `${toFormattedTime(timeInSeconds)} / ${toFormattedTime(
-    absoluteTimeInSeconds,
-  )}`;
+  return `${toFormattedTime(timeInSeconds)} / ${toFormattedTime(absoluteTimeInSeconds)}`;
 }
 
 export function shouldShowControls(