@atlaskit/media-ui 28.5.2 → 28.5.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/media-ui
 
+## 28.5.3
+
+### Patch Changes
+
+- [#177475](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177475)
+  [`1aab7f41921a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1aab7f41921a4) -
+  Refactored Media Player to fetch captions on request. Moved all captions logic to internal hook.
+- Updated dependencies
+
 ## 28.5.2
 
 ### Patch Changes

package/dist/cjs/customMediaPlayer/index.js

@@ -16,7 +16,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = function CustomMedia
   return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_indexCompiled.CustomMediaPlayerBase, props) : /*#__PURE__*/_react.default.createElement(_indexEmotion.CustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.5.1";
+var packageVersion = "28.5.2";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var CustomMediaPlayer = exports.CustomMediaPlayer = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -6,19 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaPlayerWihtoutContext = exports.MediaPlayer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaPlayerBase = require("./mediaPlayerBase");
-var _useTextTracks = require("./useTextTracks");
+var _useTextTracks2 = require("./useTextTracks");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _excluded = ["onPlay"];
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.5.1";
-var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(props) {
+var packageVersion = "28.5.2";
+var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(_ref) {
+  var _onPlay = _ref.onPlay,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var mediaSettings = (0, _mediaClientReact.useMediaSettings)();
-  var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _props$identifier = props.identifier,
     id = _props$identifier.id,
     collectionName = _props$identifier.collectionName;
@@ -26,12 +29,24 @@ var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function Med
       collectionName: collectionName
     }),
     fileState = _useFileState.fileState;
-  var textTracks = (0, _useTextTracks.useTextTracks)(fileState, mediaClient, collectionName);
+  var _useTextTracks = (0, _useTextTracks2.useTextTracks)(fileState, collectionName),
+    textTracks = _useTextTracks.textTracks,
+    verifyUserCaptionsEnabled = _useTextTracks.verifyUserCaptionsEnabled,
+    setSelectedTracksIndex = _useTextTracks.setSelectedTracksIndex,
+    setAreCaptionsEnabled = _useTextTracks.setAreCaptionsEnabled,
+    areCaptionsEnabled = _useTextTracks.areCaptionsEnabled;
   return /*#__PURE__*/_react.default.createElement(_mediaPlayerBase.MediaPlayerBase, (0, _extends2.default)({}, props, {
     fileState: fileState,
     mediaSettings: mediaSettings,
     textTracks: textTracks,
-    createAnalyticsEvent: createAnalyticsEvent
+    createAnalyticsEvent: createAnalyticsEvent,
+    areCaptionsEnabled: areCaptionsEnabled,
+    onPlay: function onPlay() {
+      verifyUserCaptionsEnabled();
+      _onPlay === null || _onPlay === void 0 || _onPlay();
+    },
+    onTextTracksSelected: setSelectedTracksIndex,
+    onCaptionsEnabledChange: setAreCaptionsEnabled
   }));
 };
 var MediaPlayer = exports.MediaPlayer = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/customMediaPlayer/mediaPlayer/mediaPlayerBase.js

@@ -50,7 +50,6 @@ var _legacyCustomIcons = require("@atlaskit/legacy-custom-icons");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _videoSkipForwardTen = _interopRequireDefault(require("@atlaskit/icon/core/video-skip-forward-ten"));
 var _videoSkipBackwardTen = _interopRequireDefault(require("@atlaskit/icon/core/video-skip-backward-ten"));
-var _captions = require("./captions");
 var _artifactUploader = require("./captions/artifactUploader");
 var _captionDeleteConfirmationModal = _interopRequireDefault(require("./captions/captionDeleteConfirmationModal"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -131,10 +130,13 @@ var spinnerWrapperStyles = {
   root: "_kqswstnw _154ize3t _1ltvze3t _1bsb1osq _4t3i1osq"
 };
 var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
-  function _MediaPlayerBase(props) {
+  function _MediaPlayerBase() {
     var _this;
     (0, _classCallCheck2.default)(this, _MediaPlayerBase);
-    _this = _callSuper(this, _MediaPlayerBase, [props]);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, _MediaPlayerBase, [].concat(args));
     (0, _defineProperty2.default)(_this, "videoWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "videoState", {
       isLoading: true,
@@ -156,25 +158,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       playerWidth: 100,
       // initial value for playerSize: 'small', i.e. width < 260px
       playbackSpeed: 1,
-      selectedTracksIndex: -1,
-      areCaptionsEnabled: false,
       isArtifactUploaderOpen: false,
       artifactToDelete: undefined
     });
-    (0, _defineProperty2.default)(_this, "findPreselectedTrackIndex", function (_ref) {
-      var _textTracks$captions;
-      var textTracks = _ref.textTracks,
-        intl = _ref.intl;
-      return (0, _captions.findPreselectedTrackIndex)((textTracks === null || textTracks === void 0 || (_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks) || [], intl.locale, _this.getUserCaptionsPreference());
-    });
-    (0, _defineProperty2.default)(_this, "getUserCaptionsPreference", function () {
-      return _this.mediaUserPreferences && (0, _captions.getUserCaptionsLocale)(_this.mediaUserPreferences);
-    });
-    (0, _defineProperty2.default)(_this, "setUserCaptionsPreference", function (selectedTracks) {
-      if (_this.mediaUserPreferences) {
-        (0, _captions.setUserCaptionsLocale)(_this.mediaUserPreferences, selectedTracks.lang);
-      }
-    });
     (0, _defineProperty2.default)(_this, "fireFirstPlayedTrackEvent", function () {
       var _this$props = _this.props,
         type = _this$props.type,
@@ -373,11 +359,11 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         })
       });
     });
-    (0, _defineProperty2.default)(_this, "renderShortcuts", function (_ref2) {
-      var togglePlayPauseAction = _ref2.togglePlayPauseAction,
-        toggleMute = _ref2.toggleMute,
-        skipBackward = _ref2.skipBackward,
-        skipForward = _ref2.skipForward;
+    (0, _defineProperty2.default)(_this, "renderShortcuts", function (_ref) {
+      var togglePlayPauseAction = _ref.togglePlayPauseAction,
+        toggleMute = _ref.toggleMute,
+        skipBackward = _ref.skipBackward,
+        skipForward = _ref.skipForward;
       var isShortcutEnabled = _this.props.isShortcutEnabled;
       var isFullScreenEnabled = _this.state.isFullScreenEnabled;
       var shortcuts = (isShortcutEnabled || isFullScreenEnabled) && [/*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
@@ -501,7 +487,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       (_this$props$onPause = (_this$props9 = _this.props).onPause) === null || _this$props$onPause === void 0 || _this$props$onPause.call(_this$props9);
     });
     (0, _defineProperty2.default)(_this, "play", function () {
-      var onFirstPlay = _this.props.onFirstPlay;
+      var _this$props0 = _this.props,
+        onFirstPlay = _this$props0.onFirstPlay,
+        onPlay = _this$props0.onPlay;
       if (_this.actions) {
         _this.actions.play();
       }
@@ -511,12 +499,7 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
-      if (_this.mediaUserPreferences) {
-        var userCaptionsEnabled = (0, _captions.getUserCaptionsEnabled)(_this.mediaUserPreferences);
-        _this.setState({
-          areCaptionsEnabled: userCaptionsEnabled
-        });
-      }
+      onPlay === null || onPlay === void 0 || onPlay();
     });
     (0, _defineProperty2.default)(_this, "getMediaButtonClickHandler", function (action, buttonType) {
       return function () {
@@ -535,13 +518,13 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     (0, _defineProperty2.default)(_this, "onViewed", function (videoState) {
-      var _this$props0 = _this.props,
-        createAnalyticsEvent = _this$props0.createAnalyticsEvent,
-        identifier = _this$props0.identifier,
-        isAutoPlay = _this$props0.isAutoPlay,
-        isHDAvailable = _this$props0.isHDAvailable,
-        isHDActive = _this$props0.isHDActive,
-        type = _this$props0.type;
+      var _this$props1 = _this.props,
+        createAnalyticsEvent = _this$props1.createAnalyticsEvent,
+        identifier = _this$props1.identifier,
+        isAutoPlay = _this$props1.isAutoPlay,
+        isHDAvailable = _this$props1.isHDAvailable,
+        isHDActive = _this$props1.isHDActive,
+        type = _this$props1.type;
       var _this$state2 = _this.state,
         isFullScreenEnabled = _this$state2.isFullScreenEnabled,
         playbackSpeed = _this$state2.playbackSpeed;
@@ -587,17 +570,12 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "startPlayByButtonClick", _this.getMediaButtonClickHandler(_this.play, 'playButton'));
     (0, _defineProperty2.default)(_this, "pausePlayByButtonClick", _this.getMediaButtonClickHandler(_this.pause, 'pauseButton'));
     (0, _defineProperty2.default)(_this, "onTextTracksSelected", function (selectedTracksIndex) {
-      var _this$props$textTrack;
-      var selectedTracks = (_this$props$textTrack = _this.props.textTracks) === null || _this$props$textTrack === void 0 || (_this$props$textTrack = _this$props$textTrack.captions) === null || _this$props$textTrack === void 0 ? void 0 : _this$props$textTrack.tracks[selectedTracksIndex];
-      !!selectedTracks && _this.setUserCaptionsPreference(selectedTracks);
-      _this.setState({
-        selectedTracksIndex: selectedTracksIndex
-      });
+      var _this$props$onTextTra, _this$props10;
+      (_this$props$onTextTra = (_this$props10 = _this.props).onTextTracksSelected) === null || _this$props$onTextTra === void 0 || _this$props$onTextTra.call(_this$props10, selectedTracksIndex);
     });
     (0, _defineProperty2.default)(_this, "onCaptionsEnabledChange", function (areCaptionsEnabled) {
-      _this.setState({
-        areCaptionsEnabled: areCaptionsEnabled
-      });
+      var _this$props$onCaption, _this$props11;
+      (_this$props$onCaption = (_this$props11 = _this.props).onCaptionsEnabledChange) === null || _this$props$onCaption === void 0 || _this$props$onCaption.call(_this$props11, areCaptionsEnabled);
     });
     (0, _defineProperty2.default)(_this, "onCaptionDelete", function (artifactName) {
       // Modal is not supported in fullscreen mode (as it uses portals which are not in the same DOM tree),
@@ -609,37 +587,24 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         artifactToDelete: artifactName
       });
     });
-    (0, _defineProperty2.default)(_this, "resolveSelectedTracksIndex", function () {
-      var _this$state3 = _this.state,
-        areCaptionsEnabled = _this$state3.areCaptionsEnabled,
-        selectedTracksIndex = _this$state3.selectedTracksIndex;
-      return areCaptionsEnabled ? selectedTracksIndex > -1 ? selectedTracksIndex : 0 : -1;
-    });
-    (0, _defineProperty2.default)(_this, "resolveTextTracks", function () {
-      var areCaptionsEnabled = _this.state.areCaptionsEnabled;
-      var textTracks = _this.props.textTracks;
-      var tracksKey = 'captions';
-      if (areCaptionsEnabled && textTracks !== null && textTracks !== void 0 && textTracks[tracksKey]) {
-        return _objectSpread(_objectSpread({}, textTracks), {}, (0, _defineProperty2.default)({}, tracksKey, _objectSpread(_objectSpread({}, textTracks[tracksKey]), {}, {
-          selectedTrackIndex: _this.resolveSelectedTracksIndex()
-        })));
-      }
-      return undefined;
-    });
     (0, _defineProperty2.default)(_this, "shouldRenderCaptionsControls", function () {
+      var _textTracks$captions;
       var textTracks = _this.props.textTracks;
       var playerWidth = _this.state.playerWidth;
-      return breakpointControls.captionsControls(playerWidth) && !!textTracks;
+      return breakpointControls.captionsControls(playerWidth) && !!textTracks && !!((_textTracks$captions = textTracks.captions) !== null && _textTracks$captions !== void 0 && (_textTracks$captions = _textTracks$captions.tracks) !== null && _textTracks$captions !== void 0 && _textTracks$captions.length);
     });
     (0, _defineProperty2.default)(_this, "renderCaptionsControls", function () {
       var textTracks = _this.props.textTracks;
-      var areCaptionsEnabled = _this.state.areCaptionsEnabled;
+      var _ref2 = (textTracks === null || textTracks === void 0 ? void 0 : textTracks.captions) || {},
+        _ref2$selectedTrackIn = _ref2.selectedTrackIndex,
+        selectedTrackIndex = _ref2$selectedTrackIn === void 0 ? -1 : _ref2$selectedTrackIn;
+      var areCaptionsEnabled = _this.props.areCaptionsEnabled;
       return textTracks && /*#__PURE__*/_react.default.createElement(_captionsSelectControls.CaptionsSelectControls, {
         textTracks: textTracks,
         onSelected: _this.onTextTracksSelected,
         areCaptionsEnabled: !!areCaptionsEnabled,
         onCaptionsEnabledChange: _this.onCaptionsEnabledChange,
-        selectedTracksIndex: _this.resolveSelectedTracksIndex()
+        selectedTracksIndex: selectedTrackIndex
       });
     });
     (0, _defineProperty2.default)(_this, "shouldRenderCaptionsAdminControls", function () {
@@ -648,12 +613,12 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       return (!_this.props.fileState || _this.props.fileState.status !== 'uploading') && breakpointControls.captionsAdminControls(playerWidth) && !!((_this$props$mediaSett = _this.props.mediaSettings) !== null && _this$props$mediaSett !== void 0 && _this$props$mediaSett.canUpdateVideoCaptions);
     });
     (0, _defineProperty2.default)(_this, "renderCaptionsAdminControls", function () {
-      var _this$state4 = _this.state,
-        isArtifactUploaderOpen = _this$state4.isArtifactUploaderOpen,
-        artifactToDelete = _this$state4.artifactToDelete;
-      var _this$props1 = _this.props,
-        textTracks = _this$props1.textTracks,
-        identifier = _this$props1.identifier;
+      var _this$state3 = _this.state,
+        isArtifactUploaderOpen = _this$state3.isArtifactUploaderOpen,
+        artifactToDelete = _this$state3.artifactToDelete;
+      var _this$props12 = _this.props,
+        textTracks = _this$props12.textTracks,
+        identifier = _this$props12.identifier;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_captionsAdminControls.CaptionsAdminControls, {
         textTracks: textTracks,
         onUpload: function onUpload() {
@@ -698,57 +663,23 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         }
       }));
     });
-    _this.state.selectedTracksIndex = _this.findPreselectedTrackIndex(_this.props);
-    if (_this.mediaUserPreferences) {
-      var userCaptionsEnabled = (0, _captions.getUserCaptionsEnabled)(_this.mediaUserPreferences);
-      _this.state.areCaptionsEnabled = userCaptionsEnabled;
-    }
     return _this;
   }
   (0, _inherits2.default)(_MediaPlayerBase, _Component);
   return (0, _createClass2.default)(_MediaPlayerBase, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _prevTextTracks$capti, _textTracks$captions2;
-      var _this$props10 = this.props,
-        intl = _this$props10.intl,
-        textTracks = _this$props10.textTracks;
-      var prevIntl = prevProps.intl,
-        prevTextTracks = prevProps.textTracks;
-      var didLocaleChange = prevIntl.locale !== intl.locale;
-      var didTextTracksChange = (prevTextTracks === null || prevTextTracks === void 0 || (_prevTextTracks$capti = prevTextTracks.captions) === null || _prevTextTracks$capti === void 0 ? void 0 : _prevTextTracks$capti.tracks) !== (textTracks === null || textTracks === void 0 || (_textTracks$captions2 = textTracks.captions) === null || _textTracks$captions2 === void 0 ? void 0 : _textTracks$captions2.tracks);
-      if (didLocaleChange || didTextTracksChange) {
-        this.setState({
-          selectedTracksIndex: this.findPreselectedTrackIndex(this.props)
-        });
-      }
-      if (this.mediaUserPreferences && prevState.areCaptionsEnabled !== this.state.areCaptionsEnabled) {
-        (0, _captions.setUserCaptionsEnabled)(this.mediaUserPreferences, !!this.state.areCaptionsEnabled);
-      }
-    }
-  }, {
-    key: "mediaUserPreferences",
-    get: function get() {
-      var _this$props$mediaSett2 = this.props.mediaSettings,
-        _this$props$mediaSett3 = _this$props$mediaSett2 === void 0 ? {} : _this$props$mediaSett2,
-        _this$props$mediaSett4 = _this$props$mediaSett3.mediaUserPreferences,
-        mediaUserPreferences = _this$props$mediaSett4 === void 0 ? undefined : _this$props$mediaSett4;
-      return mediaUserPreferences;
-    }
-  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props11 = this.props,
-        type = _this$props11.type,
-        identifier = _this$props11.identifier,
-        isAutoPlay = _this$props11.isAutoPlay,
-        isHDAvailable = _this$props11.isHDAvailable,
-        isHDActive = _this$props11.isHDActive,
-        onFirstPlay = _this$props11.onFirstPlay,
-        createAnalyticsEvent = _this$props11.createAnalyticsEvent;
-      var _this$state5 = this.state,
-        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
-        playbackSpeed = _this$state5.playbackSpeed;
+      var _this$props13 = this.props,
+        type = _this$props13.type,
+        identifier = _this$props13.identifier,
+        isAutoPlay = _this$props13.isAutoPlay,
+        isHDAvailable = _this$props13.isHDAvailable,
+        isHDActive = _this$props13.isHDActive,
+        onFirstPlay = _this$props13.onFirstPlay,
+        createAnalyticsEvent = _this$props13.createAnalyticsEvent;
+      var _this$state4 = this.state,
+        isFullScreenEnabled = _this$state4.isFullScreenEnabled,
+        playbackSpeed = _this$state4.playbackSpeed;
       var playerSize = this.playerSize;
       (0, _analytics.fireAnalyticsEvent)((0, _analytics.createCustomMediaPlayerScreenEvent)(type, {
         isAutoPlay: isAutoPlay,
@@ -764,14 +695,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       _simultaneousPlayManager.default.subscribe(this);
       if (isAutoPlay) {
-        var _this$props$onPlay, _this$props12;
+        var _this$props$onPlay, _this$props14;
         _simultaneousPlayManager.default.pauseOthers(this);
         if (onFirstPlay) {
           this.fireFirstPlayedTrackEvent();
           this.wasPlayedOnce = true;
           onFirstPlay();
         }
-        (_this$props$onPlay = (_this$props12 = this.props).onPlay) === null || _this$props$onPlay === void 0 || _this$props$onPlay.call(_this$props12);
+        (_this$props$onPlay = (_this$props14 = this.props).onPlay) === null || _this$props$onPlay === void 0 || _this$props$onPlay.call(_this$props14);
       }
     }
   }, {
@@ -781,8 +712,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
       }
       if (this.state.isFullScreenEnabled) {
-        var _this$props$onFullscr2, _this$props13;
-        (_this$props$onFullscr2 = (_this$props13 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props13, false);
+        var _this$props$onFullscr2, _this$props15;
+        (_this$props$onFullscr2 = (_this$props15 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 || _this$props$onFullscr2.call(_this$props15, false);
       }
       _simultaneousPlayManager.default.unsubscribe(this);
     }
@@ -803,16 +734,16 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "createAndFireUIEvent",
     value: function createAndFireUIEvent(eventType, actionSubjectId) {
-      var _this$props14 = this.props,
-        type = _this$props14.type,
-        identifier = _this$props14.identifier,
-        isHDActive = _this$props14.isHDActive,
-        isHDAvailable = _this$props14.isHDAvailable,
-        isAutoPlay = _this$props14.isAutoPlay,
-        createAnalyticsEvent = _this$props14.createAnalyticsEvent;
-      var _this$state6 = this.state,
-        isFullScreenEnabled = _this$state6.isFullScreenEnabled,
-        playbackSpeed = _this$state6.playbackSpeed;
+      var _this$props16 = this.props,
+        type = _this$props16.type,
+        identifier = _this$props16.identifier,
+        isHDActive = _this$props16.isHDActive,
+        isHDAvailable = _this$props16.isHDAvailable,
+        isAutoPlay = _this$props16.isAutoPlay,
+        createAnalyticsEvent = _this$props16.createAnalyticsEvent;
+      var _this$state5 = this.state,
+        isFullScreenEnabled = _this$state5.isFullScreenEnabled,
+        playbackSpeed = _this$state5.playbackSpeed;
       var playerSize = this.playerSize;
       var playbackState = _objectSpread(_objectSpread({}, this.videoState), {}, {
         isAutoPlay: isAutoPlay,
@@ -855,13 +786,15 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "baseAnalyticCaptionAttributes",
     value: function baseAnalyticCaptionAttributes() {
-      var _textTracks$captions3, _textTracks$captions4;
+      var _textTracks$captions2, _textTracks$captions3;
       var textTracks = this.props.textTracks;
-      var selectedTracksIndex = this.state.selectedTracksIndex;
+      var _ref3 = (textTracks === null || textTracks === void 0 ? void 0 : textTracks.captions) || {},
+        _ref3$selectedTrackIn = _ref3.selectedTrackIndex,
+        selectedTrackIndex = _ref3$selectedTrackIn === void 0 ? -1 : _ref3$selectedTrackIn;
       var captionAttributes = {
-        selectedTrackIndex: selectedTracksIndex,
-        availableCaptionTracks: (textTracks === null || textTracks === void 0 || (_textTracks$captions3 = textTracks.captions) === null || _textTracks$captions3 === void 0 || (_textTracks$captions3 = _textTracks$captions3.tracks) === null || _textTracks$captions3 === void 0 ? void 0 : _textTracks$captions3.length) || 0,
-        selectedTrackLanguage: (textTracks === null || textTracks === void 0 || (_textTracks$captions4 = textTracks.captions) === null || _textTracks$captions4 === void 0 || (_textTracks$captions4 = _textTracks$captions4.tracks) === null || _textTracks$captions4 === void 0 || (_textTracks$captions4 = _textTracks$captions4[selectedTracksIndex]) === null || _textTracks$captions4 === void 0 ? void 0 : _textTracks$captions4.lang) || null
+        selectedTrackIndex: selectedTrackIndex,
+        availableCaptionTracks: (textTracks === null || textTracks === void 0 || (_textTracks$captions2 = textTracks.captions) === null || _textTracks$captions2 === void 0 || (_textTracks$captions2 = _textTracks$captions2.tracks) === null || _textTracks$captions2 === void 0 ? void 0 : _textTracks$captions2.length) || 0,
+        selectedTrackLanguage: (textTracks === null || textTracks === void 0 || (_textTracks$captions3 = textTracks.captions) === null || _textTracks$captions3 === void 0 || (_textTracks$captions3 = _textTracks$captions3.tracks) === null || _textTracks$captions3 === void 0 || (_textTracks$captions3 = _textTracks$captions3[selectedTrackIndex]) === null || _textTracks$captions3 === void 0 ? void 0 : _textTracks$captions3.lang) || null
       };
       return captionAttributes;
     }
@@ -903,15 +836,16 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var _this$props15 = this.props,
-        type = _this$props15.type,
-        src = _this$props15.src,
-        isAutoPlay = _this$props15.isAutoPlay,
-        onCanPlay = _this$props15.onCanPlay,
-        onError = _this$props15.onError,
-        poster = _this$props15.poster,
-        videoControlsWrapperRef = _this$props15.videoControlsWrapperRef,
-        areControlsVisible = _this$props15.areControlsVisible;
+      var _this$props17 = this.props,
+        type = _this$props17.type,
+        src = _this$props17.src,
+        isAutoPlay = _this$props17.isAutoPlay,
+        onCanPlay = _this$props17.onCanPlay,
+        onError = _this$props17.onError,
+        poster = _this$props17.poster,
+        videoControlsWrapperRef = _this$props17.videoControlsWrapperRef,
+        areControlsVisible = _this$props17.areControlsVisible,
+        textTracks = _this$props17.textTracks;
       return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         xcss: customVideoWrapperStyles.root,
         ref: this.videoWrapperRef,
@@ -925,7 +859,7 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         onTimeChange: this.onCurrentTimeChange,
         onError: onError,
         poster: poster,
-        textTracks: this.resolveTextTracks(),
+        textTracks: textTracks,
         textTracksPosition: areControlsVisible ? -3.7 : undefined
       }, function (video, videoState, actions) {
         _this4.onViewed(videoState);

package/dist/cjs/customMediaPlayer/mediaPlayer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});