@atlaskit/editor-plugin-media 13.4.11 → 13.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 13.5.0
+
+### Minor Changes
+
+- [`01c0f76dfce1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/01c0f76dfce1e) -
+  Cleanup experiment `platform_editor_media_vc_fixes_patch1`.
+
+### Patch Changes
+
+- [`d1b772ec7a247`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d1b772ec7a247) -
+  Disable video caption management controls while editor media renders in view mode.
+- Updated dependencies
+
 ## 13.4.11
 
 ### Patch Changes

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

@@ -22,7 +22,6 @@ var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-n
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClient = require("@atlaskit/media-client");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _aiGeneratingDecoration = require("../../pm-plugins/ai-generating-decoration");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
@@ -106,22 +105,13 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       if (!mediaSingleNodeParent) {
         return flexibleDimensions;
       }
-      if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
-        if (_this.hasPxWidthType(mediaSingleNodeParent)) {
-          return {
-            width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
-            height: '100%'
-          };
-        }
-        return flexibleDimensions;
+      if (_this.hasPxWidthType(mediaSingleNodeParent)) {
+        return {
+          width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
+          height: '100%'
+        };
       }
-
-      // Compute normal dimensions
-      var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
-      return {
-        width: "".concat(maxWidth, "px"),
-        height: '100%'
-      };
+      return flexibleDimensions;
     });
     (0, _defineProperty2.default)(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
       if (mediaProvider) {

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

@@ -107,9 +107,9 @@ 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) {
+    (0, _defineProperty2.default)(_this, "getMediaSettings", (0, _memoizeOne.default)(function (viewAndUploadMediaClientConfig, isViewOnly) {
       return {
-        canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
+        canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? (0, _platformFeatureFlags.fg)('platform_editor_video_caption_commit') ? !!viewAndUploadMediaClientConfig && !isViewOnly : !!viewAndUploadMediaClientConfig : false
       };
     }));
     (0, _defineProperty2.default)(_this, "onPreviewRender", function (fileId) {
@@ -185,7 +185,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.isAIGenerating !== nextProps.isAIGenerating || 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 || this.props.syncProvider !== nextProps.syncProvider || 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.isAIGenerating !== nextProps.isAIGenerating || 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.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -386,7 +386,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         alt: alt,
         videoControlsWrapperRef: this.videoControlsWrapperRef,
         ssr: ssr,
-        mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+        mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
         isAIGenerating: !!this.props.isAIGenerating,
         onPreviewRender: this.onPreviewRender,
         onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -22,7 +22,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _mediaClient = require("@atlaskit/media-client");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _captions = require("../pm-plugins/commands/captions");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
 var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
@@ -516,7 +515,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
   })));
-  if (widthType !== 'pixel' && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
+  if (widthType !== 'pixel') {
     return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
       view: view,
       getPos: getPos,

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

@@ -8,7 +8,6 @@ import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasAIGeneratingDecoration } from '../../pm-plugins/ai-generating-decoration';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
@@ -86,22 +85,13 @@ class MediaNodeView extends SelectionBasedNodeView {
       if (!mediaSingleNodeParent) {
         return flexibleDimensions;
       }
-      if (expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
-        if (this.hasPxWidthType(mediaSingleNodeParent)) {
-          return {
-            width: `${mediaSingleNodeParent.attrs.width}px`,
-            height: '100%'
-          };
-        }
-        return flexibleDimensions;
+      if (this.hasPxWidthType(mediaSingleNodeParent)) {
+        return {
+          width: `${mediaSingleNodeParent.attrs.width}px`,
+          height: '100%'
+        };
       }
-
-      // Compute normal dimensions
-      const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
-      return {
-        width: `${maxWidth}px`,
-        height: '100%'
-      };
+      return flexibleDimensions;
     });
     _defineProperty(this, "getMediaProviderToUse", (mediaOptions, mediaProvider) => {
       if (mediaProvider) {

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

@@ -81,9 +81,11 @@ 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, "getMediaSettings", memoizeOne((viewAndUploadMediaClientConfig, isViewOnly) => {
+      return {
+        canUpdateVideoCaptions: fg('platform_media_video_captions') ? fg('platform_editor_video_caption_commit') ? !!viewAndUploadMediaClientConfig && !isViewOnly : !!viewAndUploadMediaClientConfig : false
+      };
+    }));
     _defineProperty(this, "onPreviewRender", fileId => {
       if (expValEquals('aifc_page_create_with_rovo_include_infographics', 'isEnabled', true)) {
         var _this$props$pluginInj2, _this$props$pluginInj3;
@@ -154,7 +156,7 @@ export class MediaNode extends Component {
   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.isAIGenerating !== nextProps.isAIGenerating || 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 || this.props.syncProvider !== nextProps.syncProvider || 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.isAIGenerating !== nextProps.isAIGenerating || 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.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
       return true;
     }
     return false;
@@ -328,7 +330,7 @@ export class MediaNode extends Component {
       alt: alt,
       videoControlsWrapperRef: this.videoControlsWrapperRef,
       ssr: ssr,
-      mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+      mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
       isAIGenerating: !!this.props.isAIGenerating,
       onPreviewRender: this.onPreviewRender,
       onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -17,7 +17,6 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
 import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
@@ -475,7 +474,7 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
-  if (widthType !== 'pixel' && expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
+  if (widthType !== 'pixel') {
     return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
       view: view,
       getPos: getPos,

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

@@ -21,7 +21,6 @@ import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasAIGeneratingDecoration } from '../../pm-plugins/ai-generating-decoration';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
@@ -100,22 +99,13 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       if (!mediaSingleNodeParent) {
         return flexibleDimensions;
       }
-      if (expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
-        if (_this.hasPxWidthType(mediaSingleNodeParent)) {
-          return {
-            width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
-            height: '100%'
-          };
-        }
-        return flexibleDimensions;
+      if (_this.hasPxWidthType(mediaSingleNodeParent)) {
+        return {
+          width: "".concat(mediaSingleNodeParent.attrs.width, "px"),
+          height: '100%'
+        };
       }
-
-      // Compute normal dimensions
-      var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
-      return {
-        width: "".concat(maxWidth, "px"),
-        height: '100%'
-      };
+      return flexibleDimensions;
     });
     _defineProperty(_this, "getMediaProviderToUse", function (mediaOptions, mediaProvider) {
       if (mediaProvider) {

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

@@ -99,9 +99,9 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         setNodeSelection(_this.props.view, propPos - 1);
       }
     });
-    _defineProperty(_this, "getMediaSettings", memoizeOne(function (viewAndUploadMediaClientConfig) {
+    _defineProperty(_this, "getMediaSettings", memoizeOne(function (viewAndUploadMediaClientConfig, isViewOnly) {
       return {
-        canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
+        canUpdateVideoCaptions: fg('platform_media_video_captions') ? fg('platform_editor_video_caption_commit') ? !!viewAndUploadMediaClientConfig && !isViewOnly : !!viewAndUploadMediaClientConfig : false
       };
     }));
     _defineProperty(_this, "onPreviewRender", function (fileId) {
@@ -177,7 +177,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.isAIGenerating !== nextProps.isAIGenerating || 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 || this.props.syncProvider !== nextProps.syncProvider || 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.isAIGenerating !== nextProps.isAIGenerating || 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.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -378,7 +378,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         alt: alt,
         videoControlsWrapperRef: this.videoControlsWrapperRef,
         ssr: ssr,
-        mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig),
+        mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
         isAIGenerating: !!this.props.isAIGenerating,
         onPreviewRender: this.onPreviewRender,
         onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -23,7 +23,6 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
 import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
@@ -510,7 +509,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
-  if (widthType !== 'pixel' && expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
+  if (widthType !== 'pixel') {
     return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
       view: view,
       getPos: getPos,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "13.4.11",
+	"version": "13.5.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -65,7 +65,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^100.0.0",
+		"@atlaskit/tmp-editor-statsig": "^101.0.0",
 		"@atlaskit/tokens": "^13.4.0",
 		"@atlaskit/tooltip": "^22.6.0",
 		"@babel/runtime": "^7.0.0",
@@ -150,6 +150,9 @@
 		"platform_media_video_captions": {
 			"type": "boolean"
 		},
+		"platform_editor_video_caption_commit": {
+			"type": "boolean"
+		},
 		"confluence_fe_create_inline_comment_exp_coverage_2": {
 			"type": "boolean"
 		},