@atlaskit/media-ui 28.2.3 → 28.3.0

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/artifactUploader/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "CaptionsUploaderBrowser", {
   enumerable: true,
   get: function get() {
-    return _captionsUploaderBrowser.CaptionsUploaderBrowser;
+    return _captionsUploaderBrowser.default;
   }
 });
-var _captionsUploaderBrowser = require("./captionsUploaderBrowser");
+var _captionsUploaderBrowser = _interopRequireDefault(require("./captionsUploaderBrowser"));

package/dist/cjs/customMediaPlayer/mediaPlayer/captions/captionDeleteConfirmationModal.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _util = require("./artifactUploader/captions/util");
+var _apiFeedback = _interopRequireDefault(require("./apiFeedback"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../../../messages");
+var _mediaCommon = require("@atlaskit/media-common");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var CaptionDeleteConfirmationModal = function CaptionDeleteConfirmationModal(_ref) {
+  var identifier = _ref.identifier,
+    artifactName = _ref.artifactName,
+    onClose = _ref.onClose,
+    onStart = _ref.onStart,
+    onEnd = _ref.onEnd,
+    onError = _ref.onError,
+    intl = _ref.intl;
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    notificationType = _useState2[0],
+    setNotificationType = _useState2[1];
+  var _onError = function _onError(error, context) {
+    setNotificationType('error');
+    onError === null || onError === void 0 || onError(error, context);
+  };
+  var _onEnd = function _onEnd(context) {
+    setNotificationType('success');
+    onEnd === null || onEnd === void 0 || onEnd(context);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, artifactName && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "danger"
+  }, intl.formatMessage(_messages.messages.video_captions_delete_captions_confirmation_header))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, intl.formatMessage(_messages.messages.video_captions_delete_captions_confirmation_description)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: onClose
+  }, intl.formatMessage(_messages.messages.cancel)), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "danger",
+    onClick: function onClick() {
+      deleteCaption(mediaClient, identifier, artifactName, onStart, _onEnd, _onError);
+      onClose();
+    }
+  }, intl.formatMessage(_messages.messages.delete))))), /*#__PURE__*/_react.default.createElement(_apiFeedback.default, {
+    notificationType: notificationType,
+    onDismissed: function onDismissed() {
+      return setNotificationType(null);
+    },
+    successDescription: intl.formatMessage(_messages.messages.video_captions_delete_success_description),
+    errorDescription: intl.formatMessage(_messages.messages.video_captions_delete_error_description)
+  }));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(CaptionDeleteConfirmationModal);
+var deleteCaption = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, identifier, artifactName, onStart, onEnd, onError) {
+    var context;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          context = {
+            traceId: (0, _mediaCommon.getRandomTelemetryId)(),
+            artifactName: artifactName
+          };
+          onStart === null || onStart === void 0 || onStart(context);
+          _context.prev = 2;
+          _context.next = 5;
+          return mediaClient.file.deleteArtifact(identifier.id, {
+            artifactName: artifactName
+          }, identifier.collectionName, {
+            traceId: context.traceId
+          });
+        case 5:
+          onEnd === null || onEnd === void 0 || onEnd(context);
+          _context.next = 11;
+          break;
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](2);
+          onError === null || onError === void 0 || onError((0, _util.parseError)(_context.t0), context);
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 8]]);
+  }));
+  return function deleteCaption(_x, _x2, _x3, _x4, _x5, _x6) {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/dist/cjs/customMediaPlayer/mediaPlayer/captionsAdminControls.js

@@ -25,7 +25,8 @@ var _CaptionsAdminControls = exports._CaptionsAdminControls = function _Captions
   var intl = _ref.intl,
     _ref$textTracks = _ref.textTracks,
     textTracks = _ref$textTracks === void 0 ? {} : _ref$textTracks,
-    onUpload = _ref.onUpload;
+    onUpload = _ref.onUpload,
+    onDelete = _ref.onDelete;
   var videoSettings = intl.formatMessage(_messages.messages.video_settings);
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     shouldRenderToParent: true,
@@ -49,8 +50,10 @@ var _CaptionsAdminControls = exports._CaptionsAdminControls = function _Captions
   }, (_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks.map(function (track, index) {
     return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
       key: "".concat(track.lang, "-").concat(index),
-      onClick: function onClick() {},
-      elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
+      onClick: function onClick() {
+        return onDelete(track.artifactName);
+      },
+      elemAfter: /*#__PURE__*/_react.default.createElement(_delete.default, {
         spacing: "spacious",
         label: "",
         color: "var(--ds-icon-danger, #C9372C)"

package/dist/cjs/customMediaPlayer/mediaPlayer/captionsSelectControls.js

@@ -14,7 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _messages = require("../../messages");
 var _captions = require("./captions");
 var _excluded = ["triggerRef"];
@@ -61,7 +61,11 @@ var _CaptionsSelectControls = exports._CaptionsSelectControls = /*#__PURE__*/(0,
       }, /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({
         ref: triggerRef
       }, triggerProps, {
-        icon: _chevronDown.default,
+        icon: function icon(iconProps) {
+          return /*#__PURE__*/_react.default.createElement(_chevronDown.default, (0, _extends2.default)({}, iconProps, {
+            size: "small"
+          }));
+        },
         label: selectCaptions,
         appearance: "subtle"
       })));

package/dist/cjs/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -12,7 +12,7 @@ var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaPlayerBase = require("./mediaPlayerBase");
 var _useTextTracks = require("./useTextTracks");
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.2.3";
+var packageVersion = "28.3.0";
 var MediaPlayerBaseWithContext = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -53,6 +53,7 @@ var _videoSkipForwardTen = _interopRequireDefault(require("@atlaskit/icon/core/v
 var _videoSkipBackwardTen = _interopRequireDefault(require("@atlaskit/icon/core/video-skip-backward-ten"));
 var _captions = require("./captions");
 var _artifactUploader = require("./captions/artifactUploader");
+var _captionDeleteConfirmationModal = _interopRequireDefault(require("./captions/captionDeleteConfirmationModal"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -105,7 +106,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       playbackSpeed: 1,
       selectedTracksIndex: -1,
       areCaptionsEnabled: false,
-      isArtifactUploaderOpen: false
+      isArtifactUploaderOpen: false,
+      artifactToDelete: undefined
     });
     (0, _defineProperty2.default)(_this, "findPreselectedTrackIndex", function (_ref) {
       var _textTracks$captions;
@@ -504,6 +506,16 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         areCaptionsEnabled: areCaptionsEnabled
       });
     });
+    (0, _defineProperty2.default)(_this, "onCaptionDelete", function (artifactName) {
+      // Modal is not supported in fullscreen mode (as it uses portals which are not in the same DOM tree),
+      // So we need to exit fullscreen first
+      if (_this.state.isFullScreenEnabled) {
+        _this.toggleFullscreen();
+      }
+      _this.setState({
+        artifactToDelete: artifactName
+      });
+    });
     (0, _defineProperty2.default)(_this, "resolveSelectedTracksIndex", function () {
       var _this$state3 = _this.state,
         areCaptionsEnabled = _this$state3.areCaptionsEnabled,
@@ -669,6 +681,48 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
       }
       (0, _analytics.fireAnalyticsEvent)(analyticsEvent, createAnalyticsEvent);
     }
+  }, {
+    key: "baseAnalyticCaptionAttributes",
+    value: function baseAnalyticCaptionAttributes() {
+      var _textTracks$captions3, _textTracks$captions4;
+      var textTracks = this.props.textTracks;
+      var selectedTracksIndex = this.state.selectedTracksIndex;
+      var captionAttributes = {
+        selectedTrackIndex: selectedTracksIndex,
+        availableCaptionTracks: (textTracks === null || textTracks === void 0 || (_textTracks$captions3 = textTracks.captions) === null || _textTracks$captions3 === void 0 || (_textTracks$captions3 = _textTracks$captions3.tracks) === null || _textTracks$captions3 === void 0 ? void 0 : _textTracks$captions3.length) || 0,
+        selectedTrackLanguage: (textTracks === null || textTracks === void 0 || (_textTracks$captions4 = textTracks.captions) === null || _textTracks$captions4 === void 0 || (_textTracks$captions4 = _textTracks$captions4.tracks) === null || _textTracks$captions4 === void 0 || (_textTracks$captions4 = _textTracks$captions4[selectedTracksIndex]) === null || _textTracks$captions4 === void 0 ? void 0 : _textTracks$captions4.lang) || null
+      };
+      return captionAttributes;
+    }
+  }, {
+    key: "fireCaptionEvent",
+    value: function fireCaptionEvent(event) {
+      (0, _analytics.fireAnalyticsEvent)(event, this.props.createAnalyticsEvent);
+    }
+  }, {
+    key: "fireCaptionUploadSucceededEvent",
+    value: function fireCaptionUploadSucceededEvent(traceId) {
+      this.fireCaptionEvent((0, _analytics.createCaptionUploadSucceededOperationalEvent)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceId));
+    }
+  }, {
+    key: "fireCaptionUploadFailedEvent",
+    value: function fireCaptionUploadFailedEvent(traceId, error) {
+      this.fireCaptionEvent((0, _analytics.createCaptionUploadFailedOperationalEvent)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceId, error));
+    }
+  }, {
+    key: "fireCaptionDeleteSucceededEvent",
+    value: function fireCaptionDeleteSucceededEvent(traceId, artifactName) {
+      this.fireCaptionEvent((0, _analytics.createCaptionDeleteSucceededOperationalEvent)(this.props.type, _objectSpread(_objectSpread({}, this.baseAnalyticCaptionAttributes()), {}, {
+        artifactName: artifactName
+      }), this.props.identifier.id, traceId));
+    }
+  }, {
+    key: "fireCaptionDeleteFailedEvent",
+    value: function fireCaptionDeleteFailedEvent(traceId, artifactName, error) {
+      this.fireCaptionEvent((0, _analytics.createCaptionDeleteFailedOperationalEvent)(this.props.type, _objectSpread(_objectSpread({}, this.baseAnalyticCaptionAttributes()), {}, {
+        artifactName: artifactName
+      }), this.props.identifier.id, traceId, error));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -690,7 +744,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         canUpdateVideoCaptions = _this$props11$mediaSe3 === void 0 ? false : _this$props11$mediaSe3;
       var _this$state6 = this.state,
         areCaptionsEnabled = _this$state6.areCaptionsEnabled,
-        isArtifactUploaderOpen = _this$state6.isArtifactUploaderOpen;
+        isArtifactUploaderOpen = _this$state6.isArtifactUploaderOpen,
+        artifactToDelete = _this$state6.artifactToDelete;
       return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         xcss: customVideoWrapperStyles.root,
         ref: this.videoWrapperRef,
@@ -781,7 +836,8 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
             return _this2.setState({
               isArtifactUploaderOpen: true
             });
-          }
+          },
+          onDelete: _this2.onCaptionDelete
         }), /*#__PURE__*/_react.default.createElement(_artifactUploader.CaptionsUploaderBrowser, {
           identifier: identifier,
           isOpen: isArtifactUploaderOpen,
@@ -790,14 +846,31 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
               isArtifactUploaderOpen: false
             });
           },
-          onStart: function onStart() {
-            // console.log('xxx onStart', file);
+          onEnd: function onEnd(metadata, context) {
+            _this2.fireCaptionUploadSucceededEvent(context.traceId);
           },
-          onEnd: function onEnd() {
-            // console.log('xxx onEnd', result);
+          onError: function onError(err, context) {
+            _this2.fireCaptionUploadFailedEvent(context.traceId, err);
+          }
+        }), /*#__PURE__*/_react.default.createElement(_captionDeleteConfirmationModal.default, {
+          identifier: identifier,
+          artifactName: artifactToDelete,
+          onClose: function onClose() {
+            return _this2.setState({
+              artifactToDelete: ''
+            });
           },
-          onError: function onError() {
-            // console.log('xxx onError', error);
+          onEnd: function onEnd(context) {
+            _this2.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
+            _this2.setState({
+              artifactToDelete: ''
+            });
+          },
+          onError: function onError(err, context) {
+            _this2.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
+            _this2.setState({
+              artifactToDelete: ''
+            });
           }
         }))))));
       }));

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

@@ -63,7 +63,8 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, me
                 return _context.abrupt("return", {
                   src: src,
                   lang: lang,
-                  label: label
+                  label: label,
+                  artifactName: artifactName
                 });
               case 11:
               case "end":

package/dist/cjs/customMediaPlayer/timeRange.js

@@ -43,13 +43,14 @@ var TimeRangeBase = exports.TimeRangeBase = /*#__PURE__*/function (_Component) {
       }
       _this.wrapperElementWidth = _this.wrapperElement.current.getBoundingClientRect().width;
     });
-    (0, _defineProperty2.default)(_this, "onMouseMove", function (e) {
+    (0, _defineProperty2.default)(_this, "onPointerMove", function (e) {
       var _this$state = _this.state,
         isDragging = _this$state.isDragging,
         dragStartClientX = _this$state.dragStartClientX;
       if (!isDragging) {
         return;
       }
+      e.preventDefault();
       e.stopPropagation();
       var _this$props = _this.props,
         onChange = _this$props.onChange,
@@ -75,11 +76,11 @@ var TimeRangeBase = exports.TimeRangeBase = /*#__PURE__*/function (_Component) {
         onChange(newTimeWithBoundaries);
       }
     });
-    (0, _defineProperty2.default)(_this, "onMouseUp", function () {
+    (0, _defineProperty2.default)(_this, "onPointerUp", function () {
       var onChanged = _this.props.onChanged;
       // As soon as user finished dragging, we should clean up events.
-      document.removeEventListener('mouseup', _this.onMouseUp);
-      document.removeEventListener('mousemove', _this.onMouseMove);
+      document.removeEventListener('pointerup', _this.onPointerUp);
+      document.removeEventListener('pointermove', _this.onPointerMove);
       if (onChanged) {
         onChanged();
       }
@@ -87,17 +88,17 @@ var TimeRangeBase = exports.TimeRangeBase = /*#__PURE__*/function (_Component) {
         isDragging: false
       });
     });
-    (0, _defineProperty2.default)(_this, "onThumbMouseDown", function (e) {
+    (0, _defineProperty2.default)(_this, "onPointerDown", function (e) {
       e.preventDefault();
 
       // We need to recalculate every time, because width can change (thanks, editor ;-)
       _this.setWrapperWidth();
 
-      // We are implementing drag and drop here. There is no reason to start listening for mouseUp or move
-      // before that. Also if we start listening for mouseup before that we could pick up someone else's event
+      // We are implementing drag and drop here. There is no reason to start listening for pointerUp or move
+      // before that. Also if we start listening for pointerup before that we could pick up someone else's event
       // For example editors resizing of a inline video player.
-      document.addEventListener('mouseup', _this.onMouseUp);
-      document.addEventListener('mousemove', _this.onMouseMove);
+      document.addEventListener('pointerup', _this.onPointerUp);
+      document.addEventListener('pointermove', _this.onPointerMove);
       var _this$props2 = _this.props,
         duration = _this$props2.duration,
         onChange = _this$props2.onChange;
@@ -176,8 +177,8 @@ var TimeRangeBase = exports.TimeRangeBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      document.removeEventListener('mousemove', this.onMouseMove);
-      document.removeEventListener('mouseup', this.onMouseUp);
+      document.removeEventListener('pointermove', this.onPointerMove);
+      document.removeEventListener('pointerup', this.onPointerUp);
       window.removeEventListener('resize', this.setWrapperWidth);
     }
   }, {
@@ -270,11 +271,11 @@ var TimeRangeBase = exports.TimeRangeBase = /*#__PURE__*/function (_Component) {
         }
       }, disableThumbTooltip ? null : currentTimeTooltip)));
       return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_styledCompiled.TimeRangeWrapper, {
-        onMouseDown: this.onThumbMouseDown,
+        onPointerDown: this.onPointerDown,
         "data-testid": "time-range-wrapper"
       }, timeline) : /*#__PURE__*/_react.default.createElement(_styledEmotion.TimeRangeWrapper, {
         showAsActive: isAlwaysActive,
-        onMouseDown: this.onThumbMouseDown,
+        onPointerDown: this.onPointerDown,
         "data-testid": "time-range-wrapper"
       }, timeline);
     }

package/dist/cjs/messages.js

@@ -96,6 +96,21 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Cancel',
     description: 'cancel'
   },
+  delete: {
+    id: 'fabric.media.delete',
+    defaultMessage: 'Delete',
+    description: 'delete'
+  },
+  success: {
+    id: 'fabric.media.success',
+    defaultMessage: 'Success',
+    description: 'success'
+  },
+  error: {
+    id: 'fabric.media.error',
+    defaultMessage: 'Error',
+    description: 'error'
+  },
   search_all_gifs: {
     id: 'fabric.media.search_all_gifs',
     defaultMessage: 'Search all the GIFs!',
@@ -641,6 +656,36 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Select the file language',
     description: 'In the context of a video player, it allows user to select the language of the uploading captions'
   },
+  video_captions_upload_success_description: {
+    id: 'fabric.media.video_captions_upload_success_description',
+    defaultMessage: 'The caption was successfully uploaded for this video.',
+    description: 'In the context of a video player, it provides feedback when a caption was successfully uploadd'
+  },
+  video_captions_upload_error_description: {
+    id: 'fabric.media.video_captions_upload_error_description',
+    defaultMessage: 'The caption failed to upload.',
+    description: 'In the context of a video player, it provides feedback when a caption failed to upload'
+  },
+  video_captions_delete_captions_confirmation_header: {
+    id: 'fabric.media.video_captions_delete_captions_confirmation_header',
+    defaultMessage: 'Delete Caption',
+    description: 'In the context of a video player, it provides a confirmation header before deleting captions'
+  },
+  video_captions_delete_captions_confirmation_description: {
+    id: 'fabric.media.video_captions_delete_captions_confirmation_description',
+    defaultMessage: 'Please confirm that you want to delete this caption.',
+    description: 'In the context of a video player, it provides a confirmation description before deleting captions'
+  },
+  video_captions_delete_success_description: {
+    id: 'fabric.media.video_captions_delete_success_description',
+    defaultMessage: 'The caption was successfully removed from this video.',
+    description: 'In the context of a video player, it provides feedback when a caption was successfully deleted'
+  },
+  video_captions_delete_error_description: {
+    id: 'fabric.media.video_captions_delete_error_description',
+    defaultMessage: 'The caption failed to delete.',
+    description: 'In the context of a video player, it provides feedback when a caption failed to delete'
+  },
   video_settings: {
     id: 'fabric.media.video_settings',
     defaultMessage: 'Video Settings',

package/dist/es2019/MediaInlineCard/ErroredView/index.compiled.css

@@ -0,0 +1 @@
+._syaz1gtz{color:var(--ds-text-danger,#bf2600)}

package/dist/es2019/MediaInlineCard/ErroredView/index.js

@@ -1,22 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { R300 } from '@atlaskit/theme/colors';
-import WarningIcon from '@atlaskit/icon/utility/migration/warning';
+import { R500 } from '@atlaskit/theme/colors';
+import WarningIcon from '@atlaskit/icon/core/migration/warning';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { AKIconWrapper } from '../Icon';
-import { NoLinkAppearance } from '../styled';
+const errorTitleStyles = null;
 export class MediaInlineCardErroredView extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "renderMessage", () => {
-      const {
-        message
-      } = this.props;
-      const errorMessage = /*#__PURE__*/React.createElement(NoLinkAppearance, null, message);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage);
-    });
-  }
   render() {
     const {
       onClick,
@@ -29,14 +21,18 @@ export class MediaInlineCardErroredView extends React.Component {
       testId: testId,
       innerRef: innerRef,
       onClick: onClick,
-      isSelected: isSelected
+      isSelected: isSelected,
+      isError: true
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
         label: "error",
         LEGACY_size: "small",
-        color: `var(--ds-icon-danger, ${R300})`
+        color: `var(--ds-icon-danger, ${R500})`,
+        size: "small"
       })),
-      title: this.renderMessage()
+      title: /*#__PURE__*/React.createElement("span", {
+        className: ax(["_syaz1gtz"])
+      }, this.props.message)
     }));
   }
 }

package/dist/es2019/MediaInlineCard/Frame/index.js

@@ -34,12 +34,14 @@ export class Frame extends React.Component {
       children,
       onClick,
       innerRef,
-      testId
+      testId,
+      isError
     } = this.props;
     const isInteractive = Boolean(onClick);
     return /*#__PURE__*/React.createElement(Wrapper, {
       ref: innerRef,
       isSelected: isSelected,
+      isError: isError,
       tabIndex: isInteractive ? 0 : undefined,
       role: isInteractive ? 'button' : undefined,
       onClick: this.handleClick,

package/dist/es2019/MediaInlineCard/Frame/styled-compiled.compiled.css

@@ -11,9 +11,11 @@
 ._1qu2glyw{outline-style:none}
 ._1rkwglyw{-moz-user-select:none}
 ._4bfu1r31, ._1nrm1r31:active, ._1a3b1r31:focus, ._9oik1r31:hover{text-decoration-color:currentColor}
+._80om73ad{cursor:default}
 ._80omtlke{cursor:pointer}
 ._ajmmnqa1, ._1iohnqa1:active, ._5goinqa1:focus, ._jf4cnqa1:hover{text-decoration-style:solid}
 ._bfhkq7nr{background-color:var(--ds-background-neutral,rgba(9,30,66,.08))}
+._bfhktaeo{background-color:var(--ds-background-danger,#ffebe6)}
 ._ca0qv77o{padding-top:var(--ds-space-025,2px)}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._syazj3m3{color:var(--ds-text,#091e42)}
@@ -21,4 +23,5 @@
 ._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._vwz47vkz{line-height:1pc}
-._irr3hv1p:hover{background-color:var(--ds-background-neutral-hovered,rgba(9,30,66,.13))}
+._irr3hv1p:hover{background-color:var(--ds-background-neutral-hovered,rgba(9,30,66,.13))}
+._irr3taeo:hover{background-color:var(--ds-background-danger,#ffebe6)}

package/dist/es2019/MediaInlineCard/Frame/styled-compiled.js

@@ -3,9 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./styled-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
+import { B300, N30A, N40A, N900, R50 } from '@atlaskit/theme/colors';
 const selectedStyles = null;
 const notSelectedStyles = null;
+const errorStyles = null;
 const wrapperStyles = null;
 
 /*
@@ -22,10 +23,11 @@ const wrapperStyles = null;
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 export const Wrapper = ({
   isSelected,
+  isError,
   children,
   ...props
 }) => /*#__PURE__*/React.createElement("span", _extends({
   "data-testid": "frame-wrapper"
 }, props, {
-  className: ax(["_2rko1sit _v56415x0 _vwz47vkz _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66 _16d9qvcn _1e0c1nu9 _syazj3m3 _bfhkq7nr _1rkwglyw _80omtlke _irr3hv1p", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1s9b _uiztglyw _4bfu1r31 _1nrm1r31 _1a3b1r31 _9oik1r31 _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv"])
+  className: ax(["_2rko1sit _v56415x0 _vwz47vkz _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66 _16d9qvcn _1e0c1nu9 _syazj3m3 _bfhkq7nr _1rkwglyw _80omtlke _irr3hv1p", isSelected && "_12ji1r31 _1qu2glyw _12y31o36 _1h6d1j28 _80omtlke _16qs1s9b _uiztglyw _4bfu1r31 _1nrm1r31 _1a3b1r31 _9oik1r31 _1hmsglyw _c2waglyw _4fprglyw _1bnxglyw _ajmmnqa1 _1iohnqa1 _5goinqa1 _jf4cnqa1", !isSelected && "_uizt1kdv", isError && "_bfhktaeo _80om73ad _irr3taeo"])
 }), children);

package/dist/es2019/MediaInlineCard/Frame/styled-emotion.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
-import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
+import { B300, N30A, N40A, N900, R50 } from '@atlaskit/theme/colors';
 const selected = `
   cursor: pointer;
   box-shadow: 0 0 0 1px ${`var(--ds-border-selected, ${B300})`};
@@ -52,4 +52,12 @@ props => isSelected(props), {
   '&:hover': {
     backgroundColor: `var(--ds-background-neutral-hovered, ${N40A})`
   }
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+props => props.isError && {
+  backgroundColor: `var(--ds-background-danger, ${R50})`,
+  cursor: 'default',
+  '&:hover': {
+    backgroundColor: `var(--ds-background-danger, ${R50})`
+  }
 });