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.
53 lines
1.4 KiB
53 lines
1.4 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 'features/StreamPlayer/components/Chapters'
|
|
import type { Props } from './hooks'
|
|
import { useProgressBar } from './hooks'
|
|
import { ProgressBarList } from './styled'
|
|
import { isIOS } from '../../../../config/userAgent'
|
|
|
|
export interface ProgressBarProps extends Props {
|
|
isScrubberVisible?: boolean,
|
|
}
|
|
|
|
export const ProgressBar = (props: ProgressBarProps) => {
|
|
const {
|
|
isScrubberVisible,
|
|
onPlayedProgressChange,
|
|
onTouchEnd,
|
|
onTouchStart,
|
|
} = props
|
|
|
|
const progressBarRef = useSlider({
|
|
onChange: onPlayedProgressChange,
|
|
onTouchEnd,
|
|
onTouchStart,
|
|
})
|
|
|
|
const {
|
|
calculatedChapters,
|
|
playedProgressInPercent,
|
|
time,
|
|
} = useProgressBar(props)
|
|
|
|
return (
|
|
<ProgressBarList
|
|
ref={progressBarRef}
|
|
isIOS={isIOS}
|
|
>
|
|
<Chapters chapters={calculatedChapters} />
|
|
{isScrubberVisible && (
|
|
<ScrubberContainer>
|
|
<Scrubber
|
|
isIOS={isIOS}
|
|
style={{ left: `${playedProgressInPercent}%` }}
|
|
>
|
|
<TimeTooltip time={time} />
|
|
</Scrubber>
|
|
</ScrubberContainer>
|
|
)}
|
|
</ProgressBarList>
|
|
)
|
|
}
|
|
|