feat(setScrollPercent): align trackScroll with videoPercentage

[tarsisexistence]

This PR addresses this issue #89.

By design, I add a new callback that replaces setTargetTimePercent because it manipulates with currentTime which doesn't have a sync with a scroll position (described in issue #89).

So, here we

• keep scroll listener of handler updateScrollPercentage that uses setTargetTimePercent under the hood
• keep setTargetTimePercent for non-trackScroll implementation (even though now it's possible to enable both at the same time)
• introduce setPercentage in conjunction with trackScroll, so here we unlock the possibility to use track scroll and programmatic scroll in the same flow.

[tarsisexistence]

@dkaoster, I wonder whether we should adjust anything else here?

And I should probably add the support for callbacks of other implementations (like Svelte)

[tarsisexistence]

@dkaoster I decided to support videoPercentage on instance as well. So if videoPercentage is changed with enabled trackScroll - we prefer setPercentage instead of setTargetTimePercent

I did the same for Svelte and Vue. I need help to validate them. I would appreciate your review.

[dkaoster]

Two comments:

1. Can we have this function also check if trackScroll is true before running? This function is technically exposed to any ScrollyVideo instance, and although it is never meant to be used directly, someone may discover it and weird things would happen if you tried calling it while trackScroll is false.
2. Also, it seems like the way this is currently implemented, syncing videoPercentage with the scroll position would not work for the vanilla js implementation, so we may need to rethink how this is implemented.

[tarsisexistence]

@dkaoster updated PR about the first point.
Can you explain a little bit more in detail about the second one?

[dkaoster]

Because in the react, vue, and svelte versions you've added the following logic in the components and outside of the library itself:

      if (trackScroll) {
        scrollyVideoRef.current.setScrollPercent(videoPercentage)
      } else {
        scrollyVideoRef.current.setTargetTimePercent(videoPercentage);
      }

So if someone were to implement ScrollyVideo without using one of these frontend libraries, they would have to recreate this logic themselves every time. I'm wondering if there is a way to integrate this into ScrollyVideo.js itself instead of duplicating it across react, vue, and svelte separately?

[tarsisexistence]

@dkaoster I think this is the same concern to the change of videoPercentage that automatically invokes setTargetTimePercent, isn't it? 🤔 I mean it looks identical 🤔

Addressing your concern, in React examples you manipulate with a progress that automatically runs this condition on change. In JS code, you don't have automatic effects on state change, so you would handle it manually via scrollyVideo.setScrollPercent

Btw, I want to do another PR of onProgress callback that allows users from outside understand on which stage are they now. It's possible to do if you don't have trackScroll, so you control the progress manually, but as you see, I connect trackScroll with programmatic handling.

If i'm missing something, please let me know.
Would be happy to make things better :)

[dkaoster]

sorry, you're right. Ignore my last comment. I think this looks good to me!