Introduction

The Player is the playback control of cells that display audio content, such as podcasts: it lets users start the audio right from the cell, without opening a detail view. It is a control, not a marker: the icon that only signals playable media, without controlling it, is the Play.

The Player stays in sync with the app's audio player: starting a sound from a cell opens the mini-player, and the two keep reflecting each other during playback.

Anatomy

The icon and the timer

The Player is a play or pause icon and a timer, side by side. The icon carries the interaction; the timer tells how long the episode is, and follows playback once it has started.

Properties

Two variants

The Player can be displayed in two modes. In the first, it sits in a dedicated background block, which makes it visually distinct. In the second, it is integrated directly into the interface, without any background separation: the icon lives in a small badge of its own, and that badge is always round.

Shape

On the variant with a background, the Shape atom applies to the block, from Sharp to Round, and in Round, the block becomes a pill. On the variant without a background, the badge of the icon stays a circle whatever the shape of the app.

Color

The play icon and the pause icon each have their own color, and so does the timer. On the variant with a background, the color of the block can be customized too.

Background

On the variant with a background, the block is black at 50% opacity with a blur by default, like the Play: the icon and the timer stay readable over any picture, and what is underneath shows through, out of focus.

Layout

Size and spacing

These values are identical from one device to another. On the variant with a background, the icon sits in a 24px frame, 2px from the timer, and the block wraps them with 4px above and below, 8px on the left, 12px on the right. On the variant without a background, no additional padding applies, and the gap between the icon and the timer grows to 8px. By default, the timer is written in the system font, at 13px. Its font can be customized.

Placement

The Player's place depends on its variant: with its background, it anchors in the bottom-left corner of the media; without it, it sits at the bottom of the cell, on the left, on the same row as the actions.

Behavior

The timer

By default, the timer displays the total duration of the episode, in minutes and seconds only when the podcast is shorter than an hour. While the sound plays, it shows the progress of the audio, in real time. And when an episode has been partly listened to and is not the active one, the timer shows the remaining time instead: 1h12 left, 12 min left, 42s left. Once an episode has been listened to almost to the end, the timer goes back to the total duration.

Play and pause

When the sound is not playing, a tap on the Player launches it and opens the mini-player. When it is playing, a tap pauses it and updates the mini-player. The cell and the mini-player stay in sync. Whether users pause or resume from either side, switch tracks, move the progress bar or close the mini-player, the timer of the cell always reflects the current state.

When playback is not available

Playback can be unavailable: paid content, a file error, a missing audio source, or, in the Favorites, an episode still downloading. The Player is then disabled: the timer shows the duration grayed out, or --:-- when the duration itself is unknown.