import React from 'react' ; import { throttle } from 'lodash' ; import TtyPlayer from 'teleport/lib/term/ttyPlayer' ; import ProgressBar from './ProgressBar' ; export default function ProgressBarTty ( props ) { const state = useTtyProgress ( props . tty ) ; return < ProgressBar { ... state } / > ; } export function useTtyProgress ( tty ) { const [ state , setState ] = React . useState ( ( ) => { return makeTtyProgress ( tty ) ; } ) ; React . useEffect ( ( ) => { const throttledOnChange = throttle ( onChange , Math . max ( Math . min ( tty . duration * 0.025 , 500 ) , 20 ) ) ; function onChange ( ) { const ttyProgres = makeTtyProgress ( tty ) ; setState ( ttyProgres ) ; } function cleanup ( ) { throttledOnChange . cancel ( ) ; tty . stop ( ) ; tty . removeAllListeners ( ) ; } tty . on ( 'change' , throttledOnChange ) ; return cleanup ; } , [ tty ] ) ; return state ; } function makeTtyProgress ( tty ) { function toggle ( ) { if ( tty . isPlaying ( ) ) { tty . stop ( ) ; } else { tty . play ( ) ; } } function move ( value ) { tty . move ( value ) ; } return { max : tty . duration , min : 1 , time : tty . getCurrentTime ( ) , isLoading : tty . isLoading ( ) , isPlaying : tty . isPlaying ( ) , current : tty . current , move , toggle , } ; }