<Trimmer> rendering issues with tracker and thumb handles

[davidpaulsson]

Current Behavior

• Tracker handle placement is off On load and <Trimmer currentTime={0} thumbWidth={16} /> it shows the tracker handle to the right of where it should be when using the thumbWidth property.

• Trimmer renders video preview off compared to the draggable "thumbs"/"handles" on each side The video preview starts and ends, on the right of each handle. But the handles are on top of the preview, so the right side actually covers a bit of the preview.

Attaching two screenshots to illustrate.

Expected Behavior

• Trimmers tracker should render at the start, at the first frame, of the Trimmer preview.
• Video preview thumbnails should go from right side of the left handle to left side of the right handle.

Your Environment

software	version
react-native-video-processing	1.7.1 (but using this fork)
react-native	0.53.0
node	8.9.1

[shahen94]

Good catch @davidpaulsson !

Right now have no time to work on this. I'll try to find a time fix this in next week.

Thanks.

[srameshr]

@shahen94 Could you fix this?

[EdisonDevadoss]

Can you explain how trimmer works?

        <Trimmer
              source={this.state.fileUri}
              height={150}
              width={300}
              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
              onChange={e => console.log(e.startTime, e.endTime)}
              onTrackerMove={() => this.trimVideo()}
            />

Function

  trimVideo() {
    console.log("trimVideo is called!");
    const options = {
      startTime: 5,
      endTime: 20,
      saveToCameraRoll: true, // default is false // iOS only
      saveWithCurrentDate: true // default is false // iOS only
    };
    this.videoPlayerRef
      .trim(options)
      .then(newSource => console.log(newSource))
      .catch(console.warn);
  }

[chai86]

I have the same issue. When i try to reach the left hand tracker, it tries to pull the screen across from left to right. Which means that the trimmer isn't correctly formatting to the screen width.

[clock509]

This issue still exists.

[jahanzaibbaloch99]

@davidpaulsson Hey David could i get a working example of trimmer component ?

[Sivakumar415]

@davidpaulsson Hey David, Could you fix this issue?