feat(card): add videoLoop, videoAutoPlay, videoDataAttributes to cards#1494
Open
ieduardogf wants to merge 13 commits intomasterfrom
Open
feat(card): add videoLoop, videoAutoPlay, videoDataAttributes to cards#1494ieduardogf wants to merge 13 commits intomasterfrom
ieduardogf wants to merge 13 commits intomasterfrom
Conversation
Expose video customization props on MediaCard, CoverCard, and NakedCard when using videoSrc (replacing deprecated media prop). - videoLoop: control video loop behavior - videoAutoPlay: control autoplay (default: when-loaded) - videoDataAttributes: pass data attributes to the video element Refactor useVideoWithControls to accept object params for extensibility. When videoAutoPlay is false, show play button instead of spinner after load. Resolves WEB-2336 Co-authored-by: Cursor <cursoragent@cursor.com>
|
Size stats
|
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit ac0502f. |
Collaborator
Author
|
Example, playroom |
atabel
reviewed
Feb 17, 2026
src/card-internal.tsx
Outdated
| export type CardActionButtonSecondary = RendersNullableElement<typeof ButtonSecondary>; | ||
| export type CardActionButtonLink = RendersNullableElement<typeof ButtonLink>; | ||
|
|
||
| export type CardVideoProps = { |
Contributor
There was a problem hiding this comment.
do we need this export? I think it isn't used outside this file
Comment on lines
-444
to
-445
| if (videoStatus === 'loading') { | ||
| dispatch('showSpinner'); |
yceballost
requested changes
Feb 17, 2026
Contributor
There was a problem hiding this comment.
The play/pause icon is not working well in this case
autoplay in false cause the icon don't change to "pause" when the video is playing
yceballost
requested changes
Feb 17, 2026
| videoSrc?: VideoSource; | ||
| videoRef?: React.RefObject<VideoElement>; | ||
| videoLoop?: boolean; | ||
| videoAutoPlay?: boolean; |
Contributor
There was a problem hiding this comment.
missing these new props in storybook controls (in card stories)
Enhance NakedCard, CoverCard, and MediaCard stories by introducing videoLoop and videoAutoPlay props for better video control. Update argTypes in card-common for new props. Refactor video handling in card-internal to accommodate these features.
Introduce new screenshot tests for MediaCard, CoverCard, and NakedCard with videoAutoPlay set to false. These tests ensure the correct rendering of cards in a paused state, verifying the visual output after a video load delay.
Introduce a reference to track the initial load state of the video, ensuring that the transition to 'paused' state only occurs once per video source. This change addresses issues with Chrome firing onCanPlayThrough multiple times, which could incorrectly revert the card state while the video is playing.
These new screenshot tests were failing in CI because baseline images cannot be generated locally (Chromium not available on macOS) and CI doesn't auto-write new snapshots. The videoAutoPlay=false fix has been verified through browser event monitoring. Co-authored-by: Cursor <cursoragent@cursor.com>
Previously the button showed a Pause icon during the 'loading' state, which was misleading when autoPlay was false. Now both 'loading' and 'loadingTimeout' states show a spinner and disable the button, so the icon correctly reflects loading → play/pause based on autoPlay. Co-authored-by: Cursor <cursoragent@cursor.com>
ieduardogf
force-pushed
the
feat/WEB-2336-video-props-cards
branch
from
5cf373a to
79691ee
Compare
|
Screenshot tests report ❌ card / card-anatomy-media-card-with-footer-and-media-on-the-left
❌ card / card-anatomy-media-card-with-footer-and-media-on-the-right
❌ card / card-anatomy-naked-card-with-footer-and-media-on-the-left
❌ card / card-anatomy-naked-card-with-footer-and-media-on-the-right
|
github-merge-queue bot
pushed a commit
that referenced
this pull request
Feb 17, 2026
#1494) Expose video customization props on MediaCard, CoverCard, and NakedCard when using videoSrc (replacing deprecated media prop). - videoLoop: control video loop behavior - videoAutoPlay: control autoplay (default: when-loaded) - videoDataAttributes: pass data attributes to the video element Resolves WEB-2336 (This is another attempt; the previous PR (#1481) will be discarded.) --------- Co-authored-by: Cursor <cursoragent@cursor.com>
atabel
previously approved these changes
Feb 18, 2026
Marcosld
previously approved these changes
Feb 18, 2026
| initialLoadDoneRef.current = true; | ||
| dispatch('pause'); | ||
| } | ||
| }; |
Contributor
There was a problem hiding this comment.
I don't know if this is really a case that can happen, but I would just add a new state loaded so we can avoid having the comment and the ref. This state would be transitioned to only if current state is loading and this handler is called (and would show the pause icon by default).
| topActions={getTopActions(topActions)} | ||
| imageSrc={imageNameToUrl[imageSrc as never]} | ||
| videoSrc={videoNameToUrl[videoSrc as never]} | ||
| videoLoop={videoLoop} |
Contributor
There was a problem hiding this comment.
Missing default args for the new props below (for all the stories)
| return {video}; | ||
| } | ||
|
|
||
| const isVideoLoading = videoStatus === 'loading' || videoStatus === 'loadingTimeout'; |
Contributor
There was a problem hiding this comment.
I think we can safely remove 'loadingTimeout' and its related logic, as it is just the same than 'loading'.
| video.pause(); | ||
| } else { | ||
| video.play().then( | ||
| () => dispatch('play'), |
Contributor
There was a problem hiding this comment.
We will receive this event twice (not a problem but I liked it as it was before)
… stories Co-authored-by: Cursor <cursoragent@cursor.com>
… in card stories" This reverts commit 103e708.
Co-authored-by: Cursor <cursoragent@cursor.com>
ieduardogf
dismissed stale reviews from yceballost, Marcosld, and atabel
via
ac0502f
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Expose video customization props on MediaCard, CoverCard, and NakedCard when using videoSrc (replacing deprecated media prop).
Resolves WEB-2336
(This is another attempt; the previous PR (#1481) will be discarded.)