player components

src/components/player/ChapterTicks.tsx

@@ -0,0 +1,35 @@
+import { ticksToSeconds } from '../../lib/format'
+
+interface Chapter {
+  StartPositionTicks?: number | null
+  Name?: string | null
+}
+
+interface Props {
+  chapters?: Chapter[] | null
+  duration: number
+  onJump?: (seconds: number) => void
+}
+
+export default function ChapterTicks({ chapters, duration, onJump }: Props) {
+  if (!chapters?.length || !duration) return null
+
+  return (
+    <div className="absolute inset-0 pointer-events-none">
+      {chapters.map((c, i) => {
+        const start = ticksToSeconds(c.StartPositionTicks)
+        if (start <= 0 || start >= duration) return null
+        const left = (start / duration) * 100
+        return (
+          <button
+            key={i}
+            onClick={() => onJump?.(start)}
+            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-2 bg-white/45 hover:bg-white hover:scale-y-150 rounded-sm transition-all duration-150 pointer-events-auto"
+            style={{ left: `${left}%` }}
+            aria-label={c.Name || `Chapter ${i + 1}`}
+          />
+        )
+      })}
+    </div>
+  )
+}