@carbon/ibmdotcom-web-components 2.43.0 → 2.45.0

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

@@ -0,0 +1,577 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9;
+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, 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.
+ */
+
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import FocusMixin from '@carbon/web-components/es/globals/mixins/focus.js';
+import PlayVideo from '../../../es/icons/play-video.js';
+import PlayOutline from '@carbon/web-components/es/icons/play--outline/20.js';
+import PauseOutline from '@carbon/web-components/es/icons/pause--outline/20.js';
+import { formatVideoCaption, formatVideoDuration } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayerV7/KalturaPlayer.js';
+import { BUTTON_POSITION, VIDEO_PLAYER_CONTENT_STATE, VIDEO_PLAYER_PLAYING_MODE } from "./defs.js";
+import "../image/image.js";
+import styles from "././video-player.css.js";
+import StableSelectorMixin from "../../globals/mixins/stable-selector.js";
+import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import ifNonEmpty from '@carbon/web-components/es/globals/directives/if-non-empty.js';
+export { VIDEO_PLAYER_CONTENT_STATE };
+export { VIDEO_PLAYER_PLAYING_MODE };
+const {
+  stablePrefix: c4dPrefix
+} = settings;
+
+/**
+ * Video player.
+ *
+ * @element c4d-video-player-v7
+ * @csspart video - The video. Usage `c4d-video-player::part(video)`
+ * @csspart button - The play button. Usage `c4d-video-player::part(button)`
+ * @csspart image - The thumbnail image. Usage `c4d-video-player::part(image)`
+ * @csspart play-video - The play video icon. Usage `c4d-video-player::part(play-video)`
+ * @csspart video-container - The video container. Usage `c4d-video-player::part(video-container)`
+ * @csspart caption - The caption. Usage `c4d-video-player::part(caption)`
+ */
+let C4DVideoPlayer = _decorate([customElement(`${c4dPrefix}-video-player-v7`)], function (_initialize, _FocusMixin) {
+  class C4DVideoPlayer extends _FocusMixin {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: C4DVideoPlayer,
+    d: [{
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'playing-mode'
+      })],
+      key: "playingMode",
+      value() {
+        return VIDEO_PLAYER_PLAYING_MODE.INLINE;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'intersection-mode',
+        reflect: true,
+        type: Boolean
+      })],
+      key: "intersectionMode",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "isPlaying",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'button-position',
+        reflect: true
+      })],
+      key: "buttonPosition",
+      value() {
+        return BUTTON_POSITION.BOTTOM_RIGHT;
+      }
+    }, {
+      kind: "field",
+      key: "_handleClickOverlay",
+      value() {
+        return () => {
+          if (this.playingMode === VIDEO_PLAYER_PLAYING_MODE.INLINE) {
+            this.contentState = VIDEO_PLAYER_CONTENT_STATE.VIDEO;
+          }
+          const {
+            videoId,
+            name,
+            customVideoDescription
+          } = this;
+          const {
+            eventContentStateChange
+          } = this.constructor;
+          this.dispatchEvent(new CustomEvent(eventContentStateChange, {
+            bubbles: true,
+            composed: true,
+            detail: {
+              videoId,
+              contentState: VIDEO_PLAYER_CONTENT_STATE.VIDEO,
+              playingMode: this.playingMode,
+              name,
+              customVideoDescription
+            }
+          }));
+        };
+      }
+    }, {
+      kind: "field",
+      key: "_handleTogglePlayback",
+      value() {
+        return () => {
+          const {
+            videoId
+          } = this;
+          const {
+            eventTogglePlayback
+          } = this.constructor;
+          this.dispatchEvent(new CustomEvent(eventTogglePlayback, {
+            bubbles: true,
+            composed: true,
+            detail: {
+              videoId
+            }
+          }));
+        };
+      }
+    }, {
+      kind: "field",
+      key: "_renderContent",
+      value() {
+        return () => {
+          const {
+            contentState,
+            name,
+            thumbnailUrl,
+            backgroundMode,
+            _handleClickOverlay: handleClickOverlay,
+            intersectionMode
+          } = this;
+          if (intersectionMode) {
+            // IF the thumbnail url is empty, it should render nothing
+            const thumbnail = thumbnailUrl === '' ? nothing : html(_t || (_t = _` <c4d-image
+              default-src="${0}"
+              alt="${0}"
+              part="image">
+            </c4d-image>`), thumbnailUrl, ifNonEmpty(name));
+            return html(_t2 || (_t2 = _`
+        <div class="${0}--video-player__video">
+          ${0}
+        </div>
+      `), c4dPrefix, contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL ? thumbnail : html(_t3 || (_t3 = _` <slot></slot> `)));
+          } else {
+            // IF the thumbnail url is empty, it should render nothing
+            const thumbnail = thumbnailUrl === '' ? nothing : html(_t4 || (_t4 = _` <c4d-image
+              default-src="${0}"
+              alt="${0}"
+              part="image">
+              ${0}
+            </c4d-image>`), thumbnailUrl, ifNonEmpty(name), PlayVideo({
+              slot: 'icon',
+              part: 'play-video'
+            }));
+            return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL && !backgroundMode && !this.autoplay ? html(_t5 || (_t5 = _`
+            <div class="${0}--video-player__video" part="video">
+              <button
+                class="${0}--video-player__image-overlay"
+                part="button"
+                @click="${0}">
+                ${0}
+              </button>
+            </div>
+          `), c4dPrefix, c4dPrefix, handleClickOverlay, thumbnail) : html(_t6 || (_t6 = _` <slot></slot> `));
+          }
+        };
+      }
+    }, {
+      kind: "method",
+      key: "_updateThumbnailUrl",
+      value:
+      /**
+       * The video player's mode showing Inline or Lightbox.
+       */
+
+      /**
+       * Triggers playback on intersection with the viewport / carousel.
+       */
+
+      /**
+       * The current playback state, inherited from the parent.
+       */
+
+      /**
+       * The position of the toggle playback button.
+       */
+
+      /**
+       * Handles `click` event on the video thumbnail.
+       */
+
+      /**
+       * @returns The video content.
+       */
+
+      /**
+       * Updates video thumbnail url to match video width
+       */
+      function _updateThumbnailUrl() {
+        let thumbnailSrc = false;
+        try {
+          thumbnailSrc = new URL(this.thumbnailUrl);
+        } catch (error) {
+          // Do nothing.
+        }
+
+        // If current thumbnail is from Kaltura and includes this video's ID we should be able to safely update it.
+        if (thumbnailSrc && thumbnailSrc.host.toLowerCase().includes('kaltura') && thumbnailSrc.pathname.includes(this.videoId)) {
+          this.thumbnailUrl = KalturaPlayerAPI.getThumbnailUrl({
+            mediaId: this.videoId,
+            width: this.offsetWidth
+          });
+        }
+      }
+
+      /**
+       * userInitiatedTogglePlaybackState
+       */
+    }, {
+      kind: "method",
+      key: "userInitiatedTogglePlaybackState",
+      value: function userInitiatedTogglePlaybackState() {
+        const {
+          videoId
+        } = this;
+        const {
+          eventPlaybackStateChange
+        } = this.constructor;
+        this.dispatchEvent(new CustomEvent(eventPlaybackStateChange, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            videoId,
+            playingMode: this.playingMode
+          }
+        }));
+      }
+
+      /**
+       * The video player's content state.
+       */
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'content-state'
+      })],
+      key: "contentState",
+      value() {
+        return VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number
+      })],
+      key: "duration",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "formatCaption",
+      value() {
+        return formatVideoCaption;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "formatDuration",
+      value() {
+        return formatVideoDuration;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'hide-caption'
+      })],
+      key: "hideCaption",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "name",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'background-mode',
+        reflect: true,
+        type: Boolean
+      })],
+      key: "backgroundMode",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'auto-play',
+        reflect: true,
+        type: Boolean
+      })],
+      key: "autoplay",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'video-description'
+      })],
+      key: "customVideoDescription",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'thumbnail-url'
+      })],
+      key: "thumbnailUrl",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'video-id'
+      })],
+      key: "videoId",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'aspect-ratio'
+      })],
+      key: "aspectRatio",
+      value: void 0
+    }, {
+      kind: "method",
+      key: "render",
+      value:
+      /**
+       * The video duration.
+       */
+      /**
+       * The formatter for the video caption, composed with the video name and the video duration.
+       * Should be changed upon the locale the UI is rendered with.
+       */
+      /**
+       * The formatter for the video duration.
+       * Should be changed upon the locale the UI is rendered with.
+       */
+      /**
+       * `true` to hide the caption.
+       */
+      /**
+       * The video name.
+       */
+      /**
+       * `true` to autoplay, mute video, and hide UI
+       */
+      /**
+       * `true` to autoplay
+       */
+      /**
+       * Custom video description. This property should only be set when using `playing-mode="lightbox"`
+       */
+      /**
+       * The thumbnail URL.
+       */
+      /**
+       * The video ID.
+       */
+      /**
+       * Override default aspect ratio of `16x9`.
+       * Available aspect ratios:
+       *
+       * `16x9`, `9x16`, `2x1`, `1x2`, `4x3`, `3x4`, `1x1`
+       */
+      function render() {
+        const isRTL = this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
+        const {
+          aspectRatio,
+          duration,
+          formatCaption,
+          formatDuration,
+          hideCaption,
+          name,
+          buttonPosition,
+          intersectionMode,
+          _handleTogglePlayback: handleTogglePlayback,
+          _renderContent: renderContent
+        } = this;
+        const aspectRatioClass = classMap({
+          [`${c4dPrefix}--video-player__video-container`]: true,
+          [`${c4dPrefix}--video-player__aspect-ratio--${aspectRatio}`]: !!aspectRatio
+        });
+        const togglePlaybackClass = classMap({
+          [`${c4dPrefix}--video-player__toggle-playback`]: true,
+          [`${c4dPrefix}--video-player__toggle-playback--${buttonPosition}`]: true
+        });
+        return html(_t7 || (_t7 = _`
+      <div class="${0}" part="video-container">
+        ${0}
+        ${0}
+      </div>
+      ${0}
+    `), aspectRatioClass, intersectionMode ? html(_t8 || (_t8 = _`
+              <button
+                class="${0}"
+                @click="${0}"
+                tabindex="0"
+                part="button">
+                ${0}
+              </button>
+            `), togglePlaybackClass, handleTogglePlayback, this.isPlaying ? PauseOutline({
+          'aria-label': 'Pause'
+        }) : PlayOutline({
+          'aria-label': 'Play'
+        })) : null, renderContent(), hideCaption ? undefined : html(_t9 || (_t9 = _`
+            <div
+              class="${0}--video-player__video-caption"
+              part="caption"
+              dir="${0}">
+              ${0}
+            </div>
+          `), c4dPrefix, isRTL ? 'rtl' : 'ltr', formatCaption({
+          duration: formatDuration({
+            duration: !duration ? duration : duration * 1000
+          }),
+          name
+        })));
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated(changedProperties) {
+        if (changedProperties.has('duration') || changedProperties.has('formatCaption') || changedProperties.has('name') || changedProperties.has('backgroundMode')) {
+          const {
+            duration,
+            formatCaption,
+            formatDuration,
+            name
+          } = this;
+          const caption = formatCaption({
+            duration: formatDuration({
+              duration: !duration ? duration : duration * 1000
+            }),
+            name
+          });
+          if (caption) {
+            this.setAttribute('aria-label', caption);
+          }
+        }
+
+        // Move measurement & API call to callback queue & wait for update to complete.
+        setTimeout(async () => {
+          await this.updateComplete;
+          if (!this.thumbnailUrl.endsWith(`${this.offsetWidth}`)) {
+            this._updateThumbnailUrl();
+          }
+        }, 0);
+      }
+    }, {
+      kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated() {
+        var _this$parentElement, _this$parentElement2, _this$parentElement3;
+        this.tabIndex = 0;
+        this.backgroundMode = Boolean((_this$parentElement = this.parentElement) === null || _this$parentElement === void 0 ? void 0 : _this$parentElement.backgroundMode);
+        this.intersectionMode = Boolean((_this$parentElement2 = this.parentElement) === null || _this$parentElement2 === void 0 ? void 0 : _this$parentElement2.intersectionMode);
+        this.autoplay = Boolean((_this$parentElement3 = this.parentElement) === null || _this$parentElement3 === void 0 ? void 0 : _this$parentElement3.autoPlay);
+      }
+
+      /**
+       * The name of the custom event fired after video content state is changed upon a user gesture.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "eventContentStateChange",
+      value: function () {
+        return `${c4dPrefix}-video-player-content-state-changed`;
+      }
+
+      /**
+       * The name of the custom event fired requesting playback state change.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "eventPlaybackStateChange",
+      value: function () {
+        return `${c4dPrefix}-video-player-playback-state-changed`;
+      }
+    }, {
+      kind: "get",
+      static: true,
+      key: "stableSelector",
+      value: function () {
+        return `${c4dPrefix}--video-player`;
+      }
+
+      /**
+       * The name of the custom event fired when a user action toggles playback.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "eventTogglePlayback",
+      value: function () {
+        return `${c4dPrefix}-video-player-toggle-playback`;
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "shadowRootOptions",
+      value() {
+        return _objectSpread(_objectSpread({}, LitElement.shadowRootOptions), {}, {
+          delegatesFocus: true
+        });
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, FocusMixin(StableSelectorMixin(LitElement)));
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DVideoPlayer;
+//# sourceMappingURL=video-player.js.map

package/es/components/video-player-v7/video-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.js","names":["LitElement","html","nothing","property","classMap","FocusMixin","PlayVideo","PlayOutline","PauseOutline","formatVideoCaption","formatVideoDuration","settings","KalturaPlayerAPI","BUTTON_POSITION","VIDEO_PLAYER_CONTENT_STATE","VIDEO_PLAYER_PLAYING_MODE","styles","StableSelectorMixin","carbonElement","customElement","ifNonEmpty","stablePrefix","c4dPrefix","C4DVideoPlayer","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","decorators","reflect","attribute","key","value","INLINE","type","Boolean","BOTTOM_RIGHT","playingMode","contentState","VIDEO","videoId","name","customVideoDescription","eventContentStateChange","dispatchEvent","CustomEvent","bubbles","composed","detail","eventTogglePlayback","thumbnailUrl","backgroundMode","_handleClickOverlay","handleClickOverlay","intersectionMode","thumbnail","_t","_","_t2","THUMBNAIL","_t3","_t4","slot","part","autoplay","_t5","_t6","_updateThumbnailUrl","thumbnailSrc","URL","error","host","toLowerCase","includes","pathname","getThumbnailUrl","mediaId","width","offsetWidth","userInitiatedTogglePlaybackState","eventPlaybackStateChange","Number","render","isRTL","dir","getComputedStyle","direction","aspectRatio","duration","formatCaption","formatDuration","hideCaption","buttonPosition","_handleTogglePlayback","handleTogglePlayback","_renderContent","renderContent","aspectRatioClass","togglePlaybackClass","_t7","_t8","isPlaying","undefined","_t9","updated","changedProperties","has","caption","setAttribute","setTimeout","updateComplete","endsWith","firstUpdated","_this$parentElement","_this$parentElement2","_this$parentElement3","tabIndex","parentElement","autoPlay","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/video-player-v7/video-player.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport FocusMixin from '@carbon/web-components/es/globals/mixins/focus.js';\nimport PlayVideo from '../../../es/icons/play-video.js';\nimport PlayOutline from '@carbon/web-components/es/icons/play--outline/20.js';\nimport PauseOutline from '@carbon/web-components/es/icons/pause--outline/20.js';\nimport {\n  formatVideoCaption,\n  formatVideoDuration,\n} from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayerV7/KalturaPlayer.js';\nimport {\n  BUTTON_POSITION,\n  VIDEO_PLAYER_CONTENT_STATE,\n  VIDEO_PLAYER_PLAYING_MODE,\n} from './defs';\nimport '../image/image';\nimport styles from './video-player.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport ifNonEmpty from '@carbon/web-components/es/globals/directives/if-non-empty.js';\nimport C4DVideoPlayerComposite from './video-player-composite';\n\nexport { VIDEO_PLAYER_CONTENT_STATE };\nexport { VIDEO_PLAYER_PLAYING_MODE };\n\nconst { stablePrefix: c4dPrefix } = settings;\n\n/**\n * Video player.\n *\n * @element c4d-video-player-v7\n * @csspart video - The video. Usage `c4d-video-player::part(video)`\n * @csspart button - The play button. Usage `c4d-video-player::part(button)`\n * @csspart image - The thumbnail image. Usage `c4d-video-player::part(image)`\n * @csspart play-video - The play video icon. Usage `c4d-video-player::part(play-video)`\n * @csspart video-container - The video container. Usage `c4d-video-player::part(video-container)`\n * @csspart caption - The caption. Usage `c4d-video-player::part(caption)`\n */\n@customElement(`${c4dPrefix}-video-player-v7`)\nclass C4DVideoPlayer extends FocusMixin(StableSelectorMixin(LitElement)) {\n  /**\n   * The video player's mode showing Inline or Lightbox.\n   */\n  @property({ reflect: true, attribute: 'playing-mode' })\n  playingMode = VIDEO_PLAYER_PLAYING_MODE.INLINE;\n\n  /**\n   * Triggers playback on intersection with the viewport / carousel.\n   */\n  @property({ attribute: 'intersection-mode', reflect: true, type: Boolean })\n  intersectionMode = false;\n\n  /**\n   * The current playback state, inherited from the parent.\n   */\n  @property()\n  isPlaying = false;\n\n  /**\n   * The position of the toggle playback button.\n   */\n  @property({ attribute: 'button-position', reflect: true })\n  buttonPosition = BUTTON_POSITION.BOTTOM_RIGHT;\n\n  /**\n   * Handles `click` event on the video thumbnail.\n   */\n  protected _handleClickOverlay = () => {\n    if (this.playingMode === VIDEO_PLAYER_PLAYING_MODE.INLINE) {\n      this.contentState = VIDEO_PLAYER_CONTENT_STATE.VIDEO;\n    }\n    const { videoId, name, customVideoDescription } = this;\n    const { eventContentStateChange } = this\n      .constructor as typeof C4DVideoPlayer;\n    this.dispatchEvent(\n      new CustomEvent(eventContentStateChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          videoId,\n          contentState: VIDEO_PLAYER_CONTENT_STATE.VIDEO,\n          playingMode: this.playingMode,\n          name,\n          customVideoDescription,\n        },\n      })\n    );\n  };\n\n  protected _handleTogglePlayback = () => {\n    const { videoId } = this;\n    const { eventTogglePlayback } = this.constructor as typeof C4DVideoPlayer;\n    this.dispatchEvent(\n      new CustomEvent(eventTogglePlayback, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          videoId,\n        },\n      })\n    );\n  };\n\n  /**\n   * @returns The video content.\n   */\n  protected _renderContent = () => {\n    const {\n      contentState,\n      name,\n      thumbnailUrl,\n      backgroundMode,\n      _handleClickOverlay: handleClickOverlay,\n      intersectionMode,\n    } = this;\n    if (intersectionMode) {\n      // IF the thumbnail url is empty, it should render nothing\n      const thumbnail =\n        thumbnailUrl === ''\n          ? nothing\n          : html` <c4d-image\n              default-src=\"${thumbnailUrl}\"\n              alt=\"${ifNonEmpty(name)}\"\n              part=\"image\">\n            </c4d-image>`;\n      return html`\n        <div class=\"${c4dPrefix}--video-player__video\">\n          ${contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL\n            ? thumbnail\n            : html` <slot></slot> `}\n        </div>\n      `;\n    } else {\n      // IF the thumbnail url is empty, it should render nothing\n      const thumbnail =\n        thumbnailUrl === ''\n          ? nothing\n          : html` <c4d-image\n              default-src=\"${thumbnailUrl}\"\n              alt=\"${ifNonEmpty(name)}\"\n              part=\"image\">\n              ${PlayVideo({ slot: 'icon', part: 'play-video' })}\n            </c4d-image>`;\n\n      return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL &&\n        !backgroundMode &&\n        !this.autoplay\n        ? html`\n            <div class=\"${c4dPrefix}--video-player__video\" part=\"video\">\n              <button\n                class=\"${c4dPrefix}--video-player__image-overlay\"\n                part=\"button\"\n                @click=\"${handleClickOverlay}\">\n                ${thumbnail}\n              </button>\n            </div>\n          `\n        : html` <slot></slot> `;\n    }\n  };\n\n  /**\n   * Updates video thumbnail url to match video width\n   */\n  protected _updateThumbnailUrl() {\n    let thumbnailSrc: false | URL = false;\n\n    try {\n      thumbnailSrc = new URL(this.thumbnailUrl);\n    } catch (error) {\n      // Do nothing.\n    }\n\n    // If current thumbnail is from Kaltura and includes this video's ID we should be able to safely update it.\n    if (\n      thumbnailSrc &&\n      thumbnailSrc.host.toLowerCase().includes('kaltura') &&\n      thumbnailSrc.pathname.includes(this.videoId!)\n    ) {\n      this.thumbnailUrl = KalturaPlayerAPI.getThumbnailUrl({\n        mediaId: this.videoId,\n        width: this.offsetWidth,\n      });\n    }\n  }\n\n  /**\n   * userInitiatedTogglePlaybackState\n   */\n  public userInitiatedTogglePlaybackState() {\n    const { videoId } = this;\n    const { eventPlaybackStateChange } = this\n      .constructor as typeof C4DVideoPlayer;\n    this.dispatchEvent(\n      new CustomEvent(eventPlaybackStateChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          videoId,\n          playingMode: this.playingMode,\n        },\n      })\n    );\n  }\n\n  /**\n   * The video player's content state.\n   */\n  @property({ reflect: true, attribute: 'content-state' })\n  contentState = VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL;\n\n  /**\n   * The video duration.\n   */\n  @property({ type: Number })\n  duration?: number;\n\n  /**\n   * The formatter for the video caption, composed with the video name and the video duration.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatCaption = formatVideoCaption;\n\n  /**\n   * The formatter for the video duration.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatDuration = formatVideoDuration;\n\n  /**\n   * `true` to hide the caption.\n   */\n  @property({ type: Boolean, attribute: 'hide-caption' })\n  hideCaption = false;\n\n  /**\n   * The video name.\n   */\n  @property()\n  name = '';\n\n  /**\n   * `true` to autoplay, mute video, and hide UI\n   */\n  @property({ attribute: 'background-mode', reflect: true, type: Boolean })\n  backgroundMode = false;\n\n  /**\n   * `true` to autoplay\n   */\n  @property({ attribute: 'auto-play', reflect: true, type: Boolean })\n  autoplay = false;\n\n  /**\n   * Custom video description. This property should only be set when using `playing-mode=\"lightbox\"`\n   */\n  @property({ attribute: 'video-description' })\n  customVideoDescription?: string;\n\n  /**\n   * The thumbnail URL.\n   */\n  @property({ attribute: 'thumbnail-url' })\n  thumbnailUrl = '';\n\n  /**\n   * The video ID.\n   */\n  @property({ attribute: 'video-id' })\n  videoId?: string;\n\n  /**\n   * Override default aspect ratio of `16x9`.\n   * Available aspect ratios:\n   *\n   * `16x9`, `9x16`, `2x1`, `1x2`, `4x3`, `3x4`, `1x1`\n   */\n  @property({ attribute: 'aspect-ratio' })\n  aspectRatio?: string;\n\n  render() {\n    const isRTL =\n      this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';\n\n    const {\n      aspectRatio,\n      duration,\n      formatCaption,\n      formatDuration,\n      hideCaption,\n      name,\n      buttonPosition,\n      intersectionMode,\n      _handleTogglePlayback: handleTogglePlayback,\n      _renderContent: renderContent,\n    } = this;\n\n    const aspectRatioClass = classMap({\n      [`${c4dPrefix}--video-player__video-container`]: true,\n      [`${c4dPrefix}--video-player__aspect-ratio--${aspectRatio}`]:\n        !!aspectRatio,\n    });\n    const togglePlaybackClass = classMap({\n      [`${c4dPrefix}--video-player__toggle-playback`]: true,\n      [`${c4dPrefix}--video-player__toggle-playback--${buttonPosition}`]: true,\n    });\n\n    return html`\n      <div class=\"${aspectRatioClass}\" part=\"video-container\">\n        ${intersectionMode\n          ? html`\n              <button\n                class=\"${togglePlaybackClass}\"\n                @click=\"${handleTogglePlayback}\"\n                tabindex=\"0\"\n                part=\"button\">\n                ${this.isPlaying\n                  ? PauseOutline({ 'aria-label': 'Pause' })\n                  : PlayOutline({ 'aria-label': 'Play' })}\n              </button>\n            `\n          : null}\n        ${renderContent()}\n      </div>\n      ${hideCaption\n        ? undefined\n        : html`\n            <div\n              class=\"${c4dPrefix}--video-player__video-caption\"\n              part=\"caption\"\n              dir=\"${isRTL ? 'rtl' : 'ltr'}\">\n              ${formatCaption({\n                duration: formatDuration({\n                  duration: !duration ? duration : duration * 1000,\n                }),\n                name,\n              })}\n            </div>\n          `}\n    `;\n  }\n\n  updated(changedProperties) {\n    if (\n      changedProperties.has('duration') ||\n      changedProperties.has('formatCaption') ||\n      changedProperties.has('name') ||\n      changedProperties.has('backgroundMode')\n    ) {\n      const { duration, formatCaption, formatDuration, name } = this;\n      const caption = formatCaption({\n        duration: formatDuration({\n          duration: !duration ? duration : duration * 1000,\n        }),\n        name,\n      });\n      if (caption) {\n        this.setAttribute('aria-label', caption);\n      }\n    }\n\n    // Move measurement & API call to callback queue & wait for update to complete.\n    setTimeout(async () => {\n      await this.updateComplete;\n      if (!this.thumbnailUrl.endsWith(`${this.offsetWidth}`)) {\n        this._updateThumbnailUrl();\n      }\n    }, 0);\n  }\n\n  firstUpdated() {\n    this.tabIndex = 0;\n    this.backgroundMode = Boolean(\n      (this.parentElement as C4DVideoPlayerComposite)?.backgroundMode\n    );\n    this.intersectionMode = Boolean(\n      (this.parentElement as C4DVideoPlayerComposite)?.intersectionMode\n    );\n    this.autoplay = Boolean(\n      (this.parentElement as C4DVideoPlayerComposite)?.autoPlay\n    );\n  }\n\n  /**\n   * The name of the custom event fired after video content state is changed upon a user gesture.\n   */\n  static get eventContentStateChange() {\n    return `${c4dPrefix}-video-player-content-state-changed`;\n  }\n\n  /**\n   * The name of the custom event fired requesting playback state change.\n   */\n  static get eventPlaybackStateChange() {\n    return `${c4dPrefix}-video-player-playback-state-changed`;\n  }\n\n  static get stableSelector() {\n    return `${c4dPrefix}--video-player`;\n  }\n\n  /**\n   * The name of the custom event fired when a user action toggles playback.\n   */\n  static get eventTogglePlayback() {\n    return `${c4dPrefix}-video-player-toggle-playback`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DVideoPlayer;\n"],"mappings":"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","ignoreList":[]}

package/es/components-react/video-player-v7/defs.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from '../../components/video-player-v7/defs.js';

package/es/components-react/video-player-v7/video-player-composite.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Component } from 'react';
+export interface ComponentProps {
+  /**
+   * The event handler for the custom event fired after video content state is changed upon a user gesture.
+   */
+  onContentStateChange?: (event: CustomEvent) => void;
+  /**
+   * The event handler for the custom event fired requesting playback state change.
+   */
+  onPlaybackStateChange?: (event: CustomEvent) => void;
+  /**
+   * The event handler for the custom event fired requesting to toggle playback.
+   */
+  onTogglePlayback?: (event: CustomEvent) => void;
+  [prop: string]: unknown;
+}
+/**
+ * Component that renders video player from its metadata, etc.
+ *
+ * @element c4d-video-player-composite-v7
+ * @csspart video-player - The video player. Usage `c4d-video-player-composite-v7::part(video-player)`
+ */
+declare class C4DVideoPlayerComposite extends Component<ComponentProps> {}
+export default C4DVideoPlayerComposite;