-
Notifications
You must be signed in to change notification settings - Fork 156
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(cta): prevent an infinate loop of fetching video details #12084
fix(cta): prevent an infinate loop of fetching video details #12084
Conversation
Deploy preview created for package Built with commit: 3986a793d63c122377242a265f8aff658f13bb44 |
Deploy preview created for package Built with commit: 3f52914b1255bd3a64f1b65e5616f8cc7e0b20bf |
Deploy preview created for package Built with commit: 3f52914b1255bd3a64f1b65e5616f8cc7e0b20bf |
✅ Deploy Preview for ibm-dotcom-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for ibm-dotcom-web-components-react-wrap ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
45d52a7
to
3986a79
Compare
The demo link from the issue is updated to use the CDN deploy previews from this PR. While the browser no longer locks up, the modal containing the media isn't popping up either. I'd expect the card-group-item to open a modal, seed in the iframe from kaltura, and then either play the video or error on a domain restriction. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changes needed in previous comment
Isn't that the issue that we're working on in ADCMS-6596? |
Ah yes it is |
9964cf1
into
carbon-design-system:main
Related Ticket(s)
ADCMS-6577
Description
Prevents an infinite loop in some situations with vidoe CTA cards.
There are a few key parts to the infinite loop:
<c4d-card-group-item>
and<c4d-card-footer>
useCTAMixin
CTAMixin
introduces anupdate
hook that watches for changes tovideoDescription
, and if it's changed, thec4d-cta-request-video-data
event is fired.<c4d-video-cta-container>
component listens for thec4d-cta-request-video-data
event, makes a request to Kaltura, and sets thevideoDescription
property for the component that fired the event in step 2, either<c4d-card-group-item>
or<c4d-card-footer>
<c4d-card-group-item>
component transposes its attributes, includingvideoDescription
onto the<c4d-card-footer>
component. Restarting the cycle.CTAMixin
ping pong firing an event, triggering Kaltura request, triggering update cycle, repeat.Here is an adjustment to the provided Carbon demo that uses the CDN preview of this PR to show the fix:
https://stackblitz.com/github/m4olivei/carbon-demo/tree/video-cta-lockup-pr-preview?file=scripts%2Fprestart.js
Changelog
Changed
videoDuration
as a guard to know whether we need to query Kaltura or not.