From 09cef382d328fc4cbe0c82c1424d01eba3fc8430 Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 8 Jul 2024 09:15:02 -0300 Subject: [PATCH 1/4] fix(text-cta): prevent order of operations issues --- .../src/component-mixins/cta/video.ts | 62 ++++++++++--------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts index 5ca7380c435..17f5752594b 100644 --- a/packages/web-components/src/component-mixins/cta/video.ts +++ b/packages/web-components/src/component-mixins/cta/video.ts @@ -132,49 +132,51 @@ const VideoCTAMixin = >(Base: T) => { // Declaring this mixin as it extends `LitElement` seems to cause a TS error // @ts-ignore super.updated(changedProperties); - const { ctaType, videoName, videoDescription, href, videoDuration } = - this; - const { eventRequestVideoData } = this - .constructor as typeof VideoCTAMixinImpl; - if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) { - if (typeof videoDuration === 'undefined') { + customElements.whenDefined(`${ddsPrefix}-text-cta`).then((response) => { + const { ctaType, videoName, videoDescription, href, videoDuration } = + this; + const { eventRequestVideoData } = this + .constructor as typeof VideoCTAMixinImpl; + if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) { + if (typeof videoDuration === 'undefined') { + this.dispatchEvent( + new CustomEvent(eventRequestVideoData, { + bubbles: true, + cancelable: true, + composed: true, + detail: { + href, + videoName, + videoDescription, + }, + }) + ); + } + } + + if ( + (changedProperties.has('videoName') && + (videoName === null || videoName === 'null')) || + changedProperties.has('videoDescription') + ) { this.dispatchEvent( new CustomEvent(eventRequestVideoData, { bubbles: true, cancelable: true, composed: true, detail: { - href, videoName, videoDescription, + href, }, }) ); } - } - if ( - (changedProperties.has('videoName') && - (videoName === null || videoName === 'null')) || - changedProperties.has('videoDescription') - ) { - 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(); - } + if (ctaType === CTA_TYPE.VIDEO && this.offsetWidth > 0) { + this._updateVideoThumbnailUrl(); + } + }); } /** From f7174b51393ad243114a369c1b6d23c1927ed8fe Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 8 Jul 2024 11:59:47 -0300 Subject: [PATCH 2/4] fix(video-cta): change whenDefined target --- packages/web-components/src/component-mixins/cta/video.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts index 17f5752594b..6554412ba38 100644 --- a/packages/web-components/src/component-mixins/cta/video.ts +++ b/packages/web-components/src/component-mixins/cta/video.ts @@ -132,7 +132,7 @@ const VideoCTAMixin = >(Base: T) => { // Declaring this mixin as it extends `LitElement` seems to cause a TS error // @ts-ignore super.updated(changedProperties); - customElements.whenDefined(`${ddsPrefix}-text-cta`).then((response) => { + customElements.whenDefined(`${ddsPrefix}-video-cta-container`).then((response) => { const { ctaType, videoName, videoDescription, href, videoDuration } = this; const { eventRequestVideoData } = this From b343bf43c9dade4db9ab42607eba239a15c96461 Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 8 Jul 2024 16:14:01 -0300 Subject: [PATCH 3/4] fix(video-cta): addres ci-check failure --- .../src/component-mixins/cta/video.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts index 6554412ba38..8749a5c026b 100644 --- a/packages/web-components/src/component-mixins/cta/video.ts +++ b/packages/web-components/src/component-mixins/cta/video.ts @@ -132,11 +132,11 @@ const VideoCTAMixin = >(Base: T) => { // Declaring this mixin as it extends `LitElement` seems to cause a TS error // @ts-ignore super.updated(changedProperties); - customElements.whenDefined(`${ddsPrefix}-video-cta-container`).then((response) => { - const { ctaType, videoName, videoDescription, href, videoDuration } = - this; - const { eventRequestVideoData } = this - .constructor as typeof VideoCTAMixinImpl; + const { ctaType, videoName, videoDescription, href, videoDuration } = + this; + const { eventRequestVideoData } = this.constructor as typeof VideoCTAMixinImpl; + + customElements.whenDefined(`${ddsPrefix}-video-cta-container`).then(() => { if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) { if (typeof videoDuration === 'undefined') { this.dispatchEvent( @@ -172,11 +172,10 @@ const VideoCTAMixin = >(Base: T) => { }) ); } - - if (ctaType === CTA_TYPE.VIDEO && this.offsetWidth > 0) { - this._updateVideoThumbnailUrl(); - } }); + if (ctaType === CTA_TYPE.VIDEO && this.offsetWidth > 0) { + this._updateVideoThumbnailUrl(); + } } /** From c52a586e0166b484e25b09bfdcba31b39e0b68bd Mon Sep 17 00:00:00 2001 From: Marcelo JCS Date: Mon, 8 Jul 2024 16:44:47 -0300 Subject: [PATCH 4/4] fix(video-cta): format file --- .../src/component-mixins/cta/video.ts | 59 ++++++++++--------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts index 8749a5c026b..2a6b3d0475f 100644 --- a/packages/web-components/src/component-mixins/cta/video.ts +++ b/packages/web-components/src/component-mixins/cta/video.ts @@ -133,46 +133,49 @@ const VideoCTAMixin = >(Base: T) => { // @ts-ignore super.updated(changedProperties); const { ctaType, videoName, videoDescription, href, videoDuration } = - this; - const { eventRequestVideoData } = this.constructor as typeof VideoCTAMixinImpl; - - customElements.whenDefined(`${ddsPrefix}-video-cta-container`).then(() => { - if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) { - if (typeof videoDuration === 'undefined') { + this; + const { eventRequestVideoData } = this + .constructor as typeof VideoCTAMixinImpl; + + customElements + .whenDefined(`${ddsPrefix}-video-cta-container`) + .then(() => { + if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) { + if (typeof videoDuration === 'undefined') { + this.dispatchEvent( + new CustomEvent(eventRequestVideoData, { + bubbles: true, + cancelable: true, + composed: true, + detail: { + href, + videoName, + videoDescription, + }, + }) + ); + } + } + + if ( + (changedProperties.has('videoName') && + (videoName === null || videoName === 'null')) || + changedProperties.has('videoDescription') + ) { this.dispatchEvent( new CustomEvent(eventRequestVideoData, { bubbles: true, cancelable: true, composed: true, detail: { - href, videoName, videoDescription, + href, }, }) ); } - } - - if ( - (changedProperties.has('videoName') && - (videoName === null || videoName === 'null')) || - changedProperties.has('videoDescription') - ) { - 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(); }