Plex.tv
A complex React front‑end development for Plex's web‑based media library and player, helping users browse, manage, and play personal video, audio, and image collections across devices.
In Detail
Historically, Plex's web interface had been one of the weaker parts of the product. Users could access their media through native apps, but browser‑based access was constrained by web platform capabilities and the complexity of playing personal media collections reliably across devices.
The web app had originally been built ten years ago with Handlebars and Backbone. As browser capabilities improved, the distributed Plex development team began introducing React into the front end, starting with targeted interface enhancements before moving towards a broader rebuild.
Early work included animation, micro‑interactions, and media‑grid zoom features. The platform was later reworked more substantially, removing Handlebars and introducing larger React‑led pieces, including a new media player capable of handling both audio and video from a single component.
Library Screen
Plex libraries can easily contain thousands of items, so browsing and organisation had to stay simple. The library grid used user‑defined categories, filtering, layout controls, zoom level controls, and item‑count preferences to help users navigate large media collections without overwhelming the interface.
Details Screen
Plex's detail screens rely on metadata agents that enrich scanned media with information from online sources such as The Movie Database. Posters, cover art, plot summaries, background imagery, and other metadata are then used across the library grid and detail views to create a richer browsing experience.
Media Player
A scratch‑built media player was central to expanding browser‑based support across devices. The work became more practical as HTML5 media support and standardised formats improved, allowing the server to transcode media specifically for the web app with some browser detection.
The player supported both audio and video and aimed to provide an experience close to a native player. Playback state and user preferences could be stored back on the server, allowing users to resume media across devices, sessions, and different versions of the Plex app.
