From 6fbf900cf968a2151383a94c08847cfa3bb20db6 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Wed, 11 Dec 2024 09:41:47 -0500 Subject: [PATCH 1/4] fix(background-media): avoid potential VPC setup race --- .../background-media/background-media.ts | 56 +++++++++---------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/packages/web-components/src/components/background-media/background-media.ts b/packages/web-components/src/components/background-media/background-media.ts index f8b79794f98..b39d40c896c 100644 --- a/packages/web-components/src/components/background-media/background-media.ts +++ b/packages/web-components/src/components/background-media/background-media.ts @@ -16,7 +16,6 @@ import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings import styles from './background-media.scss'; import { GRADIENT_DIRECTION, MOBILE_POSITION } from './defs'; import C4DImage from '../image/image'; -import C4DVideoPlayer from '../video-player/video-player'; import C4DVideoPlayerContainer from '../video-player/video-player-container'; import C4DLeadSpace from '../leadspace/leadspace'; import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js'; @@ -50,13 +49,14 @@ class C4DBackgroundMedia extends C4DImage { * Returns a class-name based on the Mobile Position type */ protected _getMobilePositionClass() { + const { videoPlayerContainer: video } = this; return classMap({ [`${prefix}--background-media--container`]: true, [`${prefix}--background-media--mobile-position`]: true, [`${prefix}--background-media--mobile-position--${this.mobilePosition}`]: this.mobilePosition, - [`${prefix}--background-media--image`]: this.videoPlayer === null, - [`${prefix}--background-media--video`]: this.videoPlayer !== null, + [`${prefix}--background-media--image`]: video === null, + [`${prefix}--background-media--video`]: video !== null, }); } @@ -92,12 +92,6 @@ class C4DBackgroundMedia extends C4DImage { @property({ attribute: 'mobile-position', reflect: true }) mobilePosition = MOBILE_POSITION.BOTTOM; - /** - * Internal storage of the video ID - */ - @property() - videoId: string | null = null; - /** * Current state of video playback */ @@ -105,10 +99,11 @@ class C4DBackgroundMedia extends C4DImage { videoIsPlaying = false; /** - * Internal storage of the video player comonent + * Query selector to get the child video player container */ - @property() - videoPlayer: C4DVideoPlayer | null = null; + protected get videoPlayerContainer() { + return this.querySelector(`${c4dPrefix}-video-player-container`) as C4DVideoPlayerContainer | null; + } /** * Conditionally runs super.render() if all children are `c4d-image-item` @@ -120,42 +115,43 @@ class C4DBackgroundMedia extends C4DImage { const assignedImages = assignedElements.filter( (el) => el.tagName === `${c4dPrefix}-image-item`.toUpperCase() ); - const assignedVideos = assignedElements.filter( + const assignedVideos = (assignedElements.filter( (el) => el.tagName === `${c4dPrefix}-video-player-container`.toUpperCase() - ); + ) as C4DVideoPlayerContainer[]); if ( - assignedElements.length === assignedImages.length && + assignedImages.length && !assignedVideos.length ) { this.containsOnlyImages = true; } - - if (assignedVideos.length) { - const [video] = assignedVideos; - this.videoId = video.getAttribute('video-id'); - this.videoPlayer = video.querySelector(`${c4dPrefix}-video-player`); - this.videoIsPlaying = (video as C4DVideoPlayerContainer).isPlaying; - } } toggleVideoState() { - this.videoPlayer?.userInitiatedTogglePlaybackState(); - this.videoIsPlaying = !this.videoIsPlaying; + const { + videoPlayerContainer: video, + } = this; + + if (video?.isPlaying) { + video.pauseAllVideos() + } else { + video?.playAllVideos() + } } renderVideoControls() { - const { toggleVideoState, videoIsPlaying } = this; + const { toggleVideoState, videoPlayerContainer } = this; + const { isPlaying } = videoPlayerContainer ?? {} return html` `; } @@ -186,7 +182,7 @@ class C4DBackgroundMedia extends C4DImage { this.gradientHidden = true; } - if (this.hasAttribute('default-src') && !this.videoId) { + if (this.hasAttribute('default-src') && !this.videoPlayerContainer) { this.containsOnlyImages = true; } } @@ -203,7 +199,7 @@ class C4DBackgroundMedia extends C4DImage { - ${this.videoId ? this.renderVideoControls() : ''} + ${this.videoPlayerContainer ? this.renderVideoControls() : ''} `; } From 9b894f3b113bca648133ba5c27154e1c7eb2fb38 Mon Sep 17 00:00:00 2001 From: Andy Blum Date: Wed, 11 Dec 2024 09:49:58 -0500 Subject: [PATCH 2/4] yarn format --- .../background-media/background-media.ts | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/web-components/src/components/background-media/background-media.ts b/packages/web-components/src/components/background-media/background-media.ts index b39d40c896c..fceec5958dc 100644 --- a/packages/web-components/src/components/background-media/background-media.ts +++ b/packages/web-components/src/components/background-media/background-media.ts @@ -102,7 +102,9 @@ class C4DBackgroundMedia extends C4DImage { * Query selector to get the child video player container */ protected get videoPlayerContainer() { - return this.querySelector(`${c4dPrefix}-video-player-container`) as C4DVideoPlayerContainer | null; + return this.querySelector( + `${c4dPrefix}-video-player-container` + ) as C4DVideoPlayerContainer | null; } /** @@ -115,33 +117,28 @@ class C4DBackgroundMedia extends C4DImage { const assignedImages = assignedElements.filter( (el) => el.tagName === `${c4dPrefix}-image-item`.toUpperCase() ); - const assignedVideos = (assignedElements.filter( + const assignedVideos = assignedElements.filter( (el) => el.tagName === `${c4dPrefix}-video-player-container`.toUpperCase() - ) as C4DVideoPlayerContainer[]); + ) as C4DVideoPlayerContainer[]; - if ( - assignedImages.length && - !assignedVideos.length - ) { + if (assignedImages.length && !assignedVideos.length) { this.containsOnlyImages = true; } } toggleVideoState() { - const { - videoPlayerContainer: video, - } = this; + const { videoPlayerContainer: video } = this; if (video?.isPlaying) { - video.pauseAllVideos() + video.pauseAllVideos(); } else { - video?.playAllVideos() + video?.playAllVideos(); } } renderVideoControls() { const { toggleVideoState, videoPlayerContainer } = this; - const { isPlaying } = videoPlayerContainer ?? {} + const { isPlaying } = videoPlayerContainer ?? {}; return html`