@atlaskit/media-ui 28.2.4 → 28.3.1

package/dist/es2019/abuseModal/abuseModal.js

@@ -1,19 +1,8 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import Button, { IconButton } from '@atlaskit/button/new';
-import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { Flex, Grid, xcss } from '@atlaskit/primitives';
 import { messages } from '../messages';
-const gridStyles = xcss({
-  width: '100%'
-});
-const closeContainerStyles = xcss({
-  gridArea: 'close'
-});
-const titleContainerStyles = xcss({
-  gridArea: 'title'
-});
 export const AbuseModal = injectIntl(({
   isOpen,
   onConfirm,
@@ -25,24 +14,11 @@ export const AbuseModal = injectIntl(({
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose,
     testId: "mediaAbuseModal"
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Grid, {
-    gap: "space.200",
-    templateAreas: ['title close'],
-    xcss: gridStyles
-  }, /*#__PURE__*/React.createElement(Flex, {
-    xcss: closeContainerStyles,
-    justifyContent: "end"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "subtle",
-    icon: CrossIcon,
-    label: "Close Modal",
-    onClick: onClose
-  })), /*#__PURE__*/React.createElement(Flex, {
-    xcss: titleContainerStyles,
-    justifyContent: "start"
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, formatMessage(messages.abuse_modal_title))))), /*#__PURE__*/React.createElement(ModalBody, null, formatMessage(messages.abuse_modal_body)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  }, formatMessage(messages.abuse_modal_title))), /*#__PURE__*/React.createElement(ModalBody, null, formatMessage(messages.abuse_modal_body)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: onClose
   }, formatMessage(messages.cancel)), /*#__PURE__*/React.createElement(Button, {

package/dist/es2019/customMediaPlayer/analytics/events/operational/captionDeleteFailed.js

@@ -0,0 +1,15 @@
+import { generateBaseAttributes } from '../../utils/captionAttributes';
+export function createCaptionDeleteFailedOperationalEvent(type, captionAttributes, fileId, traceId, error) {
+  return {
+    eventType: 'operational',
+    action: 'deleteFailed',
+    actionSubject: 'mediaPlayerCaption',
+    actionSubjectId: captionAttributes.artifactName,
+    attributes: {
+      ...generateBaseAttributes(type, captionAttributes, fileId, traceId),
+      failReason: 'delete-fail',
+      error: error.name || 'unknown',
+      errorDetail: error.message || 'unknown'
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/operational/captionDeleteSucceeded.js

@@ -0,0 +1,10 @@
+import { generateBaseAttributes } from '../../utils/captionAttributes';
+export function createCaptionDeleteSucceededOperationalEvent(type, captionAttributes, fileId, traceId) {
+  return {
+    eventType: 'operational',
+    action: 'deleteSucceeded',
+    actionSubject: 'mediaPlayerCaption',
+    actionSubjectId: captionAttributes.artifactName,
+    attributes: generateBaseAttributes(type, captionAttributes, fileId, traceId)
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/operational/captionUploadFailed.js

@@ -0,0 +1,15 @@
+import { generateBaseAttributes } from '../../utils/captionAttributes';
+export function createCaptionUploadFailedOperationalEvent(type, captionAttributes, fileId, traceId, error) {
+  return {
+    eventType: 'operational',
+    action: 'uploadFailed',
+    actionSubject: 'mediaPlayerCaption',
+    actionSubjectId: fileId,
+    attributes: {
+      ...generateBaseAttributes(type, captionAttributes, fileId, traceId),
+      failReason: 'upload-fail',
+      error: error.name || 'unknown',
+      errorDetail: error.message || 'unknown'
+    }
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/events/operational/captionUploadSucceeded.js

@@ -0,0 +1,10 @@
+import { generateBaseAttributes } from '../../utils/captionAttributes';
+export function createCaptionUploadSucceededOperationalEvent(type, captionAttributes, fileId, traceId) {
+  return {
+    eventType: 'operational',
+    action: 'uploadSucceeded',
+    actionSubject: 'mediaPlayerCaption',
+    actionSubjectId: fileId,
+    attributes: generateBaseAttributes(type, captionAttributes, fileId, traceId)
+  };
+}

package/dist/es2019/customMediaPlayer/analytics/index.js

@@ -4,6 +4,10 @@ export { createPlaybackSpeedChangedEvent } from './events/ui/playbackSpeedChange
 export { createPlayPauseBlanketClickedEvent } from './events/ui/playPauseBlanketClicked';
 export { createMediaShortcutPressedEvent } from './events/ui/shortcutPressed';
 export { createTimeRangeNavigatedEvent } from './events/ui/timeRangeNavigated';
+export { createCaptionUploadSucceededOperationalEvent } from './events/operational/captionUploadSucceeded';
+export { createCaptionDeleteSucceededOperationalEvent } from './events/operational/captionDeleteSucceeded';
+export { createCaptionUploadFailedOperationalEvent } from './events/operational/captionUploadFailed';
+export { createCaptionDeleteFailedOperationalEvent } from './events/operational/captionDeleteFailed';
 export { createFirstPlayedTrackEvent } from './events/track/playCount';
 export { createPlayedTrackEvent } from './events/track/played';
 export { createAndFireMediaCustomMediaPlayerEvent, fireAnalyticsEvent } from './utils/analytics';

package/dist/es2019/customMediaPlayer/analytics/utils/captionAttributes.js

@@ -0,0 +1,16 @@
+export function generateBaseAttributes(type, captionAttributes, fileId, traceId) {
+  return {
+    type,
+    captionAttributes,
+    ...(fileId && {
+      fileAttributes: {
+        fileId
+      }
+    }),
+    ...(traceId && {
+      traceContext: {
+        traceId
+      }
+    })
+  };
+}

package/dist/es2019/customMediaPlayer/index.js

@@ -7,7 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 export const CustomMediaPlayerBase = props => fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledCustomMediaPlayerBase, props) : /*#__PURE__*/React.createElement(EmotionCustomMediaPlayerBase, props);
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.2.4";
+const packageVersion = "28.3.1";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 export const CustomMediaPlayer = withMediaAnalyticsContext({

package/dist/es2019/customMediaPlayer/mediaPlayer/captions/apiFeedback.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
+import SuccessIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../../../messages';
+function ApiFeedback({
+  notificationType,
+  onDismissed,
+  successDescription,
+  errorDescription,
+  intl
+}) {
+  return /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: onDismissed
+  }, notificationType === 'success' ? /*#__PURE__*/React.createElement(AutoDismissFlag, {
+    id: 'success',
+    icon: /*#__PURE__*/React.createElement(SuccessIcon, {
+      label: "Success",
+      color: "var(--ds-icon-success, #22A06B)",
+      LEGACY_size: "medium",
+      spacing: "spacious"
+    }),
+    key: 'success',
+    title: intl.formatMessage(messages.success),
+    description: successDescription
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), notificationType === 'error' ? /*#__PURE__*/React.createElement(AutoDismissFlag, {
+    id: 'error',
+    icon: /*#__PURE__*/React.createElement(ErrorIcon, {
+      label: "Error",
+      color: "var(--ds-icon-danger, #C9372C)",
+      LEGACY_size: "medium",
+      spacing: "spacious"
+    }),
+    key: 'error',
+    title: intl.formatMessage(messages.error),
+    description: errorDescription
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null));
+}
+export default injectIntl(ApiFeedback);

package/dist/es2019/customMediaPlayer/mediaPlayer/captions/artifactUploader/captions/uploader.js

@@ -1,24 +1,21 @@
-const parseError = error => {
-  if (error instanceof Error) {
-    return error;
-  }
-  return new Error(String(error));
-};
-const upladFile = async (mediaClient, identifier, file, locale) => {
-  const result = await mediaClient.file.uploadArtifact(identifier.id, file, {
-    type: 'caption',
-    language: locale
-  }, identifier.collectionName);
-  return result;
-};
+import { parseError } from './util';
+import { getRandomTelemetryId } from '@atlaskit/media-common';
 export const createUploadCaptionsFn = (mediaClient, identifier, onStart, onEnd, onError) => async (file, locale) => {
+  const context = {
+    traceId: getRandomTelemetryId()
+  };
   if (file) {
-    onStart === null || onStart === void 0 ? void 0 : onStart(file);
+    onStart === null || onStart === void 0 ? void 0 : onStart(file, context);
     try {
-      const result = await upladFile(mediaClient, identifier, file, locale);
-      onEnd === null || onEnd === void 0 ? void 0 : onEnd(result);
+      const result = await mediaClient.file.uploadArtifact(identifier.id, file, {
+        type: 'caption',
+        language: locale
+      }, identifier.collectionName, {
+        traceId: context.traceId
+      });
+      onEnd === null || onEnd === void 0 ? void 0 : onEnd(result, context);
     } catch (error) {
-      onError === null || onError === void 0 ? void 0 : onError(parseError(error));
+      onError === null || onError === void 0 ? void 0 : onError(parseError(error), context);
     }
   }
 };

package/dist/es2019/customMediaPlayer/mediaPlayer/captions/artifactUploader/captions/util.js

@@ -0,0 +1,6 @@
+export const parseError = error => {
+  if (error instanceof Error) {
+    return error;
+  }
+  return new Error(String(error));
+};

package/dist/es2019/customMediaPlayer/mediaPlayer/captions/artifactUploader/captionsUploaderBrowser.js

@@ -2,17 +2,30 @@ import React, { useState } from 'react';
 import { useMediaClient } from '@atlaskit/media-client-react';
 import { BrowserPicker } from './filePickers/browser';
 import { createUploadCaptionsFn, UploadCaptionsForm } from './captions';
-export const CaptionsUploaderBrowser = ({
+import ApiFeedback from '../apiFeedback';
+import { messages } from '../../../../messages';
+import { injectIntl } from 'react-intl-next';
+const CaptionsUploaderBrowser = ({
   identifier,
   isOpen,
   onClose,
   onStart,
   onEnd,
-  onError
+  onError,
+  intl
 }) => {
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [file, setFile] = useState();
   const mediaClient = useMediaClient();
+  const [notificationType, setNotificationType] = useState(null);
+  const _onError = (error, context) => {
+    setNotificationType('error');
+    onError === null || onError === void 0 ? void 0 : onError(error, context);
+  };
+  const _onEnd = (metadata, context) => {
+    setNotificationType('success');
+    onEnd === null || onEnd === void 0 ? void 0 : onEnd(metadata, context);
+  };
   const close = () => {
     setIsFormOpen(false);
     setFile(undefined);
@@ -34,7 +47,13 @@ export const CaptionsUploaderBrowser = ({
   }), /*#__PURE__*/React.createElement(UploadCaptionsForm, {
     isOpen: isFormOpen,
     file: file,
-    uploadFn: createUploadCaptionsFn(mediaClient, identifier, onStart, onEnd, onError),
+    uploadFn: createUploadCaptionsFn(mediaClient, identifier, onStart, _onEnd, _onError),
     onClose: close
+  }), /*#__PURE__*/React.createElement(ApiFeedback, {
+    notificationType: notificationType,
+    onDismissed: () => setNotificationType(null),
+    successDescription: intl.formatMessage(messages.video_captions_upload_success_description),
+    errorDescription: intl.formatMessage(messages.video_captions_upload_error_description)
   }));
-};
+};
+export default injectIntl(CaptionsUploaderBrowser);

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

@@ -1 +1,2 @@
-export { CaptionsUploaderBrowser } from './captionsUploaderBrowser';
+import CaptionsUploaderBrowser from './captionsUploaderBrowser';
+export { CaptionsUploaderBrowser };

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import Button from '@atlaskit/button/new';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { useMediaClient } from '@atlaskit/media-client-react';
+import { parseError } from './artifactUploader/captions/util';
+import ApiFeedback from './apiFeedback';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../../../messages';
+import { getRandomTelemetryId } from '@atlaskit/media-common';
+const CaptionDeleteConfirmationModal = ({
+  identifier,
+  artifactName,
+  onClose,
+  onStart,
+  onEnd,
+  onError,
+  intl
+}) => {
+  const mediaClient = useMediaClient();
+  const [notificationType, setNotificationType] = useState(null);
+  const _onError = (error, context) => {
+    setNotificationType('error');
+    onError === null || onError === void 0 ? void 0 : onError(error, context);
+  };
+  const _onEnd = context => {
+    setNotificationType('success');
+    onEnd === null || onEnd === void 0 ? void 0 : onEnd(context);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalTransition, null, artifactName && /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "danger"
+  }, intl.formatMessage(messages.video_captions_delete_captions_confirmation_header))), /*#__PURE__*/React.createElement(ModalBody, null, intl.formatMessage(messages.video_captions_delete_captions_confirmation_description)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, intl.formatMessage(messages.cancel)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "danger",
+    onClick: () => {
+      deleteCaption(mediaClient, identifier, artifactName, onStart, _onEnd, _onError);
+      onClose();
+    }
+  }, intl.formatMessage(messages.delete))))), /*#__PURE__*/React.createElement(ApiFeedback, {
+    notificationType: notificationType,
+    onDismissed: () => setNotificationType(null),
+    successDescription: intl.formatMessage(messages.video_captions_delete_success_description),
+    errorDescription: intl.formatMessage(messages.video_captions_delete_error_description)
+  }));
+};
+export default injectIntl(CaptionDeleteConfirmationModal);
+const deleteCaption = async (mediaClient, identifier, artifactName, onStart, onEnd, onError) => {
+  const context = {
+    traceId: getRandomTelemetryId(),
+    artifactName
+  };
+  onStart === null || onStart === void 0 ? void 0 : onStart(context);
+  try {
+    await mediaClient.file.deleteArtifact(identifier.id, {
+      artifactName
+    }, identifier.collectionName, {
+      traceId: context.traceId
+    });
+    onEnd === null || onEnd === void 0 ? void 0 : onEnd(context);
+  } catch (error) {
+    onError === null || onError === void 0 ? void 0 : onError(parseError(error), context);
+  }
+};

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

@@ -12,7 +12,8 @@ import { formatLocale } from './captions';
 export const _CaptionsAdminControls = ({
   intl,
   textTracks = {},
-  onUpload
+  onUpload,
+  onDelete
 }) => {
   var _textTracks$captions;
   const videoSettings = intl.formatMessage(messages.video_settings);
@@ -36,8 +37,8 @@ export const _CaptionsAdminControls = ({
     title: videoSettings
   }, (_textTracks$captions = textTracks.captions) === null || _textTracks$captions === void 0 ? void 0 : _textTracks$captions.tracks.map((track, index) => /*#__PURE__*/React.createElement(DropdownItem, {
     key: `${track.lang}-${index}`,
-    onClick: () => {},
-    elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
+    onClick: () => onDelete(track.artifactName),
+    elemAfter: /*#__PURE__*/React.createElement(DeleteIcon, {
       spacing: "spacious",
       label: "",
       color: "var(--ds-icon-danger, #C9372C)"

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

@@ -4,7 +4,7 @@ import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import Button, { IconButton, SplitButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { messages } from '../../messages';
 import { formatLocale } from './captions';
 export const _CaptionsSelectControls = /*#__PURE__*/memo(({
@@ -45,7 +45,9 @@ export const _CaptionsSelectControls = /*#__PURE__*/memo(({
     }, /*#__PURE__*/React.createElement(IconButton, _extends({
       ref: triggerRef
     }, triggerProps, {
-      icon: ChevronDownIcon,
+      icon: iconProps => /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({}, iconProps, {
+        size: "small"
+      })),
       label: selectCaptions,
       appearance: "subtle"
     })))

package/dist/es2019/customMediaPlayer/mediaPlayer/mediaPlayer.js

@@ -5,7 +5,7 @@ import { useFileState, useMediaClient, useMediaSettings } from '@atlaskit/media-
 import { MediaPlayerBase } from './mediaPlayerBase';
 import { useTextTracks } from './useTextTracks';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "28.2.4";
+const packageVersion = "28.3.1";
 const MediaPlayerBaseWithContext = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -26,7 +26,7 @@ import { TimeRange } from '../timeRange';
 import VolumeRange from '../volumeRange';
 import { CurrentTime, VolumeWrapper, LeftControls, RightControls, VolumeToggleWrapper, MutedIndicator, VolumeTimeRangeWrapper } from '../styled';
 import { ControlsWrapper } from '../styled-compiled';
-import { fireAnalyticsEvent, createCustomMediaPlayerScreenEvent, createMediaButtonClickedEvent, createMediaShortcutPressedEvent, createPlayPauseBlanketClickedEvent, createTimeRangeNavigatedEvent, createPlaybackSpeedChangedEvent, createFirstPlayedTrackEvent, createPlayedTrackEvent } from '../analytics';
+import { fireAnalyticsEvent, createCustomMediaPlayerScreenEvent, createMediaButtonClickedEvent, createMediaShortcutPressedEvent, createPlayPauseBlanketClickedEvent, createTimeRangeNavigatedEvent, createPlaybackSpeedChangedEvent, createCaptionUploadSucceededOperationalEvent, createCaptionDeleteSucceededOperationalEvent, createCaptionUploadFailedOperationalEvent, createCaptionDeleteFailedOperationalEvent, createFirstPlayedTrackEvent, createPlayedTrackEvent } from '../analytics';
 import { formatDuration } from '../../formatDuration';
 import { Shortcut, keyCodes } from '../../shortcut';
 import { toggleFullscreen, getFullscreenElement } from '../fullscreen';
@@ -44,6 +44,7 @@ import VideoSkipForwardTenIcon from '@atlaskit/icon/core/video-skip-forward-ten'
 import VideoSkipBackwardTenIcon from '@atlaskit/icon/core/video-skip-backward-ten';
 import { getUserCaptionsLocale, setUserCaptionsLocale, findPreselectedTrackIndex, getUserCaptionsEnabled, setUserCaptionsEnabled } from './captions';
 import { CaptionsUploaderBrowser } from './captions/artifactUploader';
+import CaptionDeleteConfirmationModal from './captions/captionDeleteConfirmationModal';
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 245;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -88,7 +89,8 @@ class _MediaPlayerBase extends Component {
       playbackSpeed: 1,
       selectedTracksIndex: -1,
       areCaptionsEnabled: false,
-      isArtifactUploaderOpen: false
+      isArtifactUploaderOpen: false,
+      artifactToDelete: undefined
     });
     _defineProperty(this, "findPreselectedTrackIndex", ({
       textTracks,
@@ -517,6 +519,16 @@ class _MediaPlayerBase extends Component {
         areCaptionsEnabled
       });
     });
+    _defineProperty(this, "onCaptionDelete", 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
+      });
+    });
     _defineProperty(this, "resolveSelectedTracksIndex", () => {
       const {
         areCaptionsEnabled,
@@ -686,6 +698,42 @@ class _MediaPlayerBase extends Component {
     }
     fireAnalyticsEvent(analyticsEvent, createAnalyticsEvent);
   }
+  baseAnalyticCaptionAttributes() {
+    var _textTracks$captions3, _textTracks$captions4, _textTracks$captions5, _textTracks$captions6, _textTracks$captions7;
+    const {
+      textTracks
+    } = this.props;
+    const {
+      selectedTracksIndex
+    } = this.state;
+    const captionAttributes = {
+      selectedTrackIndex: selectedTracksIndex,
+      availableCaptionTracks: (textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions3 = textTracks.captions) === null || _textTracks$captions3 === void 0 ? void 0 : (_textTracks$captions4 = _textTracks$captions3.tracks) === null || _textTracks$captions4 === void 0 ? void 0 : _textTracks$captions4.length) || 0,
+      selectedTrackLanguage: (textTracks === null || textTracks === void 0 ? void 0 : (_textTracks$captions5 = textTracks.captions) === null || _textTracks$captions5 === void 0 ? void 0 : (_textTracks$captions6 = _textTracks$captions5.tracks) === null || _textTracks$captions6 === void 0 ? void 0 : (_textTracks$captions7 = _textTracks$captions6[selectedTracksIndex]) === null || _textTracks$captions7 === void 0 ? void 0 : _textTracks$captions7.lang) || null
+    };
+    return captionAttributes;
+  }
+  fireCaptionEvent(event) {
+    fireAnalyticsEvent(event, this.props.createAnalyticsEvent);
+  }
+  fireCaptionUploadSucceededEvent(traceId) {
+    this.fireCaptionEvent(createCaptionUploadSucceededOperationalEvent(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceId));
+  }
+  fireCaptionUploadFailedEvent(traceId, error) {
+    this.fireCaptionEvent(createCaptionUploadFailedOperationalEvent(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceId, error));
+  }
+  fireCaptionDeleteSucceededEvent(traceId, artifactName) {
+    this.fireCaptionEvent(createCaptionDeleteSucceededOperationalEvent(this.props.type, {
+      ...this.baseAnalyticCaptionAttributes(),
+      artifactName
+    }, this.props.identifier.id, traceId));
+  }
+  fireCaptionDeleteFailedEvent(traceId, artifactName, error) {
+    this.fireCaptionEvent(createCaptionDeleteFailedOperationalEvent(this.props.type, {
+      ...this.baseAnalyticCaptionAttributes(),
+      artifactName
+    }, this.props.identifier.id, traceId, error));
+  }
   render() {
     const {
       type,
@@ -704,7 +752,8 @@ class _MediaPlayerBase extends Component {
     } = this.props;
     const {
       areCaptionsEnabled,
-      isArtifactUploaderOpen
+      isArtifactUploaderOpen,
+      artifactToDelete
     } = this.state;
     return /*#__PURE__*/React.createElement(Box, {
       xcss: customVideoWrapperStyles.root,
@@ -796,21 +845,37 @@ class _MediaPlayerBase extends Component {
         textTracks: textTracks,
         onUpload: () => this.setState({
           isArtifactUploaderOpen: true
-        })
+        }),
+        onDelete: this.onCaptionDelete
       }), /*#__PURE__*/React.createElement(CaptionsUploaderBrowser, {
         identifier: identifier,
         isOpen: isArtifactUploaderOpen,
         onClose: () => this.setState({
           isArtifactUploaderOpen: false
         }),
-        onStart: () => {
-          // console.log('xxx onStart', file);
+        onEnd: (metadata, context) => {
+          this.fireCaptionUploadSucceededEvent(context.traceId);
         },
-        onEnd: () => {
-          // console.log('xxx onEnd', result);
+        onError: (err, context) => {
+          this.fireCaptionUploadFailedEvent(context.traceId, err);
+        }
+      }), /*#__PURE__*/React.createElement(CaptionDeleteConfirmationModal, {
+        identifier: identifier,
+        artifactName: artifactToDelete,
+        onClose: () => this.setState({
+          artifactToDelete: ''
+        }),
+        onEnd: context => {
+          this.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
+          this.setState({
+            artifactToDelete: ''
+          });
         },
-        onError: () => {
-          // console.log('xxx onError', error);
+        onError: (err, context) => {
+          this.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
+          this.setState({
+            artifactToDelete: ''
+          });
         }
       }))))));
     }));

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

@@ -37,7 +37,8 @@ export const useTextTracks = (fileState, mediaClient, collectionName) => {
         return {
           src,
           lang,
-          label
+          label,
+          artifactName
         };
       })).then(tracks => {
         setTextTracks({

package/dist/es2019/customMediaPlayer/timeRange.js

@@ -26,7 +26,7 @@ export class TimeRangeBase extends Component {
       }
       this.wrapperElementWidth = this.wrapperElement.current.getBoundingClientRect().width;
     });
-    _defineProperty(this, "onMouseMove", e => {
+    _defineProperty(this, "onPointerMove", e => {
       const {
         isDragging,
         dragStartClientX
@@ -34,6 +34,7 @@ export class TimeRangeBase extends Component {
       if (!isDragging) {
         return;
       }
+      e.preventDefault();
       e.stopPropagation();
       const {
         onChange,
@@ -62,13 +63,13 @@ export class TimeRangeBase extends Component {
         onChange(newTimeWithBoundaries);
       }
     });
-    _defineProperty(this, "onMouseUp", () => {
+    _defineProperty(this, "onPointerUp", () => {
       const {
         onChanged
       } = this.props;
       // 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();
       }
@@ -76,17 +77,17 @@ export class TimeRangeBase extends Component {
         isDragging: false
       });
     });
-    _defineProperty(this, "onThumbMouseDown", e => {
+    _defineProperty(this, "onPointerDown", 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);
       const {
         duration,
         onChange
@@ -158,8 +159,8 @@ export class TimeRangeBase extends Component {
     }
   }
   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);
   }
   render() {
@@ -245,11 +246,11 @@ export class TimeRangeBase extends Component {
       })
     }, disableThumbTooltip ? null : currentTimeTooltip)));
     return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTimeRangeWrapper, {
-      onMouseDown: this.onThumbMouseDown,
+      onPointerDown: this.onPointerDown,
       "data-testid": "time-range-wrapper"
     }, timeline) : /*#__PURE__*/React.createElement(EmotionTimeRangeWrapper, {
       showAsActive: isAlwaysActive,
-      onMouseDown: this.onThumbMouseDown,
+      onPointerDown: this.onPointerDown,
       "data-testid": "time-range-wrapper"
     }, timeline);
   }