Trimmer not updating the video in sync with state

[rahamin1]

Current Behavior

A video is selected by the user (using 'react-native-image-picker'), and displayed in a Trimmer. However, the Trimmer is not in sync with the currently selected video.
This is tyhe current behavior:

• state is set to 'video1', Trimmer is showing 'video1'
• state is changed to 'video2', Trimmer is showing 'video1'
• state is changed to 'video1', Trimmer is showing 'video2'

Expected Behavior

To have both Trimmer and state in sync.

Environment - dependencies from package.json

  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.5",
    "react-native-image-picker": "^0.28.0",
    "react-native-video": "^4.4.0",
    "react-native-video-processing": "^1.20.0"
  },

Code

import React from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View, ScrollView
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import { VideoPlayer, Trimmer } from 'react-native-video-processing';

export default class VideoComponent extends React.Component {
  state = {
    videoSourcePath: null
  };

  constructor(props) {
    super(props);

    this.selectVideoTapped = this.selectVideoTapped.bind(this);
  }

  selectVideoTapped() {
    const options = {
      title: 'Video Picker',
      takePhotoButtonTitle: 'Take Video...',
      mediaType: 'video',
      videoQuality: 'medium'
    };

    ImagePicker.showImagePicker(options, (response) => {
      console.log('ImagePicker Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled video picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        this.setState({ videoSourcePath: response.path });
      }
    });
  }

  onChangeHandler() {
    //console.log({ nativeEvent })  // get Current time on every second
  }

  render() {
    const { videoSourcePath } = this.state;
    console.log('videoSourcePath: ', this.state.videoSourcePath);
    return (
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={{ margin: 10 }}>
            <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>
              <Text>Select a Video</Text>
            </TouchableOpacity>
          </View>

        { videoSourcePath !== null &&
          <View style={{ flex: 1 }}>
            <View style={{ marginTop: 50,
              width: 250, height: 60, borderWidth: 1,
              alignItems: 'center' }}>
              <Trimmer
                  source={videoSourcePath}
                  height={50}
                  width={250}
                  onTrackerMove={(e) => console.log(e.currentTime)} // iOS only
                  //currentTime={this.video.currentTime} // use this prop to set tracker position iOS only
                  themeColor={'white'} // iOS only
                  thumbWidth={30} // iOS only
                  trackerColor={'green'} // iOS only
                  resizeMode={VideoPlayer.Constants.resizeMode.CONTAIN}
                  onChange={(e) =>
                    console.log(`Trimmer onChange. startTime: ${e.startTime}, endTime: ${e.endTime}`)}
              />
            </View>
          </View>
        }
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

[chai86]

Yes similar issue here. How can you put the following source={videoSourcePath} inside the Render() when it won't be assigned until after a video has been selected? Until then source=.... is invalid

[walvekarnikhil]

Getting the same issue, solved it by adding key

<Trimmer
                  source={videoSourcePath}
                  key={videoSourcePath}
                  height={50}
                  width={250}
                  onTrackerMove={(e) => console.log(e.currentTime)} // iOS only
                  //currentTime={this.video.currentTime} // use this prop to set tracker position iOS only
                  themeColor={'white'} // iOS only
                  thumbWidth={30} // iOS only
                  trackerColor={'green'} // iOS only
                  resizeMode={VideoPlayer.Constants.resizeMode.CONTAIN}
                  onChange={(e) =>
                    console.log(`Trimmer onChange. startTime: ${e.startTime}, endTime: ${e.endTime}`)}
              />

I hope that doesn't cause any performance issues.