webamp

webamp copied to clipboard

https://news.ycombinator.com/item?id=15317723

Hey @captbaritone, I was basically frustrated for the same reason 😄and I wanted to check to see if someone filled an issue for this.

Anyway, I ca submit a PR, when I got some time, but, looking at the code, some refactoring might be in place, to switch the rc-slider with something custom? Or find a way to wrap the Bands in a component that would trigger them on hover?

Let me know if I can do this 😃and if you have any hints.

Cheers!

Nice! I’ve thought about this a bit, and I was thinking that we could have some kind of state (either in Redux or some parent component) that tracked when you clicked on a button and and when you released. Then, it could propagate that state into the bands. Then the bands could setup mousemove listeners on themselves only when that prop is true.

We may not need to tell rc-slider to change the level. We can probably just update the state (derived from the pixel position of the mouse maybe?) directly via Redux and since the components are controlled it should look correct.

Maybe we could start with a small PR that just introduces that “dragging” state somewhere in the app, even if that state is not used by anything yet.

Al that said, if you have a different idea, i’m all ears.

Actually, now that you've said it, makes more sense to have a state-bound prop propagating to the Band component. And you're right, just updating the state for that band value would make it rather easier to deal with.

Alright, gonna be back with some updates/pr.

Cheers!

Alrighty, back with some feedback.

The first try, was actually listening to over/out events and try to set the focus and trigger a mousepressed event for rc-slider to pick it up. The focus part was really easy and straight forward. The triggering and make the slider behave as we want it, it's the most frustrating part, since we do not have control over the whole slider logic.

Which, brings me to this https://codesandbox.io/s/ox9y8omxwq. It has the same functionality, as rc-slider, but we can handle over/out events rather nicely.

Obviously, needs a bit more polish, but wanted to pick your brain, and see if this is something we could do.

Cheers!

Nice start! Love CodeSandbox for this kind of thing. Great to get to play with it, and read through to code.

As for focus and triggering mousepressed, I don't think we need that. What if we:

1. Add over/out event tracking to our <Band /> component (or some wrapper around it)
2. Rather than mimicking user behavior by triggering a mousepressed, we can just update Redux directly by calling Band's onChange on each mousemove.

Basically, rather than controlling the slider logic, I think we can just control the slider values directly (via Redux state) and let the sliders reflect that state change as they already are.

Does that make sense? If not, let me know.

Well, that was my first approach, and it could work, without the need to trigger mousedown events, but that means we would lost the dragging of the active band. I'll comeback with some samples.