LiquidTube

The Team Liquid video site would automatically pull in Twitch clips from Team Liquid players. This would provide fans with easy access to the best Team Liquid gameplay footage.

Comment

Introduction

My hackathon project is a platform that allows Team Liquid to effortlessly capture, store and showcase the highlights of their huge roster of players.

The backend database I built helps automate most of the process, meaning all the players need to do is stream like they normally do and their videos will automatically be stored and categorized by player.

On top of this, the frontend of the platform also provides additional opportunities for sponsorship revenue and team growth. By generating additional traffic and gathering analytics from the videos, Team Liquid can find new ways to monetize and continue to grow their longstanding relationships with partners like Verizon, IMC, SAP, Alienware, etc.

Overall, this hackathon project is a great opportunity for Team Liquid to expand their worldwide esports presence and make it easier to share the amazing skills of its players with the world. It was an exciting project for me, as it was my first hackathon, and I am not a professional software engineer by any stretch, so I am proud to be a part of it and learned a lot along the way!
I'm confident that this project will provide a great boost to Team Liquid's marketing efforts, without the sheer amount of hours it would otherwise take with such a prolific roster.

Thanks for considering my hackathon submission!

--optimal prime

The Process

Although I've been involved in esports as a competitor and content creator for well over a decade, I had to familiarize myself with TL's current web presence and roster.

Since I have a background in content creation, it was easy for me to see that it could be challenging for TL to truly maximize the impact that the videos of their players could have, without making an investment in either manpower or software.

That's when my hackathon project idea really began to take shape. I wanted to develop a solution that would generate maximum results with minimal effort from Team Liquid. I know firsthand how deceptively difficult it can be to produce consistent high quality content, especially when dealing with such a huge roster of players.

While there might be other entries that have more flashy features, I'm confident that my hackathon project will provide Team Liquid with a rock-solid foundation to expand their current content production efforts.

My goal was to build something that was both practical useful to TL, the players, the fans, and TL's partner for years to come.

The Features

At the heart of the project is a backend database designed to automate most of the video capturing, storage, and distribution process. I always strive to be as efficient as possible, while keeping costs to a minimum.

Having a solid backend is critical when producing content on a large scale because you need to be able to aggregate and organize the videos in a content management system (CMS), otherwise you may end up with a video library that's too difficult to navigate and not get enough of it out there. Too many people spend far too long simply downloading the assets before even getting started on the creative part.

I originally planned to make a desktop video site, but simply didn't have enough time, as I did the entire project myself. Plus, with the world steadily (but yet massively) embracing short form content, I figured it was more pragmatic to focus on mobile. YouTube is going to start their monetization program for YT Shorts in February, so this could give TL a huge advantage head start over the countless other creators that are going to wait until February to even get started.

How I Built It

Since i'm not a professional software engineer, I can't rely on raw coding skills to do these types of projects, especially on such a short time frame. I also don't even know very many people in this line of work, so I did everything myself.

The backend runs on Airtable (on the free plan). I used yt-dlp to download the clips from Twitch, then applied some post processing to embed the metadata into the mp4 files themselves. I used the no-code tool Make to call the Twitch API, but there's still a degree in difficulty in running everything on the command line on a cloud server.

I definitely underestimated just how many people are on the TL roster. I hate doing tedious work and my web scraping skills weren't good enough to just pull all the players from the web site, so I ended up adding everyone on the TL Twitch "team page" to the database, though it soon became clear that there wasn't enough time to pull in every clip from everybody, so I decided to focus mostly on 2022.

After getting the clips in Airtable, I used AssemblyAI to generate transcripts, .SRT subtitles, and other metadata that could be beneficial to all involved, not just those with hearing issues. That was a bit of a challenge as well, as even though I'd been trying to learn AssemblyAI for the past few months, I had never gotten it to the point of being able to automagically process clips via Make after using yt-dlp to pull them down.

Along the way, I researched different video players and platforms before ultimately settling on JW Player. Why bother hosting videos yourself when YouTube is free? Because you never know when something out of your control goes and wipes out your YouTube/Twitch/wherever channel and it would be a shame to lose all that hard work and effort.

I also figured that by diligently building up the TL video library, there could be a lot of future revenue and value for longstanding partners like Verizon, SAP, Alienware, IMC etc. So I chose JW Player because it can insert video ads quite easily. Unfortunately, I wasn't able to get that part done in time, but I'm sure someone else can figure that out quite easily.

I also considered using this video hosting platform Viloud for this, but there was no API available and I was trying to minimize the manual labor of clicking as much as possible. So instead, I chose Glide which is a no-code tool I've used a little bit before to turn an Airtable database into a fully functioning mobile and web app.

By this time, I was cutting it pretty close, but I thought I had enough time because I was able to get a Viloud-hosted video running on Glide within the mobile app on Friday evening.

The Deadline Looms

Since I thought I had the major hurdles out of the way, I wasn't too worried about finishing in time because I knew that Make could get the 1600+ videos pushed through AssemblyAI and into JW Player quite quickly. But then when I actually tried the JW Player inside Glide, it didn't work! There was something about the way Glide interprets embedded script that stopped me in my tracks for hours today.

Eventually I found a workaround and tricked it into reading the JW Player script, but I'm still not happy with the way it handles the video. I do think it's a step up from just playing back the raw mp4 files (which works without issue) because you can customize JW Player to skip forward and backwards at shorter than 10 second intervals.

This is important because when you're actively studying a match to improve, you don't want to waste extra time scrolling back and forth on YouTube trying to find the critical moment. It seemed worth it to figure it out now so that Team Liquid pro players and aspiring esports competitors alike could benefit from having an esports-optimized video player for years to come.

Unfortunately, Glide threw a monkey wrench in those plans with the way it handles embedded scripts, so that will have to wait for another time.

As luck (or fate?) would have it, we got a small time extension which allowed me the extra time needed to tweak the frontend a bit, as I really didn't anticipate Glide not working with JW Player after I'd just had it working in an iframe on Friday.

I also didn't imagine getting locked out of my VPS via SSH for hours yesterday, as a poorly timed Ubuntu upgrade lead me to needing to switch providers and give PythonAnywhere a try (which worked surprisingly well with yt-dlp to get the files off Twitch and processed through AssemblyAI).

PHEW okay this was longer than I expected. Thanks for getting this far, hope you see the value in the project, it was fun and I learned a lot!

Built With

Share this project:

Updates