36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
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>
|
|
)
|
|
}
|