Synching up Play/Pause with a Cross-Domain Fetch Request

How to enable play/pause simultaneously on different browsers

With our “Couch Potato” extension, users can play and pause seamlessly across all devices, so everybody is on the same page when somebody goes for a break. Let’s say your friend in California has to go open the door when Uber Eats deliver foods for dinner while you’re in New York being a total couch potato on a Friday night. Your friend doesn’t want to miss anything while she runs downstairs to open the door. You can simply pause the Hulu streaming service until she comes back and the streaming will stop on both your Hulu player and your friend’s. It’s convenient to stop someone else’s screen from a distance, right? Let’s examine how we implemented this cool feature on the Hulu domain without having access to its backend.

Here are the steps we followed:

1. Add event listener on play/pause button on Hulu player button through Hulu extension.
2. Listen to the button’s click and send a message to the server based on ‘Play’ to ‘Pause’ (we did something tricky to exclude a machine clicking. Details will be covered in the next blog post.)
3. The Socket IO server emits the play or pause status as a message to others in the couch on our chatting extension to play or pause the other Hulu players on your friends’ Hulu Player.
4. When the message is received sends a postMessage to the Hulu window notifying it that play/pause has been pressed.
5. An event listener on the window listens for the message and plays or pauses everyone else’s screens.

Although, it sounds like just plain data flow set up, the challenge comes from sending messages from our Socket IO client to our extension. We are sending data from two different origins to our Socket IO server. How should we handle requests from two different domains? We used CORS, Cross Origin Resource Sharing.

Image Credit: https://developer.mozilla.org/

When a user presses play/pause, our event listener on the play/pause button grabs the time a user pressed the button and sends a cross-domain fetch request to the Couch Potato backend. Once the backend receives that request, it sends a message via Socket IO notifying all members of the couch that the play/pause button has been pressed. On the frontend, once that message is received, a postMessage is sent to the Hulu window telling it to play/pause a user’s screen. Voila! Users can play or pause each other’s screens.

The below code shows how we implemented it on the extension.

Stay tuned for next week, where we’ll go more in-depth on some tricky challenges we had to tackle when setting up simultaneous play/pause.

Interested in learning more about Couch Potato? Start this blog series from the beginning! And don’t forget to download Couch Potato from the Chrome store so you can start watching shows with friends now!