Skip to content

VideoPress: Move caption manager outcome messages to snackbars#50430

Open
obenland wants to merge 2 commits into
trunkfrom
update/videopress-caption-manager-snackbar-notices
Open

VideoPress: Move caption manager outcome messages to snackbars#50430
obenland wants to merge 2 commits into
trunkfrom
update/videopress-caption-manager-snackbar-notices

Conversation

@obenland

Copy link
Copy Markdown
Member

Proposed changes

The VideoPress caption manager modal previously funneled every message — success confirmations, async/API failures, and form-validation errors — through a single inline <Notice> at the top of the modal. This splits that into two purpose-built channels:

  • Snackbars (new SnackbarList at the bottom of the modal) for transient outcomes and async/API errors: publish/upload/save/delete/download results, track-list and draft load failures, and "Subtitle text imported." Each bubble auto-dismisses after ~6s.
  • Inline notice (kept) for sticky form-validation the current action can't proceed past: "Choose a subtitle language.", cue-timing/overlap errors, "Add at least one subtitle cue…", "Paste subtitle text…", the upload-form payload error, and the dropped-file-type "Accepted formats:" rejection.

Implementation notes:

  • Adds a small use-caption-snackbars hook owning the { id, content }[] list with notify()/removeSnackbar(); SnackbarList renders inside the modal so bubbles sit above modal content with no editor z-index conflicts.
  • use-track-mutations takes a notify callback instead of setNotice; its pre-mutation notice-clears are dropped (snackbars self-expire).
  • Removes the now-unused NoticeState type.
  • The blocking discard/delete ConfirmationOverlay is unchanged — it's a dialog, not a notice.

Related product discussion/links

Does this pull request change what data or activity we track or use?

No.

Testing instructions

  • Edit a post, add/select a VideoPress video block, and open Manage subtitles from the block toolbar.
  • Success/async → snackbar (bottom of modal, auto-dismiss):
    • Add a track, paste a transcript, and Create cues → "Subtitle text imported." appears as a snackbar.
    • Publish a track / upload a subtitle file → success snackbar; the modal returns to the track list.
    • Trigger a failure (e.g. upload an invalid file that the server rejects, or delete/download with a network error) → the error shows as a snackbar rather than a top-of-modal banner.
  • Validation → inline notice (top of modal, sticky):
    • Click Publish with no language chosen → "Choose a subtitle language." stays inline until you fix it.
    • Publish with overlapping/invalid cue times → the cue error stays inline.
    • Drop an unsupported file type onto the modal → "Accepted formats: …" stays inline.
  • Confirm the discard/delete confirmation dialog still behaves as before.

https://claude.ai/code/session_017px3yqTVgtB3RJXZwB5yFk

The caption manager funneled every message — successes, async/API
failures, and form validation — through a single inline notice. Split
that into two channels: transient outcomes and async errors now surface
as snackbars rendered by SnackbarList at the bottom of the modal, while
sticky form-validation errors stay inline where the user is acting.

Adds a use-caption-snackbars hook to own the snackbar list, routes the
mutation hook and modal flows to notify()/setValidationNotice()
accordingly, removes the now-unused NoticeState type, and updates the
tests to assert moved messages on the snackbar list.

Claude-Session: https://claude.ai/code/session_017px3yqTVgtB3RJXZwB5yFk
Copilot AI review requested due to automatic review settings July 10, 2026 23:28
@obenland obenland requested a review from a team as a code owner July 10, 2026 23:28

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/videopress-caption-manager-snackbar-notices branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack update/videopress-caption-manager-snackbar-notices

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions

github-actions Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@github-actions github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Jul 10, 2026
@obenland obenland added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Jul 10, 2026
@jp-launch-control

jp-launch-control Bot commented Jul 10, 2026

Copy link
Copy Markdown

Code Coverage Summary

Coverage changed in 2 files.

File Coverage Δ% Δ Uncovered
projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx 222/248 (89.52%) 0.09% 0 💚
projects/packages/videopress/src/client/components/caption-manager-modal/use-track-mutations.ts 100/118 (84.75%) -0.74% 0 💚

1 file is newly checked for coverage.

File Coverage
projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts 9/10 (90.00%) 💚

Full summary · PHP report · JS report

The caption manager modal returns null while closed but stays mounted, so
its snackbar state survives close→reopen. An undismissed outcome or error
snackbar would reappear on the next open. Clear the list in the open-reset
effect, alongside the existing validation-notice reset.

Claude-Session: https://claude.ai/code/session_01R3bxjgvnb5f8KG4PuRksGg
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants