feat(video): align React component with Marko and shaka-player v5 by HenriqueLimas · Pull Request #570 · eBay/evo-web

HenriqueLimas · 2026-03-19T01:32:15Z

Fixes #

Description

Refactor EbayVideo component to use declarative approach with createPortal for Shaka controls integration.
Implement missing control components (MuteButton, FullscreenButton, CurrentTime, TotalTime, RemainingTime, Report, Captions) using reusable useShakaControl hook.
Fix icon re-rendering issue and autoplay behavior to match Marko implementation.
@ebay/ebayui-core: Add accessible button wrapper for play button.
@ebay/skin: Add button reset styles for shaka-play-button.

Notes

Screenshots

Checklist

I verify all changes are within scope of the linked issue
I added/updated/removed testing (Storybook in Skin) coverage as appropriate

I tested the UI in all supported browsers
I tested the UI in dark mode and RTL mode

Refactor React video component to use declarative approach with createPortal for Shaka controls integration. Implement missing control components (MuteButton, FullscreenButton, CurrentTime, TotalTime, RemainingTime, Report, Captions) using reusable useShakaControl hook with flushSync for synchronous rendering. Fix icon re-rendering issue and autoplay behavior to match Marko implementation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

changeset-bot · 2026-03-19T01:32:20Z

🦋 Changeset detected

Latest commit: aacc479

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@ebay/ui-core-react	Patch
@ebay/ebayui-core	Patch
@ebay/skin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copilot

Pull request overview

Aligns the React EbayVideo implementation with the Marko version and Shaka Player v5 by refactoring Shaka UI integration to a more declarative, portal-based approach and adding missing control elements.

Changes:

Refactors @ebay/ui-core-react video to use createPortal + a reusable useShakaControl hook for Shaka UI controls.
Adds an accessible play-button wrapper in Marko and corresponding Skin button-reset styles.
Updates icon provider behavior to prevent re-render issues and refreshes/extends tests and snapshots.

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/skin/src/sass/video/video.scss	Adds reset styles for the Shaka play button within the video player.
packages/skin/dist/video/video.css	Regenerated dist CSS to include the new play button reset styles.
packages/ebayui-core/src/components/ebay-video/test/snapshots/test.server.js.snap	Updates snapshots for play icon markup (adds `width="64"`).
packages/ebayui-core/src/components/ebay-video/index.marko	Updates hidden icon markup to include explicit `width=64`.
packages/ebayui-core/src/components/ebay-video/component.ts	Wraps the play icon in an accessible `<button>` for keyboard/a11y support.
packages/ebayui-core-react/src/ebay-video/video.tsx	Major refactor: Shaka overlay setup, portal play button, new controls, autoplay event semantics, layout support.
packages/ebayui-core-react/src/ebay-video/reportButton.tsx	Removes legacy ReportButton implementation (replaced by Shaka control + portal).
packages/ebayui-core-react/src/ebay-video/controls/use-shaka-control.ts	Introduces reusable hook to register Shaka UI elements and bridge events/state into React portals.
packages/ebayui-core-react/src/ebay-video/controls/total-time-control.tsx	Adds Total Time control rendered via portal into Shaka UI.
packages/ebayui-core-react/src/ebay-video/controls/time-utils.ts	Adds shared time formatting helper used by time-based controls.
packages/ebayui-core-react/src/ebay-video/controls/report-button-control.tsx	Adds Report control rendered via portal into Shaka UI.
packages/ebayui-core-react/src/ebay-video/controls/remaining-time-control.tsx	Adds Remaining Time control for compact layout and live/VOD handling.
packages/ebayui-core-react/src/ebay-video/controls/mute-button-control.tsx	Adds Mute control with icon swapping based on muted/volume state.
packages/ebayui-core-react/src/ebay-video/controls/fullscreen-button-control.tsx	Adds Fullscreen control with icon swapping and support detection.
packages/ebayui-core-react/src/ebay-video/controls/current-time-control.tsx	Adds Current Time / LIVE control including “skip to live” behavior.
packages/ebayui-core-react/src/ebay-video/controls/captions-control.tsx	Registers Shaka’s built-in text selection control for captions.
packages/ebayui-core-react/src/ebay-video/controls.tsx	Removes legacy imperative Shaka custom controls implementation.
packages/ebayui-core-react/src/ebay-video/const.ts	Adds `DEFAULT_SPINNER_TIMEOUT`; minor config cleanup.
packages/ebayui-core-react/src/ebay-video/tests/render.spec.tsx	Updates rendering assertions to reflect new sizing/styling behavior.
packages/ebayui-core-react/src/ebay-video/tests/index.stories.tsx	Updates story defaults (removes `a11yLoadText`, width change).
packages/ebayui-core-react/src/ebay-video/tests/index.spec.tsx	Expands tests for portal play button, icon width, and autoplay behavior.
packages/ebayui-core-react/src/ebay-icon/icon.tsx	Adjusts Skin class naming to correctly reflect “-colored” sizing classes.
packages/ebayui-core-react/src/ebay-icon/context.tsx	Makes `IconContext` Set stable across re-renders via `useRef`.
.changeset/video-portal-play-button.md	Adds a changeset for patch releases across affected packages.

Comments suppressed due to low confidence (1)

packages/ebayui-core-react/src/ebay-video/video.tsx:245

isAutoPause is never set to true. In the action === "pause" branch you pause the video but don’t mark it as an automatic pause, so onPause(..., { auto }) will always report auto: false for action-driven pauses. Consider setting setIsAutoPause(true) before calling videoRef.current.pause() (and resetting after emitting).

    useEffect(() => {
        if (!videoRef.current) return;
        switch (action) {
            case "play":
                setIsAutoPlay(true);
                videoRef.current.play();
                break;
            case "pause":
                videoRef.current.pause();
                break;

saiponnada · 2026-03-23T22:51:05Z

+            playButton.classList.add("shaka-play-button");
+            playButton.setAttribute("aria-label", this.input.a11yPlayText || "Click to play");


Click is more focused on mouse users. Lets rename it to "play". Need refactor across multiple places on this wording.

+            playButton.classList.add("shaka-play-button");
+            playButton.setAttribute("aria-label", this.input.a11yPlayText || "Click to play");
+            playButton.onclick = () => {
+                this.video.play();


        }
    };


-                    style={style}
                    poster={thumbnail}
                    playsInline
                    muted={muted || false}


+            {shakaControlsContainer &&
+                createPortal(
+                    <div className="shaka-play-button-container">
+                        <button className="shaka-play-button" aria-label={a11yPlayText} onClick={handleOnPlayClick}>


    const handleOnPlayClick = () => {
+        // Remove play button from React tree before shaka player removes it
+        setShowInitialPlayButton(false);
        videoRef.current.play();
    };


+---
+"@ebay/ui-core-react": patch
+"@ebay/ebayui-core": patch
+"@ebay/skin": patch
+---


saiponnada

Few things I noticed. The focus ring is very light and I belive this is something we might not have control on(coming from shaka player). On marko story, the play button is kb focusable but doesnt invoke the action on pressing enter(React version works correctly).

saiponnada · 2026-03-23T22:51:05Z

+            playButton.classList.add("shaka-play-button");
+            playButton.setAttribute("aria-label", this.input.a11yPlayText || "Click to play");


Click is more focused on mouse users. Lets rename it to "play". Need refactor across multiple places on this wording.

…aults - Fix alignSeekbar null safety in React (remove non-null assertions, guard rangeContainer) - Fix muted prop default: `muted !== false` to match Marko behavior - Set isAutoPause before programmatic pause via action prop in React - Add explicit type="button" to play button in both Marko and React - Update a11yPlayText default from "Click to play" to "Play" (WCAG-aligned) - Remove dead defaultVideoConfig export from React const.ts Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

HenriqueLimas requested review from ArtBlue, LuLaValva and saiponnada March 19, 2026 01:32

HenriqueLimas self-assigned this Mar 19, 2026

HenriqueLimas added package: skin package: ebayui-core package: ebayui-core-react labels Mar 19, 2026

Copilot AI review requested due to automatic review settings March 19, 2026 01:32

Copilot AI reviewed Mar 19, 2026

View reviewed changes

saiponnada reviewed Mar 23, 2026

View reviewed changes

HenriqueLimas merged commit 5d5eaf8 into main Mar 30, 2026
5 checks passed

HenriqueLimas deleted the fix-ebay-video branch March 30, 2026 21:15

github-actions Bot mentioned this pull request Mar 30, 2026

ci: release #585

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(video): align React component with Marko and shaka-player v5#570

feat(video): align React component with Marko and shaka-player v5#570
HenriqueLimas merged 2 commits intomainfrom
fix-ebay-video

HenriqueLimas commented Mar 19, 2026

Uh oh!

changeset-bot Bot commented Mar 19, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

saiponnada Mar 23, 2026

Uh oh!

saiponnada left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saiponnada Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		playButton.classList.add("shaka-play-button");
		playButton.setAttribute("aria-label", this.input.a11yPlayText \|\| "Click to play");

Conversation

HenriqueLimas commented Mar 19, 2026

Description

Notes

Screenshots

Checklist

Uh oh!

changeset-bot Bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

saiponnada Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

saiponnada left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

saiponnada Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Mar 19, 2026 •

edited

Loading