Hello HN! This is both my first Show HN and my first post!
On Fridays, we tend to relax a bit more and share some music. SpotDJ was a fun little experiment to see if we could have an "Office DJ" with a live feeling, knowing everyone was listening to the same thing, even if they're remote.
I also want to have something small enough that I could focus really deep (for the small amount of time) on polishing the animations and UI, and play with some new (for me) tech.
The idea is this:
1. When you first go to SpotDJ, you're in DJ mode. Sign into Spotify, copy the DJ link at the bottom and share it with your friends (or coworkers in my case)
2. Anyone who visits that link and signs into Spotify with it will have their player synchronized with yours, including scrubbing!
It's built using ReasonML [0], ReactMotion [1] (though it's using StaggeredMotion instead of TransitionMotion, so that causes a lot of movement whenever a new track comes in. Need to fix this.), authenticates and controls Spotify via GraphQL [2], and sends synchronization messages via WebRTC (peerjs) [3]. It's the first time I got to go deep on various animation techniques, and I'll post a gory-details blog about my experiments later.
It's still rough, so I'd love to hear your feedback!
One thing I'd like to add is a "push-to-broadcast" button for the dj to be able to speak to all the listeners for the radio-like feeling. WebRTC should make that pretty easy, but I haven't gotten to it yet.
Also happy to answer questions!
Finally, today is my last internship, and I'm looking to join a company with a strong frontend and design team that also cares about tech. Consider this part of my CV :D
Thank you! I struggled a lot for the scrolling! I initially tried to do the overflow scroll, but it would only scroll for the items that are overflowed to the right but not to the left. So I ended up using the mouse-wheel event to calculate the scroll and animate the items using react-motion.
5 comments
[ 1.6 ms ] story [ 24.9 ms ] threadOn Fridays, we tend to relax a bit more and share some music. SpotDJ was a fun little experiment to see if we could have an "Office DJ" with a live feeling, knowing everyone was listening to the same thing, even if they're remote.
I also want to have something small enough that I could focus really deep (for the small amount of time) on polishing the animations and UI, and play with some new (for me) tech.
The idea is this:
1. When you first go to SpotDJ, you're in DJ mode. Sign into Spotify, copy the DJ link at the bottom and share it with your friends (or coworkers in my case)
2. Anyone who visits that link and signs into Spotify with it will have their player synchronized with yours, including scrubbing!
It's built using ReasonML [0], ReactMotion [1] (though it's using StaggeredMotion instead of TransitionMotion, so that causes a lot of movement whenever a new track comes in. Need to fix this.), authenticates and controls Spotify via GraphQL [2], and sends synchronization messages via WebRTC (peerjs) [3]. It's the first time I got to go deep on various animation techniques, and I'll post a gory-details blog about my experiments later.
It's still rough, so I'd love to hear your feedback!
One thing I'd like to add is a "push-to-broadcast" button for the dj to be able to speak to all the listeners for the radio-like feeling. WebRTC should make that pretty easy, but I haven't gotten to it yet.
Also happy to answer questions!
Finally, today is my last internship, and I'm looking to join a company with a strong frontend and design team that also cares about tech. Consider this part of my CV :D
EDIT: Whoops, forgot to add a link to the source. https://github.com/OneGraph/onegraph-examples/tree/master/sp...
[0] https://reasonml.github.io
[1] https://github.com/chenglou/react-motion
[2] https://www.onegraph.com
[3] https://peerjs.com