fix(video-player): correct issues with bg video

carbon-design-system · Dec 5, 2024 · 39d702a · 39d702a
1 parent 72779a3
commit 39d702a
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 39 deletions.
diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss
@@ -43,8 +43,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  :host(#{$c4d-prefix}-video-player[background-mode='true']),
-  .#{$c4d-prefix}--video-player[background-mode='true'] {
+  :host(#{$c4d-prefix}-video-player[background-mode]),
+  .#{$c4d-prefix}--video-player[background-mode] {
     .#{$c4d-prefix}--video-player__video-container {
       padding: 0;
       block-size: 100%;

diff --git a/...s/web-components/src/components/background-media/__stories__/README.stories.mdx b/...s/web-components/src/components/background-media/__stories__/README.stories.mdx
@@ -69,7 +69,7 @@ import '@carbon/ibmdotcom-web-components/es/components/background-media/index.js
   <c4d-video-player-container
     playing-mode="inline"
     video-id="0_ibuqxqbe"
-    background-mode="true">
+    background-mode>
   </c4d-video-player-container>
 </c4d-background-media>
 ```

diff --git a/...es/web-components/src/components/background-media/__stories__/background-media.stories.ts b/...es/web-components/src/components/background-media/__stories__/background-media.stories.ts
@@ -56,7 +56,7 @@ export const WithVideo = (args) => {
         opacity="${ifDefined(backgroundOpacity)}">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </div>
   `;

diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
@@ -87,7 +87,7 @@ such:
   <c4d-background-media slot="image" opacity="100">
     <c4d-video-player-container
       video-id="1_9h94wo6b"
-      background-mode="true"></c4d-video-player-container>
+      background-mode></c4d-video-player-container>
   </c4d-background-media>
 </c4d-leadspace>
 ```

diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
@@ -190,7 +190,7 @@ export const SuperWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -335,7 +335,7 @@ export const TallWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -480,7 +480,7 @@ export const MediumWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -635,7 +635,7 @@ export const ShortWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;
@@ -754,7 +754,7 @@ export const CenteredWithVideo = (args) => {
       <c4d-background-media slot="image" opacity="100">
         <c4d-video-player-container
           video-id="0_ibuqxqbe"
-          background-mode="true"></c4d-video-player-container>
+          background-mode></c4d-video-player-container>
       </c4d-background-media>
     </c4d-leadspace>
   `;

diff --git a/packages/web-components/src/components/video-player/video-player-composite.ts b/packages/web-components/src/components/video-player/video-player-composite.ts
@@ -196,7 +196,7 @@ class C4DVideoPlayerComposite extends HybridRenderMixin(
   /**
    * `true` to autoplay, mute, and hide player UI.
    */
-  @property({ type: Boolean, attribute: 'background-mode' })
+  @property({ type: Boolean, attribute: 'background-mode', reflect: true })
   backgroundMode = false;
 
   /**

diff --git a/packages/web-components/src/components/video-player/video-player-container.ts b/packages/web-components/src/components/video-player/video-player-container.ts
@@ -180,34 +180,42 @@ export const C4DVideoPlayerContainerMixin = <
       const { backgroundMode, autoPlay, muted } =
         this as unknown as C4DVideoPlayerComposite;
       let playerOptions = {};
-      const autoplayPreference = autoPlay
-        ? this._getAutoplayPreference()
-        : false;
-
-      if (backgroundMode) {
-        playerOptions = {
-          'topBarContainer.plugin': false,
-          'controlBarContainer.plugin': false,
-          'largePlayBtn.plugin': false,
-          'loadingSpinner.plugin': false,
-          'unMuteOverlayButton.plugin': false,
-          'EmbedPlayer.DisableVideoTagSupport': false,
-          loop: true,
-          autoMute: true,
-          autoPlay: autoplayPreference,
-          // Turn off CTA's including mid-roll card and end cards.
-          'ibm.callToActions': false,
-          // Turn off captions display, background/ambient videos have no
-          // audio.
-          closedCaptions: {
-            plugin: false,
-          },
-        };
-      } else {
-        playerOptions = {
-          autoMute: muted,
-          autoPlay: autoplayPreference,
-        };
+      const autoplayPreference = this._getAutoplayPreference();
+
+      switch (true) {
+        case autoPlay:
+          playerOptions = {
+            autoMute: muted,
+            autoPlay: autoplayPreference,
+          };
+          break;
+
+        case backgroundMode:
+          playerOptions = {
+            'topBarContainer.plugin': false,
+            'controlBarContainer.plugin': false,
+            'largePlayBtn.plugin': false,
+            'loadingSpinner.plugin': false,
+            'unMuteOverlayButton.plugin': false,
+            'EmbedPlayer.DisableVideoTagSupport': false,
+            loop: true,
+            autoMute: true,
+            autoPlay: autoplayPreference,
+            // Turn off CTA's including mid-roll card and end cards.
+            'ibm.callToActions': false,
+            // Turn off captions display, background/ambient videos have no
+            // audio.
+            closedCaptions: {
+              plugin: false,
+            },
+          };
+          break;
+
+        default:
+          playerOptions = {
+            autoMute: muted,
+          };
+          break;
       }
 
       return playerOptions;