Progress.CurrentTime! == Продолжительность (React-Native-Video)

Question

Моя проблема, если следующее:

Продолжительность видео составляет 6,357 секунд. progress.currentTime идет только к 6.154 и останавливается.

С тех пор this.state.progress = 0,97 (не 1,0) . В результате мой ProgressBar не доходит до конца. Он останавливается на позиции 0,97 и onProgressPress () не работает.

Может ли кто-нибудь помочь, пожалуйста?

Вот мой код:

export default class VideoComp extends Component {

state = {
    paused: false,
    progress: 0,
    duration: 0
}


onProgressPress = (e) => {
    const position = e.nativeEvent.locationX;
    const progress = (position / 250) * this.state.duration;
    this.player.seek(progress);
}

onMainButtonPress = () => {
    if(this.state.progress >= 1) {
        this.player.seek(0);
    };
    this.setState(state => {
        return {
            paused: !state.paused
        }
    })
}

handleEnd = () => {
    this.setState({
        paused: true
    })
}

handleProgress = (progress) => {
    this.setState({
        progress: progress.currentTime / this.state.duration
    });
}

handleLoad = (meta) => {
    this.setState({
        duration: meta.duration
    })
}

render() {
    const { width } = Dimensions.get('window');
    const height = width * 0.5625;

    return(
        <View style = {styles.videoWrapper}>
            <Video
                source = {{uri: this.props.videoURL}}
                ref = {ref => this.player = ref}
                style = {{width: '100%', height}}
                paused = {this.state.paused}
                resizeMode = 'contain'
                onLoad = {this.handleLoad}
                onProgress = {this.handleProgress}
                onEnd = {this.handleEnd}
            />
            <View style = {styles.controls}>
                <TouchableWithoutFeedback onPress = {this.onMainButtonPress}>
                    <IconSimpleLine name = {!this.state.paused ? 'control-pause' : 'control-play'} color = {text} size = {20}/>
                </TouchableWithoutFeedback>

                <TouchableWithoutFeedback onPress = {this.onProgressPress}>
                    <View>
                        <ProgressBar 
                            progress = {this.state.progress} 
                            width = {250}
                            height = {5}
                            color = {text}
                            borderColor = {text}
                            unfilledColor = 'rgba(255, 255, 255, 0.3)'
                        />
                    </View>
                </TouchableWithoutFeedback>

                <Text style = {styles.duration}>
                    {secondsToTime(Math.floor(this.state.progress * this.state.duration))}
                </Text>
            </View>
        </View>
    )
}
}

UPDATE

Я попробовал следующее:

handleProgress = (progress) => {
    this.setState({
        progress: Math.floor(progress.currentTime) / this.state.duration
    });
}

handleLoad = (meta) => {
    this.setState({
        duration: Math.floor(meta.duration)
    })
}

Строка ProgressBar теперь идет до самого конца, но движется на секунду. Я имею в виду, он немного двигается, останавливается на одну секунду, двигается немного дальше, останавливается на одну секунду и так далее. Он не движется плавно (каждую миллисекунду).

Но это не правильное решение.

Answer 1

Попробуйте использовать parseFloat () для целей расчета.

в вашем вопросе, я не знаю, какое значение входит в число с плавающей запятой или в дробное число, но просто для примера используйте это.

this.setState({
        progress: parseFloat(progress.currentTime / this.state.duration)
    }); 

и

const progress = parseFloat(position / 250)) * this.state.duration;

Надеюсь, это поможет вам.