Skip to content

Cozystream

Overview

A self-hosted media server I designed and built for my household, and my girlfriend's parents who live across the country.

Type

Product Design

Engineering

Year

2026

Why not just use Plex?

Plex mixed ads into my library, charged for remote streaming, and ran everything through its cloud. I wanted my movies, shared with a few people, kept local.

Cozystream browse page showing a poster grid of movies

Just my library. Nothing else.

Three users, three contexts

Me. The admin. I add movies, organize collections, and fix metadata.

My partner. Open, scroll, pick a movie, resume where she left off.

Her parents. Not technical, watching on an LG TV with a remote. If it doesn't just work, they'll call us.

Design goals
  1. The library is the UI. Posters front and center, minimal chrome around them.
  2. Zero learning curve. If you've used Netflix, you already know how this works.
  3. Built for a TV remote. If it works with four arrow keys and an OK button, it works for everyone.
  4. Make it feel like yours. Themes, colors, fonts, and spacing are all adjustable. A personal media server should feel personal.
The UI should feel like yours

Six themes, eight accent colors, four font controls, and layout settings for card size, spacing, and density. Every change applies instantly. The accent picker checks contrast and suggests alternatives when a color doesn't read.

Cozystream appearance settings with theme grid, accent picker, and font options

Appearance settings: theme grid, accent picker, font options

Cozystream browse page shown in different color themes

Same view, different themes

Cozystream DVD Case mode with 3D case spines and lifted poster on hover

DVD Case mode

DVD Case mode is a nod to browsing a shelf. It swaps the flat grid for 3D cases with spines, and hovering lifts the poster off a label underneath. No more functional than the default, just more physical.

How it comes together
Browse

Poster rows. Some I curate ("Studio Ghibli," "Watch with Mom"), some generate themselves by genre, director, or decade.

Cozystream browse page with collection rows and poster grid

Collection rows with the full grid below

Detail page

Three layouts, same hierarchy. Backdrop mode adds blur and tint controls so text stays readable over any image.

Cozystream detail page with full-bleed backdrop image layout

Backdrop layout

Cozystream detail page with contained poster header layout

Header layout

Quick metadata editing

Cozystream doesn't always pull the right metadata. Search for the correct movie, select it, done.

Searching and swapping to the correct movie

Poster selection

The default poster isn't always the best one. Pick from a set pulled off the web, with no uploading or file hunting.

Choosing from available poster options

Player

Controls hide during playback and come back on mouse movement. When the browser can't play a file natively, the server transcodes it to HLS with FFmpeg. The user just presses play.

Controls appear on hover, then fade out

Smart TV

In progress. A visible focus ring moves between elements with the arrow keys, running as a web app inside LG's webOS and Samsung's Tizen browsers. Screenshots coming soon.

How I built it this fast

I designed and built Cozystream, using Claude Code as part of my workflow across Angular, Node.js, FFmpeg, and SQLite. The layout system, customization approach, TV navigation, and information hierarchy are my decisions. Working this way, I can design a feature and be using it the same day.

Still building
  • Getting it in front of my partner and her parents, then redesigning around what they tell me
  • A guided onboarding flow for non-technical first-time setup
  • A real responsive pass for phone and tablet
  • More customization options
  • An accessibility audit beyond the contrast checker
© Brian Sekelsky