fix(cta): prevent an infinate loop of fetching video details

[m4olivei]

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:

1. Both <c4d-card-group-item> and <c4d-card-footer> use CTAMixin
2. CTAMixin introduces an update hook that watches for changes to videoDescription, and if it's changed, the c4d-cta-request-video-data event is fired.
3. The <c4d-video-cta-container> component listens for the c4d-cta-request-video-data event, makes a request to Kaltura, and sets the videoDescription property for the component that fired the event in step 2, either <c4d-card-group-item> or <c4d-card-footer>
4. The <c4d-card-group-item> component transposes its attributes, including videoDescription onto the <c4d-card-footer> component. Restarting the cycle.
5. There is a race condition mixed into this infinite loop, I believe due to the async nature of the Kaltura request. Sometimes, things settle down, but other times, we end up in an infinite loop where the two components descending from 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

• Adjusted CTA logic to guard against Kaltura fetch when it's already been done. Like the conditional shortly before it, we use videoDuration as a guard to know whether we need to query Kaltura or not.

[ibmdotcom-bot]

Deploy preview created for package IBM.com Web Components Deploy Preview CDN: https://ibmdotcom-cdn.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12084/index.html

Built with commit: 3986a793d63c122377242a265f8aff658f13bb44

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper): https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12084/index.html

Built with commit: 3f52914b1255bd3a64f1b65e5616f8cc7e0b20bf

[ibmdotcom-bot]

Deploy preview created for package Web Components: https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/12084/index.html

Built with commit: 3f52914b1255bd3a64f1b65e5616f8cc7e0b20bf

[netlify[bot]]

✅ Deploy Preview for ibm-dotcom-web-components ready!

Name	Link
🔨 Latest commit	3986a793d63c122377242a265f8aff658f13bb44
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-dotcom-web-components/deploys/6723c3f8d60a680008cb3e79
😎 Deploy Preview	https://deploy-preview-12084--ibm-dotcom-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for ibm-dotcom-web-components-react-wrap ready!

Name	Link
🔨 Latest commit	3986a793d63c122377242a265f8aff658f13bb44
🔍 Latest deploy log	https://app.netlify.com/sites/ibm-dotcom-web-components-react-wrap/deploys/6723c3f8312daf0008fa87e4
😎 Deploy Preview	https://deploy-preview-12084--ibm-dotcom-web-components-react-wrap.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andy-blum]

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.

[m4olivei]

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.

Isn't that the issue that we're working on in ADCMS-6596?

[andy-blum]

Ah yes it is