Repository navigation
feat(media): set the volume from a panel over the mute button - #279
Conversation
Latest result Pull request merged. Final answersSession Pull request merged. Session Waiting for GitHub merge request cb806f1b-834c-47c4-9a20-e6cb3c0ff973. Session Pushed a44802a, resolving the merge conflict while preserving the volume panel and typeset video fixes. Pullfrog’s reverse-navigation and Codex’s short-video findings remain fixed; both threads are resolved. Media `vp test run test`: 14 passed. Focused Playwright: 4 passed. Focused lint, formatting, and `git diff --check` passed. Awaiting hosted checks. Session Pushed a44802a, resolving the merge conflict while preserving the volume panel and typeset video fixes. Pullfrog’s reverse-navigation and Codex’s short-video findings remain fixed; both threads are resolved. Media `vp test run test`: 14 passed. Focused Playwright: 4 passed. Focused lint, formatting, and `git diff --check` passed. Awaiting hosted checks. Session Pushed a44802a, resolving the merge conflict while preserving the volume panel and typeset video fixes. Pullfrog’s reverse-navigation and Codex’s short-video findings remain fixed; both threads are resolved. Media `vp test run test`: 14 passed. Focused Playwright: 4 passed. Focused lint, formatting, and `git diff --check` passed. Awaiting hosted checks. Session Pushed a44802a, resolving the merge conflict while preserving the volume panel and typeset video fixes. Pullfrog’s reverse-navigation and Codex’s short-video findings remain fixed; both threads are resolved. Media `vp test run test`: 14 passed. Focused Playwright: 4 passed. Focused lint, formatting, and `git diff --check` passed. Awaiting hosted checks. Session Pushed a44802a, resolving the merge conflict while preserving the volume panel and typeset video fixes. Pullfrog’s reverse-navigation and Codex’s short-video findings remain fixed; both threads are resolved. Media `vp test run test`: 14 passed. Focused Playwright: 4 passed. Focused lint, formatting, and `git diff --check` passed. Awaiting hosted checks. |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
Reverse keyboard navigation skips the new volume control, so this accessibility regression should be fixed before merging.
Reviewed changes Checked the new media volume panel across its generated markup, runtime synchronization, responsive styling, documentation, and browser/package test coverage.
- Volume control markup Adds a range input in a floating panel grouped with the mute button for audio and video players.
- Media synchronization Mirrors
volumeandmutedinto the slider, accessibility text, icon state, anddata-muted, including zero-volume unmute behavior. - Responsive interaction Opens the panel for pointer and keyboard focus, suppresses it on coarse/no-hover devices, and handles RTL and reduced motion.
- Coverage and documentation Describes the interaction and tests pointer use, forward tabbing, volume updates, and touch suppression.
gpt-5.6-sol ｜ 𝕏
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 92ca9c924c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
comark-annotate
comark-badge
comark-cards
comark-carousel
comark-cast
comark-charts
comark-chat
comark-chips
comark-cjk
comark-code
comark-code-notes
comark-colors
comark-comments
comark-critic
comark-deflist
comark-details
comark-diagrams
comark-diff
comark-embed
comark-fields
comark-figure
comark-file-tree
comark-footnotes
comark-github
comark-icon
comark-include
comark-keys
comark-links
comark-linter
comark-magic-move
comark-mark
comark-mathml
comark-media
comark-metrics
comark-outline
comark-properties
comark-qr
comark-quiz
comark-reading-time
comark-sources
comark-steps
comark-table
comark-tabs
comark-tests
comark-ui
comark-xref
comark-zoom
commit: |
There was a problem hiding this comment.
ℹ️ No new issues found in this increment; the existing review disposition is unchanged.
Reviewed changes Checked the vertical-slider update since the prior Pullfrog review.
- Reoriented volume control Centered the panel above Mute and changed the range to a bottom-to-top vertical slider.
- Adjusted browser styling Added engine-specific vertical track dimensions and WebKit thumb alignment.
- Updated interaction coverage Changed the pointer path and keyboard assertion to exercise the vertical control.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes Checked the keyboard-accessibility and short-video fixes added since the prior Pullfrog review.
- Restored reverse navigation Kept the volume slider in sequential focus order while visually closed and added
Shift+Tabcoverage for both video and audio controls. - Exposed the full vertical range Allowed the volume panel to extend above short videos while preserving rounded video corners, with coverage for reaching the full-volume endpoint.
- Preserved closed-panel interaction Disabled pointer events while the opacity-hidden panel is closed and updated pointer assertions around the vertical layout.
gpt-5.6-sol ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes Checked the merge reconciliation added since the prior Pullfrog review.
- Preserved the typeset layout fix Kept
margin:0on the wrapped video so page typography cannot push it down and crop its bottom edge. - Preserved the volume overflow fix Retained the inherited video radius and unclipped wrapper so the vertical volume panel remains reachable above short frames.
- Kept both regressions covered Confirmed the existing typeset flush-frame test and short-video full-volume test exercise the merged behaviors.
gpt-5.6-sol ｜ 𝕏
The player only had a mute button, so a reader couldn't set how loud it plays. This adds a vertical volume slider in a small panel above the mute button.
How it shows
writing-mode: vertical-lr, silent at the bottom), like YouTube's and Netflix's. The seek bar keeps its width, so nothing in the bar moves. Over a video, the panel takes about 10rem of height from the bottom edge, so a video shorter than about 160px clips its top.:focus-visible) reaches the button. A mouse click on mute doesn't leave it open. A transparent strip covers the gap between the button and the panel, so the pointer can cross it without the panel closing.scale .96 → 1from its bottom edge, next to the button,150ms cubic-bezier(.32,.72,0,1). It closes faster (100ms ease-in). It's a CSS transition, so it can reverse partway through. Withprefers-reduced-motionthere's no transition.(hover:none)or(pointer:coarse). Phones set the volume with their own buttons, and iOS ignoresmedia.volume.How it behaves
ArrowUpandArrowDownmove it in 5% steps;HomeandEndgo to silent and full. It reads as "95%".Checks
vp test run packages/media: 14 passed, including a new markup assertion.playwright test e2e/media.e2e.ts: 9 passed in Chromium, and the volume test passed in Firefox (--browser=firefox). WebKit doesn't launch on this machine, so Safari's vertical slider and thumb offset are unchecked. A new test covers hover, crossing the gap, clicking to zero, Unmute from zero, and the Tab path. The touch test now also checks that the panel is gone.pnpm readylocally; CI runs it.