@atlaskit/editor-plugin-media 9.4.1 → 9.4.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 9.4.2
+
+### Patch Changes
+
+- [`688d81c54687e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/688d81c54687e) -
+  fix media client config undefined issue in media node
+- Updated dependencies
+
 ## 9.4.1
 
 ### Patch Changes

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

@@ -114,6 +114,17 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       }
       return flexibleDimensions;
     });
+    (0, _defineProperty2.default)(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
+      if (mediaProvider) {
+        return mediaProvider;
+      }
+      if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        return mediaOptions.provider;
+      }
+      if ((0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+      }
+    });
     (0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
@@ -145,10 +156,6 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        var mediaProviderToUse = mediaProvider;
-        if (!mediaProviderToUse && (0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
-          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
-        }
         return /*#__PURE__*/_react.default.createElement(_media.default, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -158,7 +165,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProviderToUse,
+          mediaProvider: _this.getMediaProviderToUse(mediaOptions, mediaProvider),
+          syncProvider: mediaOptions.syncProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,

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

@@ -16,6 +16,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
@@ -54,10 +55,20 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
             if (mediaProvider) {
               viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
               viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
-              _this.setState({
-                viewMediaClientConfig: viewMediaClientConfig,
-                viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
-              });
+              if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+                // Only update state if new configs are available and different from current state
+                if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
+                  _this.setState({
+                    viewMediaClientConfig: viewMediaClientConfig,
+                    viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
+                  });
+                }
+              } else {
+                _this.setState({
+                  viewMediaClientConfig: viewMediaClientConfig,
+                  viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
+                });
+              }
             }
           case 4:
           case "end":
@@ -103,6 +114,15 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         (0, _utils.setNodeSelection)(_this.props.view, propPos - 1);
       }
     });
+    (0, _defineProperty2.default)(_this, "getMediaSettings", (0, _memoizeOne.default)(function (viewAndUploadMediaClientConfig) {
+      return {
+        canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
+      };
+    }));
+    (0, _defineProperty2.default)(_this, "onError", function (reason) {
+      var _this$props$api;
+      (_this$props$api = _this.props.api) === null || _this$props$api === void 0 || _this$props$api.media.actions.handleMediaNodeRenderError(_this.props.node, reason);
+    });
     (0, _defineProperty2.default)(_this, "onFullscreenChange", function (fullscreen) {
       var _this$mediaPluginStat;
       (_this$mediaPluginStat = _this.mediaPluginState) === null || _this$mediaPluginStat === void 0 || _this$mediaPluginStat.updateAndDispatch({
@@ -116,8 +136,18 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         return _this.props.getPos();
       });
     });
-    var view = _this.props.view;
+    var _this$props = _this.props,
+      view = _this$props.view,
+      syncProvider = _this$props.syncProvider;
     _this.mediaPluginState = _pluginKey.stateKey.getState(view.state);
+
+    // Initialize state from syncProvider (available on both server and client for SSR)
+    if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) && syncProvider) {
+      _this.state = {
+        viewMediaClientConfig: syncProvider.viewMediaClientConfig,
+        viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
+      };
+    }
     return _this;
   }
   (0, _inherits2.default)(MediaNode, _Component);
@@ -126,7 +156,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     value: function shouldComponentUpdate(nextProps, nextState) {
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
       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) {
+      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 || (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -240,14 +270,13 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        node = _this$props.node,
-        selected = _this$props.selected,
-        originalDimensions = _this$props.originalDimensions,
-        isLoading = _this$props.isLoading,
-        maxDimensions = _this$props.maxDimensions,
-        mediaOptions = _this$props.mediaOptions,
-        api = _this$props.api;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        selected = _this$props2.selected,
+        originalDimensions = _this$props2.originalDimensions,
+        isLoading = _this$props2.isLoading,
+        maxDimensions = _this$props2.maxDimensions,
+        mediaOptions = _this$props2.mediaOptions;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
@@ -261,6 +290,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         collection = _node$attrs.collection,
         url = _node$attrs.url,
         alt = _node$attrs.alt;
+
+      // Check if we have any media client config available (syncProvider, state, or upload config)
       var hasNoMediaClientConfig = !viewMediaClientConfig && ((0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
       if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
         if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
@@ -332,12 +363,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         alt: alt,
         videoControlsWrapperRef: this.videoControlsWrapperRef,
         ssr: ssr,
-        mediaSettings: {
-          canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
-        },
-        onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? function (reason) {
-          return api === null || api === void 0 ? void 0 : api.media.actions.handleMediaNodeRenderError(node, reason);
-        } : undefined
+        mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+        onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
       })));
     }
   }]);

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -94,6 +94,17 @@ class MediaNodeView extends SelectionBasedNodeView {
       }
       return flexibleDimensions;
     });
+    _defineProperty(this, "getMediaProviderToUse", (mediaOptions, mediaProvider) => {
+      if (mediaProvider) {
+        return mediaProvider;
+      }
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        return mediaOptions.provider;
+      }
+      if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+      }
+    });
     _defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
       return ({
         mediaProvider,
@@ -134,10 +145,6 @@ class MediaNodeView extends SelectionBasedNodeView {
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        let mediaProviderToUse = mediaProvider;
-        if (!mediaProviderToUse && expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
-          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
-        }
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: this.view,
@@ -147,7 +154,8 @@ class MediaNodeView extends SelectionBasedNodeView {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProviderToUse,
+          mediaProvider: this.getMediaProviderToUse(mediaOptions, mediaProvider),
+          syncProvider: mediaOptions.syncProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: this.onExternalImageLoaded,

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { bind } from 'bind-event-listener';
+import memoizeOne from 'memoize-one';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
@@ -24,14 +25,25 @@ export class MediaNode extends Component {
     _defineProperty(this, "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "unbindKeyDown", null);
     _defineProperty(this, "setViewMediaClientConfig", async () => {
+      // mediaProvider is Promise<MediaProvider>, so await it first to get the actual provider
       const mediaProvider = await this.props.mediaProvider;
       if (mediaProvider) {
         const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
         const viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
-        this.setState({
-          viewMediaClientConfig,
-          viewAndUploadMediaClientConfig
-        });
+        if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+          // Only update state if new configs are available and different from current state
+          if (viewMediaClientConfig && this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
+            this.setState({
+              viewMediaClientConfig,
+              viewAndUploadMediaClientConfig
+            });
+          }
+        } else {
+          this.setState({
+            viewMediaClientConfig,
+            viewAndUploadMediaClientConfig
+          });
+        }
       }
     });
     _defineProperty(this, "selectMediaSingleFromCard", ({
@@ -75,6 +87,13 @@ export class MediaNode extends Component {
         setNodeSelection(this.props.view, propPos - 1);
       }
     });
+    _defineProperty(this, "getMediaSettings", memoizeOne(viewAndUploadMediaClientConfig => ({
+      canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
+    })));
+    _defineProperty(this, "onError", reason => {
+      var _this$props$api;
+      (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : _this$props$api.media.actions.handleMediaNodeRenderError(this.props.node, reason);
+    });
     _defineProperty(this, "onFullscreenChange", fullscreen => {
       var _this$mediaPluginStat;
       (_this$mediaPluginStat = this.mediaPluginState) === null || _this$mediaPluginStat === void 0 ? void 0 : _this$mediaPluginStat.updateAndDispatch({
@@ -89,14 +108,23 @@ export class MediaNode extends Component {
       (_this$mediaPluginStat2 = this.mediaPluginState) === null || _this$mediaPluginStat2 === void 0 ? void 0 : _this$mediaPluginStat2.handleMediaNodeMount(node, () => this.props.getPos());
     });
     const {
-      view
+      view,
+      syncProvider
     } = this.props;
     this.mediaPluginState = mediaStateKey.getState(view.state);
+
+    // Initialize state from syncProvider (available on both server and client for SSR)
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && syncProvider) {
+      this.state = {
+        viewMediaClientConfig: syncProvider.viewMediaClientConfig,
+        viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
+      };
+    }
   }
   shouldComponentUpdate(nextProps, nextState) {
     const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
     const 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) {
+    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 || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
       return true;
     }
     return false;
@@ -187,8 +215,7 @@ export class MediaNode extends Component {
       originalDimensions,
       isLoading,
       maxDimensions,
-      mediaOptions,
-      api
+      mediaOptions
     } = this.props;
     const borderMark = node.marks.find(m => m.type.name === 'border');
     const {
@@ -203,6 +230,8 @@ export class MediaNode extends Component {
       url,
       alt
     } = node.attrs;
+
+    // Check if we have any media client config available (syncProvider, state, or upload config)
     const hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
     if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
       if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
@@ -274,10 +303,8 @@ export class MediaNode extends Component {
       alt: alt,
       videoControlsWrapperRef: this.videoControlsWrapperRef,
       ssr: ssr,
-      mediaSettings: {
-        canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
-      },
-      onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? reason => api === null || api === void 0 ? void 0 : api.media.actions.handleMediaNodeRenderError(node, reason) : undefined
+      mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+      onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
     })));
   }
 }

package/dist/esm/nodeviews/mediaNodeView/index.js

@@ -108,6 +108,17 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       }
       return flexibleDimensions;
     });
+    _defineProperty(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
+      if (mediaProvider) {
+        return mediaProvider;
+      }
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        return mediaOptions.provider;
+      }
+      if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        return mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+      }
+    });
     _defineProperty(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
@@ -139,10 +150,6 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        var mediaProviderToUse = mediaProvider;
-        if (!mediaProviderToUse && expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
-          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
-        }
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -152,7 +159,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProviderToUse,
+          mediaProvider: _this.getMediaProviderToUse(mediaOptions, mediaProvider),
+          syncProvider: mediaOptions.syncProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,

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

@@ -10,6 +10,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import { bind } from 'bind-event-listener';
+import memoizeOne from 'memoize-one';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
@@ -46,10 +47,20 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
             if (mediaProvider) {
               viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
               viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
-              _this.setState({
-                viewMediaClientConfig: viewMediaClientConfig,
-                viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
-              });
+              if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+                // Only update state if new configs are available and different from current state
+                if (viewMediaClientConfig && _this.state.viewMediaClientConfig !== viewMediaClientConfig || viewAndUploadMediaClientConfig && _this.state.viewAndUploadMediaClientConfig !== viewAndUploadMediaClientConfig) {
+                  _this.setState({
+                    viewMediaClientConfig: viewMediaClientConfig,
+                    viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
+                  });
+                }
+              } else {
+                _this.setState({
+                  viewMediaClientConfig: viewMediaClientConfig,
+                  viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
+                });
+              }
             }
           case 4:
           case "end":
@@ -95,6 +106,15 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         setNodeSelection(_this.props.view, propPos - 1);
       }
     });
+    _defineProperty(_this, "getMediaSettings", memoizeOne(function (viewAndUploadMediaClientConfig) {
+      return {
+        canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
+      };
+    }));
+    _defineProperty(_this, "onError", function (reason) {
+      var _this$props$api;
+      (_this$props$api = _this.props.api) === null || _this$props$api === void 0 || _this$props$api.media.actions.handleMediaNodeRenderError(_this.props.node, reason);
+    });
     _defineProperty(_this, "onFullscreenChange", function (fullscreen) {
       var _this$mediaPluginStat;
       (_this$mediaPluginStat = _this.mediaPluginState) === null || _this$mediaPluginStat === void 0 || _this$mediaPluginStat.updateAndDispatch({
@@ -108,8 +128,18 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         return _this.props.getPos();
       });
     });
-    var view = _this.props.view;
+    var _this$props = _this.props,
+      view = _this$props.view,
+      syncProvider = _this$props.syncProvider;
     _this.mediaPluginState = mediaStateKey.getState(view.state);
+
+    // Initialize state from syncProvider (available on both server and client for SSR)
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && syncProvider) {
+      _this.state = {
+        viewMediaClientConfig: syncProvider.viewMediaClientConfig,
+        viewAndUploadMediaClientConfig: syncProvider.viewAndUploadMediaClientConfig
+      };
+    }
     return _this;
   }
   _inherits(MediaNode, _Component);
@@ -118,7 +148,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     value: function shouldComponentUpdate(nextProps, nextState) {
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
       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) {
+      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 || expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) && this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -232,14 +262,13 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        node = _this$props.node,
-        selected = _this$props.selected,
-        originalDimensions = _this$props.originalDimensions,
-        isLoading = _this$props.isLoading,
-        maxDimensions = _this$props.maxDimensions,
-        mediaOptions = _this$props.mediaOptions,
-        api = _this$props.api;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        selected = _this$props2.selected,
+        originalDimensions = _this$props2.originalDimensions,
+        isLoading = _this$props2.isLoading,
+        maxDimensions = _this$props2.maxDimensions,
+        mediaOptions = _this$props2.mediaOptions;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
@@ -253,6 +282,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         collection = _node$attrs.collection,
         url = _node$attrs.url,
         alt = _node$attrs.alt;
+
+      // Check if we have any media client config available (syncProvider, state, or upload config)
       var hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
       if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
         if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
@@ -324,12 +355,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         alt: alt,
         videoControlsWrapperRef: this.videoControlsWrapperRef,
         ssr: ssr,
-        mediaSettings: {
-          canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
-        },
-        onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? function (reason) {
-          return api === null || api === void 0 ? void 0 : api.media.actions.handleMediaNodeRenderError(node, reason);
-        } : undefined
+        mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+        onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
       })));
     }
   }]);

package/dist/types/nodeviews/mediaNodeView/index.d.ts

@@ -35,6 +35,7 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         width: string;
         height: string;
     };
+    getMediaProviderToUse: (mediaOptions: MediaOptions, mediaProvider?: Promise<MediaProvider>) => Promise<MediaProvider> | undefined;
     renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;

package/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -25,6 +25,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
     onClick?: CardOnClickCallback;
     originalDimensions: NumericalCardDimensions;
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    syncProvider?: MediaProvider;
     view: EditorView;
 }
 interface MediaNodeState {
@@ -46,6 +47,8 @@ export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState>
     private setViewMediaClientConfig;
     private selectMediaSingleFromCard;
     private selectMediaSingle;
+    private getMediaSettings;
+    private onError;
     render(): React.JSX.Element;
     private onFullscreenChange;
     private handleNewNode;

package/dist/types-ts4.5/nodeviews/mediaNodeView/index.d.ts

@@ -35,6 +35,7 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         width: string;
         height: string;
     };
+    getMediaProviderToUse: (mediaOptions: MediaOptions, mediaProvider?: Promise<MediaProvider>) => Promise<MediaProvider> | undefined;
     renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;

package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts

@@ -25,6 +25,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
     onClick?: CardOnClickCallback;
     originalDimensions: NumericalCardDimensions;
     pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+    syncProvider?: MediaProvider;
     view: EditorView;
 }
 interface MediaNodeState {
@@ -46,6 +47,8 @@ export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState>
     private setViewMediaClientConfig;
     private selectMediaSingleFromCard;
     private selectMediaSingle;
+    private getMediaSettings;
+    private onError;
     render(): React.JSX.Element;
     private onFullscreenChange;
     private handleNewNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "9.4.1",
+	"version": "9.4.2",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.23.0",
+		"@atlaskit/tmp-editor-statsig": "^16.25.0",
 		"@atlaskit/tokens": "^10.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",