Projects

Plex.tv

A complex, web‑based media library and player front‑end built in React. This sits atop a self‑hosted media server and allows users to view their media anywhere ‑ and on almost any device ‑ with a browser and internet connection.

Screenshot of the Plex.tv website; part of John Kavanagh's development portfolio.

In Brief

Plex started life as a fork from the XBMC (now known as Kodi) project: a client‑server media streaming platform offering users seamless access to their personal media collections. At the heart of Plex is its user‑friendly front‑end application, which ensures that users can easily navigate their media library and enjoy high‑quality content regardless of whether they access it via their phone, tablet, or laptop.

My Role

As part of 'Plex Labs', I played a role in the development and optimisation of the Plex cross‑platform web application, enabling users to manage, organise, and play their media from anywhere. Primarily using React, my work focused on enhancing the user interface and experience.

plex.tv
  1. Bootstrap
  2. HTML5 & Less
  3. React & ES8
  4. webpack
Illustration of a band on stage with 'The Plex Pistols' banner behind them. A play on the Sex Pistols.

In Detail

Historically, the web interface for Plex had been a weak point in their offerings. Users could use apps to access their media, but the capabilities of web browsers themselves limited web‑based access. This had improved over the years but remained an issue for users, so a comprehensive rebuild was undertaken to improve user access to their media anywhere that they had a browser and an internet connection.

Initially built in Handlebars with Backbone ten years ago, the dispersed development team behind Plex (including many remote freelancers) began to introduce React into the mix as native browser capabilities began to improve.

This began with subtle yet straightforward UI enhancements, such as introducing nice animation pieces, micro‑interactions, and features such as zoom for media grids. By the end of the following year, the platform had undergone a comprehensive and complete reworking, discarding Handlebars altogether and introducing some of the meatier pieces of work we undertook, including an all‑new media player handling both audio and video from a single component.

Library Screen

Plex libraries can easily surpass many thousands of items, so organising them becomes something of a logistical challenge. Using categories (pre‑defined by the user when administering their server), the grid layout is fairly minimal whilst allowing the user to filter further and set the layout, zoom level, and the number of items per screen to their preference.

Screenshot of the Plex web application Movie library interface, desktop screen size.Screenshot of the Plex web application TV library interface, desktop screen size.

Details Screen

At the core of the Plex offering is tight integration with several metadata agents. This means that when a media file is scanned into the library, metadata is retrieved from an online source (such as The Movie Database) and used to bring the library to life. Posters, imagery, cover art, plot summaries, and more are then used to populate the web app library grid and detail screens to offer a rich media experience.

Screenshot of the Plex web application The Simpsons Episodes list interface, desktop screen size.Screenshot of the Plex web application Onward movie details interface, desktop screen size.

Media Player

A scratch‑built media player was central to expanding browser‑based support across devices. This was a job made (moderately) more straightforward with the widespread adoption of HTML5 and standardised media formats; the server could now transcode media specifically for the web app with a little browser sniffing.

Offering an experience extremely close to that of a native player, the media player supports both audio and video and includes some clever customisation storage back on the server so that you can pick back up where you left off, even on a different device, during a different session, or even on an altogether different version of the Plex app.

Screenshot of the Plex web application video player, showing the title screen from Quantum of Solace, desktop screen size.Screenshot of the Plex web application video player, showing part of the car chase from the beginning of Quantum of Solace, desktop screen size.
All projects Get in touch

See what’s
possible.

This is just a snapshot of how I work: clean builds, precise code, and clear results. If you’d like the same to bring your project to life. Get in touch.

Get in touch