@carbon/ibmdotcom-web-components 2.42.0 → 2.44.0

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

@@ -0,0 +1,705 @@
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _get from "@babel/runtime/helpers/esm/get";
+let _ = t => t,
+  _t,
+  _t2;
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayerV7/KalturaPlayer.js';
+import HybridRenderMixin from "../../globals/mixins/hybrid-render.js";
+import { VIDEO_PLAYER_CONTENT_STATE, VIDEO_PLAYER_PLAYING_MODE } from "./video-player.js";
+// Above import is interface-only ref and thus code won't be brought into the build
+// Above import is interface-only ref and thus code won't be brought into the build
+// Above import is interface-only ref and thus code won't be brought into the build
+import "./video-player.js";
+import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { BUTTON_POSITION } from "./defs.js";
+import ifNonEmpty from '@carbon/web-components/es/globals/directives/if-non-empty.js';
+const {
+  stablePrefix: c4dPrefix
+} = settings;
+
+/**
+ * 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)`
+ */
+let C4DVideoPlayerComposite = _decorate([customElement(`${c4dPrefix}-video-player-composite-v7`)], function (_initialize, _HybridRenderMixin) {
+  class C4DVideoPlayerComposite extends _HybridRenderMixin {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: C4DVideoPlayerComposite,
+    d: [{
+      kind: "method",
+      key: "_activateEmbeddedVideo",
+      value:
+      /**
+       * The placeholder for `_loadVideoData()` Redux action that may be mixed in.
+       *
+       * @internal
+       */
+
+      /**
+       * The placeholder for `_loadVideoData()` Redux action that may be mixed in.
+       *
+       * @internal
+       */
+
+      /**
+       * The placeholder for `_setAutoplayPreference()` Redux action that may be mixed in.
+       */
+      // @ts-ignore
+
+      /**
+       * The placeholder for `_getAutoplayPreference()` Redux action that may be mixed in.
+       */
+      // @ts-ignore
+
+      /**
+       * Activate the DOM nodes for the embedded video of the given video ID, and deactivates others.
+       *
+       * @param videoId The video ID to activate.
+       */
+      function _activateEmbeddedVideo(videoId) {
+        const {
+          embeddedVideos = {}
+        } = this;
+        Object.keys(embeddedVideos).forEach(key => {
+          const kalturaPlayer = embeddedVideos[key];
+          key === videoId ? kalturaPlayer.play() : kalturaPlayer.pause();
+        });
+      }
+
+      /**
+       * The video player.
+       */
+    }, {
+      kind: "get",
+      key: "_videoPlayer",
+      value: function () {
+        const {
+          selectorVideoPlayer
+        } = this.constructor;
+        return this.querySelector(selectorVideoPlayer);
+      }
+
+      /**
+       * Clean-up and create intersection observers.
+       *
+       * When this.intersectionMode, we use intersection observers to track when
+       * the video container is in view, and embed / play / pause the video
+       * accordingly.
+       *
+       * @param [options] The options.
+       * @param [options.create] `true` to create necessary intersection observers.
+       */
+    }, {
+      kind: "method",
+      key: "_cleanAndCreateObserverIntersection",
+      value: function _cleanAndCreateObserverIntersection({
+        create
+      } = {}) {
+        // Cleanup.
+        if (this._observerIntersectionIntoView) {
+          this._observerIntersectionIntoView.unobserve(this);
+        }
+        if (this._observerIntersectionOutOfView) {
+          this._observerIntersectionOutOfView.unobserve(this);
+        }
+        // Create new intersection observers.
+        if (create) {
+          this._observerIntersectionIntoView = new IntersectionObserver(this._intersectionIntoViewHandler.bind(this), {
+            root: this.closest('c4d-carousel'),
+            rootMargin: '0px',
+            threshold: 0.9
+          });
+          this._observerIntersectionOutOfView = new IntersectionObserver(this._intersectionOutOfViewHandler.bind(this), {
+            root: this.closest('c4d-carousel'),
+            rootMargin: '0px',
+            threshold: 0.5
+          });
+          this._observerIntersectionIntoView.observe(this);
+          this._observerIntersectionOutOfView.observe(this);
+        }
+      }
+
+      /**
+       * Observer for when the video container enters into view.
+       *
+       * Autoplay the video, resecting the users stored autoplay preference.
+       */
+    }, {
+      kind: "method",
+      key: "_intersectionIntoViewHandler",
+      value: function _intersectionIntoViewHandler(entries) {
+        const {
+          videoId
+        } = this;
+        entries.forEach(entry => {
+          if (entry.isIntersecting && this._getAutoplayPreference() !== false) {
+            var _this$_embedMedia;
+            (_this$_embedMedia = this._embedMedia) === null || _this$_embedMedia === void 0 || _this$_embedMedia.call(this, videoId);
+            this.playAllVideos();
+          }
+        });
+      }
+
+      /**
+       * Observer for when the video container goes out of view.
+       *
+       * Auto-pause the video, video playback controlled by intersection observers
+       * here are meant to be ambient, without audio. No reason for playback when
+       * user is not seeing the video content.
+       */
+    }, {
+      kind: "method",
+      key: "_intersectionOutOfViewHandler",
+      value: function _intersectionOutOfViewHandler(entries) {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) {
+            this.pauseAllVideos(false);
+          }
+        });
+      }
+
+      /**
+       * Handles `c4d-video-player-content-state-changed` event.
+       * Such event is fired when user changes video content state, e.g. from thumbnail to video player.
+       *
+       * @param event The event.
+       */
+    }, {
+      kind: "method",
+      decorators: [HostListener('eventContentStateChange')],
+      key: "_handleContentStateChange",
+      value: function _handleContentStateChange(event) {
+        const {
+          contentState,
+          playingMode,
+          videoId
+        } = event.detail;
+        if (contentState === VIDEO_PLAYER_CONTENT_STATE.VIDEO && playingMode === VIDEO_PLAYER_PLAYING_MODE.INLINE && videoId) {
+          var _this$_embedMedia2;
+          (_this$_embedMedia2 = this._embedMedia) === null || _this$_embedMedia2 === void 0 || _this$_embedMedia2.call(this, videoId);
+        }
+      }
+    }, {
+      kind: "method",
+      decorators: [HostListener('eventPlaybackStateChange')],
+      key: "_handlePlaybackStateChange",
+      value: function _handlePlaybackStateChange(event) {
+        const {
+          videoId
+        } = event.detail;
+        const {
+          embeddedVideos = {}
+        } = this;
+        if (this.isPlaying) {
+          embeddedVideos[videoId].pause();
+          this.isPlaying = false;
+        } else {
+          embeddedVideos[videoId].play();
+          this.isPlaying = true;
+        }
+        this._setAutoplayPreference(this.isPlaying);
+        this.playbackTriggered = true;
+      }
+    }, {
+      kind: "method",
+      decorators: [HostListener('eventTogglePlayback')],
+      key: "_handleEventTogglePlayback",
+      value: function _handleEventTogglePlayback(event) {
+        const {
+          videoId
+        } = event.detail;
+        if (videoId) {
+          var _this$_embedMedia3;
+          this._setAutoplayPreference(!this.isPlaying);
+
+          // First ensure that the media has actually been embedded.
+          (_this$_embedMedia3 = this._embedMedia) === null || _this$_embedMedia3 === void 0 || _this$_embedMedia3.call(this, videoId);
+          if (this.isPlaying) {
+            this.pauseAllVideos();
+          } else {
+            this.playAllVideos();
+          }
+        }
+      }
+    }, {
+      kind: "method",
+      key: "pauseAllVideos",
+      value: function pauseAllVideos(updateAutoplayPreference = true) {
+        const {
+          embeddedVideos = {}
+        } = this;
+        Object.keys(embeddedVideos).forEach(videoId => {
+          var _embeddedVideos$video;
+          (_embeddedVideos$video = embeddedVideos[videoId]) === null || _embeddedVideos$video === void 0 || _embeddedVideos$video.pause();
+        });
+        this.isPlaying = false;
+        if (updateAutoplayPreference) {
+          this._setAutoplayPreference(false);
+        }
+      }
+    }, {
+      kind: "method",
+      key: "playAllVideos",
+      value: function playAllVideos(updateAutoplayPreference = true) {
+        const {
+          embeddedVideos = {}
+        } = this;
+        Object.keys(embeddedVideos).forEach(videoId => {
+          var _embeddedVideos$video2;
+          (_embeddedVideos$video2 = embeddedVideos[videoId]) === null || _embeddedVideos$video2 === void 0 || _embeddedVideos$video2.play();
+        });
+        this.isPlaying = true;
+        this.playbackTriggered = true;
+        if (updateAutoplayPreference) {
+          this._setAutoplayPreference(true);
+        }
+      }
+    }, {
+      kind: "method",
+      key: "getIsVideoPlaying",
+      value: function getIsVideoPlaying() {
+        var _iframe$contentWindow;
+        // GET BACK INTO THIS
+        const iframe = this.querySelector('iframe');
+        const playerContainer = iframe === null || iframe === void 0 || (_iframe$contentWindow = iframe.contentWindow) === null || _iframe$contentWindow === void 0 ? void 0 : _iframe$contentWindow.document.querySelector('div.play-state');
+        return !(playerContainer == null);
+      }
+
+      /**
+       * `true` to autoplay the videos.
+       */
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'auto-play'
+      })],
+      key: "autoPlay",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'muted'
+      })],
+      key: "muted",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "embeddedVideos",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'caption'
+      })],
+      key: "caption",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'video-description'
+      })],
+      key: "customVideoDescription",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "formatCaption",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "formatDuration",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'hide-caption'
+      })],
+      key: "hideCaption",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'background-mode',
+        reflect: true
+      })],
+      key: "backgroundMode",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'intersection-mode',
+        reflect: true,
+        type: Boolean
+      })],
+      key: "intersectionMode",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'button-position',
+        reflect: true
+      })],
+      key: "buttonPosition",
+      value() {
+        return BUTTON_POSITION.BOTTOM_RIGHT;
+      }
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "playbackTriggered",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "mediaData",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'video-id'
+      })],
+      key: "videoId",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'aspect-ratio'
+      })],
+      key: "aspectRatio",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean
+      })],
+      key: "isPlaying",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'playing-mode'
+      })],
+      key: "playingMode",
+      value() {
+        return VIDEO_PLAYER_PLAYING_MODE.INLINE;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true,
+        attribute: 'thumbnail'
+      })],
+      key: "thumbnail",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number,
+        attribute: 'video-thumbnail-width'
+      })],
+      key: "videoThumbnailWidth",
+      value() {
+        return 3;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean
+      })],
+      key: "isRTL",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value:
+      /**
+       * `true` load videos with sound muted.
+       */
+      /**
+       * The embedded Kaltura player element (that has APIs), keyed by the video ID.
+       */
+      /**
+       * Optional custom video caption.
+       */
+      /**
+       * Custom video description. This property should only be set when `playing-mode="lightbox"`.
+       */
+      /**
+       * 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.
+       */
+      /**
+       * `true` to autoplay, mute, and hide player UI.
+       */
+      /**
+       * Triggers playback on intersection with the viewport / carousel.
+       */
+      /**
+       * The position of the toggle playback button.
+       */
+      /**
+       * Track when we have triggered initial playback.
+       */
+      /**
+       * The video data, keyed by the video ID.
+       */
+      /**
+       * The video ID.
+       */
+      /**
+       * The aspect ratio.
+       */
+      /**
+       * The current playback state
+       */
+      /**
+       * The video player's mode showing Inline or Lightbox.
+       */
+      /**
+       * Optional custom video thumbnail
+       */
+      /**
+       * The video thumbnail width.
+       */
+      /**
+       *  Determines if the direction is right-to-left
+       */
+      /**
+       * Observe when the video container enters into view.
+       */
+      /**
+       * Observe when the video container goes out of view.
+       */
+      function connectedCallback() {
+        _superPropGet(C4DVideoPlayerComposite, "connectedCallback", this, 3)([]);
+        if (this.backgroundMode) {
+          this.hideCaption = true;
+        }
+        if (this.autoPlay || this.backgroundMode) {
+          const storedPreference = this._getAutoplayPreference();
+          if (storedPreference === null) {
+            this.isPlaying = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+          } else {
+            this.isPlaying = storedPreference;
+          }
+        }
+        if (this.intersectionMode) {
+          this._cleanAndCreateObserverIntersection({
+            create: true
+          });
+        }
+
+        // initializing the MutationObserver to observe for changes in the direction mode
+        this.observer = new MutationObserver(() => {
+          this.isRTL = this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
+        });
+
+        // observing the 'dir' attr in the root element
+        this.observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ['dir']
+        });
+
+        // Initial check for the direction
+        this.isRTL = this.dir === 'rtl' || getComputedStyle(this).direction === 'rtl';
+      }
+    }, {
+      kind: "method",
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        _superPropGet(C4DVideoPlayerComposite, "disconnectedCallback", this, 3)([]);
+        this._cleanAndCreateObserverIntersection();
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated(changedProperties) {
+        if (changedProperties.has('videoId')) {
+          const {
+            autoPlay,
+            videoId,
+            backgroundMode
+          } = this;
+          this._activateEmbeddedVideo(videoId);
+          if (videoId) {
+            var _this$_loadVideoData;
+            (_this$_loadVideoData = this._loadVideoData) === null || _this$_loadVideoData === void 0 || _this$_loadVideoData.call(this, videoId);
+            if (autoPlay || backgroundMode) {
+              var _this$_embedMedia4;
+              (_this$_embedMedia4 = this._embedMedia) === null || _this$_embedMedia4 === void 0 || _this$_embedMedia4.call(this, videoId);
+            }
+          }
+        }
+      }
+    }, {
+      kind: "method",
+      key: "renderLightDOM",
+      value: function renderLightDOM() {
+        var _document$querySelect;
+        // setting the direction mode of the video player.
+        (_document$querySelect = document.querySelector('.c4d--video-player__video')) === null || _document$querySelect === void 0 || _document$querySelect.setAttribute('dir-mode', `${this.isRTL ? 'rtl' : 'ltr'}`);
+        const {
+          aspectRatio,
+          formatCaption,
+          formatDuration,
+          hideCaption,
+          caption,
+          customVideoDescription,
+          mediaData = {},
+          videoId,
+          videoThumbnailWidth,
+          thumbnail,
+          playingMode,
+          buttonPosition
+        } = this;
+        const {
+          [videoId]: currentVideoData = {}
+        } = mediaData;
+        const {
+          duration,
+          name
+        } = currentVideoData;
+        const thumbnailUrl = thumbnail || KalturaPlayerAPI.getThumbnailUrl({
+          mediaId: videoId,
+          width: videoThumbnailWidth
+        });
+        return html(_t || (_t = _`
+      <c4d-video-player-v7
+        part="video-player"
+        duration="${0}"
+        ?hide-caption=${0}
+        name="${0}"
+        video-description="${0}"
+        thumbnail-url="${0}"
+        video-id="${0}"
+        aspect-ratio="${0}"
+        playing-mode="${0}"
+        content-state="${0}"
+        button-position="${0}"
+        .formatCaption="${0}"
+        .formatDuration="${0}"
+        .isPlaying=${0}>
+      </c4d-video-player-v7>
+    `), ifNonEmpty(duration), hideCaption, ifNonEmpty(caption || name), ifNonEmpty(customVideoDescription), ifNonEmpty(thumbnailUrl), ifNonEmpty(videoId), ifNonEmpty(aspectRatio), ifNonEmpty(playingMode), this.playbackTriggered ? VIDEO_PLAYER_CONTENT_STATE.VIDEO : VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL, buttonPosition, ifNonEmpty(formatCaption), ifNonEmpty(formatDuration), this.isPlaying);
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        return html(_t2 || (_t2 = _` <slot></slot> `));
+      }
+
+      /**
+       * A selector selecting the video player component.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "selectorVideoPlayer",
+      value: function () {
+        return `${c4dPrefix}-video-player-v7`;
+      }
+
+      /**
+       * 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`;
+      }
+
+      /**
+       * The name of the custom event fired requesting to toggle playback.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "eventTogglePlayback",
+      value: function () {
+        return `${c4dPrefix}-video-player-toggle-playback`;
+      }
+    }]
+  };
+}, HybridRenderMixin(HostListenerMixin(LitElement)));
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DVideoPlayerComposite;
+//# sourceMappingURL=video-player-composite.js.map