Inspiration

When we were in the residential college commons watching Youtube videos in the lounge, we had a tough time getting to share all the videos that equally appealed to all of us. Therefore, we thought of creating this website/Chrome Extension to help us fairly decide which videos to watch.

What it does

Deemos is a web based application with server side, client side and a Google Chrome extension all working together to generate a queue of videos hand selected by each person in the group. This queue of videos can be voted on by each person in the group to determine the order in which the videos will be played. To use the application, one of the computers will download the google chrome extension, which provides a room code for all your friends to join. Everyone will join the application by inputting the room code into deemos.herokuapp.com. Once the room code has been entered, each person will have their own search bar to look up their favorite videos and a queue to place all the videos they want to watch and vote on the videos that other people have suggested. The google chrome extension will automatically play the videos at the top of the queue.

How we built it

We started with a simple Express.js template that we generated using WebStorm. We chose to use Node.js because it allowed us to write the client, server side, and extension in the same language, which greatly simplified development. On the back end, each room code maps to a Session object that contained the host endpoint, the member endpoints, and all of the data concerning the votes and video requests of the members (since the room code is an integer, this is all stored as an array). The client/server communication is handled almost entirely by WebSockets, and we differentiated the messages by a "type" field in each one.

On the front end, we used Bootstrap for a good portion of the UI, particularly the buttons and text inputs. We reused a custom view manager to handle switching between different views of the website and extension, since this is a single-page application. The search function was done using the Youtube Data API, which we used to obtain not only the video IDs but also the titles and thumbnails. The YouTube videos are played on a separate window from the extension, automatically running through the queue processed by the server. The front end's JavaScript is actually built using Browserify in order to require modules in the same was as in Node.

Challenges we ran into

The greatest challenge faced in building the app was getting YouTube to autoplay continuously: autoplay on Chrome requires user interaction beforehand. On the one hand, putting embeds within the extension did not work because YouTube embeds refused to play in them. On the other hand, running a separate tab/window using a popup extension, while possible, opened a whole can of worms involving cross-origin permissions, extension communication, and the like. Hence, we used a new-tab extension instead with a separate tab for the video, where we used postMessage combined with a single webpage that consists solely of a youtube embed and a JS script to update the embed to achieve autoplay, barring the very first video.

Also since some of the members on the team were new to github and javascript, it was challenging to sync up the knowledge of all the team members and get us to work together. There were lots of merge conflicts as the newer members tried things that did not work which conflicted with the work of the other members.

Accomplishments that we're proud of

What we are most proud of in regards to Deemos is the fact that we were able to get a functional project hosted on Heroku in the short amount of time that we had. Without the luxury of a long-term time span, we have to plan what we were to do carefully, as one major mistake could severely set us back an hour or more. We are also proud of the way we were able to handle ourselves as a team. In such a short amount of time, it is crucial to have good communication and task distribution. We were able to understand the strengths and weaknesses of each member and put them on the tasks where they could learn the most and also be the most effective. Also, we are proud of the growth in our knowledge of essential technical skills such as git and effective JS/HTML.

What we learned

Since some of the members were new to github and software development, we learned the overall aspects that are involved in creating a working project from scratch. For example, we learned how to utilize github repositories and branches effectively in order to collaborate across four different backgrounds. We also worked through the front end and back end of a program and learned about the nuances that go into their integration.

What's next for Deemos

For one thing, Rice's 11 residential colleges could sure use Deemos in their commons, both for entertainment during servery dinners and to distract people from the bland taste of the same ol' campus food. Looking further, however, we wish to one day sell Deemos to hospitality companies, convention centers, etc. and broaden the scope of Deemos from YouTube to both other video-streaming sites and other forms of entertainment, most notably music.

Share this project:
×

Updates