@atlaskit/media-ui 28.5.2 → 28.5.3

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

@@ -1,61 +1,147 @@
 import { hasArtifacts } from '@atlaskit/media-client';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { useMediaClient, useMediaSettings } from '@atlaskit/media-client-react';
+import { getUserCaptionsEnabled, getUserCaptionsLocale, findPreselectedTrackIndex, setUserCaptionsEnabled, setUserCaptionsLocale } from './captions';
+import { useIntl } from 'react-intl-next';
 const decodeMimetype = mimeType => {
   const keyValues = (mimeType === null || mimeType === void 0 ? void 0 : mimeType.split(';')) || [];
   const captionsRawMetadata = Object.fromEntries(keyValues.map(keyValue => keyValue.split('=')));
+  const fileName = captionsRawMetadata.n ? atob(captionsRawMetadata.n) : 'no-name';
+  const lang = captionsRawMetadata.l || 'en';
   return {
-    lang: captionsRawMetadata.l || 'en',
-    fileName: captionsRawMetadata.f || 'no-name.vtt',
-    label: captionsRawMetadata.label || 'no-name'
+    lang,
+    fileName,
+    label: lang
   };
 };
-export const useTextTracks = (fileState, mediaClient, collectionName) => {
-  const [textTracks, setTextTracks] = useState();
+const NO_SELECTED_TRACKS_INDEX = -1;
+export const useTextTracks = (fileState, collectionName) => {
+  const mediaClient = useMediaClient();
+  const isLoadingCaptionsObjectURLs = useRef(new Map());
+  const captionsObjectURLs = useRef(new Map());
+  const intl = useIntl();
+  const {
+    mediaUserPreferences
+  } = useMediaSettings() || {};
+  const [captionTracks, setCaptionTracks] = useState([]);
+  const [areCaptionsEnabled, setAreCaptionsEnabled] = useState(mediaUserPreferences ? getUserCaptionsEnabled(mediaUserPreferences) : false);
+  const [selectedTracksIndex, setSelectedTracksIndex] = useState(NO_SELECTED_TRACKS_INDEX);
+  const resolvedSelectedTracksIndex = useMemo(() => {
+    return areCaptionsEnabled ? selectedTracksIndex : NO_SELECTED_TRACKS_INDEX;
+  }, [areCaptionsEnabled, selectedTracksIndex]);
+
+  // When video starts playing, user settings might have changed
+  const verifyUserCaptionsEnabled = useCallback(() => {
+    if (mediaUserPreferences) {
+      setAreCaptionsEnabled(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.
   useEffect(() => {
     if (!fileState || !hasArtifacts(fileState)) {
+      setCaptionTracks([]);
       return;
     }
-    const captions = Object.entries(fileState.artifacts || {}).filter(caption => {
+    const captionsArtifacts = Object.entries(fileState.artifacts || {}).filter(caption => {
       const [key, value] = caption;
       return key.includes('ugc_caption') && !!value;
     });
-    if (captions.length > 0) {
-      Promise.all(captions.map(async ([artifactName, {
-        mimeType
-      }]) => {
-        try {
-          const {
-            artifacts
-          } = fileState;
-          const baseUrl = artifacts && (await (mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaStore.getArtifactBinary(artifacts, artifactName, {
-            collectionName
-          })));
-          const src = baseUrl && URL.createObjectURL(baseUrl) || '';
-          const {
-            lang,
-            label
-          } = decodeMimetype(mimeType);
-          return {
-            src,
-            lang,
-            label,
-            artifactName
-          };
-        } catch (error) {
-          // TODO: Handle these errors
+    setCaptionTracks(captionsArtifacts.map(([artifactName, {
+      mimeType
+    }]) => {
+      const {
+        lang,
+        label
+      } = decodeMimetype(mimeType);
+      const src = captionsObjectURLs.current.get(artifactName);
+      return {
+        lang,
+        label,
+        artifactName,
+        src
+      };
+    })
+    // Sort based on current locale
+    .sort((a, b) => a.lang.localeCompare(b.lang, intl.locale)));
+  }, [fileState, intl.locale]);
+
+  // Update the user caption enabled preferences
+  useEffect(() => {
+    if (mediaUserPreferences) {
+      setUserCaptionsEnabled(mediaUserPreferences, areCaptionsEnabled);
+    }
+  }, [mediaUserPreferences, areCaptionsEnabled]);
+
+  // Update the user locale preferences
+  useEffect(() => {
+    const {
+      lang
+    } = captionTracks[resolvedSelectedTracksIndex] || {};
+    if (mediaUserPreferences && lang) {
+      setUserCaptionsLocale(mediaUserPreferences, lang);
+    }
+  }, [mediaUserPreferences, captionTracks, resolvedSelectedTracksIndex]);
+
+  // Reset the selected track index when the locale or text tracks change
+  useEffect(() => {
+    const preselectedTrackIndex = findPreselectedTrackIndex(captionTracks, intl.locale, mediaUserPreferences && getUserCaptionsLocale(mediaUserPreferences));
+    setSelectedTracksIndex(preselectedTrackIndex || 0);
+  }, [mediaUserPreferences, intl.locale, captionTracks]);
+  useEffect(() => {
+    if (fileState && hasArtifacts(fileState)) {
+      const {
+        artifactName,
+        src
+      } = captionTracks[resolvedSelectedTracksIndex] || {};
+      if (artifactName && !src && !isLoadingCaptionsObjectURLs.current.get(artifactName)) {
+        isLoadingCaptionsObjectURLs.current.set(artifactName, true);
+        mediaClient.mediaStore.getArtifactBinary(fileState.artifacts, artifactName, {
+          collectionName
+        }).then(blob => {
+          const objectUrl = URL.createObjectURL(blob);
+          captionsObjectURLs.current.set(artifactName, objectUrl);
+          setCaptionTracks(prevCaptionTracks => {
+            const newCaptionTracks = [...prevCaptionTracks];
+            newCaptionTracks[resolvedSelectedTracksIndex] = {
+              ...newCaptionTracks[resolvedSelectedTracksIndex],
+              src: objectUrl
+            };
+            return newCaptionTracks;
+          });
+        }).catch(error => {
+          // TODO: Handle this error
           // https://product-fabric.atlassian.net/browse/BMPT-6929
-        }
-      })).then(tracks => {
-        setTextTracks({
-          captions: {
-            selectedTrackIndex: 1,
-            tracks: tracks.filter(track => !!(track !== null && track !== void 0 && track.src))
-          }
+        }).finally(() => {
+          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.
+  useEffect(() => {
+    const currentCaptionsObjectURLs = captionsObjectURLs.current;
+    return () => {
+      currentCaptionsObjectURLs.forEach(objectUrl => {
+        URL.revokeObjectURL(objectUrl);
+      });
+    };
+  }, []);
+  const textTracks = useMemo(() => {
+    return {
+      captions: {
+        selectedTrackIndex: resolvedSelectedTracksIndex,
+        tracks: captionTracks
+      }
+    };
+  }, [captionTracks, resolvedSelectedTracksIndex]);
+  return {
+    textTracks,
+    verifyUserCaptionsEnabled,
+    areCaptionsEnabled,
+    setSelectedTracksIndex,
+    setAreCaptionsEnabled
+  };
 };

package/dist/esm/customMediaPlayer/index.js

@@ -9,7 +9,7 @@ export var CustomMediaPlayerBase = function CustomMediaPlayerBase(props) {
   return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, 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
 export var CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/esm/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -1,17 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onPlay"];
 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';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.5.1";
-export var MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(props) {
+var packageVersion = "28.5.2";
+export var MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(_ref) {
+  var _onPlay = _ref.onPlay,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var mediaSettings = useMediaSettings();
-  var mediaClient = useMediaClient();
   var _props$identifier = props.identifier,
     id = _props$identifier.id,
     collectionName = _props$identifier.collectionName;
@@ -19,12 +22,24 @@ export var MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(props)
       collectionName: collectionName
     }),
     fileState = _useFileState.fileState;
-  var textTracks = useTextTracks(fileState, mediaClient, collectionName);
+  var _useTextTracks = useTextTracks(fileState, collectionName),
+    textTracks = _useTextTracks.textTracks,
+    verifyUserCaptionsEnabled = _useTextTracks.verifyUserCaptionsEnabled,
+    setSelectedTracksIndex = _useTextTracks.setSelectedTracksIndex,
+    setAreCaptionsEnabled = _useTextTracks.setAreCaptionsEnabled,
+    areCaptionsEnabled = _useTextTracks.areCaptionsEnabled;
   return /*#__PURE__*/React.createElement(MediaPlayerBase, _extends({}, 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
   }));
 };
 export var MediaPlayer = withMediaAnalyticsContext({

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

@@ -50,7 +50,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';
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -125,10 +124,13 @@ var spinnerWrapperStyles = {
   root: "_kqswstnw _154ize3t _1ltvze3t _1bsb1osq _4t3i1osq"
 };
 var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
-  function _MediaPlayerBase(props) {
+  function _MediaPlayerBase() {
     var _this;
     _classCallCheck(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));
     _defineProperty(_this, "videoWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_this, "videoState", {
       isLoading: true,
@@ -150,25 +152,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
     });
-    _defineProperty(_this, "findPreselectedTrackIndex", function (_ref) {
-      var _textTracks$captions;
-      var textTracks = _ref.textTracks,
-        intl = _ref.intl;
-      return findPreselectedTrackIndex((textTracks === null || textTracks === void 0 || (_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks) || [], intl.locale, _this.getUserCaptionsPreference());
-    });
-    _defineProperty(_this, "getUserCaptionsPreference", function () {
-      return _this.mediaUserPreferences && getUserCaptionsLocale(_this.mediaUserPreferences);
-    });
-    _defineProperty(_this, "setUserCaptionsPreference", function (selectedTracks) {
-      if (_this.mediaUserPreferences) {
-        setUserCaptionsLocale(_this.mediaUserPreferences, selectedTracks.lang);
-      }
-    });
     _defineProperty(_this, "fireFirstPlayedTrackEvent", function () {
       var _this$props = _this.props,
         type = _this$props.type,
@@ -367,11 +353,11 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         })
       });
     });
-    _defineProperty(_this, "renderShortcuts", function (_ref2) {
-      var togglePlayPauseAction = _ref2.togglePlayPauseAction,
-        toggleMute = _ref2.toggleMute,
-        skipBackward = _ref2.skipBackward,
-        skipForward = _ref2.skipForward;
+    _defineProperty(_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.createElement(Shortcut, {
@@ -495,7 +481,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);
     });
     _defineProperty(_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();
       }
@@ -505,12 +493,7 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         _this.wasPlayedOnce = true;
         onFirstPlay();
       }
-      if (_this.mediaUserPreferences) {
-        var userCaptionsEnabled = getUserCaptionsEnabled(_this.mediaUserPreferences);
-        _this.setState({
-          areCaptionsEnabled: userCaptionsEnabled
-        });
-      }
+      onPlay === null || onPlay === void 0 || onPlay();
     });
     _defineProperty(_this, "getMediaButtonClickHandler", function (action, buttonType) {
       return function () {
@@ -529,13 +512,13 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       };
     });
     _defineProperty(_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;
@@ -581,17 +564,12 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "startPlayByButtonClick", _this.getMediaButtonClickHandler(_this.play, 'playButton'));
     _defineProperty(_this, "pausePlayByButtonClick", _this.getMediaButtonClickHandler(_this.pause, 'pauseButton'));
     _defineProperty(_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);
     });
     _defineProperty(_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);
     });
     _defineProperty(_this, "onCaptionDelete", function (artifactName) {
       // Modal is not supported in fullscreen mode (as it uses portals which are not in the same DOM tree),
@@ -603,37 +581,24 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         artifactToDelete: artifactName
       });
     });
-    _defineProperty(_this, "resolveSelectedTracksIndex", function () {
-      var _this$state3 = _this.state,
-        areCaptionsEnabled = _this$state3.areCaptionsEnabled,
-        selectedTracksIndex = _this$state3.selectedTracksIndex;
-      return areCaptionsEnabled ? selectedTracksIndex > -1 ? selectedTracksIndex : 0 : -1;
-    });
-    _defineProperty(_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), {}, _defineProperty({}, tracksKey, _objectSpread(_objectSpread({}, textTracks[tracksKey]), {}, {
-          selectedTrackIndex: _this.resolveSelectedTracksIndex()
-        })));
-      }
-      return undefined;
-    });
     _defineProperty(_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);
     });
     _defineProperty(_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.createElement(CaptionsSelectControls, {
         textTracks: textTracks,
         onSelected: _this.onTextTracksSelected,
         areCaptionsEnabled: !!areCaptionsEnabled,
         onCaptionsEnabledChange: _this.onCaptionsEnabledChange,
-        selectedTracksIndex: _this.resolveSelectedTracksIndex()
+        selectedTracksIndex: selectedTrackIndex
       });
     });
     _defineProperty(_this, "shouldRenderCaptionsAdminControls", function () {
@@ -642,12 +607,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);
     });
     _defineProperty(_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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CaptionsAdminControls, {
         textTracks: textTracks,
         onUpload: function onUpload() {
@@ -692,57 +657,23 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         }
       }));
     });
-    _this.state.selectedTracksIndex = _this.findPreselectedTrackIndex(_this.props);
-    if (_this.mediaUserPreferences) {
-      var userCaptionsEnabled = getUserCaptionsEnabled(_this.mediaUserPreferences);
-      _this.state.areCaptionsEnabled = userCaptionsEnabled;
-    }
     return _this;
   }
   _inherits(_MediaPlayerBase, _Component);
   return _createClass(_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) {
-        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;
       fireAnalyticsEvent(createCustomMediaPlayerScreenEvent(type, {
         isAutoPlay: isAutoPlay,
@@ -758,14 +689,14 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       simultaneousPlayManager.subscribe(this);
       if (isAutoPlay) {
-        var _this$props$onPlay, _this$props12;
+        var _this$props$onPlay, _this$props14;
         simultaneousPlayManager.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);
       }
     }
   }, {
@@ -775,8 +706,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.unsubscribe(this);
     }
@@ -797,16 +728,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,
@@ -849,13 +780,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;
     }
@@ -897,15 +830,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.createElement(Box, {
         xcss: customVideoWrapperStyles.root,
         ref: this.videoWrapperRef,
@@ -919,7 +853,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/esm/customMediaPlayer/mediaPlayer/types.js

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