Tubi-a-thon 2023

The 4th annual Tubi-a-thon (aka Hackathon) had 38 innovative engineers from Beijing, San Francisco and a few other interesting places present 25 completed demos, including 15 open-source projects.

All of the demos at this year’s Tubi-a-thon were outstanding. Four received awards.

• Best OSS Contribution — Multi-Viewpoint Video Player
• Editor’s Choice — KubeScript
• Tubi-a-thon Audience Favorites — Tubi Terms and What I Should Watch

Best OSS Contribution — Multi-Viewpoint Video Player

People’s viewing modes are likely to change now that VR/AR devices are so popular. Videos like 360 full-motion, multi-view, and volumetric all have possible implementations. For this Hackathon, we made a multi-view video player for the web.

In this project, we verify the multi-view player based on the existing API of the browser, improve video playback for a smoother viewing experience, analyze traffic and memory consumption, and estimate the technical difficulties of engineering.

Our initial preference for building the web app was to use OCaml or Rescript because of the static analysis of the compiler each one provides, but there were time constraints to consider.

With two days left to complete the project, we chose Javascript to build the web app. Using Javascript for the first time was not easy. There were a lot of new things we had to learn before we could start developing the multi-view video player for the web.

Working with multiple web browsers was another challenge because web browsers do not all support the same features. We had to make tradeoffs when selecting an API to support all the web browsers in the project.

Another issue that with the web browsers was that each one had a maximum number of allowed parallel HTTP connections. This was a problem because we wanted to make more concurrent requests available when users interact with the playback for a smoother experience.

Our solution was to make a larger buffer on the client side, then preload the content to avoid exceeding the connection limitation.

Project Tools

We also used Kaitai Struct, Protobuf and Golang to build the media index for the new format.

Core Design

Our core design included:

• A new video container format to mix multiple video streams.
• Synchronized multi-camera audio and video.
• Multimedia broadcast control based on WebCodec.

Demo and Code

You can view the full demo and project code here.

Editor’s Choice — KubeScript

The Kustomize transformer transforms one Kubernetes resource object into another. Patch is a popular transformer because programmers can write a series of basic Kubernetes resource files in each project and then add specific patches for each execution environment based on these files.

The Kustomization Declaration file was also used as a patch to modify resource files. This made it possible for the patch tree to modify the final declared object, layer-by-layer.

Overall, the Kustomize design was complex because when the number of projects increased, or the resource files became too large, it took additional time to edit and understand the patches.

Example:

The application root directory has three folders: base, staging, and production. Each folder stores the basic Kubernetes resource files, test environment patches and production environment patches. There are dozens of independent project folders under each folder that store their own resources. When a programmer wants to modify a project, they must navigate to the project folder that is under these three main folders and then jump back and forth to piece together the final resource statement from many patch files.

Completing this project was a challenge because Kustomize proved to be incompatible with large-scale, multi-team programming and projects. We ultimately found a solution that covers the core features of a continuous deployment system in the ArgoCD open source library gitops-engine. We tweaked the engine so that it could handle KubeScript files, and finished just in time for the Hackathon.

Project Tools

The tools we used in this project include:

• Deno — Used for Kubescript manifest writing, and for its Typescript built-in support.
• Golang — Used for writing the continuous deployment agent.

Core Design

Although Kustomize designs a domain-specific language (DSL) based on a YAML file format to express more complex operations, we decided to go with TypeScript because its expressive power is good, and because we did not need to learn a new domain language. We also think Typescript is an excellent module design that is suitable for large-scale programming.

Demo and Code

The following is a short demo.

Go here to view the full demo and the project code.

Audience Favorite Hack Winner — Tubi Terms

The rollout of Tubiverse was another highlight at the 2023 Tubi-a-thon. Tubiverse is a universal glossary of terms and acronyms that is so expansive that it eliminates the need for Team Wiki pages, onboarding pages, spreadsheets and other distributed sources of information. Tubiverse is a place for everyone to learn and share new words and phrases that we fondly refer to as Tubi Terms.

We had three primary goals for this project:

• Make Tubi Terms easily accessible so that anyone can add, edit, or view content.
• Ensure there is a seamless integration between Tubi Terms and other systems.
• Acknowledge content contributors by adding their names to the page of the added or updated term, and also to the Top Contributors page.

Keeping Tubiverse up-to-date with new and edited content requires a collaborative effort from everyone who uses Tubi Terms when speaking, writing emails, or messaging in Slack.

You can help keep Tubiverse up-to-date, too. If you are in a meeting and hear a new Tubi Term for the first time, or if there is a Tubi Term definition that isn’t quite right, share your knowledge by updating Tubiverse.

Project Tools

The client tools we used for this project include:

• React — Tubi Engineering’s premier choice in web development.
• React Query — API data management tool.
• TypeScript — Ensures interface contracts.
• Semantic UI — Provides lots of user interface components.

The server tools we used in this project include ExpressJS and MongoDB. Both are excellent choices because of how well they work with a NodeJS-based backend service tech stack.

Core Design

Our core design has the following:

Excellent Reach Ability — The Tubiverse website is set up to display the terms most commonly used upfront. You can quickly find a term by searching, filtering, labeling, and quoting.

Rich Expressive Ability — Each Tubi Term includes a description that is written in Markdown and attributes that are useful for classifying terms. There are also emojis to visually express your feedback.

Good Collaboration — The success of Tubiverse depends on all of us. Active participation is key because only when everyone builds it, can everyone share it.

Demo

Here’s a demo of our project.

Audience Favorite Hack Winner — What I Should Watch

We wanted to work on a Hackathon project that would improve the user experience when browsing on the Tubi homepage. We decided to create a Chatbot using ChatGPT to target the problem of users not finding something to watch.

We chose to create a Chatbot because we realized new and existing users leaving the Tubi Homepage when their browsing results did not contain content titles that interested them.

We created the Chatbot to do the following:

• Generate creative responses to prompts such as a question in a text message.
• Predict the next word in text that someone is typing. For example, the title of a video in a browser.

Now, when users browse the homepage for more than x seconds, our Chatbot helps them to find titles of content that they want to watch.

Project Tools

One tool that we used in this project was OpenAPISwift, an open source API wrapper that lets us send and receive user texts. We search the user texts for titles to map to our content objects.

Core Design

Our core design consists of:

• Hook OpenAI API as the bot component.
• ChatGPT engine as the chat component.
• Tubi iOS app as an abstraction layer to interface between the two components.

Demo

The following is a demo of our project.

Join us

This year’s Tubi-a-thon was our best hackathon yet. All of the participants received swag and the winners also received gift cards. Everyone had a great time. Tubi is a fun place to work. It’s also challenging and rewarding. Right now, Tubi is hiring! Why not check us out? It’d be great to see you at next year’s Tubi-a-thon.

Many thanks to Tyr Chen, lilac, Hailong Geng, Sara Hender and the other members of our Engineering team who equally contributed to the writing of this blog.