@carbon/ibmdotcom-web-components 2.24.0 → 2.25.0

package/es/components/cta/video-cta-container.d.ts

@@ -375,6 +375,7 @@ declare const C4DVideoCTAContainer_base: {
     _requestsEmbedVideo: {
         [videoId: string]: Promise<any>;
     };
+    customVideoName: string;
     _setRequestEmbedVideoInProgress(videoId: string, request: Promise<any>): void;
     _setErrorRequestEmbedVideo(videoId: string, error: Error): void;
     _setEmbeddedVideo(videoId: string, kWidget: any): void;

package/es/components/lightbox-media-viewer/lightbox-video-player-container.d.ts

@@ -350,6 +350,7 @@ declare const C4DLightboxVideoPlayerContainer_base: {
     _requestsEmbedVideo: {
         [videoId: string]: Promise<any>;
     };
+    customVideoName: string;
     _setRequestEmbedVideoInProgress(videoId: string, request: Promise<any>): void;
     _setErrorRequestEmbedVideo(videoId: string, error: Error): void;
     _setEmbeddedVideo(videoId: string, kWidget: any): void;

package/es/components/video-player/video-player-container.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -68,6 +68,7 @@ export declare const C4DVideoPlayerContainerMixin: <T extends Constructor<HTMLEl
     _requestsEmbedVideo: {
         [videoId: string]: Promise<any>;
     };
+    customVideoName: string;
     /**
      * Sets the state that the API call for embedding the video for the given video ID is in progress.
      *
@@ -806,6 +807,7 @@ declare const C4DVideoPlayerContainer_base: {
     _requestsEmbedVideo: {
         [videoId: string]: Promise<any>;
     };
+    customVideoName: string;
     /**
      * Sets the state that the API call for embedding the video for the given video ID is in progress.
      *

package/es/components/video-player/video-player-container.js

@@ -1,11 +1,11 @@
-import _decorate from "@babel/runtime/helpers/esm/decorate";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _decorate from "@babel/runtime/helpers/esm/decorate";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,6 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { bindActionCreators } from 'redux';
 import 'lit';
+import { property } from 'lit/decorators.js';
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store.js';
@@ -68,204 +69,284 @@ export const C4DVideoPlayerContainerMixin = Base => {
   /**
    * A mix-in class that sets up and cleans up event listeners defined by `@HostListener` decorator.
    */
-  class C4DVideoPlayerContainerMixinImpl extends StableSelectorMixin(Base) {
-    constructor(...args) {
-      var _this;
-      super(...args);
-      _this = this;
-      /**
-       * The video player.
-       */
-      /**
-       * The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.
-       */
-      /**
-       * The request for the embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.
-       *
-       * @protected
-       */
-      // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-      _defineProperty(this, "_requestsEmbedVideo", {});
-      /**
-       * Sends the API call for embedding video for the given video ID, and tracks the progress and the error of the REST call.
-       *
-       * @param videoId The video ID.
-       * @internal
-       */
-      _defineProperty(this, "_embedMedia", async function (videoId) {
-        const {
-          _requestsEmbedVideo: requestsEmbedVideo
-        } = _this;
-        const requestEmbedVideo = requestsEmbedVideo[videoId];
-        if (requestEmbedVideo) {
-          return requestEmbedVideo;
+  let C4DVideoPlayerContainerMixinImpl = _decorate(null, function (_initialize, _StableSelectorMixin) {
+    class C4DVideoPlayerContainerMixinImpl extends _StableSelectorMixin {
+      constructor(...args) {
+        super(...args);
+        _initialize(this);
+      }
+    }
+    return {
+      F: C4DVideoPlayerContainerMixinImpl,
+      d: [{
+        kind: "field",
+        key: "_requestsEmbedVideo",
+        value() {
+          return {};
         }
-        const promiseEmbedVideo = _this._embedVideoImpl(videoId);
-        _this._setRequestEmbedVideoInProgress(videoId, promiseEmbedVideo);
-        try {
-          _this._setEmbeddedVideo(videoId, await promiseEmbedVideo);
-        } catch (error) {
-          _this._setErrorRequestEmbedVideo(videoId, error);
+      }, {
+        kind: "field",
+        decorators: [property({
+          type: String,
+          attribute: 'customvideoname'
+        })],
+        key: "customVideoName",
+        value() {
+          return '';
         }
-        return promiseEmbedVideo;
-      });
-      _defineProperty(this, "prefersAutoplayStorageKey", `${c4dPrefix}-background-video-prefers-autoplay`);
-    }
-    /**
-     * Sets the state that the API call for embedding the video for the given video ID is in progress.
-     *
-     * @param videoId The video ID.
-     * @param request The promise of the API call for embedding the video of the given video ID that is in progress.
-     * @private
-     */
-    // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    _setRequestEmbedVideoInProgress(videoId, request) {
-      const {
-        _requestsEmbedVideo: oldRequestsEmbedVideo
-      } = this;
-      this._requestsEmbedVideo = _objectSpread(_objectSpread({}, oldRequestsEmbedVideo), {}, {
-        [videoId]: request
-      });
-    }
+      }, {
+        kind: "method",
+        key: "_setRequestEmbedVideoInProgress",
+        value:
+        /**
+         * The video player.
+         */
 
-    /**
-     * Set the state that the API call for embedding the video for the given video ID is failed.
-     *
-     * @param videoId The video ID.
-     * @param error An error from the API call for embedding the video of the given video ID.
-     * @private
-     */
-    // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    _setErrorRequestEmbedVideo(videoId, error) {
-      this._setRequestEmbedVideoInProgress(videoId, Promise.reject(error));
-    }
+        /**
+         * The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.
+         */
 
-    /**
-     * Sets the given embedded Kaltura player element (that has `.sendNotification()`, etc. APIs) for the given video ID.
-     *
-     * @param videoId The video ID.
-     * @param kWidget The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs).
-     * @private
-     */
-    // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    _setEmbeddedVideo(videoId, kWidget) {
-      this._setRequestEmbedVideoInProgress(videoId, Promise.resolve(kWidget));
-      const {
-        embeddedVideos: oldEmbeddedVideos
-      } = this;
-      this.embeddedVideos = _objectSpread(_objectSpread({}, oldEmbeddedVideos), {}, {
-        [videoId]: kWidget
-      });
-    }
-    _setAutoplayPreference(preference) {
-      const updatedValue = preference ? '1' : '0';
-      localStorage.setItem(`${this.prefersAutoplayStorageKey}`, updatedValue);
-    }
-    _getAutoplayPreference() {
-      const storedValue = localStorage.getItem(`${this.prefersAutoplayStorageKey}`);
-      if (storedValue === null) {
-        return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-      } else {
-        return Boolean(parseInt(storedValue, 10));
-      }
-    }
-    _getPlayerOptions() {
-      const {
-        backgroundMode,
-        intersectionMode,
-        autoPlay,
-        muted
-      } = this;
-      let playerOptions = {};
-      const autoplayPreference = this._getAutoplayPreference();
-      switch (true) {
-        case autoPlay:
-          playerOptions = {
-            autoMute: muted,
-            autoPlay: autoplayPreference
-          };
-          break;
-        case backgroundMode || intersectionMode:
-          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
+        /**
+         * The request for the embedded Kaltura player element (that has `.sendNotification()`, etc. APIs), keyed by the video ID.
+         *
+         * @protected
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+
+        /**
+         * Sets the state that the API call for embedding the video for the given video ID is in progress.
+         *
+         * @param videoId The video ID.
+         * @param request The promise of the API call for embedding the video of the given video ID that is in progress.
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+        function _setRequestEmbedVideoInProgress(videoId, request) {
+          const {
+            _requestsEmbedVideo: oldRequestsEmbedVideo
+          } = this;
+          this._requestsEmbedVideo = _objectSpread(_objectSpread({}, oldRequestsEmbedVideo), {}, {
+            [videoId]: request
+          });
+        }
+
+        /**
+         * Set the state that the API call for embedding the video for the given video ID is failed.
+         *
+         * @param videoId The video ID.
+         * @param error An error from the API call for embedding the video of the given video ID.
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+      }, {
+        kind: "method",
+        key: "_setErrorRequestEmbedVideo",
+        value: function _setErrorRequestEmbedVideo(videoId, error) {
+          this._setRequestEmbedVideoInProgress(videoId, Promise.reject(error));
+        }
+
+        /**
+         * Sets the given embedded Kaltura player element (that has `.sendNotification()`, etc. APIs) for the given video ID.
+         *
+         * @param videoId The video ID.
+         * @param kWidget The embedded Kaltura player element (that has `.sendNotification()`, etc. APIs).
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+      }, {
+        kind: "method",
+        key: "_setEmbeddedVideo",
+        value: function _setEmbeddedVideo(videoId, kWidget) {
+          this._setRequestEmbedVideoInProgress(videoId, Promise.resolve(kWidget));
+          const {
+            embeddedVideos: oldEmbeddedVideos
+          } = this;
+          this.embeddedVideos = _objectSpread(_objectSpread({}, oldEmbeddedVideos), {}, {
+            [videoId]: kWidget
+          });
+        }
+      }, {
+        kind: "method",
+        key: "_setAutoplayPreference",
+        value: function _setAutoplayPreference(preference) {
+          const updatedValue = preference ? '1' : '0';
+          localStorage.setItem(`${this.prefersAutoplayStorageKey}`, updatedValue);
+        }
+      }, {
+        kind: "method",
+        key: "_getAutoplayPreference",
+        value: function _getAutoplayPreference() {
+          const storedValue = localStorage.getItem(`${this.prefersAutoplayStorageKey}`);
+          if (storedValue === null) {
+            return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+          } else {
+            return Boolean(parseInt(storedValue, 10));
+          }
+        }
+      }, {
+        kind: "method",
+        key: "_getPlayerOptions",
+        value: function _getPlayerOptions() {
+          const {
+            backgroundMode,
+            intersectionMode,
+            autoPlay,
+            muted
+          } = this;
+          /**
+           * The overwritten media title.
+           *
+           * Quick and dirty turn around as C4DVideoPlayerComposite uses caption
+           * and C4DLightboxVideoPlayer uses customVideoName and none are
+           * part of the same type
+           *
+           * <c4d-video-player-container customVideoName="overwritten media title here">...
+           *
+           */
+          const mediaTitle = (this === null || this === void 0 ? void 0 : this['customVideoName']) || (this === null || this === void 0 ? void 0 : this['caption']);
+          let playerOptions = {};
+          const autoplayPreference = this._getAutoplayPreference();
+          switch (true) {
+            case autoPlay:
+              playerOptions = {
+                autoMute: muted,
+                autoPlay: autoplayPreference
+              };
+              break;
+            case backgroundMode || intersectionMode:
+              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;
+          }
+          if (mediaTitle) {
+            playerOptions = _objectSpread(_objectSpread({}, playerOptions), {
+              titleLabel: {
+                plugin: true,
+                align: 'left',
+                text: mediaTitle
+              }
+            });
+          }
+          return playerOptions;
+        }
+
+        /**
+         * Sets up and sends the API call for embedding video for the given video ID.
+         *
+         * @param videoId The video ID.
+         * @private
+         */
+        // Not using TypeScript `private` due to: microsoft/TypeScript#17744
+      }, {
+        kind: "method",
+        key: "_embedVideoImpl",
+        value: async function _embedVideoImpl(videoId) {
+          var _getElementById;
+          const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode') ? this.getRootNode() : this.ownerDocument;
+          // Given Kaltura replaces the `<div>` here with `<iframe>` with the video player,
+          // rendering this `<div>` in `renderLightDOM()` will cause the video player being clobbered
+          const playerId = Math.random().toString(36).slice(2);
+          const div = document.createElement('div');
+          div.id = playerId;
+          div.className = `${c4dPrefix}--video-player__video`;
+          const {
+            _videoPlayer: videoPlayer
+          } = this;
+          if (!videoPlayer) {
+            throw new TypeError('Cannot find the video player component to put the video content into.');
+          }
+          videoPlayer.appendChild(div);
+          const embedVideoHandle = await KalturaPlayerAPI.embedMedia(videoId, playerId, this._getPlayerOptions());
+          const {
+            width,
+            height
+          } = await KalturaPlayerAPI.api(videoId);
+          videoPlayer.style.setProperty('--native-file-width', `${width}px`);
+          videoPlayer.style.setProperty('--native-file-height', `${height}px`);
+          videoPlayer.style.setProperty('--native-file-aspect-ratio', `${width} / ${height}`);
+          doc.getElementById(playerId).dataset.videoId = videoId;
+          const videoEmbed = (_getElementById = doc.getElementById(playerId)) === null || _getElementById === void 0 ? void 0 : _getElementById.firstElementChild;
+          if (videoEmbed) {
+            videoEmbed.focus();
+          }
+          return embedVideoHandle.kWidget();
+        }
+
+        /**
+         * Sends the API call for embedding video for the given video ID, and tracks the progress and the error of the REST call.
+         *
+         * @param videoId The video ID.
+         * @internal
+         */
+      }, {
+        kind: "field",
+        key: "_embedMedia",
+        value() {
+          return async videoId => {
+            const {
+              _requestsEmbedVideo: requestsEmbedVideo
+            } = this;
+            const requestEmbedVideo = requestsEmbedVideo[videoId];
+            if (requestEmbedVideo) {
+              return requestEmbedVideo;
             }
+            const promiseEmbedVideo = this._embedVideoImpl(videoId);
+            this._setRequestEmbedVideoInProgress(videoId, promiseEmbedVideo);
+            try {
+              this._setEmbeddedVideo(videoId, await promiseEmbedVideo);
+            } catch (error) {
+              this._setErrorRequestEmbedVideo(videoId, error);
+            }
+            return promiseEmbedVideo;
           };
-          break;
-        default:
-          playerOptions = {
-            autoMute: muted
-          };
-          break;
-      }
-      return playerOptions;
-    }
-
-    /**
-     * Sets up and sends the API call for embedding video for the given video ID.
-     *
-     * @param videoId The video ID.
-     * @private
-     */
-    // Not using TypeScript `private` due to: microsoft/TypeScript#17744
-    async _embedVideoImpl(videoId) {
-      var _getElementById;
-      const doc = Object.prototype.hasOwnProperty.call(this, 'getRootNode') ? this.getRootNode() : this.ownerDocument;
-      // Given Kaltura replaces the `<div>` here with `<iframe>` with the video player,
-      // rendering this `<div>` in `renderLightDOM()` will cause the video player being clobbered
-      const playerId = Math.random().toString(36).slice(2);
-      const div = document.createElement('div');
-      div.id = playerId;
-      div.className = `${c4dPrefix}--video-player__video`;
-      const {
-        _videoPlayer: videoPlayer
-      } = this;
-      if (!videoPlayer) {
-        throw new TypeError('Cannot find the video player component to put the video content into.');
-      }
-      videoPlayer.appendChild(div);
-      const embedVideoHandle = await KalturaPlayerAPI.embedMedia(videoId, playerId, this._getPlayerOptions());
-      const {
-        width,
-        height
-      } = await KalturaPlayerAPI.api(videoId);
-      videoPlayer.style.setProperty('--native-file-width', `${width}px`);
-      videoPlayer.style.setProperty('--native-file-height', `${height}px`);
-      videoPlayer.style.setProperty('--native-file-aspect-ratio', `${width} / ${height}`);
-      doc.getElementById(playerId).dataset.videoId = videoId;
-      const videoEmbed = (_getElementById = doc.getElementById(playerId)) === null || _getElementById === void 0 ? void 0 : _getElementById.firstElementChild;
-      if (videoEmbed) {
-        videoEmbed.focus();
-      }
-      return embedVideoHandle.kWidget();
-    }
-    /**
-     * Calls the data-* attribute transpose function to target `c4d-video-player`'s button element.
-     */
-    firstUpdated() {
-      window.requestAnimationFrame(() => {
-        var _this$querySelector;
-        const button = (_this$querySelector = this.querySelector('c4d-video-player')) === null || _this$querySelector === void 0 || (_this$querySelector = _this$querySelector.shadowRoot) === null || _this$querySelector === void 0 ? void 0 : _this$querySelector.querySelector('button');
-        if (!this.getAttribute('href') && this.getAttribute('video-id')) {
-          this.setAttribute('href', `https://mediacenter.ibm.com/id/${this.getAttribute('video-id')}`);
         }
-        this.transposeAttributes(button, ['href']);
-      });
-    }
-  }
+      }, {
+        kind: "method",
+        key: "firstUpdated",
+        value:
+        /**
+         * Calls the data-* attribute transpose function to target `c4d-video-player`'s button element.
+         */
+        function firstUpdated() {
+          window.requestAnimationFrame(() => {
+            var _this$querySelector;
+            const button = (_this$querySelector = this.querySelector('c4d-video-player')) === null || _this$querySelector === void 0 || (_this$querySelector = _this$querySelector.shadowRoot) === null || _this$querySelector === void 0 ? void 0 : _this$querySelector.querySelector('button');
+            if (!this.getAttribute('href') && this.getAttribute('video-id')) {
+              this.setAttribute('href', `https://mediacenter.ibm.com/id/${this.getAttribute('video-id')}`);
+            }
+            this.transposeAttributes(button, ['href']);
+          });
+        }
+      }, {
+        kind: "field",
+        key: "prefersAutoplayStorageKey",
+        value() {
+          return `${c4dPrefix}-background-video-prefers-autoplay`;
+        }
+      }]
+    };
+  }, StableSelectorMixin(Base));
   return C4DVideoPlayerContainerMixinImpl;
 };
 
@@ -274,11 +355,11 @@ export const C4DVideoPlayerContainerMixin = Base => {
  *
  * @element c4d-video-player-container
  */
-let C4DVideoPlayerContainer = _decorate([customElement(`${c4dPrefix}-video-player-container`)], function (_initialize, _ConnectMixin) {
+let C4DVideoPlayerContainer = _decorate([customElement(`${c4dPrefix}-video-player-container`)], function (_initialize2, _ConnectMixin) {
   class C4DVideoPlayerContainer extends _ConnectMixin {
     constructor(...args) {
       super(...args);
-      _initialize(this);
+      _initialize2(this);
     }
   }
   return {