I'm creating a video player and I have to set controls. I found this tutorial https://medium.com/prototyped/react-native-video-handling-fullscreen-and-controls-on-android-dbb45a2e52ea][1]
but in this tutorial, all code is in typescript and he use a function component. how can I migrate to normal react native class system for example for this code:
import React from 'react';import Slider from '@react-native-community/slider';import {View, Text, StyleSheet} from 'react-native';interface Props { currentTime: number; duration: number; onSlideCapture: (data: {seekTime: number}) => void; onSlideStart: () => void; onSlideComplete: () => void;}export const ProgressBar: React.FC<Props> = ({ currentTime, duration, onSlideCapture, onSlideStart, onSlideComplete,}) => { const position = getMinutesFromSeconds(currentTime); const fullDuration = getMinutesFromSeconds(duration); return (<View style={styles.wrapper}><Slider value={currentTime} minimumValue={0} maximumValue={duration} step={1} onValueChange={handleOnSlide} onSlidingStart={onSlideStart} onSlidingComplete={onSlideComplete} minimumTrackTintColor={'#F44336'} maximumTrackTintColor={'#FFFFFF'} thumbTintColor={'#F44336'} /><View style={styles.timeWrapper}><Text style={styles.timeLeft}>{position}</Text><Text style={styles.timeRight}>{fullDuration}</Text></View></View> ); function getMinutesFromSeconds(time: number) { const minutes = time >= 60 ? Math.floor(time / 60) : 0; const seconds = Math.floor(time - minutes * 60); return `${minutes >= 10 ? minutes : '0'+ minutes}:${ seconds >= 10 ? seconds : '0'+ seconds }`; } function handleOnSlide(time: number) { onSlideCapture({seekTime: time}); }};
specially interface prop...