
Show HN: SpotDJ – Synchronize Spotify Players with Your Coworkers/friends (OSS) - yukims19
https://spotdj.onegraphapp.com/
======
yukims19
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

EDIT: Whoops, forgot to add a link to the source.
[https://github.com/OneGraph/onegraph-
examples/tree/master/sp...](https://github.com/OneGraph/onegraph-
examples/tree/master/spotify-dj)

[0] [https://reasonml.github.io](https://reasonml.github.io)

[1] [https://github.com/chenglou/react-
motion](https://github.com/chenglou/react-motion)

[2] [https://www.onegraph.com](https://www.onegraph.com)

[3] [https://peerjs.com](https://peerjs.com)

------
stopachka
Great work! I'll be using this today and will report back :)

------
dannykingme
I’m surprised by how well scrolling works on the album covers

~~~
yukims19
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.

