Skip to content

fix(viewer): give a narrow video player's seek bar its own row above the buttons - #91

Merged
vite-hub[bot] merged 1 commit into
mainfrom
fix/video-mobile-controls
Oct 30, 2026
Merged

vite-hub[bot] merged 1 commit into
mainfrom
fix/video-mobile-controls

Conversation

@onmax

@onmax onmax commented Oct 30, 2026 •

Copy link
Copy Markdown
Member

On a phone the video viewer's control bar was squashed: the seek bar shared one row with nine buttons, the time and the volume slider, so it got 80 px at a 520 px player, and at 327 px (a 375 px phone) the row ran past the edge and cut off the last buttons.

The bar now follows the player's own width, through a container query on media-controller:

  • Below 672 px: the seek bar gets a control bar of its own above the buttons, like YouTube. The volume slider is hidden; mute stays, and phones have volume keys.
  • Below 448 px: the ±10 s buttons are hidden too, so play, time, mute, speed and full screen fit one row.
  • 672 px and wider: one row, as before.

The seek bar grows from 80 px to 325 px at 327 px, and from 80 px to 518 px at 520 px.

Before and after at 327, 520 and 900 px

Checked in Chromium with Drop's media-chrome and the component's Tailwind classes compiled by Drop's Tailwind, at three player widths. vp fmt --check and vp lint pass on the file.

Seek track and Markdown players. The track was --border on the bar and barely showed; it's now the foreground at 25%, as in comark-media. comark-ui moves to onmax/comark-ui#276's pkg.pr.new build (3d0d536), so a narrow video or audio player in a Markdown drop gets the same seek bar row and track. That build also has onmax/comark-ui#274, the zoomed screenshot's Copy in the zoom header, so the comark-annotate@0.7.2 patch that backported it is removed. It also brings the other comark-ui commits merged since the old pin (v0.7.3 and v0.7.4). vp test (378 passed) and nuxt typecheck pass.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 30, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-30T10:08:58.354151Z 6389ba0 PR opened
ℹ️ 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" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@vite-hub

vite-hub Bot commented Oct 30, 2026 •

Copy link
Copy Markdown
Contributor
Session Status Started Duration
Pending Completed Not started —
View session Waiting 2026-10-30T10:13:40.010Z 2m 23s

Latest result

Pull request merged.

Final answers

Session

Pull request merged.

Session

Waiting for GitHub merge request b5ea05f3-5914-4c88-ae81-c92973ad1316.

View session

Ready; no repair needed. Inspected the complete diff and all supplied review bodies; Pullfrog and Codex report no findings, and current-head checks passed. Direct node_modules/.bin/vp fmt --check and vp lint passed for ViewerVideo.vue; Tailwind compilation confirmed the 448px and 672px container breakpoints. Browser validation could not run because Playwright’s Chromium executable is absent. The working tree remains clean.

Session

Waiting for review checks before the next pass.

Session

Waiting for review checks before the next pass.

Session

Waiting for review checks before the next pass.

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes in ViewerVideo.vue, including the player-scoped responsive breakpoints and their interaction with Media Chrome's control-bar layout.

  • Player-width responsiveness — Makes media-controller a Tailwind container so controls adapt to the rendered player rather than the viewport.
  • Narrow seek layout — Moves the seek range to a full-width row and hides the volume slider below 672 px.
  • Small-player controls — Hides the ±10-second buttons below 448 px while preserving play, time, mute, speed, and fullscreen controls.
  • Wide layout preservation — Restores the existing single-row seek and volume controls at 672 px and wider.

Pullfrog  | View workflow run | Using gpt-5.6-sol | 𝕏

@vite-hub
vite-hub Bot merged commit c075dd5 into main Oct 30, 2026
2 checks passed
onmax added a commit that referenced this pull request Nov 1, 2026
…ws against the bar

The track was --border on the bar, barely visible. It's now the foreground at 25%, as in comark-media.
Ported from 9f99bdb, which was pushed to fix/video-mobile-controls after #91 merged.
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.

1 participant