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

### Related Ticket(s)

[ADCMS-6577](https://jsw.ibm.com/browse/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.


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/component-mixins/cta/cta.ts

@@ -325,27 +325,37 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
           (videoName === null || videoName === 'null')) ||
         changedProperties.has('videoDescription')
       ) {
-        // Wait for the container to be ready without blocking.
-        customElements
-          .whenDefined(`${c4dPrefix}-video-cta-container`)
-          .then(() => {
-            this.dispatchEvent(
-              new CustomEvent(eventRequestVideoData, {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-                detail: {
-                  videoName,
-                  videoDescription,
-                  href,
-                },
-              })
-            );
-          });
+        if (typeof videoDuration === 'undefined') {
+          // Wait for the container to be ready without blocking.
+          customElements
+            .whenDefined(`${c4dPrefix}-video-cta-container`)
+            .then(() => {
+              this.dispatchEvent(
+                new CustomEvent(eventRequestVideoData, {
+                  bubbles: true,
+                  cancelable: true,
+                  composed: true,
+                  detail: {
+                    videoName,
+                    videoDescription,
+                    href,
+                  },
+                })
+              );
+            });
+        }
       }
 
-      if (ctaType === CTA_TYPE.VIDEO && this.offsetWidth > 0) {
-        this._updateVideoThumbnailUrl();
+      const firstChild = this?.shadowRoot?.querySelector(':first-child') as
+        | HTMLElement
+        | null
+        | undefined;
+      if (
+        ctaType === CTA_TYPE.VIDEO &&
+        firstChild &&
+        firstChild.offsetWidth > 0
+      ) {
+        this._updateVideoThumbnailUrl(String(firstChild.offsetWidth));
       }
     }
 
@@ -392,10 +402,10 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
     /**
      * Updates video thumbnail url to match card width.
      */
-    _updateVideoThumbnailUrl() {
+    _updateVideoThumbnailUrl(width?: string) {
       this.videoThumbnailUrl = KalturaPlayerAPI.getThumbnailUrl({
         mediaId: this.href,
-        width: String(this.offsetWidth),
+        width: width ?? '340',
       });
     }