feat: show playback progress in bar & auto-play text

js/src/features/playback/playback-page-indicator.tsx

@@ -3,12 +3,14 @@ import { cn } from "@/lib/utils";
 interface PlaybackPageIndicatorProps {
   total: number;
   current: number;
+  progress: number;
   onGoTo: (index: number) => void;
 }
 
 export function PlaybackPageIndicator({
   total,
   current,
+  progress,
   onGoTo,
 }: PlaybackPageIndicatorProps) {
   if (total === 0) return null;
@@ -24,14 +26,29 @@ export function PlaybackPageIndicator({
           }}
           className="group relative h-3 flex-1"
         >
-          {/* Track */}
+          {/* Dim track */}
           <div
             className={cn(
-              "absolute inset-x-0 top-1 h-1 rounded-full transition-all",
-              i <= current ? "bg-white/90" : "bg-white/30",
+              "absolute inset-x-0 top-1 h-1 rounded-full bg-white/30",
               "group-hover:h-1.5 group-hover:top-0.5",
             )}
           />
+          {/* Fill */}
+          <div
+            className={cn(
+              "absolute left-0 top-1 h-1 rounded-full bg-white/90",
+              "group-hover:h-1.5 group-hover:top-0.5",
+            )}
+            style={{
+              width:
+                i < current
+                  ? "100%"
+                  : i === current
+                    ? `${progress * 100}%`
+                    : "0%",
+              transition: i === current ? "width 150ms linear" : "none",
+            }}
+          />
         </button>
       ))}
     </div>