shahen94 / react-native-video-processing

Native Video editing/trimming/compressing :movie_camera: library for React-Native
https://shahen94.github.io/react-native-video-processing/
MIT License
1.24k stars 321 forks source link

Invariant Violation #373

Open zees98 opened 1 year ago

zees98 commented 1 year ago

Greetings, First of all, thank you for your efforts on creating this package. I have tried to implement the package but but I am facing some issues.

Current Behavior

If I change the startTime or endTIme on the trimmer component I get an error stating: Invariant Violation: [3503,"RNVideoProcessing",{"endTime":"<<NaN>>","startTime":0}] is not usable as a native method argument

My code

              const [trimStart, setTrimStart] = useState(0)
              const [trimEnd, setTrimEnd] = useState(120)

               <VideoPlayer
                    ref={ref => videoPlayerRef = ref}
                    startTime={trimStart}  // seconds
                    endTime={trimEnd}   // seconds
                    play={true}     // default false
                    replay={true}   // should player play video again if it's ended
                    rotate={true}   // use this prop to rotate video if it captured in landscape mode iOS only
                    source={selectedVideo}
                    playerWidth={300} // iOS only
                    playerHeight={500} // iOS only
                    resizeMode={VideoPlayer.Constants.resizeMode.CONTAIN}
                    style={{ height: Dimensions.get("window").height, width: Dimensions.get("window").width }}
                    onChange={({ nativeEvent }) => console.log({ nativeEvent })} // get Current time on every second
               />
               <View style={{ position: "absolute", bottom: insets.top * 2, zIndex: 99, borderWidth: 1, width: "100%", }}>
                   <Trimmer
                        source={selectedVideo}
                        height={100}
                        width={300}
                        onTrackerMove={(e) => console.log(e.currentTime)} // iOS only
                        currentTime={video.currentTime} // use this prop to set tracker position iOS only
                        themeColor={'white'} // iOS only
                        thumbWidth={30} // iOS only
                        trackerColor={'green'} // iOS only
                        onChange={(e) => {
                            setTrimStart(e.startTime);
                            setTrimEnd(e.endTime); 
                            console.log(e.startTime, e.endTime);
                        }}
                    />
               </View>

Your Environment

software version
react-native-video-processing ^1.7.2
react-native 0.64.3
node v16.17.0

Looking forward to your reply. TIA