You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
982 B
37 lines
982 B
import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
|
|
import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
|
|
import { Scrubber } from 'features/StreamPlayer/components/ProgressBar/styled'
|
|
|
|
import { Chapters } from '../Chapters'
|
|
import type { Props } from './hooks'
|
|
import { useProgressBar } from './hooks'
|
|
import { ProgressBarList } from './styled'
|
|
|
|
export const ProgressBar = (props: Props) => {
|
|
const {
|
|
onPlayedProgressChange,
|
|
onTouchEnd,
|
|
onTouchStart,
|
|
} = props
|
|
|
|
const progressBarRef = useSlider({
|
|
onChange: onPlayedProgressChange,
|
|
onTouchEnd,
|
|
onTouchStart,
|
|
})
|
|
|
|
const {
|
|
calculatedChapters,
|
|
playedProgressInPercent,
|
|
time,
|
|
} = useProgressBar(props)
|
|
|
|
return (
|
|
<ProgressBarList ref={progressBarRef}>
|
|
<Chapters chapters={calculatedChapters} />
|
|
<Scrubber style={{ left: `${playedProgressInPercent}%` }}>
|
|
<TimeTooltip time={time} />
|
|
</Scrubber>
|
|
</ProgressBarList>
|
|
)
|
|
}
|
|
|