Popcorn Comments

An interactive chrome extension that makes comments go alive!

Comment

Inspiration

Currently, most comments on a YouTube video

  • cannot be read while the user is watching the video,
  • are not interactive,
  • do not correlate with a specific part of the video, but rather the video in general.

These limitations severely impact a YouTube viewer's ability to interact with the content and share their feelings in "real-time" with other viewers. Especially during lock-down in the COVID-19 pandemic, viewers are feeling very lonely browsing through their YouTube playlist and are constantly having the need to socialize with others of similar interests.

We believe that we can add more fun and socialization to watching videos! Taking the idea from many Asian video-streaming platforms, the danmaku (i.e. real-time comments that appear on top of a video stream) is an extremely popular feature among the users. This feature solves these listed issues by allowing the audience to instantly interact with the characters or objects in the videos, as well as with other audience members sharing similar interests through real-time comments.

A different yet similar problem is that currently, many YouTube videos such as online lectures contain contiguous segments which are usually skipped by its watchers. This can be quite frustrating, especially if the user has poor internet connection.

However, as the world's largest video-sharing platform, YouTube does not currently support any such feature. As a result, we wanted to build a Chrome extension to share these experiences with the worldwide audience.

What it does

After the Popcorn Comment extension is enabled, comments are layered in real-time towards the top of the YouTube video stream. Visually, each comment enters from the right of the video and floats to the left at a constant rate. All the comments are evenly distributed across the video and includes avoidance logic to not overlap with each other. There are buttons on the bottom edge of the video whichs controls turning on/off the Popcorn Comments, along with a group of settings that allows the user to change the style of the Popcorn Comments to make them more aesthetically pleasing.

Moreover, we record the most frequently watched intervals for each YouTube video from all the users of our extension and display these most popular intervals to the bottom of the progress bar (as Hot Moments) to inform the user of the climaxes and the most valuable parts of each video. For situations such as watching an extremely long lecture video, this feature allows users to learn more efficiently by organically creating a filter to show the most valuable information.

How we built it

Frontend

The Chrome extension runs background JavaScript code to listen to changes in the state of the DOM. When a YouTube video page is detected, it injects JavaScript to insert additional DOM elements obtained through YouTube APIs towards the top of the video frame Similarly, the script injects additional DOM elements to display the most viewed intervals below the progress bar, as obtained through our custom getInterval API.

Backend

Google Cloud Functions is used for its modularity, "sandbox-ness", and convenience to scale. We have created various endpoints in order to provide the requesting client YouTube comments to display for the Popcorn Comments feature, implemented via Google Cloud YouTube API. The most watched intervals to show the user the most interesting parts of the video, implemented via calls to our own CockroachDB database. A robust translation API, implemented via calls to Google Cloud Translate API.

Database

We stored our intervals and views data in CockroachDB hosted on the cloud. CockroachDB allows us to manage complex, highly available distributed SQL clusters with stronger provision, scale and security. The data is created and extracted with queries generated by sqlalchemy, which is then to be calculated for the most viewed intervals. The final result is sent to the front-end to be displayed.

Challenges we ran into

  • When starting the chrome extension, we had difficulties injecting DOM elements into the existing webpage and animating them overtime. Eventually through trial and error as well as testing different JS animation principles, we were able to successfully inject the comments and make them fly across the video frame in order. We also managed to listen to the YouTube play/pause button to play/pause our animation accordingly
  • While making API calls from the chrome extension to our backend server on GCP, we were confronted with CORS policy restrictions, which we were able to resolve through adding custom response headers.
  • Unfortunately we ran out of time to implement the front end of the translation feature on the extension due to technical complexities (i.e. comments can have many non-alphanumeric characters, can be very long, etc.).
  • While trying to connect the database to our application, it is difficult to find a backend framework for importing the cluster name and run in the google cloud functions environment. We solved the problems by trying different ones with try and error methodology.

Accomplishments that we're proud of

Culturally

Since it is very popular in China to watch videos with pop-up comments simultaneously, it turns into a “culture” in everyone’s life. As Chinese students, we would like to share this “culture” to the rest of the world, so that it not only allows us to feel like home but also allows others to enjoy the new and interesting features.

Technically

It is the first time for all of our group members to work with building a chrome extension, we are proud of maximizing its usability and flexibility by integrating with other platforms to improve our application to its best!

What we learned

Although our group members live in different time zones, we learned to plan work in advance and distribute work in an organized manner. In this way, we are able to utilize every member’s skills to its maximum for building the application.

What's next for Popcorn Comments

  • fast forward mode to automatically skip to Hot Moments
  • translation service to instantly translate all comments to your preferred language
  • change popcorn-comments color and transparency
  • display most viewed + popcorn-commented interval
  • interactions with popcorn-comments
  • like button
  • audio (for people who cannot see the comments)
  • report
  • deploying to other platforms (Netflix, Prime Videos, Disney+, etc)

Built With

Share this project:

Updates