Distinguish user value changes from programatic ones

[skogsmaskin]

Distinguish user value changes from programatic ones

[thunderkid]

Minor tweak - this version:
https://codesandbox.io/s/4303ylv5n9
just adds onEnded to @sghall's to keep the play/pause buttons in the right state when the video ends.

[sghall]

Hey there. Yeah, interesting use case. Never tried anything like that before. You also have the "onUpdate" which will give you everything and you need to pick out the cases you care about.

  public onUpdate = values => {
    this.setState(({ isSeeking }) => {
      if (isSeeking) {
        return null;
      }

      this.props.onSeekTo(values[0]);
      return { values };
    });
  };

I think this does what you want it to do. Right?
https://codesandbox.io/s/qz315pn119

[sghall]

Or actually you just need to call the prop function I think...

  public onUpdate = values => {
    if (!this.state.isSeeking) {
      this.props.onSeekTo(values[0]);
    }
  };

https://codesandbox.io/s/qz315pn119

[skogsmaskin]

Yes, but when it is an actual video (and not a Javascript Interval) you will get into trouble because onSeekTo is actually video.currentTime=values[0].

[skogsmaskin]

By adding my own onClick slider handler I got it working:

https://codesandbox.io/s/q78wqv12y6

  getDerivedStateFromProps(props, state) {
    if (!state.isSeeking) {
      return {
        values: [props.currentTime || 0]
      };
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.isSeeking && !this.state.isSeeking) {
      this.props.onSeekTo(prevState.values[0]);
    }
  }

  onChange = (values: number[]) => {
    this.setState({ values });
  };

  onUpdate = (values: number[]) => {
    this.setState({ values });
  };

  handleSlideStart = () => {
    this.setState({ isSeeking: true });
  };

  handleSlideEnd = () => {
    this.setState({ isSeeking: false });
  };

  handleSliderPress = event => {
    const {type} = event
    this.setState(
      prev => ({ isSeeking: !prev.isSeeking }),
      () => {
        console.log(type);
      }
    );
  };

[skogsmaskin]

There is another issue, seems like everything I put over or under the slider will only take mouseup. Maybe the slider is event.preventDefaulting it?

Anyway, if adding onPressDown and onPressUp (or something like that) callbacks to the module, this kind of functionality will be easy.

  public handleSliderPress = values => {
    this.setState(
      prev => ({ isSeeking: !prev.isSeeking })
    );
  }

<Slider onPressDown={this.handleSliderPress} onPressUp={this.handleSliderPress} />

[sghall]

Yeah, cool. If you want to put together a PR that's great. I'm traveling right now, but go ahead and submit it. Should be able to take a look in a few days. Cheers.

[skogsmaskin]

Cool, I've submitted a PR. My problem can now be solved with this code:

  static getDerivedStateFromProps(props, state) {
    if (!state.isSeeking) {
      return {
        values: [props.currentTime || 0]
      }
    }
    return null
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.isSeeking && !this.state.isSeeking) {
      this.props.onSeekTo(this.state.values[0])
    }
  }

  handleSliderChange = values => {
    this.setState({ values })
  }

  handleSliderUpdate = values => {
    this.setState({ values })
  }

  handleSlideStart = () => {
    this.setState({ isSeeking: true })
  }

  handleSlideEnd = () => {
    this.setState({ isSeeking: false })
  }

  handlePressRail = () => {
    this.setState({ isSeeking: true }, () => {
      this.setState({ isSeeking: false })
    })
  }

[atlanteh]

Actually I think that according to React standard, onChange should only be called when user changed the input. Just like any "onChange" event is called only when user changes the input and not when the prop was changed. we can leave onUpdate event to be called upon any change

[sghall]

Took a crack at a video slider to see how it could be done with the current API. Seems pretty good to me...
https://codesandbox.io/s/oqr004j7v9

Thoughts?

[skogsmaskin]

@sghall - yeah, I was also able to do this if everything was in one component. However, I was not able to do it if the UI was supposed to be in one component and the video in another, and that's what I was trying to solve.

[sghall]

I see. Well, for the slider part, it's just moving it into a separate file like this...
https://codesandbox.io/s/1z51zn6q23

[skogsmaskin]

@sghall - cool, that seems to work fine! I suppose adding the state videoCursor was the trick (and not directly tie it to video.currentTime)?

[sghall]

Yeah, seems to me, you need to track the time in two different places. This is what I hacked together. It seems to work well, but be careful I really don't know much working with videos and had to hit MDN a few times.

EDIT: I said originally that both onUpdate and onChange get called on slide end. That's not right, it just calls onChange here:

react-compound-slider/src/Slider/Slider.js

Line 403 in 7b7d01a

onChange(values.map(d => d.val))

But on click, it calls onUpdate and then onChange:

react-compound-slider/src/Slider/Slider.js

Line 388 in 7b7d01a

onUpdate(values.map(d => d.val))

So both get called on click and, if you look closely at the sandbox I am exploiting the fact that onUpdate gets called first and then onChange which sets videoCursor to null, etc. So the confusion in getting this to work is understandable. You would have to know this.

[sghall]

@thunderkid correctly pointed out that the videoCursor is not needed in #47. So this is most up-to-date version with some fixes to the styles etc:
https://codesandbox.io/s/64vz7m7v6z

[sghall]

Closing this one. I think we got this. Open it back up if there's still an issue here.