Plex.tv
A complex React front‑end development for Plex's web‑based media library and player, helping users browse, manage, and play large personal video, audio, and image collections across devices.
In Detail
Historically, Plex's web interface has lagged behind its counterpart native applications. Users could access their media through native apps, but browser‑based access was constrained by web platform capabilities and by 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 later moved into larger React‑led pieces, including the removal of Handlebars and a new media player capable of handling both audio and video from a single media player component.
Library Screen
Plex libraries can 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 and make large collections easier to browse.
Media Player
A scratch‑built media player was central to expanding browser‑based support across devices and providing an experience closer to Plex's native players. 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.
- "
John Kavanagh is the best front‑end developer I've worked with. His knowledge of HTML, CSS, and JavaScript is impeccable and he's always happy to help out and share his knowledge when his expertise is required.
John's a great guy to work with and I have and will continue to recommend him to people who need someone who really knows what they are doing."
