Automattic / Automattic/jetpack

Podcast player: improve on mobile

Open
#15,750 1 comment 0 reactions 0 assignees View on GitHub
[Block] Podcast Player Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Podcast block gives this on mobile width:

image

It's pretty but hard to use on mobile, unfortunately. :-(

- Hit-areas are so small that it's not meaningful. Buttons to speed track +/-30sec or +/-10sec is much more useful on mobile, as well long enough timeline to tap on.
- Volume isn't really needed on mobile. Folks just press device buttons.
- Play/pause is too small for tapping — works, but the hit area could be bigger than the icon is since there is space.
- Contrast difference in the timeline in outdoors on a small screen isn't enough. I'd argue it isn't enough on the desktop either.

Hiding volume (thus making space for timeline) and making play button slightly bigger would be already big improvements.

For comparison, here are a couple of competitors:

Squarespace

image

Apple

Screenshot 2020-05-11 at 22 28 04

@lessbloat

Contributor guide

Open the contributing guide

Research direction

No file or test is named in the issue; start by locating the Podcast block and its player entry point, then inspect the mobile layout and controls. Done means the mobile player has larger tap targets, a larger play button, no unnecessary volume control, more timeline space, and stronger timeline contrast.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, design, frontend, mobile-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.