Couch Potato’s Additional Functionality
In our last two posts, June and Caitlin discussed how we gathered UX feedback from our fellow classmates and then implemented it. The feedback we received helped make our application more intuitive for the user, especially those who haven’t used a Chrome extension before. In addition to these updates, we added several features that enhance our user’s experience and make our application unique! I’ll be discussing those throughout this article.
First up, we added an emoji picker to our chat feature. We all agreed that emojis can be a perfect way to express yourself without having to use any words. We wanted our users to be able to react to things happening on the screen without taking time away from their movie or show, so we knew we needed to implement an emoji picker that was easily accessible in the chat room.
A quick Google search told us there are several ways to implement an emoji picker in a React application. We chose to use Emoji Mart, which is a customizable emoji picker component that can be added to any React app in a few simple steps. This is a great resource for learning how to use Emoji Mart in your React project, written by a fellow Medium blogger: https://medium.com/better-programming/emoji-mart-an-open-source-emoji-picker-component-for-react-985a5ca681f3.
The second feature we added to enhance our user experience was our drinking game feature. If you’ve been following our blog posts, you’ve heard us talk about it. This button allows users to play a drinking game with their friends while watching a movie or show of their choosing. Clicking the button on the right, next to the Send button, will send the chat room a blinking message, calling everyone to Drink! We implemented this the same way we set up our normal messaging, but we used a separate socket command that fires whenever someone clicks the drink button. To learn more about how we set up messaging using Socket.io, follow this link to our earlier blog post, Setting up Message Transmission: https://medium.com/building-couch-potato/setting-up-message-transmission-32e51b2230e6.
The third and final feature I’ll be discussing is our “edit” tool, which allows users within an active chat room to change their name and avatar. We consider the user’s ability to customize their profile to be very important in an application like ours, which is why we were surprised when Hulu and Amazon Prime Video decided to leave it out from their own Watch Party applications. Especially since it didn’t take much code to implement it into our project!
To allow people in an active chat room to change their user info, we created a React popup within the chat room that alters two values on the state: username and avatar. We created a UserForm popup component that renders on the page once the Edit button is clicked, which has a text box for editing username as well as images for the different avatars to choose from. Once your name has been edited and/or a new avatar is chosen, the user can click “Save & Close” and the new user information will be reflected next time they send a message. We used the ReactJS-Popup library, which has step-by-step instructions for creating a popup within a React component. Check it out here: https://www.npmjs.com/package/reactjs-popup.
I hope you enjoyed reading about the Couch Potato features that make our application unique! Stay tuned for our next post, where we discuss how we implemented our Play/Pause feature, which allows one user to press play or pause and cause their friends’ web players to mirror the action.
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!
