@atlaskit/media-ui 28.5.2 → 28.5.4

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

@@ -5,93 +5,166 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTextTracks = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mediaClient = require("@atlaskit/media-client");
 var _react = require("react");
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _captions = require("./captions");
+var _reactIntlNext = require("react-intl-next");
+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) { (0, _defineProperty2.default)(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; }
 var decodeMimetype = function decodeMimetype(mimeType) {
   var keyValues = (mimeType === null || mimeType === void 0 ? void 0 : mimeType.split(';')) || [];
   var captionsRawMetadata = Object.fromEntries(keyValues.map(function (keyValue) {
     return keyValue.split('=');
   }));
+  var fileName = captionsRawMetadata.n ? atob(captionsRawMetadata.n) : 'no-name';
+  var lang = captionsRawMetadata.l || 'en';
   return {
-    lang: captionsRawMetadata.l || 'en',
-    fileName: captionsRawMetadata.f || 'no-name.vtt',
-    label: captionsRawMetadata.label || 'no-name'
+    lang: lang,
+    fileName: fileName,
+    label: lang
   };
 };
-var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, mediaClient, collectionName) {
-  var _useState = (0, _react.useState)(),
+var NO_SELECTED_TRACKS_INDEX = -1;
+var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, collectionName) {
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var isLoadingCaptionsObjectURLs = (0, _react.useRef)(new Map());
+  var captionsObjectURLs = (0, _react.useRef)(new Map());
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _ref = (0, _mediaClientReact.useMediaSettings)() || {},
+    mediaUserPreferences = _ref.mediaUserPreferences;
+  var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    textTracks = _useState2[0],
-    setTextTracks = _useState2[1];
+    captionTracks = _useState2[0],
+    setCaptionTracks = _useState2[1];
+  var _useState3 = (0, _react.useState)(mediaUserPreferences ? (0, _captions.getUserCaptionsEnabled)(mediaUserPreferences) : false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    areCaptionsEnabled = _useState4[0],
+    setAreCaptionsEnabled = _useState4[1];
+  var _useState5 = (0, _react.useState)(NO_SELECTED_TRACKS_INDEX),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    selectedTracksIndex = _useState6[0],
+    setSelectedTracksIndex = _useState6[1];
+  var resolvedSelectedTracksIndex = (0, _react.useMemo)(function () {
+    return areCaptionsEnabled ? selectedTracksIndex : NO_SELECTED_TRACKS_INDEX;
+  }, [areCaptionsEnabled, selectedTracksIndex]);
+
+  // When video starts playing, user settings might have changed
+  var verifyUserCaptionsEnabled = (0, _react.useCallback)(function () {
+    if (mediaUserPreferences) {
+      setAreCaptionsEnabled((0, _captions.getUserCaptionsEnabled)(mediaUserPreferences));
+    }
+  }, [mediaUserPreferences]);
+
+  // Converts file artifacts to base text tracks, i.e. text tracks with a source creator function.
+  // The src is resolved on every selected track change.
   (0, _react.useEffect)(function () {
     if (!fileState || !(0, _mediaClient.hasArtifacts)(fileState)) {
+      setCaptionTracks([]);
       return;
     }
-    var captions = Object.entries(fileState.artifacts || {}).filter(function (caption) {
+    var captionsArtifacts = Object.entries(fileState.artifacts || {}).filter(function (caption) {
       var _caption = (0, _slicedToArray2.default)(caption, 2),
         key = _caption[0],
         value = _caption[1];
       return key.includes('ugc_caption') && !!value;
     });
-    if (captions.length > 0) {
-      Promise.all(captions.map( /*#__PURE__*/function () {
-        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-          var _ref3, artifactName, mimeType, artifacts, baseUrl, src, _decodeMimetype, lang, label;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _ref3 = (0, _slicedToArray2.default)(_ref, 2), artifactName = _ref3[0], mimeType = _ref3[1].mimeType;
-                _context.prev = 1;
-                artifacts = fileState.artifacts;
-                _context.t0 = artifacts;
-                if (!_context.t0) {
-                  _context.next = 8;
-                  break;
-                }
-                _context.next = 7;
-                return mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaStore.getArtifactBinary(artifacts, artifactName, {
-                  collectionName: collectionName
-                });
-              case 7:
-                _context.t0 = _context.sent;
-              case 8:
-                baseUrl = _context.t0;
-                src = baseUrl && URL.createObjectURL(baseUrl) || '';
-                _decodeMimetype = decodeMimetype(mimeType), lang = _decodeMimetype.lang, label = _decodeMimetype.label;
-                return _context.abrupt("return", {
-                  src: src,
-                  lang: lang,
-                  label: label,
-                  artifactName: artifactName
-                });
-              case 14:
-                _context.prev = 14;
-                _context.t1 = _context["catch"](1);
-              case 16:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee, null, [[1, 14]]);
-        }));
-        return function (_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }())).then(function (tracks) {
-        setTextTracks({
-          captions: {
-            selectedTrackIndex: 1,
-            tracks: tracks.filter(function (track) {
-              return !!(track !== null && track !== void 0 && track.src);
-            })
-          }
+    setCaptionTracks(captionsArtifacts.map(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+        artifactName = _ref3[0],
+        mimeType = _ref3[1].mimeType;
+      var _decodeMimetype = decodeMimetype(mimeType),
+        lang = _decodeMimetype.lang,
+        label = _decodeMimetype.label;
+      var src = captionsObjectURLs.current.get(artifactName);
+      return {
+        lang: lang,
+        label: label,
+        artifactName: artifactName,
+        src: src
+      };
+    })
+    // Sort based on current locale
+    .sort(function (a, b) {
+      return a.lang.localeCompare(b.lang, intl.locale);
+    }));
+  }, [fileState, intl.locale]);
+
+  // Update the user caption enabled preferences
+  (0, _react.useEffect)(function () {
+    if (mediaUserPreferences) {
+      (0, _captions.setUserCaptionsEnabled)(mediaUserPreferences, areCaptionsEnabled);
+    }
+  }, [mediaUserPreferences, areCaptionsEnabled]);
+
+  // Update the user locale preferences
+  (0, _react.useEffect)(function () {
+    var _ref4 = captionTracks[resolvedSelectedTracksIndex] || {},
+      lang = _ref4.lang;
+    if (mediaUserPreferences && lang) {
+      (0, _captions.setUserCaptionsLocale)(mediaUserPreferences, lang);
+    }
+  }, [mediaUserPreferences, captionTracks, resolvedSelectedTracksIndex]);
+
+  // Reset the selected track index when the locale or text tracks change
+  (0, _react.useEffect)(function () {
+    var preselectedTrackIndex = (0, _captions.findPreselectedTrackIndex)(captionTracks, intl.locale, mediaUserPreferences && (0, _captions.getUserCaptionsLocale)(mediaUserPreferences));
+    setSelectedTracksIndex(preselectedTrackIndex || 0);
+  }, [mediaUserPreferences, intl.locale, captionTracks]);
+  (0, _react.useEffect)(function () {
+    if (fileState && (0, _mediaClient.hasArtifacts)(fileState)) {
+      var _ref5 = captionTracks[resolvedSelectedTracksIndex] || {},
+        artifactName = _ref5.artifactName,
+        src = _ref5.src;
+      if (artifactName && !src && !isLoadingCaptionsObjectURLs.current.get(artifactName)) {
+        isLoadingCaptionsObjectURLs.current.set(artifactName, true);
+        mediaClient.mediaStore.getArtifactBinary(fileState.artifacts, artifactName, {
+          collectionName: collectionName
+        }).then(function (blob) {
+          var objectUrl = URL.createObjectURL(blob);
+          captionsObjectURLs.current.set(artifactName, objectUrl);
+          setCaptionTracks(function (prevCaptionTracks) {
+            var newCaptionTracks = (0, _toConsumableArray2.default)(prevCaptionTracks);
+            newCaptionTracks[resolvedSelectedTracksIndex] = _objectSpread(_objectSpread({}, newCaptionTracks[resolvedSelectedTracksIndex]), {}, {
+              src: objectUrl
+            });
+            return newCaptionTracks;
+          });
+        }).catch(function (error) {
+          // TODO: Handle this error
+          // https://product-fabric.atlassian.net/browse/BMPT-6929
+        }).finally(function () {
+          isLoadingCaptionsObjectURLs.current.set(artifactName, false);
         });
-      });
-    } else {
-      setTextTracks(undefined);
+      }
     }
-  }, [fileState, collectionName, mediaClient]);
-  return textTracks;
+  }, [resolvedSelectedTracksIndex, captionTracks, mediaClient, fileState, collectionName]);
+
+  // Revokes the object urls when the component unmounts.
+  (0, _react.useEffect)(function () {
+    var currentCaptionsObjectURLs = captionsObjectURLs.current;
+    return function () {
+      currentCaptionsObjectURLs.forEach(function (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      });
+    };
+  }, []);
+  var textTracks = (0, _react.useMemo)(function () {
+    return {
+      captions: {
+        selectedTrackIndex: resolvedSelectedTracksIndex,
+        tracks: captionTracks
+      }
+    };
+  }, [captionTracks, resolvedSelectedTracksIndex]);
+  return {
+    textTracks: textTracks,
+    verifyUserCaptionsEnabled: verifyUserCaptionsEnabled,
+    areCaptionsEnabled: areCaptionsEnabled,
+    setSelectedTracksIndex: setSelectedTracksIndex,
+    setAreCaptionsEnabled: setAreCaptionsEnabled
+  };
 };

package/dist/es2019/customMediaPlayer/index.js

@@ -7,7 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 export const CustomMediaPlayerBase = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.5.1";
+const packageVersion = "28.5.3";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export const CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/es2019/customMediaPlayer/mediaPlayer/captions/captionDeleteConfirmationModal.js

@@ -56,9 +56,7 @@ const deleteCaption = async (mediaClient, identifier, artifactName, onStart, onE
   };
   onStart === null || onStart === void 0 ? void 0 : onStart(context);
   try {
-    await mediaClient.file.deleteArtifact(identifier.id, {
-      artifactName
-    }, identifier.collectionName, {
+    await mediaClient.file.deleteArtifact(identifier.id, artifactName, identifier.collectionName, {
       traceId: context.traceId
     });
     onEnd === null || onEnd === void 0 ? void 0 : onEnd(context);

package/dist/es2019/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -1,18 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
-import { useFileState, useMediaClient, useMediaSettings } from '@atlaskit/media-client-react';
+import { useFileState, useMediaSettings } from '@atlaskit/media-client-react';
 import { MediaPlayerBase } from './mediaPlayerBase';
 import { useTextTracks } from './useTextTracks';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.5.1";
-export const MediaPlayerWihtoutContext = props => {
+const packageVersion = "28.5.3";
+export const MediaPlayerWihtoutContext = ({
+  onPlay,
+  ...props
+}) => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
   const mediaSettings = useMediaSettings();
-  const mediaClient = useMediaClient();
   const {
     id,
     collectionName
@@ -22,12 +24,25 @@ export const MediaPlayerWihtoutContext = props => {
   } = useFileState(id, {
     collectionName
   });
-  const textTracks = useTextTracks(fileState, mediaClient, collectionName);
+  const {
+    textTracks,
+    verifyUserCaptionsEnabled,
+    setSelectedTracksIndex,
+    setAreCaptionsEnabled,
+    areCaptionsEnabled
+  } = useTextTracks(fileState, collectionName);
   return /*#__PURE__*/React.createElement(MediaPlayerBase, _extends({}, props, {
     fileState: fileState,
     mediaSettings: mediaSettings,
     textTracks: textTracks,
-    createAnalyticsEvent: createAnalyticsEvent
+    createAnalyticsEvent: createAnalyticsEvent,
+    areCaptionsEnabled: areCaptionsEnabled,
+    onPlay: () => {
+      verifyUserCaptionsEnabled();
+      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+    },
+    onTextTracksSelected: setSelectedTracksIndex,
+    onCaptionsEnabledChange: setAreCaptionsEnabled
   }));
 };
 export const MediaPlayer = withMediaAnalyticsContext({

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

@@ -41,7 +41,6 @@ import { SkipTenBackwardIcon, SkipTenForwardIcon } from '@atlaskit/legacy-custom
 import { fg } from '@atlaskit/platform-feature-flags';
 import VideoSkipForwardTenIcon from '@atlaskit/icon/core/video-skip-forward-ten';
 import VideoSkipBackwardTenIcon from '@atlaskit/icon/core/video-skip-backward-ten';
-import { getUserCaptionsLocale, setUserCaptionsLocale, findPreselectedTrackIndex, getUserCaptionsEnabled, setUserCaptionsEnabled } from './captions';
 import { CaptionsUploaderBrowser } from './captions/artifactUploader';
 import CaptionDeleteConfirmationModal from './captions/captionDeleteConfirmationModal';
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -94,8 +93,8 @@ const spinnerWrapperStyles = {
   root: "_kqswstnw _154ize3t _1ltvze3t _1bsb1osq _4t3i1osq"
 };
 class _MediaPlayerBase extends Component {
-  constructor(props) {
-    super(props);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "videoWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "videoState", {
       isLoading: true,
@@ -115,26 +114,9 @@ class _MediaPlayerBase extends Component {
       playerWidth: 100,
       // initial value for playerSize: 'small', i.e. width < 260px
       playbackSpeed: 1,
-      selectedTracksIndex: -1,
-      areCaptionsEnabled: false,
       isArtifactUploaderOpen: false,
       artifactToDelete: undefined
     });
-    _defineProperty(this, "findPreselectedTrackIndex", ({
-      textTracks,
-      intl
-    }) => {
-      var _textTracks$captions;
-      return findPreselectedTrackIndex((textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks) || [], intl.locale, this.getUserCaptionsPreference());
-    });
-    _defineProperty(this, "getUserCaptionsPreference", () => {
-      return this.mediaUserPreferences && getUserCaptionsLocale(this.mediaUserPreferences);
-    });
-    _defineProperty(this, "setUserCaptionsPreference", selectedTracks => {
-      if (this.mediaUserPreferences) {
-        setUserCaptionsLocale(this.mediaUserPreferences, selectedTracks.lang);
-      }
-    });
     _defineProperty(this, "fireFirstPlayedTrackEvent", () => {
       const {
         type,
@@ -465,7 +447,8 @@ class _MediaPlayerBase extends Component {
     });
     _defineProperty(this, "play", () => {
       const {
-        onFirstPlay
+        onFirstPlay,
+        onPlay
       } = this.props;
       if (this.actions) {
         this.actions.play();
@@ -476,12 +459,7 @@ class _MediaPlayerBase extends Component {
         this.wasPlayedOnce = true;
         onFirstPlay();
       }
-      if (this.mediaUserPreferences) {
-        const userCaptionsEnabled = getUserCaptionsEnabled(this.mediaUserPreferences);
-        this.setState({
-          areCaptionsEnabled: userCaptionsEnabled
-        });
-      }
+      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
     });
     _defineProperty(this, "getMediaButtonClickHandler", (action, buttonType) => () => {
       action();
@@ -556,17 +534,12 @@ class _MediaPlayerBase extends Component {
     _defineProperty(this, "startPlayByButtonClick", this.getMediaButtonClickHandler(this.play, 'playButton'));
     _defineProperty(this, "pausePlayByButtonClick", this.getMediaButtonClickHandler(this.pause, 'pauseButton'));
     _defineProperty(this, "onTextTracksSelected", selectedTracksIndex => {
-      var _this$props$textTrack, _this$props$textTrack2;
-      const selectedTracks = (_this$props$textTrack = this.props.textTracks) === null || _this$props$textTrack === void 0 ? void 0 : (_this$props$textTrack2 = _this$props$textTrack.captions) === null || _this$props$textTrack2 === void 0 ? void 0 : _this$props$textTrack2.tracks[selectedTracksIndex];
-      !!selectedTracks && this.setUserCaptionsPreference(selectedTracks);
-      this.setState({
-        selectedTracksIndex
-      });
+      var _this$props$onTextTra, _this$props6;
+      (_this$props$onTextTra = (_this$props6 = this.props).onTextTracksSelected) === null || _this$props$onTextTra === void 0 ? void 0 : _this$props$onTextTra.call(_this$props6, selectedTracksIndex);
     });
     _defineProperty(this, "onCaptionsEnabledChange", areCaptionsEnabled => {
-      this.setState({
-        areCaptionsEnabled
-      });
+      var _this$props$onCaption, _this$props7;
+      (_this$props$onCaption = (_this$props7 = this.props).onCaptionsEnabledChange) === null || _this$props$onCaption === void 0 ? void 0 : _this$props$onCaption.call(_this$props7, areCaptionsEnabled);
     });
     _defineProperty(this, "onCaptionDelete", artifactName => {
       // Modal is not supported in fullscreen mode (as it uses portals which are not in the same DOM tree),
@@ -578,54 +551,32 @@ class _MediaPlayerBase extends Component {
         artifactToDelete: artifactName
       });
     });
-    _defineProperty(this, "resolveSelectedTracksIndex", () => {
-      const {
-        areCaptionsEnabled,
-        selectedTracksIndex
-      } = this.state;
-      return areCaptionsEnabled ? selectedTracksIndex > -1 ? selectedTracksIndex : 0 : -1;
-    });
-    _defineProperty(this, "resolveTextTracks", () => {
-      const {
-        areCaptionsEnabled
-      } = this.state;
-      const {
-        textTracks
-      } = this.props;
-      const tracksKey = 'captions';
-      if (areCaptionsEnabled && textTracks !== null && textTracks !== void 0 && textTracks[tracksKey]) {
-        return {
-          ...textTracks,
-          [tracksKey]: {
-            ...textTracks[tracksKey],
-            selectedTrackIndex: this.resolveSelectedTracksIndex()
-          }
-        };
-      }
-      return undefined;
-    });
     _defineProperty(this, "shouldRenderCaptionsControls", () => {
+      var _textTracks$captions, _textTracks$captions$;
       const {
         textTracks
       } = this.props;
       const {
         playerWidth
       } = this.state;
-      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);
     });
     _defineProperty(this, "renderCaptionsControls", () => {
       const {
         textTracks
       } = this.props;
+      const {
+        selectedTrackIndex = -1
+      } = (textTracks === null || textTracks === void 0 ? void 0 : textTracks.captions) || {};
       const {
         areCaptionsEnabled
-      } = this.state;
+      } = this.props;
       return textTracks && /*#__PURE__*/React.createElement(CaptionsSelectControls, {
         textTracks: textTracks,
         onSelected: this.onTextTracksSelected,
         areCaptionsEnabled: !!areCaptionsEnabled,
         onCaptionsEnabledChange: this.onCaptionsEnabledChange,
-        selectedTracksIndex: this.resolveSelectedTracksIndex()
+        selectedTracksIndex: selectedTrackIndex
       });
     });
     _defineProperty(this, "shouldRenderCaptionsAdminControls", () => {
@@ -682,40 +633,6 @@ class _MediaPlayerBase extends Component {
         }
       }));
     });
-    this.state.selectedTracksIndex = this.findPreselectedTrackIndex(this.props);
-    if (this.mediaUserPreferences) {
-      const userCaptionsEnabled = getUserCaptionsEnabled(this.mediaUserPreferences);
-      this.state.areCaptionsEnabled = userCaptionsEnabled;
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    var _prevTextTracks$capti, _textTracks$captions2;
-    const {
-      intl,
-      textTracks
-    } = this.props;
-    const {
-      intl: prevIntl,
-      textTracks: prevTextTracks
-    } = prevProps;
-    const didLocaleChange = prevIntl.locale !== intl.locale;
-    const didTextTracksChange = (prevTextTracks === null || prevTextTracks === void 0 ? void 0 : (_prevTextTracks$capti = prevTextTracks.captions) === null || _prevTextTracks$capti === void 0 ? void 0 : _prevTextTracks$capti.tracks) !== (textTracks === null || textTracks === void 0 ? 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) {
-      setUserCaptionsEnabled(this.mediaUserPreferences, !!this.state.areCaptionsEnabled);
-    }
-  }
-  get mediaUserPreferences() {
-    const {
-      mediaSettings: {
-        mediaUserPreferences = undefined
-      } = {}
-    } = this.props;
-    return mediaUserPreferences;
   }
   componentDidMount() {
     const {
@@ -748,14 +665,14 @@ class _MediaPlayerBase extends Component {
     }
     simultaneousPlayManager.subscribe(this);
     if (isAutoPlay) {
-      var _this$props$onPlay, _this$props6;
+      var _this$props$onPlay, _this$props8;
       simultaneousPlayManager.pauseOthers(this);
       if (onFirstPlay) {
         this.fireFirstPlayedTrackEvent();
         this.wasPlayedOnce = true;
         onFirstPlay();
       }
-      (_this$props$onPlay = (_this$props6 = this.props).onPlay) === null || _this$props$onPlay === void 0 ? void 0 : _this$props$onPlay.call(_this$props6);
+      (_this$props$onPlay = (_this$props8 = this.props).onPlay) === null || _this$props$onPlay === void 0 ? void 0 : _this$props$onPlay.call(_this$props8);
     }
   }
   componentWillUnmount() {
@@ -763,8 +680,8 @@ class _MediaPlayerBase extends Component {
       this.videoWrapperRef.current.removeEventListener('fullscreenchange', this.onFullScreenChange);
     }
     if (this.state.isFullScreenEnabled) {
-      var _this$props$onFullscr2, _this$props7;
-      (_this$props$onFullscr2 = (_this$props7 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props7, false);
+      var _this$props$onFullscr2, _this$props9;
+      (_this$props$onFullscr2 = (_this$props9 = this.props).onFullscreenChange) === null || _this$props$onFullscr2 === void 0 ? void 0 : _this$props$onFullscr2.call(_this$props9, false);
     }
     simultaneousPlayManager.unsubscribe(this);
   }
@@ -834,17 +751,17 @@ class _MediaPlayerBase extends Component {
     fireAnalyticsEvent(analyticsEvent, createAnalyticsEvent);
   }
   baseAnalyticCaptionAttributes() {
-    var _textTracks$captions3, _textTracks$captions4, _textTracks$captions5, _textTracks$captions6, _textTracks$captions7;
+    var _textTracks$captions2, _textTracks$captions3, _textTracks$captions4, _textTracks$captions5, _textTracks$captions6;
     const {
       textTracks
     } = this.props;
     const {
-      selectedTracksIndex
-    } = this.state;
+      selectedTrackIndex = -1
+    } = (textTracks === null || textTracks === void 0 ? void 0 : textTracks.captions) || {};
     const captionAttributes = {
-      selectedTrackIndex: selectedTracksIndex,
-      availableCaptionTracks: (textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions3 = textTracks.captions) === null || _textTracks$captions3 === void 0 ? void 0 : (_textTracks$captions4 = _textTracks$captions3.tracks) === null || _textTracks$captions4 === void 0 ? void 0 : _textTracks$captions4.length) || 0,
-      selectedTrackLanguage: (textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions5 = textTracks.captions) === null || _textTracks$captions5 === void 0 ? void 0 : (_textTracks$captions6 = _textTracks$captions5.tracks) === null || _textTracks$captions6 === void 0 ? void 0 : (_textTracks$captions7 = _textTracks$captions6[selectedTracksIndex]) === null || _textTracks$captions7 === void 0 ? void 0 : _textTracks$captions7.lang) || null
+      selectedTrackIndex,
+      availableCaptionTracks: (textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions2 = textTracks.captions) === null || _textTracks$captions2 === void 0 ? void 0 : (_textTracks$captions3 = _textTracks$captions2.tracks) === null || _textTracks$captions3 === void 0 ? void 0 : _textTracks$captions3.length) || 0,
+      selectedTrackLanguage: (textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions4 = textTracks.captions) === null || _textTracks$captions4 === void 0 ? void 0 : (_textTracks$captions5 = _textTracks$captions4.tracks) === null || _textTracks$captions5 === void 0 ? void 0 : (_textTracks$captions6 = _textTracks$captions5[selectedTrackIndex]) === null || _textTracks$captions6 === void 0 ? void 0 : _textTracks$captions6.lang) || null
     };
     return captionAttributes;
   }
@@ -881,7 +798,8 @@ class _MediaPlayerBase extends Component {
       onError,
       poster,
       videoControlsWrapperRef,
-      areControlsVisible
+      areControlsVisible,
+      textTracks
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       xcss: customVideoWrapperStyles.root,
@@ -896,7 +814,7 @@ class _MediaPlayerBase extends Component {
       onTimeChange: this.onCurrentTimeChange,
       onError: onError,
       poster: poster,
-      textTracks: this.resolveTextTracks(),
+      textTracks: textTracks,
       textTracksPosition: areControlsVisible ? -3.7 : undefined
     }, (video, videoState, actions) => {
       this.onViewed(videoState);

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

@@ -0,0 +1 @@
+export {};