feat(card): fix video cta data (#12069)

### Related Ticket(s) https://jsw.ibm.com/browse/ADCMS-6425 ### Description Fixes a bug in which cards with `cta-type="video"` all update with each others video data, causing the wrong video durations listed for all but one of the cards [Demo](https://card-group-video--carbon-demos.netlify.app/) <img width="1524" alt="Screenshot 2024-10-04 at 1 11 33 PM" src="https://github.com/user-attachments/assets/f7db280f-83f3-4570-b735-43c88d61c3da"> ### Changelog **Changed** - Limits card responses to `c4d-cta-request-additional-video-data` events that are related to their own videos
carbon-design-system · Oct 10, 2024 · ea8ea2d · ea8ea2d
1 parent 86e3290
commit ea8ea2d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -377,7 +377,9 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
    */
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleVideoTitleUpdate = async (event) => {
-    if (event && this.ctaType === CTA_TYPE.VIDEO) {
+    const { videoId } = event.detail || {};
+
+    if (event && this.ctaType === CTA_TYPE.VIDEO && this.href === videoId) {
       const { videoDuration, videoName } = event.detail as any;
       const { formatVideoDuration, formatVideoCaption } = this;
       const formattedVideoDuration = formatVideoDuration({

diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts
@@ -110,6 +110,7 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
           detail: {
             videoName,
             videoDuration: duration,
+            videoId: href,
           },
         }
       );

diff --git a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
@@ -22,7 +22,12 @@ export const Default = (args) => {
       video-id=${videoId}
       caption=${caption}
       ?hide-caption=${hideCaption}
-      thumbnail=${thumbnail}></c4d-video-player-container>
+      thumbnail=${thumbnail}
+      background-mode></c4d-video-player-container>
+
+    <c4d-video-player-container
+      video-id="1_onstzigu"
+      auto-play></c4d-video-player-container>
   `;
 };