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.
34 lines
1.1 KiB
34 lines
1.1 KiB
import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
|
|
import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
|
|
import { Scrubber, ScrubberContainer } 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 { isScrubberVisible, onPlayedProgressChange } = props
|
|
const progressBarRef = useSlider({ onChange: onPlayedProgressChange })
|
|
const {
|
|
calculatedChapters,
|
|
playedProgressInPercent,
|
|
time,
|
|
} = useProgressBar(props)
|
|
return (
|
|
<ProgressBarList
|
|
ref={progressBarRef}
|
|
>
|
|
<Chapters chapters={calculatedChapters} />
|
|
{isScrubberVisible && (
|
|
<ScrubberContainer>
|
|
<Scrubber
|
|
style={{ left: `${playedProgressInPercent}%` }}
|
|
>
|
|
<TimeTooltip time={time} />
|
|
</Scrubber>
|
|
</ScrubberContainer>
|
|
)}
|
|
</ProgressBarList>
|
|
)
|
|
}
|
|
|