@atlaskit/editor-plugin-media 3.1.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/nodeviews/mediaNodeView/media.js +15 -6
  3. package/dist/cjs/nodeviews/mediaSingle.js +4 -0
  4. package/dist/cjs/ui/toolbar/index.js +3 -3
  5. package/dist/cjs/ui/toolbar/mediaInline.js +1 -1
  6. package/dist/es2019/nodeviews/mediaNodeView/media.js +14 -5
  7. package/dist/es2019/nodeviews/mediaSingle.js +4 -0
  8. package/dist/es2019/ui/toolbar/index.js +3 -3
  9. package/dist/es2019/ui/toolbar/mediaInline.js +1 -1
  10. package/dist/esm/nodeviews/mediaNodeView/media.js +15 -6
  11. package/dist/esm/nodeviews/mediaSingle.js +4 -0
  12. package/dist/esm/ui/toolbar/index.js +3 -3
  13. package/dist/esm/ui/toolbar/mediaInline.js +1 -1
  14. package/dist/types/nodeviews/mediaNodeView/media.d.ts +1 -0
  15. package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts +1 -0
  16. package/package.json +15 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#169011](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169011)
8
+ [`8b33fc800cc29`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b33fc800cc29) -
9
+ Using viewAndUploadMediaClientConfig to enable Video Captions upload and delete from Media Card
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 3.2.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [#172247](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172247)
20
+ [`67d04382f5777`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/67d04382f5777) -
21
+ Add data-media-vc-wrapper to ProseMirror media signle node
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+
3
27
  ## 3.1.0
4
28
 
5
29
  ### Minor Changes
package/dist/cjs/nodeviews/mediaNodeView/media.js CHANGED
@@ -41,7 +41,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
41
41
  (0, _defineProperty2.default)(_this, "videoControlsWrapperRef", /*#__PURE__*/_react.default.createRef());
42
42
  (0, _defineProperty2.default)(_this, "unbindKeyDown", null);
43
43
  (0, _defineProperty2.default)(_this, "setViewMediaClientConfig", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
44
- var mediaProvider, viewMediaClientConfig;
44
+ var mediaProvider, viewMediaClientConfig, viewAndUploadMediaClientConfig;
45
45
  return _regenerator.default.wrap(function _callee$(_context) {
46
46
  while (1) switch (_context.prev = _context.next) {
47
47
  case 0:
@@ -51,8 +51,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
51
51
  mediaProvider = _context.sent;
52
52
  if (mediaProvider) {
53
53
  viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
54
+ viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
54
55
  _this.setState({
55
- viewMediaClientConfig: viewMediaClientConfig
56
+ viewMediaClientConfig: viewMediaClientConfig,
57
+ viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
56
58
  });
57
59
  }
58
60
  case 4:
@@ -120,7 +122,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
120
122
  key: "shouldComponentUpdate",
121
123
  value: function shouldComponentUpdate(nextProps, nextState) {
122
124
  var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
123
- 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) {
125
+ var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
126
+ 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) {
124
127
  return true;
125
128
  }
126
129
  return false;
@@ -246,6 +249,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
246
249
  });
247
250
  var _this$state = this.state,
248
251
  viewMediaClientConfig = _this$state.viewMediaClientConfig,
252
+ viewAndUploadMediaClientConfig = _this$state.viewAndUploadMediaClientConfig,
249
253
  contextIdentifierProvider = _this$state.contextIdentifierProvider;
250
254
  var _node$attrs = node.attrs,
251
255
  id = _node$attrs.id,
@@ -253,7 +257,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
253
257
  collection = _node$attrs.collection,
254
258
  url = _node$attrs.url,
255
259
  alt = _node$attrs.alt;
256
- if (isLoading || type !== 'external' && !viewMediaClientConfig) {
260
+ var hasNoMediaClientConfig = !viewMediaClientConfig && ((0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
261
+ if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
257
262
  return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
258
263
  dimensions: originalDimensions
259
264
  }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
@@ -274,11 +279,12 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
274
279
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
275
280
  collectionName: collection
276
281
  };
282
+ var resolvedViewAndUploadMediaClientConfig = (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? viewAndUploadMediaClientConfig : undefined;
277
283
 
278
284
  // mediaClientConfig is not needed for "external" case. So we have to cheat here.
279
285
  // there is a possibility mediaClientConfig will be part of a identifier,
280
286
  // so this might be not an issue
281
- var mediaClientConfig = viewMediaClientConfig || {
287
+ var mediaClientConfig = resolvedViewAndUploadMediaClientConfig || viewMediaClientConfig || {
282
288
  // Ignored via go/ees005
283
289
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
284
290
  authProvider: function authProvider() {
@@ -315,7 +321,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
315
321
  contextId: contextId,
316
322
  alt: alt,
317
323
  videoControlsWrapperRef: this.videoControlsWrapperRef,
318
- ssr: ssr
324
+ ssr: ssr,
325
+ mediaSettings: {
326
+ canUpdateVideoCaptions: (0, _platformFeatureFlags.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
327
+ }
319
328
  })));
320
329
  }
321
330
  }]);
package/dist/cjs/nodeviews/mediaSingle.js CHANGED
@@ -31,6 +31,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
31
31
  var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
32
32
  var _mediaClient = require("@atlaskit/media-client");
33
33
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
34
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
34
35
  var _captions = require("../pm-plugins/commands/captions");
35
36
  var _main = require("../pm-plugins/main");
36
37
  var _mediaCommon = require("../pm-plugins/utils/media-common");
@@ -715,6 +716,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
715
716
  if ((_this$reactComponentP2 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowPixelResizing) {
716
717
  domRef.classList.add('media-extended-resize-experience');
717
718
  }
719
+ if ((0, _expValEquals.expValEquals)('platform_editor_media_card_vc_wrapper_attribute', 'isEnabled', true)) {
720
+ domRef.setAttribute('data-media-vc-wrapper', 'true');
721
+ }
718
722
  return domRef;
719
723
  }
720
724
  }, {
package/dist/cjs/ui/toolbar/index.js CHANGED
@@ -304,7 +304,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
304
304
  });
305
305
  }
306
306
  });
307
- if (!isEditorControlsEnabled || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
307
+ if (!isEditorControlsEnabled) {
308
308
  toolbarButtons.push({
309
309
  type: 'separator'
310
310
  });
@@ -325,7 +325,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
325
325
  }
326
326
  var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
327
327
  var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
328
- if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
328
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
329
329
  var _pluginInjectionApi$a4;
330
330
  var layoutDropdown = (0, _card.buildLayoutDropdown)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
331
331
  toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutDropdown));
@@ -353,7 +353,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
353
353
  title: intl.formatMessage(_card.layoutToMessages[selectedLayoutIcon.value]),
354
354
  icon: selectedLayoutIcon.icon
355
355
  };
356
- toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger], (0, _toConsumableArray2.default)(isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? [] : [{
356
+ toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger], (0, _toConsumableArray2.default)(isEditorControlsEnabled ? [] : [{
357
357
  type: 'separator'
358
358
  }]));
359
359
  }
package/dist/cjs/ui/toolbar/mediaInline.js CHANGED
@@ -217,7 +217,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
217
217
  });
218
218
  }
219
219
  });
220
- if (!isEditorControlsEnabled || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
220
+ if (!isEditorControlsEnabled) {
221
221
  inlineImageItems.push({
222
222
  type: 'separator'
223
223
  });
package/dist/es2019/nodeviews/mediaNodeView/media.js CHANGED
@@ -25,8 +25,10 @@ export class MediaNode extends Component {
25
25
  const mediaProvider = await this.props.mediaProvider;
26
26
  if (mediaProvider) {
27
27
  const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
28
+ const viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
28
29
  this.setState({
29
- viewMediaClientConfig
30
+ viewMediaClientConfig,
31
+ viewAndUploadMediaClientConfig
30
32
  });
31
33
  }
32
34
  });
@@ -90,7 +92,8 @@ export class MediaNode extends Component {
90
92
  }
91
93
  shouldComponentUpdate(nextProps, nextState) {
92
94
  const hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
93
- 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) {
95
+ const hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
96
+ 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) {
94
97
  return true;
95
98
  }
96
99
  return false;
@@ -186,6 +189,7 @@ export class MediaNode extends Component {
186
189
  const borderMark = node.marks.find(m => m.type.name === 'border');
187
190
  const {
188
191
  viewMediaClientConfig,
192
+ viewAndUploadMediaClientConfig,
189
193
  contextIdentifierProvider
190
194
  } = this.state;
191
195
  const {
@@ -195,7 +199,8 @@ export class MediaNode extends Component {
195
199
  url,
196
200
  alt
197
201
  } = node.attrs;
198
- if (isLoading || type !== 'external' && !viewMediaClientConfig) {
202
+ const hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
203
+ if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
199
204
  return /*#__PURE__*/React.createElement(MediaCardWrapper, {
200
205
  dimensions: originalDimensions
201
206
  }, /*#__PURE__*/React.createElement(CardLoading, {
@@ -216,11 +221,12 @@ export class MediaNode extends Component {
216
221
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
217
222
  collectionName: collection
218
223
  };
224
+ const resolvedViewAndUploadMediaClientConfig = fg('platform_media_video_captions') ? viewAndUploadMediaClientConfig : undefined;
219
225
 
220
226
  // mediaClientConfig is not needed for "external" case. So we have to cheat here.
221
227
  // there is a possibility mediaClientConfig will be part of a identifier,
222
228
  // so this might be not an issue
223
- const mediaClientConfig = viewMediaClientConfig || {
229
+ const mediaClientConfig = resolvedViewAndUploadMediaClientConfig || viewMediaClientConfig || {
224
230
  // Ignored via go/ees005
225
231
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
226
232
  authProvider: () => ({})
@@ -257,7 +263,10 @@ export class MediaNode extends Component {
257
263
  contextId: contextId,
258
264
  alt: alt,
259
265
  videoControlsWrapperRef: this.videoControlsWrapperRef,
260
- ssr: ssr
266
+ ssr: ssr,
267
+ mediaSettings: {
268
+ canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
269
+ }
261
270
  })));
262
271
  }
263
272
  }
package/dist/es2019/nodeviews/mediaSingle.js CHANGED
@@ -23,6 +23,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
23
23
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
24
24
  import { getAttrsFromUrl } from '@atlaskit/media-client';
25
25
  import { fg } from '@atlaskit/platform-feature-flags';
26
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
26
27
  import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
27
28
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
28
29
  import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
@@ -619,6 +620,9 @@ class MediaSingleNodeView extends ReactNodeView {
619
620
  if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowPixelResizing) {
620
621
  domRef.classList.add('media-extended-resize-experience');
621
622
  }
623
+ if (expValEquals('platform_editor_media_card_vc_wrapper_attribute', 'isEnabled', true)) {
624
+ domRef.setAttribute('data-media-vc-wrapper', 'true');
625
+ }
622
626
  return domRef;
623
627
  }
624
628
  getContentDOM() {
package/dist/es2019/ui/toolbar/index.js CHANGED
@@ -296,7 +296,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
296
296
  });
297
297
  }
298
298
  });
299
- if (!isEditorControlsEnabled || !fg('platform_editor_controls_patch_6')) {
299
+ if (!isEditorControlsEnabled) {
300
300
  toolbarButtons.push({
301
301
  type: 'separator'
302
302
  });
@@ -317,7 +317,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
317
317
  }
318
318
  const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
319
319
  const addLayoutDropdownToToolbar = () => {
320
- if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
320
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
321
321
  var _pluginInjectionApi$a4;
322
322
  const layoutDropdown = buildLayoutDropdown(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
323
323
  toolbarButtons = [...toolbarButtons, ...layoutDropdown];
@@ -345,7 +345,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
345
345
  title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
346
346
  icon: selectedLayoutIcon.icon
347
347
  };
348
- toolbarButtons = [...toolbarButtons, trigger, ...(isEditorControlsEnabled && fg('platform_editor_controls_patch_6') ? [] : [{
348
+ toolbarButtons = [...toolbarButtons, trigger, ...(isEditorControlsEnabled ? [] : [{
349
349
  type: 'separator'
350
350
  }])];
351
351
  }
package/dist/es2019/ui/toolbar/mediaInline.js CHANGED
@@ -207,7 +207,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
207
207
  });
208
208
  }
209
209
  });
210
- if (!isEditorControlsEnabled || !fg('platform_editor_controls_patch_6')) {
210
+ if (!isEditorControlsEnabled) {
211
211
  inlineImageItems.push({
212
212
  type: 'separator'
213
213
  });
package/dist/esm/nodeviews/mediaNodeView/media.js CHANGED
@@ -33,7 +33,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
33
33
  _defineProperty(_this, "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
34
34
  _defineProperty(_this, "unbindKeyDown", null);
35
35
  _defineProperty(_this, "setViewMediaClientConfig", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
36
- var mediaProvider, viewMediaClientConfig;
36
+ var mediaProvider, viewMediaClientConfig, viewAndUploadMediaClientConfig;
37
37
  return _regeneratorRuntime.wrap(function _callee$(_context) {
38
38
  while (1) switch (_context.prev = _context.next) {
39
39
  case 0:
@@ -43,8 +43,10 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
43
43
  mediaProvider = _context.sent;
44
44
  if (mediaProvider) {
45
45
  viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
46
+ viewAndUploadMediaClientConfig = mediaProvider.viewAndUploadMediaClientConfig;
46
47
  _this.setState({
47
- viewMediaClientConfig: viewMediaClientConfig
48
+ viewMediaClientConfig: viewMediaClientConfig,
49
+ viewAndUploadMediaClientConfig: viewAndUploadMediaClientConfig
48
50
  });
49
51
  }
50
52
  case 4:
@@ -112,7 +114,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
112
114
  key: "shouldComponentUpdate",
113
115
  value: function shouldComponentUpdate(nextProps, nextState) {
114
116
  var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
115
- 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) {
117
+ var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
118
+ 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) {
116
119
  return true;
117
120
  }
118
121
  return false;
@@ -238,6 +241,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
238
241
  });
239
242
  var _this$state = this.state,
240
243
  viewMediaClientConfig = _this$state.viewMediaClientConfig,
244
+ viewAndUploadMediaClientConfig = _this$state.viewAndUploadMediaClientConfig,
241
245
  contextIdentifierProvider = _this$state.contextIdentifierProvider;
242
246
  var _node$attrs = node.attrs,
243
247
  id = _node$attrs.id,
@@ -245,7 +249,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
245
249
  collection = _node$attrs.collection,
246
250
  url = _node$attrs.url,
247
251
  alt = _node$attrs.alt;
248
- if (isLoading || type !== 'external' && !viewMediaClientConfig) {
252
+ var hasNoMediaClientConfig = !viewMediaClientConfig && (fg('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
253
+ if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
249
254
  return /*#__PURE__*/React.createElement(MediaCardWrapper, {
250
255
  dimensions: originalDimensions
251
256
  }, /*#__PURE__*/React.createElement(CardLoading, {
@@ -266,11 +271,12 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
266
271
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
267
272
  collectionName: collection
268
273
  };
274
+ var resolvedViewAndUploadMediaClientConfig = fg('platform_media_video_captions') ? viewAndUploadMediaClientConfig : undefined;
269
275
 
270
276
  // mediaClientConfig is not needed for "external" case. So we have to cheat here.
271
277
  // there is a possibility mediaClientConfig will be part of a identifier,
272
278
  // so this might be not an issue
273
- var mediaClientConfig = viewMediaClientConfig || {
279
+ var mediaClientConfig = resolvedViewAndUploadMediaClientConfig || viewMediaClientConfig || {
274
280
  // Ignored via go/ees005
275
281
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
276
282
  authProvider: function authProvider() {
@@ -307,7 +313,10 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
307
313
  contextId: contextId,
308
314
  alt: alt,
309
315
  videoControlsWrapperRef: this.videoControlsWrapperRef,
310
- ssr: ssr
316
+ ssr: ssr,
317
+ mediaSettings: {
318
+ canUpdateVideoCaptions: fg('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig : false
319
+ }
311
320
  })));
312
321
  }
313
322
  }]);
package/dist/esm/nodeviews/mediaSingle.js CHANGED
@@ -36,6 +36,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
36
36
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
37
37
  import { getAttrsFromUrl } from '@atlaskit/media-client';
38
38
  import { fg } from '@atlaskit/platform-feature-flags';
39
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
39
40
  import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
40
41
  import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
41
42
  import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
@@ -711,6 +712,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
711
712
  if ((_this$reactComponentP2 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowPixelResizing) {
712
713
  domRef.classList.add('media-extended-resize-experience');
713
714
  }
715
+ if (expValEquals('platform_editor_media_card_vc_wrapper_attribute', 'isEnabled', true)) {
716
+ domRef.setAttribute('data-media-vc-wrapper', 'true');
717
+ }
714
718
  return domRef;
715
719
  }
716
720
  }, {
package/dist/esm/ui/toolbar/index.js CHANGED
@@ -295,7 +295,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
295
295
  });
296
296
  }
297
297
  });
298
- if (!isEditorControlsEnabled || !fg('platform_editor_controls_patch_6')) {
298
+ if (!isEditorControlsEnabled) {
299
299
  toolbarButtons.push({
300
300
  type: 'separator'
301
301
  });
@@ -316,7 +316,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
316
316
  }
317
317
  var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
318
318
  var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
319
- if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
319
+ if (editorExperiment('platform_editor_controls', 'variant1')) {
320
320
  var _pluginInjectionApi$a4;
321
321
  var layoutDropdown = buildLayoutDropdown(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
322
322
  toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutDropdown));
@@ -344,7 +344,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
344
344
  title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
345
345
  icon: selectedLayoutIcon.icon
346
346
  };
347
- toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), [trigger], _toConsumableArray(isEditorControlsEnabled && fg('platform_editor_controls_patch_6') ? [] : [{
347
+ toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), [trigger], _toConsumableArray(isEditorControlsEnabled ? [] : [{
348
348
  type: 'separator'
349
349
  }]));
350
350
  }
package/dist/esm/ui/toolbar/mediaInline.js CHANGED
@@ -208,7 +208,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
208
208
  });
209
209
  }
210
210
  });
211
- if (!isEditorControlsEnabled || !fg('platform_editor_controls_patch_6')) {
211
+ if (!isEditorControlsEnabled) {
212
212
  inlineImageItems.push({
213
213
  type: 'separator'
214
214
  });
package/dist/types/nodeviews/mediaNodeView/media.d.ts CHANGED
@@ -25,6 +25,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
25
25
  }
26
26
  interface MediaNodeState {
27
27
  viewMediaClientConfig?: MediaClientConfig;
28
+ viewAndUploadMediaClientConfig?: MediaClientConfig;
28
29
  contextIdentifierProvider?: ContextIdentifierProvider;
29
30
  }
30
31
  export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState> {
package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts CHANGED
@@ -25,6 +25,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
25
25
  }
26
26
  interface MediaNodeState {
27
27
  viewMediaClientConfig?: MediaClientConfig;
28
+ viewAndUploadMediaClientConfig?: MediaClientConfig;
28
29
  contextIdentifierProvider?: ContextIdentifierProvider;
29
30
  }
30
31
  export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,13 +38,13 @@
38
38
  "@atlaskit/analytics-namespaced-context": "^7.0.0",
39
39
  "@atlaskit/analytics-next": "^11.1.0",
40
40
  "@atlaskit/button": "^23.2.0",
41
- "@atlaskit/editor-common": "^106.9.0",
41
+ "@atlaskit/editor-common": "^107.0.0",
42
42
  "@atlaskit/editor-palette": "^2.1.0",
43
43
  "@atlaskit/editor-plugin-analytics": "^2.3.0",
44
44
  "@atlaskit/editor-plugin-annotation": "^2.9.0",
45
45
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
46
46
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
47
- "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
47
+ "@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
48
48
  "@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
49
49
  "@atlaskit/editor-plugin-floating-toolbar": "^4.2.0",
50
50
  "@atlaskit/editor-plugin-focus": "^1.5.0",
@@ -57,15 +57,15 @@
57
57
  "@atlaskit/editor-shared-styles": "^3.4.0",
58
58
  "@atlaskit/editor-tables": "^2.9.0",
59
59
  "@atlaskit/form": "^12.0.0",
60
- "@atlaskit/icon": "^26.4.0",
60
+ "@atlaskit/icon": "^27.0.0",
61
61
  "@atlaskit/media-card": "^79.3.0",
62
- "@atlaskit/media-client": "^33.4.0",
62
+ "@atlaskit/media-client": "^34.0.0",
63
63
  "@atlaskit/media-client-react": "^4.1.0",
64
- "@atlaskit/media-common": "^12.1.0",
65
- "@atlaskit/media-filmstrip": "^50.1.0",
66
- "@atlaskit/media-picker": "^69.0.0",
67
- "@atlaskit/media-ui": "^28.2.0",
68
- "@atlaskit/media-viewer": "^52.2.0",
64
+ "@atlaskit/media-common": "^12.2.0",
65
+ "@atlaskit/media-filmstrip": "^51.0.0",
66
+ "@atlaskit/media-picker": "^70.0.0",
67
+ "@atlaskit/media-ui": "^28.3.0",
68
+ "@atlaskit/media-viewer": "^52.3.0",
69
69
  "@atlaskit/platform-feature-flags": "^1.1.0",
70
70
  "@atlaskit/primitives": "^14.8.0",
71
71
  "@atlaskit/textfield": "^8.0.0",
@@ -85,7 +85,7 @@
85
85
  "typescript": "~5.4.2"
86
86
  },
87
87
  "peerDependencies": {
88
- "@atlaskit/media-core": "^36.1.0",
88
+ "@atlaskit/media-core": "^37.0.0",
89
89
  "react": "^18.2.0",
90
90
  "react-dom": "^18.2.0",
91
91
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -172,7 +172,7 @@
172
172
  "platform_editor_remove_media_inline_feature_flag": {
173
173
  "type": "boolean"
174
174
  },
175
- "platform_editor_controls_patch_6": {
175
+ "platform_editor_media_single_toolbar_target": {
176
176
  "type": "boolean"
177
177
  },
178
178
  "platform_editor_ssr_media": {
@@ -204,6 +204,9 @@
204
204
  },
205
205
  "platform_editor_controls_patch_11": {
206
206
  "type": "boolean"
207
+ },
208
+ "platform_media_video_captions": {
209
+ "type": "boolean"
207
210
  }
208
211
  },
209
212
  "stricter": {