@atlaskit/editor-plugin-media 3.2.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-media
 
+## 4.1.0
+
+### Minor Changes
+
+- [#172447](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172447)
+  [`06e9b6904aff2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06e9b6904aff2) -
+  [https://product-fabric.atlassian.net/browse/ED-27984](ED-27984) - clean up
+  platform_editor_react18_phase2**media_single and platform_editor_react18_phase2**media_single_jira
+  FFs
+
+## 4.0.0
+
+### Minor Changes
+
+- [#169011](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169011)
+  [`8b33fc800cc29`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b33fc800cc29) -
+  Using viewAndUploadMediaClientConfig to enable Video Captions upload and delete from Media Card
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -4,311 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ReactMediaGroupNode = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+exports.ReactMediaGroupNode = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _media = require("@atlaskit/editor-common/media");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
-var _utils = require("@atlaskit/editor-common/utils");
-var _closeEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--editor-close"));
-var _mediaCommon = require("@atlaskit/media-common");
-var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _pluginKey = require("../pm-plugins/plugin-key");
 var _useMediaProvider = require("../ui/hooks/useMediaProvider");
 var _mediaGroupNext = require("./mediaGroupNext");
-var _mediaNodeUpdater = require("./mediaNodeUpdater");
-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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var isMediaGroupSelectedFromProps = function isMediaGroupSelectedFromProps(props) {
-  /**
-   *  ED-19831
-   *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
-   *  directly to confluence since this bug is now in production.
-   */
-  var pos;
-  try {
-    pos = props.getPos ? props.getPos() : undefined;
-  } catch (e) {
-    pos = undefined;
-  }
-  if (typeof pos !== 'number') {
-    return false;
-  }
-  return (0, _utils.isNodeSelectedOrInRange)(props.anchorPos, props.headPos, pos, props.node.nodeSize);
-};
-var hasSelectionChanged = function hasSelectionChanged(oldProps, newProps) {
-  if (isMediaGroupSelectedFromProps(oldProps) !== isMediaGroupSelectedFromProps(newProps)) {
-    return true;
-  }
-  if (isMediaGroupSelectedFromProps(newProps) === _utils.SelectedState.selectedInside) {
-    return oldProps.anchorPos !== newProps.anchorPos;
-  }
-  return false;
-};
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var MediaGroup = /*#__PURE__*/function (_React$Component) {
-  function MediaGroup(_props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, MediaGroup);
-    _this = _callSuper(this, MediaGroup, [_props]);
-    (0, _defineProperty2.default)(_this, "state", {
-      viewMediaClientConfig: undefined
-    });
-    (0, _defineProperty2.default)(_this, "updateNodeAttrs", function (props, node, getPos) {
-      var view = props.view,
-        mediaProvider = props.mediaProvider,
-        contextIdentifierProvider = props.contextIdentifierProvider;
-      var mediaNodeUpdater = new _mediaNodeUpdater.MediaNodeUpdater({
-        view: view,
-        mediaProvider: mediaProvider,
-        contextIdentifierProvider: contextIdentifierProvider,
-        node: node,
-        isMediaSingle: false
-      });
-      mediaNodeUpdater.updateNodeAttrs(getPos);
-    });
-    (0, _defineProperty2.default)(_this, "setMediaItems", function (props) {
-      var _this$mediaPluginStat;
-      var updatedAttrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var node = props.node;
-      var oldMediaNodes = _this.mediaNodes;
-      _this.mediaNodes = [];
-      node.forEach(function (item, childOffset) {
-        var getPos = function getPos() {
-          var pos = props.getPos();
-          if (typeof pos !== 'number') {
-            // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
-            // Because the original code would return NaN on runtime
-            // We are just make it explict now.
-            // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
-            // TODO: ED-13910 - prosemirror-bump leftovers
-            return NaN;
-          }
-          return pos + childOffset + 1;
-        };
-        _this.mediaNodes.push(item);
-        if (updatedAttrs) {
-          _this.updateNodeAttrs(props, item, getPos);
-        }
-      });
-      (_this$mediaPluginStat = _this.mediaPluginState) === null || _this$mediaPluginStat === void 0 || _this$mediaPluginStat.handleMediaGroupUpdate(oldMediaNodes, _this.mediaNodes);
-    });
-    (0, _defineProperty2.default)(_this, "getIdentifier", function (item) {
-      if (item.attrs.type === 'external') {
-        return {
-          mediaItemType: 'external-image',
-          dataURI: item.attrs.url
-        };
-      }
-      return {
-        id: item.attrs.id,
-        mediaItemType: 'file',
-        collectionName: item.attrs.collection
-      };
-    });
-    (0, _defineProperty2.default)(_this, "isNodeSelected", function (nodePos) {
-      var selected = isMediaGroupSelectedFromProps(_this.props);
-      if (selected === _utils.SelectedState.selectedInRange) {
-        return true;
-      }
-      if (selected === _utils.SelectedState.selectedInside && _this.props.anchorPos === nodePos) {
-        return true;
-      }
-      return false;
-    });
-    (0, _defineProperty2.default)(_this, "renderChildNodes", function () {
-      var viewMediaClientConfig = _this.state.viewMediaClientConfig;
-      var _this$props = _this.props,
-        getPos = _this$props.getPos,
-        allowLazyLoading = _this$props.allowLazyLoading,
-        disabled = _this$props.disabled,
-        mediaOptions = _this$props.mediaOptions,
-        editorViewMode = _this$props.editorViewMode;
-      var items = _this.mediaNodes.map(function (item, idx) {
-        // We declared this to get a fresh position every time
-        var getNodePos = function getNodePos() {
-          var pos = getPos();
-          if (typeof pos !== 'number') {
-            // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
-            // Because the original code would return NaN on runtime
-            // We are just make it explict now.
-            // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
-            // TODO: ED-13910 - prosemirror-bump leftovers
-            return NaN;
-          }
-          return pos + idx + 1;
-        };
-
-        // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
-        var mediaInlineOptions = function mediaInlineOptions() {
-          var allowMediaInline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-          if (!allowMediaInline) {
-            return {
-              shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
-              actions: [{
-                handler: disabled || !_this.mediaPluginState ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-                icon: /*#__PURE__*/_react.default.createElement(_closeEditorClose.default, {
-                  label: _this.props.intl.formatMessage(_media.nodeViewsMessages.mediaGroupDeleteLabel)
-                })
-              }]
-            };
-          }
-        };
-        return _objectSpread({
-          identifier: _this.getIdentifier(item),
-          isLazy: allowLazyLoading,
-          selected: _this.isNodeSelected(getNodePos()),
-          onClick: function onClick() {
-            (0, _utils.setNodeSelection)(_this.props.view, getNodePos());
-          }
-        }, mediaInlineOptions((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? mediaOptions.allowMediaInlineImages : (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions.featureFlags)));
-      });
-      return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {
-        items: items,
-        mediaClientConfig: viewMediaClientConfig,
-        featureFlags: mediaOptions.featureFlags,
-        shouldOpenMediaViewer: editorViewMode && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')
-      });
-    });
-    _this.mediaNodes = [];
-    _this.mediaPluginState = _pluginKey.stateKey.getState(_props.view.state);
-    _this.setMediaItems(_props);
-    _this.state = {
-      viewMediaClientConfig: undefined
-    };
-    return _this;
-  }
-  (0, _inherits2.default)(MediaGroup, _React$Component);
-  return (0, _createClass2.default)(MediaGroup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      this.updateMediaClientConfig();
-      this.mediaNodes.forEach( /*#__PURE__*/function () {
-        var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(node) {
-          var _this2$props, view, mediaProvider, contextIdentifierProvider, mediaNodeUpdater, getPos, contextId, shouldNodeBeDeepCopied;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!(node.attrs.type === 'external')) {
-                  _context.next = 2;
-                  break;
-                }
-                return _context.abrupt("return");
-              case 2:
-                _this2$props = _this2.props, view = _this2$props.view, mediaProvider = _this2$props.mediaProvider, contextIdentifierProvider = _this2$props.contextIdentifierProvider;
-                mediaNodeUpdater = new _mediaNodeUpdater.MediaNodeUpdater({
-                  view: view,
-                  mediaProvider: mediaProvider,
-                  contextIdentifierProvider: contextIdentifierProvider,
-                  node: node,
-                  isMediaSingle: false
-                });
-                getPos = function getPos() {
-                  var pos = _this2.props.getPos();
-                  if (typeof pos !== 'number') {
-                    // That may seems weird, but the previous type wasn't match with the real ProseMirror code. And a lot of Media API was built expecting a number
-                    // Because the original code would return NaN on runtime
-                    // We are just make it explict now.
-                    // We may run a deep investagation on Media code to figure out a better fix. But, for now, we want to keep the current behavior.
-                    // TODO: ED-13910 - prosemirror-bump leftovers
-                    return NaN;
-                  }
-                  return pos + 1;
-                };
-                contextId = mediaNodeUpdater.getNodeContextId();
-                if (contextId) {
-                  _context.next = 9;
-                  break;
-                }
-                _context.next = 9;
-                return mediaNodeUpdater.updateNodeContextId(getPos);
-              case 9:
-                _context.next = 11;
-                return mediaNodeUpdater.shouldNodeBeDeepCopied();
-              case 11:
-                shouldNodeBeDeepCopied = _context.sent;
-                if (!shouldNodeBeDeepCopied) {
-                  _context.next = 15;
-                  break;
-                }
-                _context.next = 15;
-                return mediaNodeUpdater.copyNodeFromPos(getPos, {
-                  traceId: node.attrs.__mediaTraceId
-                });
-              case 15:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function (_x) {
-          return _ref.apply(this, arguments);
-        };
-      }());
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$mediaPluginStat2;
-      (_this$mediaPluginStat2 = this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 || _this$mediaPluginStat2.handleMediaGroupUpdate(this.mediaNodes, []);
-    }
-
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/no-unsafe
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(props) {
-      this.updateMediaClientConfig();
-      this.setMediaItems(props, props.isCopyPasteEnabled || props.isCopyPasteEnabled === undefined);
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      var _this$mediaPluginStat3;
-      if (hasSelectionChanged(this.props, nextProps) || this.props.node !== nextProps.node || this.state.viewMediaClientConfig !== ((_this$mediaPluginStat3 = this.mediaPluginState) === null || _this$mediaPluginStat3 === void 0 ? void 0 : _this$mediaPluginStat3.mediaClientConfig)) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "updateMediaClientConfig",
-    value: function updateMediaClientConfig() {
-      var viewMediaClientConfig = this.state.viewMediaClientConfig;
-      var _ref2 = this.mediaPluginState || {},
-        mediaClientConfig = _ref2.mediaClientConfig;
-      if (!viewMediaClientConfig && mediaClientConfig) {
-        this.setState({
-          viewMediaClientConfig: mediaClientConfig
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.renderChildNodes();
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(MediaGroup, "displayName", 'MediaGroup');
-var IntlMediaGroup = (0, _reactIntlNext.injectIntl)(MediaGroup);
-var _default = exports.default = IntlMediaGroup;
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
   var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled');
   var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
@@ -325,9 +35,9 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
     editorViewMode: editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode
   };
 });
-function MediaGroupNodeViewInternal(_ref3) {
-  var renderFn = _ref3.renderFn,
-    pluginInjectionApi = _ref3.pluginInjectionApi;
+function MediaGroupNodeViewInternal(_ref) {
+  var renderFn = _ref.renderFn,
+    pluginInjectionApi = _ref.pluginInjectionApi;
   var _useSharedState = useSharedState(pluginInjectionApi),
     editorDisabled = _useSharedState.editorDisabled,
     editorViewMode = _useSharedState.editorViewMode;
@@ -347,7 +57,7 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
   return (0, _createClass2.default)(MediaGroupNodeView, [{
     key: "render",
     value: function render(props, forwardRef) {
-      var _this3 = this;
+      var _this = this;
       var providerFactory = props.providerFactory,
         mediaOptions = props.mediaOptions,
         pluginInjectionApi = props.pluginInjectionApi;
@@ -355,45 +65,28 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref4) {
-          var contextIdentifierProvider = _ref4.contextIdentifierProvider;
-          var renderFn = function renderFn(_ref5) {
-            var mediaProviderFromState = _ref5.mediaProvider,
-              editorDisabled = _ref5.editorDisabled,
-              editorViewMode = _ref5.editorViewMode;
+        renderNode: function renderNode(_ref2) {
+          var contextIdentifierProvider = _ref2.contextIdentifierProvider;
+          var renderFn = function renderFn(_ref3) {
+            var mediaProviderFromState = _ref3.mediaProvider,
+              editorDisabled = _ref3.editorDisabled,
+              editorViewMode = _ref3.editorViewMode;
             var mediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
             if (!mediaProvider) {
               return null;
             }
-            if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single') || (0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single_jira')) {
-              return /*#__PURE__*/_react.default.createElement(_mediaGroupNext.MediaGroupNext, {
-                node: _this3.node,
-                getPos: getPos,
-                view: _this3.view,
-                forwardRef: forwardRef,
-                disabled: editorDisabled,
-                allowLazyLoading: mediaOptions.allowLazyLoading,
-                mediaProvider: mediaProvider,
-                contextIdentifierProvider: contextIdentifierProvider,
-                isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
-                anchorPos: _this3.view.state.selection.$anchor.pos,
-                headPos: _this3.view.state.selection.$head.pos,
-                mediaOptions: mediaOptions,
-                editorViewMode: editorViewMode === 'view'
-              });
-            }
-            return /*#__PURE__*/_react.default.createElement(IntlMediaGroup, {
-              node: _this3.node,
+            return /*#__PURE__*/_react.default.createElement(_mediaGroupNext.MediaGroupNext, {
+              node: _this.node,
               getPos: getPos,
-              view: _this3.view,
+              view: _this.view,
               forwardRef: forwardRef,
               disabled: editorDisabled,
               allowLazyLoading: mediaOptions.allowLazyLoading,
               mediaProvider: mediaProvider,
               contextIdentifierProvider: contextIdentifierProvider,
               isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
-              anchorPos: _this3.view.state.selection.$anchor.pos,
-              headPos: _this3.view.state.selection.$head.pos,
+              anchorPos: _this.view.state.selection.$anchor.pos,
+              headPos: _this.view.state.selection.$head.pos,
               mediaOptions: mediaOptions,
               editorViewMode: editorViewMode === 'view'
             });

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -41,7 +41,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "videoControlsWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "unbindKeyDown", null);
     (0, _defineProperty2.default)(_this, "setViewMediaClientConfig", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var mediaProvider, viewMediaClientConfig;
+      var mediaProvider, viewMediaClientConfig, viewAndUploadMediaClientConfig;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -51,8 +51,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
             mediaProvider = _context.sent;
             if (mediaProvider) {
               viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+              viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
               _this.setState({
-                viewMediaClientConfig: viewMediaClientConfig
+                viewMediaClientConfig: viewMediaClientConfig,
+                viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
               });
             }
           case 4:
@@ -120,7 +122,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
-      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || hasNewViewMediaClientConfig) {
+      var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
+      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.mediaProvider !== nextProps.mediaProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -246,6 +249,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       });
       var _this$state = this.state,
         viewMediaClientConfig = _this$state.viewMediaClientConfig,
+        viewAndUploadMediaClientConfig = _this$state.viewAndUploadMediaClientConfig,
         contextIdentifierProvider = _this$state.contextIdentifierProvider;
       var _node$attrs = node.attrs,
         id = _node$attrs.id,
@@ -253,7 +257,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         collection = _node$attrs.collection,
         url = _node$attrs.url,
         alt = _node$attrs.alt;
-      if (isLoading || type !== 'external' && !viewMediaClientConfig) {
+      var hasNoMediaClientConfig = !viewMediaClientConfig && ((0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
+      if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
         return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
           dimensions: originalDimensions
         }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
@@ -274,11 +279,12 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         collectionName: collection
       };
+      var resolvedViewAndUploadMediaClientConfig = (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? viewAndUploadMediaClientConfig : undefined;
 
       // mediaClientConfig is not needed for "external" case. So we have to cheat here.
       // there is a possibility mediaClientConfig will be part of a identifier,
       // so this might be not an issue
-      var mediaClientConfig = viewMediaClientConfig || {
+      var mediaClientConfig = resolvedViewAndUploadMediaClientConfig || viewMediaClientConfig || {
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         authProvider: function authProvider() {
@@ -315,7 +321,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         contextId: contextId,
         alt: alt,
         videoControlsWrapperRef: this.videoControlsWrapperRef,
-        ssr: ssr
+        ssr: ssr,
+        mediaSettings: {
+          canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
+        }
       })));
     }
   }]);