TechPrufer
Get started
Spotify
Spotify logoSpotify · Feature trail

TV Spatial Navigation

1 post · Apr 2023

What this trail covers

Spotify's TV Spatial Navigation system has been developed to address the lack of native support for directional input in hybrid web applications on big screens. The system evolved from a naive approach requiring manual navigation logic and wrapper components to a more streamlined DX using React Hooks. This allows for automatic detection of navigable elements and reduces DOM complexity, improving developer experience and maintainability.

All Spotify trails
  1. TV Spatial NavigationThis post details the development of Spotify's TV Spatial Navigation system. The first iteration involved creating NavNode and NavContainer React components to represent navigable elements and handle specific navigation behaviors like cyclic and blocked navigation. Limitations included manual navigation logic and convoluted DOM structures. The second iteration introduced a React Hook-based approach (`useFocusRef`) to simplify API usage, reduce DOM elements, and decouple business logic, improving developer experience and testability.