Skip to content

Player: Redesign the playback speed menu#1303

Closed
AKnassa wants to merge 3 commits into
Stremio:developmentfrom
AKnassa:feat/playback-speed-menu-redesign
Closed

Player: Redesign the playback speed menu#1303
AKnassa wants to merge 3 commits into
Stremio:developmentfrom
AKnassa:feat/playback-speed-menu-redesign

Conversation

@AKnassa

@AKnassa AKnassa commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

What this does

Replaces the old vertical list of speed options in the player with a more focused, modern control panel for adjusting playback speed.

Why

The previous menu was a plain column of numbers — functional, but it made the common adjustments feel clunky and gave little sense of the current state. This brings the speed control up to the polish people expect from a video player.

The redesign, from a UX/UI standpoint

The old menu treated every speed as an equal entry in a scrolling list, which meant the same effort to nudge slightly or jump to a favorite, and no clear feedback about where you currently were.

The redesign reorganizes the same control around how people actually adjust speed: a large, live readout anchors the panel and updates as you change the value; with a "Normal" cue at 1× so you always know your baseline at a glance. Underneath, a −/slider/+ row handles precise, fine-grained tuning, while a row of preset chips gives one-tap access to the everyday speeds, with the active one highlighted so the current state is always visible.

The result separates the two real tasks; precise tuning and quick jumps; instead of forcing both through one long list, and the whole panel is touch-friendly and adapts cleanly across phone sizes and orientations.

What changed

  • New slider + stepper + preset-chip layout for the speed menu
  • Live speed readout with a "Normal" label at 1×
  • Active preset is highlighted for clear state feedback
  • Responsive across phone widths and landscape/portrait; larger touch targets on touch devices; respects reduced-motion
  • Removed the now-unused old option-list sub-component

How to see it

Open any video in the player → click the playback-speed control.

playbackMenu

AKnassa added 3 commits June 13, 2026 23:23
Replace the vertical rate list with a live readout, a slider between
minus/plus steppers, and preset chips for quick selection. Reuses the
shared Slider and Button; removes the old Option chip.
Fluid width and a single-row chip grid for phones, a compact 3-row
grid in short landscape so chips no longer clip, larger touch targets
on coarse pointers, and a prefers-reduced-motion guard.
@AKnassa
AKnassa marked this pull request as ready for review June 14, 2026 06:11
@AKnassa AKnassa changed the title Redesign the playback speed menu Player: Redesign the playback speed menu Jun 14, 2026
@kKaskak

kKaskak commented Jun 14, 2026

Copy link
Copy Markdown
Member

this is literally a repeatetive pr? there is already one open for this 😭

@AKnassa

AKnassa commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

Ah, my bad; I genuinely didn't see #1291 was already open when I started this, sorry for the duplicate

It's already approved, so it should absolutely land first; no reason to hold it up, and I'm happy to close this in its favour.

One thing I did hit while building mine that might be worth folding in: on phones the new panel doesn't quite fit. It's a fixed width: 30rem, and the player's .menu-layer caps at max-width: calc(100% - 4rem) with overflow: auto; so on a ~390px portrait screen the panel overflows and the slider ends up partly off-screen / horizontally scrollable (the old 14rem menu fit fine). A max-width: 100%, letting the preset row wrap, and dropping the fixed height sorts it out.

Two smaller things I noticed too: the active preset isn't highlighted anymore (the old menu showed which speed you were on), and a few presets (0.25/0.75/…) sit off the slider's 0.1 step grid so they snap on the next drag.

If it's useful, I'm glad to put up a small follow-up on top of #1291 with the responsive fix + the active-state highlight once it's merged, happy to help rather than duplicate 🙏

@kKaskak

kKaskak commented Jun 14, 2026

Copy link
Copy Markdown
Member

Ah, my bad; I genuinely didn't see #1291 was already open when I started this, sorry for the duplicate

It's already approved, so it should absolutely land first; no reason to hold it up, and I'm happy to close this in its favour.

One thing I did hit while building mine that might be worth folding in: on phones the new panel doesn't quite fit. It's a fixed width: 30rem, and the player's .menu-layer caps at max-width: calc(100% - 4rem) with overflow: auto; so on a ~390px portrait screen the panel overflows and the slider ends up partly off-screen / horizontally scrollable (the old 14rem menu fit fine). A max-width: 100%, letting the preset row wrap, and dropping the fixed height sorts it out.

Two smaller things I noticed too: the active preset isn't highlighted anymore (the old menu showed which speed you were on), and a few presets (0.25/0.75/…) sit off the slider's 0.1 step grid so they snap on the next drag.

If it's useful, I'm glad to put up a small follow-up on top of #1291 with the responsive fix + the active-state highlight once it's merged, happy to help rather than duplicate 🙏

ok thank you

@kKaskak kKaskak closed this Jul 17, 2026
@kKaskak

kKaskak commented Jul 17, 2026

Copy link
Copy Markdown
Member

implemented in the prev pr and its ready for merge thanks regardless

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants