@atlaskit/media-ui 28.5.4 → 28.6.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/media-ui
 
+## 28.6.1
+
+### Patch Changes
+
+- [#178862](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/178862)
+  [`c85957c962811`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c85957c962811) -
+  clean up fg
+
+## 28.6.0
+
+### Minor Changes
+
+- [#179944](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179944)
+  [`8e28048c6a3d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e28048c6a3d3) -
+  Added captions display succeeded and failed analytics events
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 28.5.4
 
 ### Patch Changes

package/dist/cjs/customMediaPlayer/analytics/events/operational/captions.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCaptionUploadSucceededEventPayload = exports.createCaptionUploadFailedEventPayload = exports.createCaptionDisplaySucceededEventPayload = exports.createCaptionDisplayFailedEventPayload = exports.createCaptionDeleteSucceededEventPayload = exports.createCaptionDeleteFailedEventPayload = void 0;
+exports.generateBaseAttributes = generateBaseAttributes;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mediaClient = require("@atlaskit/media-client");
+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; }
+function generateBaseAttributes(type, captionAttributes, fileId, traceContext) {
+  return _objectSpread(_objectSpread({
+    type: type,
+    captionAttributes: captionAttributes
+  }, fileId && {
+    fileAttributes: {
+      fileId: fileId
+    }
+  }), {}, {
+    traceContext: traceContext
+  });
+}
+var getErrorReason = function getErrorReason(error) {
+  if ((0, _mediaClient.isCommonMediaClientError)(error)) {
+    return error.reason;
+  }
+  return 'nativeError';
+};
+var getErrorDetail = function getErrorDetail(error) {
+  var _error$innerError;
+  if ((0, _mediaClient.isCommonMediaClientError)(error) && (_error$innerError = error.innerError) !== null && _error$innerError !== void 0 && _error$innerError.message) {
+    var _error$innerError2;
+    return (_error$innerError2 = error.innerError) === null || _error$innerError2 === void 0 ? void 0 : _error$innerError2.message;
+  }
+  return error.message || 'unknown';
+};
+var getErrorRequestMetaData = function getErrorRequestMetaData(error) {
+  if ((0, _mediaClient.isCommonMediaClientError)(error)) {
+    return error.metadata;
+  }
+};
+function createCaptionFailedEventPayload(type, action, failReason, captionAttributes, fileId, error, traceContext) {
+  return {
+    eventType: 'operational',
+    action: action,
+    actionSubject: 'mediaPlayerCaption',
+    actionSubjectId: fileId,
+    attributes: _objectSpread(_objectSpread({}, generateBaseAttributes(type, captionAttributes, fileId, traceContext)), {}, {
+      failReason: failReason,
+      error: getErrorReason(error),
+      errorDetail: getErrorDetail(error),
+      request: getErrorRequestMetaData(error)
+    })
+  };
+}
+var createCaptionUploadFailedEventPayload = exports.createCaptionUploadFailedEventPayload = function createCaptionUploadFailedEventPayload(type, captionAttributes, fileId, error, traceContext) {
+  return createCaptionFailedEventPayload(type, 'uploadFailed', 'upload-fail', captionAttributes, fileId, error, traceContext);
+};
+var createCaptionDeleteFailedEventPayload = exports.createCaptionDeleteFailedEventPayload = function createCaptionDeleteFailedEventPayload(type, captionAttributes, fileId, error, traceContext) {
+  return createCaptionFailedEventPayload(type, 'deleteFailed', 'delete-fail', captionAttributes, fileId, error, traceContext);
+};
+var createCaptionDisplayFailedEventPayload = exports.createCaptionDisplayFailedEventPayload = function createCaptionDisplayFailedEventPayload(type, failReason, captionAttributes, fileId, error, traceContext) {
+  return createCaptionFailedEventPayload(type, 'displayFailed', failReason, captionAttributes, fileId, error, traceContext);
+};
+function createCaptionSucceededEventPayload(type, action, captionAttributes, fileId, traceContext) {
+  return {
+    eventType: 'operational',
+    action: action,
+    actionSubject: 'mediaPlayerCaption',
+    actionSubjectId: captionAttributes.artifactName,
+    attributes: generateBaseAttributes(type, captionAttributes, fileId, traceContext)
+  };
+}
+var createCaptionUploadSucceededEventPayload = exports.createCaptionUploadSucceededEventPayload = function createCaptionUploadSucceededEventPayload(type, captionAttributes, fileId, traceContext) {
+  return createCaptionSucceededEventPayload(type, 'uploadSucceeded', captionAttributes, fileId, traceContext);
+};
+var createCaptionDeleteSucceededEventPayload = exports.createCaptionDeleteSucceededEventPayload = function createCaptionDeleteSucceededEventPayload(type, captionAttributes, fileId, traceContext) {
+  return createCaptionSucceededEventPayload(type, 'deleteSucceeded', captionAttributes, fileId, traceContext);
+};
+var createCaptionDisplaySucceededEventPayload = exports.createCaptionDisplaySucceededEventPayload = function createCaptionDisplaySucceededEventPayload(type, captionAttributes, fileId, traceContext) {
+  return createCaptionSucceededEventPayload(type, 'displaySucceeded', captionAttributes, fileId, traceContext);
+};

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

@@ -9,28 +9,40 @@ Object.defineProperty(exports, "createAndFireMediaCustomMediaPlayerEvent", {
     return _analytics.createAndFireMediaCustomMediaPlayerEvent;
   }
 });
-Object.defineProperty(exports, "createCaptionDeleteFailedOperationalEvent", {
+Object.defineProperty(exports, "createCaptionDeleteFailedEventPayload", {
   enumerable: true,
   get: function get() {
-    return _captionDeleteFailed.createCaptionDeleteFailedOperationalEvent;
+    return _captions.createCaptionDeleteFailedEventPayload;
   }
 });
-Object.defineProperty(exports, "createCaptionDeleteSucceededOperationalEvent", {
+Object.defineProperty(exports, "createCaptionDeleteSucceededEventPayload", {
   enumerable: true,
   get: function get() {
-    return _captionDeleteSucceeded.createCaptionDeleteSucceededOperationalEvent;
+    return _captions.createCaptionDeleteSucceededEventPayload;
   }
 });
-Object.defineProperty(exports, "createCaptionUploadFailedOperationalEvent", {
+Object.defineProperty(exports, "createCaptionDisplayFailedEventPayload", {
   enumerable: true,
   get: function get() {
-    return _captionUploadFailed.createCaptionUploadFailedOperationalEvent;
+    return _captions.createCaptionDisplayFailedEventPayload;
   }
 });
-Object.defineProperty(exports, "createCaptionUploadSucceededOperationalEvent", {
+Object.defineProperty(exports, "createCaptionDisplaySucceededEventPayload", {
   enumerable: true,
   get: function get() {
-    return _captionUploadSucceeded.createCaptionUploadSucceededOperationalEvent;
+    return _captions.createCaptionDisplaySucceededEventPayload;
+  }
+});
+Object.defineProperty(exports, "createCaptionUploadFailedEventPayload", {
+  enumerable: true,
+  get: function get() {
+    return _captions.createCaptionUploadFailedEventPayload;
+  }
+});
+Object.defineProperty(exports, "createCaptionUploadSucceededEventPayload", {
+  enumerable: true,
+  get: function get() {
+    return _captions.createCaptionUploadSucceededEventPayload;
   }
 });
 Object.defineProperty(exports, "createCustomMediaPlayerScreenEvent", {
@@ -93,10 +105,7 @@ var _playbackSpeedChanged = require("./events/ui/playbackSpeedChanged");
 var _playPauseBlanketClicked = require("./events/ui/playPauseBlanketClicked");
 var _shortcutPressed = require("./events/ui/shortcutPressed");
 var _timeRangeNavigated = require("./events/ui/timeRangeNavigated");
-var _captionUploadSucceeded = require("./events/operational/captionUploadSucceeded");
-var _captionDeleteSucceeded = require("./events/operational/captionDeleteSucceeded");
-var _captionUploadFailed = require("./events/operational/captionUploadFailed");
-var _captionDeleteFailed = require("./events/operational/captionDeleteFailed");
+var _captions = require("./events/operational/captions");
 var _playCount = require("./events/track/playCount");
 var _played = require("./events/track/played");
 var _analytics = require("./utils/analytics");

package/dist/cjs/customMediaPlayer/index.js

@@ -16,7 +16,7 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = function CustomMedia
   return (0, _platformFeatureFlags.fg)('platform_media_compiled') ? /*#__PURE__*/_react.default.createElement(_indexCompiled.CustomMediaPlayerBase, props) : /*#__PURE__*/_react.default.createElement(_indexEmotion.CustomMediaPlayerBase, props);
 };
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.5.3";
+var packageVersion = "28.6.0";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var CustomMediaPlayer = exports.CustomMediaPlayer = (0, _mediaCommon.withMediaAnalyticsContext)({

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

@@ -29,9 +29,7 @@ var createUploadCaptionsFn = exports.createUploadCaptionsFn = function createUpl
             return mediaClient.file.uploadArtifact(identifier.id, file, {
               type: 'caption',
               language: locale
-            }, identifier.collectionName, {
-              traceId: context.traceId
-            });
+            }, identifier.collectionName, context);
           case 6:
             result = _context.sent;
             onEnd === null || onEnd === void 0 || onEnd(result, context);

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

@@ -36,13 +36,13 @@ var CaptionsUploaderBrowser = function CaptionsUploaderBrowser(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     notificationType = _useState6[0],
     setNotificationType = _useState6[1];
-  var _onError = function _onError(error, context) {
+  var _onError = function _onError(error, traceContext) {
     setNotificationType('error');
-    onError === null || onError === void 0 || onError(error, context);
+    onError === null || onError === void 0 || onError(error, traceContext);
   };
-  var _onEnd = function _onEnd(metadata, context) {
+  var _onEnd = function _onEnd(metadata, traceContext) {
     setNotificationType('success');
-    onEnd === null || onEnd === void 0 || onEnd(metadata, context);
+    onEnd === null || onEnd === void 0 || onEnd(metadata, traceContext);
   };
   var close = function close() {
     setIsFormOpen(false);

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

@@ -32,9 +32,9 @@ var CaptionDeleteConfirmationModal = function CaptionDeleteConfirmationModal(_re
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     notificationType = _useState2[0],
     setNotificationType = _useState2[1];
-  var _onError = function _onError(error, context) {
+  var _onError = function _onError(error, artifactName, context) {
     setNotificationType('error');
-    onError === null || onError === void 0 || onError(error, context);
+    onError === null || onError === void 0 || onError(error, artifactName, context);
   };
   var _onEnd = function _onEnd(context) {
     setNotificationType('success');
@@ -67,28 +67,25 @@ var CaptionDeleteConfirmationModal = function CaptionDeleteConfirmationModal(_re
 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;
+    var traceContext;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          context = {
-            traceId: (0, _mediaCommon.getRandomTelemetryId)(),
-            artifactName: artifactName
+          traceContext = {
+            traceId: (0, _mediaCommon.getRandomTelemetryId)()
           };
-          onStart === null || onStart === void 0 || onStart(context);
+          onStart === null || onStart === void 0 || onStart(traceContext);
           _context.prev = 2;
           _context.next = 5;
-          return mediaClient.file.deleteArtifact(identifier.id, artifactName, identifier.collectionName, {
-            traceId: context.traceId
-          });
+          return mediaClient.file.deleteArtifact(identifier.id, artifactName, identifier.collectionName, traceContext);
         case 5:
-          onEnd === null || onEnd === void 0 || onEnd(context);
+          onEnd === null || onEnd === void 0 || onEnd(traceContext);
           _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);
+          onError === null || onError === void 0 || onError((0, _util.parseError)(_context.t0), artifactName, traceContext);
         case 11:
         case "end":
           return _context.stop();

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

@@ -15,7 +15,7 @@ var _useTextTracks2 = require("./useTextTracks");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _excluded = ["onPlay"];
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "28.5.3";
+var packageVersion = "28.6.0";
 var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function MediaPlayerWihtoutContext(_ref) {
   var _onPlay = _ref.onPlay,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -29,7 +29,11 @@ var MediaPlayerWihtoutContext = exports.MediaPlayerWihtoutContext = function Med
       collectionName: collectionName
     }),
     fileState = _useFileState.fileState;
-  var _useTextTracks = (0, _useTextTracks2.useTextTracks)(fileState, collectionName),
+  var _useTextTracks = (0, _useTextTracks2.useTextTracks)({
+      fileState: fileState,
+      collectionName: collectionName,
+      type: props.type
+    }),
     textTracks = _useTextTracks.textTracks,
     verifyUserCaptionsEnabled = _useTextTracks.verifyUserCaptionsEnabled,
     setSelectedTracksIndex = _useTextTracks.setSelectedTracksIndex,

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

@@ -635,11 +635,11 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
             isArtifactUploaderOpen: false
           });
         },
-        onEnd: function onEnd(metadata, context) {
-          _this.fireCaptionUploadSucceededEvent(context.traceId);
+        onEnd: function onEnd(_metadata, traceContext) {
+          _this.fireCaptionUploadSucceededEvent(traceContext);
         },
-        onError: function onError(err, context) {
-          _this.fireCaptionUploadFailedEvent(context.traceId, err);
+        onError: function onError(err, traceContext) {
+          _this.fireCaptionUploadFailedEvent(traceContext, err);
         }
       }), /*#__PURE__*/_react.default.createElement(_captionDeleteConfirmationModal.default, {
         identifier: identifier,
@@ -649,20 +649,26 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
             artifactToDelete: ''
           });
         },
-        onEnd: function onEnd(context) {
-          _this.fireCaptionDeleteSucceededEvent(context.traceId, context.artifactName);
+        onEnd: function onEnd(traceContext) {
+          _this.fireCaptionDeleteSucceededEvent(traceContext);
           _this.setState({
             artifactToDelete: ''
           });
         },
-        onError: function onError(err, context) {
-          _this.fireCaptionDeleteFailedEvent(context.traceId, context.artifactName, err);
+        onError: function onError(err, artifactName, traceContext) {
+          _this.fireCaptionDeleteFailedEvent(artifactName, traceContext, err);
           _this.setState({
             artifactToDelete: ''
           });
         }
       }));
     });
+    (0, _defineProperty2.default)(_this, "onTextTrackLoaded", function () {
+      _this.fireCaptionDisplaySucceededEvent();
+    });
+    (0, _defineProperty2.default)(_this, "onTextTrackError", function (artifactName, lang, label) {
+      _this.fireCaptionDisplayFailedEvent(artifactName, new Error("label: ".concat(label, " - lang: ").concat(lang)));
+    });
     return _this;
   }
   (0, _inherits2.default)(_MediaPlayerBase, _Component);
@@ -786,46 +792,58 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "baseAnalyticCaptionAttributes",
     value: function baseAnalyticCaptionAttributes() {
-      var _textTracks$captions2, _textTracks$captions3;
+      var _textTracks$captions2;
       var textTracks = this.props.textTracks;
       var _ref3 = (textTracks === null || textTracks === void 0 ? void 0 : textTracks.captions) || {},
         _ref3$selectedTrackIn = _ref3.selectedTrackIndex,
         selectedTrackIndex = _ref3$selectedTrackIn === void 0 ? -1 : _ref3$selectedTrackIn;
+      var captionTracks = textTracks === null || textTracks === void 0 || (_textTracks$captions2 = textTracks.captions) === null || _textTracks$captions2 === void 0 ? void 0 : _textTracks$captions2.tracks;
+      var selectedTrack = captionTracks === null || captionTracks === void 0 ? void 0 : captionTracks[selectedTrackIndex];
       var captionAttributes = {
         selectedTrackIndex: selectedTrackIndex,
-        availableCaptionTracks: (textTracks === null || textTracks === void 0 || (_textTracks$captions2 = textTracks.captions) === null || _textTracks$captions2 === void 0 || (_textTracks$captions2 = _textTracks$captions2.tracks) === null || _textTracks$captions2 === void 0 ? void 0 : _textTracks$captions2.length) || 0,
-        selectedTrackLanguage: (textTracks === null || textTracks === void 0 || (_textTracks$captions3 = textTracks.captions) === null || _textTracks$captions3 === void 0 || (_textTracks$captions3 = _textTracks$captions3.tracks) === null || _textTracks$captions3 === void 0 || (_textTracks$captions3 = _textTracks$captions3[selectedTrackIndex]) === null || _textTracks$captions3 === void 0 ? void 0 : _textTracks$captions3.lang) || null
+        availableCaptionTracks: (captionTracks === null || captionTracks === void 0 ? void 0 : captionTracks.length) || 0,
+        selectedTrackLanguage: (selectedTrack === null || selectedTrack === void 0 ? void 0 : selectedTrack.lang) || null
       };
       return captionAttributes;
     }
   }, {
     key: "fireCaptionEvent",
-    value: function fireCaptionEvent(event) {
-      (0, _analytics.fireAnalyticsEvent)(event, this.props.createAnalyticsEvent);
+    value: function fireCaptionEvent(payload) {
+      (0, _analytics.fireAnalyticsEvent)(payload, this.props.createAnalyticsEvent);
+    }
+  }, {
+    key: "fireCaptionDisplaySucceededEvent",
+    value: function fireCaptionDisplaySucceededEvent() {
+      this.fireCaptionEvent((0, _analytics.createCaptionDisplaySucceededEventPayload)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id));
+    }
+  }, {
+    key: "fireCaptionDisplayFailedEvent",
+    value: function fireCaptionDisplayFailedEvent(artifactName, error) {
+      this.fireCaptionEvent((0, _analytics.createCaptionDisplayFailedEventPayload)(this.props.type, 'render-fail', _objectSpread(_objectSpread({}, this.baseAnalyticCaptionAttributes()), {}, {
+        artifactName: artifactName
+      }), this.props.identifier.id, error));
     }
   }, {
     key: "fireCaptionUploadSucceededEvent",
-    value: function fireCaptionUploadSucceededEvent(traceId) {
-      this.fireCaptionEvent((0, _analytics.createCaptionUploadSucceededOperationalEvent)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceId));
+    value: function fireCaptionUploadSucceededEvent(traceContext) {
+      this.fireCaptionEvent((0, _analytics.createCaptionUploadSucceededEventPayload)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceContext));
     }
   }, {
     key: "fireCaptionUploadFailedEvent",
-    value: function fireCaptionUploadFailedEvent(traceId, error) {
-      this.fireCaptionEvent((0, _analytics.createCaptionUploadFailedOperationalEvent)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceId, error));
+    value: function fireCaptionUploadFailedEvent(traceContext, error) {
+      this.fireCaptionEvent((0, _analytics.createCaptionUploadFailedEventPayload)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, error, traceContext));
     }
   }, {
     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));
+    value: function fireCaptionDeleteSucceededEvent(traceContext) {
+      this.fireCaptionEvent((0, _analytics.createCaptionDeleteSucceededEventPayload)(this.props.type, this.baseAnalyticCaptionAttributes(), this.props.identifier.id, traceContext));
     }
   }, {
     key: "fireCaptionDeleteFailedEvent",
-    value: function fireCaptionDeleteFailedEvent(traceId, artifactName, error) {
-      this.fireCaptionEvent((0, _analytics.createCaptionDeleteFailedOperationalEvent)(this.props.type, _objectSpread(_objectSpread({}, this.baseAnalyticCaptionAttributes()), {}, {
+    value: function fireCaptionDeleteFailedEvent(artifactName, traceContext, error) {
+      this.fireCaptionEvent((0, _analytics.createCaptionDeleteFailedEventPayload)(this.props.type, _objectSpread(_objectSpread({}, this.baseAnalyticCaptionAttributes()), {}, {
         artifactName: artifactName
-      }), this.props.identifier.id, traceId, error));
+      }), this.props.identifier.id, error, traceContext));
     }
   }, {
     key: "isPlaying",
@@ -860,7 +878,9 @@ var _MediaPlayerBase = /*#__PURE__*/function (_Component) {
         onError: onError,
         poster: poster,
         textTracks: textTracks,
-        textTracksPosition: areControlsVisible ? -3.7 : undefined
+        textTracksPosition: areControlsVisible ? -3.7 : undefined,
+        onTextTrackLoaded: this.onTextTrackLoaded,
+        onTextTrackError: this.onTextTrackError
       }, function (video, videoState, actions) {
         _this4.onViewed(videoState);
         _this4.setActions(actions);

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

@@ -13,6 +13,9 @@ var _react = require("react");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _captions = require("./captions");
 var _reactIntlNext = require("react-intl-next");
+var _mediaCommon = require("@atlaskit/media-common");
+var _analytics = require("../analytics");
+var _analyticsNext = require("@atlaskit/analytics-next");
 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; }
 var decodeMimetype = function decodeMimetype(mimeType) {
@@ -29,13 +32,18 @@ var decodeMimetype = function decodeMimetype(mimeType) {
   };
 };
 var NO_SELECTED_TRACKS_INDEX = -1;
-var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, collectionName) {
+var useTextTracks = exports.useTextTracks = function useTextTracks(_ref) {
+  var fileState = _ref.fileState,
+    collectionName = _ref.collectionName,
+    type = _ref.type;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var mediaClient = (0, _mediaClientReact.useMediaClient)();
-  var isLoadingCaptionsObjectURLs = (0, _react.useRef)(new Map());
+  var captionsObjectURLsStatus = (0, _react.useRef)(new Map());
   var captionsObjectURLs = (0, _react.useRef)(new Map());
   var intl = (0, _reactIntlNext.useIntl)();
-  var _ref = (0, _mediaClientReact.useMediaSettings)() || {},
-    mediaUserPreferences = _ref.mediaUserPreferences;
+  var _ref2 = (0, _mediaClientReact.useMediaSettings)() || {},
+    mediaUserPreferences = _ref2.mediaUserPreferences;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     captionTracks = _useState2[0],
@@ -72,10 +80,10 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, co
         value = _caption[1];
       return key.includes('ugc_caption') && !!value;
     });
-    setCaptionTracks(captionsArtifacts.map(function (_ref2) {
-      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-        artifactName = _ref3[0],
-        mimeType = _ref3[1].mimeType;
+    setCaptionTracks(captionsArtifacts.map(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        artifactName = _ref4[0],
+        mimeType = _ref4[1].mimeType;
       var _decodeMimetype = decodeMimetype(mimeType),
         lang = _decodeMimetype.lang,
         label = _decodeMimetype.label;
@@ -102,8 +110,8 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, co
 
   // Update the user locale preferences
   (0, _react.useEffect)(function () {
-    var _ref4 = captionTracks[resolvedSelectedTracksIndex] || {},
-      lang = _ref4.lang;
+    var _ref5 = captionTracks[resolvedSelectedTracksIndex] || {},
+      lang = _ref5.lang;
     if (mediaUserPreferences && lang) {
       (0, _captions.setUserCaptionsLocale)(mediaUserPreferences, lang);
     }
@@ -116,11 +124,14 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, co
   }, [mediaUserPreferences, intl.locale, captionTracks]);
   (0, _react.useEffect)(function () {
     if (fileState && (0, _mediaClient.hasArtifacts)(fileState)) {
-      var _ref5 = captionTracks[resolvedSelectedTracksIndex] || {},
-        artifactName = _ref5.artifactName,
-        src = _ref5.src;
-      if (artifactName && !src && !isLoadingCaptionsObjectURLs.current.get(artifactName)) {
-        isLoadingCaptionsObjectURLs.current.set(artifactName, true);
+      var _ref6 = captionTracks[resolvedSelectedTracksIndex] || {},
+        artifactName = _ref6.artifactName,
+        src = _ref6.src;
+      if (artifactName && !src && !captionsObjectURLsStatus.current.get(artifactName)) {
+        var traceContext = {
+          traceId: (0, _mediaCommon.getRandomTelemetryId)()
+        };
+        captionsObjectURLsStatus.current.set(artifactName, 'loading');
         mediaClient.mediaStore.getArtifactBinary(fileState.artifacts, artifactName, {
           collectionName: collectionName
         }).then(function (blob) {
@@ -133,15 +144,21 @@ var useTextTracks = exports.useTextTracks = function useTextTracks(fileState, co
             });
             return newCaptionTracks;
           });
+          captionsObjectURLsStatus.current.set(artifactName, 'loaded');
         }).catch(function (error) {
-          // TODO: Handle this error
-          // https://product-fabric.atlassian.net/browse/BMPT-6929
-        }).finally(function () {
-          isLoadingCaptionsObjectURLs.current.set(artifactName, false);
+          var _captionTracks$resolv;
+          var captionAttributes = {
+            selectedTrackIndex: resolvedSelectedTracksIndex,
+            availableCaptionTracks: (captionTracks === null || captionTracks === void 0 ? void 0 : captionTracks.length) || 0,
+            selectedTrackLanguage: (captionTracks === null || captionTracks === void 0 || (_captionTracks$resolv = captionTracks[resolvedSelectedTracksIndex]) === null || _captionTracks$resolv === void 0 ? void 0 : _captionTracks$resolv.lang) || null,
+            artifactName: artifactName
+          };
+          (0, _analytics.fireAnalyticsEvent)((0, _analytics.createCaptionDisplayFailedEventPayload)(type, 'fetch-fail', captionAttributes, fileState.id, error, traceContext), createAnalyticsEvent);
+          captionsObjectURLsStatus.current.set(artifactName, 'error');
         });
       }
     }
-  }, [resolvedSelectedTracksIndex, captionTracks, mediaClient, fileState, collectionName]);
+  }, [resolvedSelectedTracksIndex, captionTracks, mediaClient, fileState, collectionName, createAnalyticsEvent, type]);
 
   // Revokes the object urls when the component unmounts.
   (0, _react.useEffect)(function () {

package/dist/cjs/customMediaPlayer/react-video-renderer/track.js

@@ -12,28 +12,46 @@ var _react = _interopRequireWildcard(require("react"));
 var _text = require("./text");
 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 Track = function Track(_ref) {
-  var track = _ref.track,
+  var textTrack = _ref.textTrack,
     kind = _ref.kind,
     isShowing = _ref.isShowing,
-    textTracksPosition = _ref.textTracksPosition;
+    textTracksPosition = _ref.textTracksPosition,
+    onLoad = _ref.onLoad,
+    onError = _ref.onError;
   var trackElemref = /*#__PURE__*/(0, _react.createRef)();
-  var lang = track.lang,
-    label = track.label,
-    src = track.src;
+  var lang = textTrack.lang,
+    label = textTrack.label,
+    src = textTrack.src,
+    artifactName = textTrack.artifactName;
   (0, _react.useEffect)(function () {
     var _ref2 = trackElemref.current || {},
-      theTrack = _ref2.track;
-    if (theTrack) {
-      theTrack.mode = isShowing ? 'showing' : 'hidden';
+      track = _ref2.track;
+    if (track) {
+      track.mode = isShowing ? 'showing' : 'hidden';
     }
   }, [isShowing, trackElemref]);
+  var onErrorInternal = (0, _react.useCallback)(function () {
+    // Only report the error when the src has been set
+    if (src) {
+      onError === null || onError === void 0 || onError(artifactName, lang, label);
+    }
+  }, [artifactName, lang, label, onError, src]);
+  (0, _react.useEffect)(function () {
+    var trackElement = trackElemref.current;
+    if (trackElement) {
+      trackElement.onload = function () {
+        onLoad === null || onLoad === void 0 || onLoad();
+      };
+      trackElement.onerror = onErrorInternal;
+    }
+  }, [trackElemref, onLoad, onErrorInternal]);
   (0, _react.useEffect)(function () {
     var _ref3 = trackElemref.current || {},
       theTrack = _ref3.track;
     var _ref4 = theTrack || {},
       cues = _ref4.cues;
     if (cues && cues.length > 0) {
-      (0, _toConsumableArray2.default)(cues).map(function (cue) {
+      (0, _toConsumableArray2.default)(cues).forEach(function (cue) {
         // Positioning Text Tracks
         cue.line = textTracksPosition || 'auto';
         cue.size = 95;
@@ -53,20 +71,26 @@ var Tracks = function Tracks(_ref5) {
   var tracks = _ref5.tracks,
     selectedTrackIndex = _ref5.selectedTrackIndex,
     kind = _ref5.kind,
-    textTracksPosition = _ref5.textTracksPosition;
+    textTracksPosition = _ref5.textTracksPosition,
+    onLoad = _ref5.onLoad,
+    onError = _ref5.onError;
   return tracks === null || tracks === void 0 ? void 0 : tracks.map(function (track, index) {
     return /*#__PURE__*/_react.default.createElement(Track, {
       key: "track-".concat(index),
       kind: kind,
-      track: track,
+      textTrack: track,
       isShowing: index === selectedTrackIndex,
-      textTracksPosition: textTracksPosition
+      textTracksPosition: textTracksPosition,
+      onLoad: onLoad,
+      onError: onError
     });
   });
 };
 var TextTracks = exports.TextTracks = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
   var videoTextTracks = _ref6.videoTextTracks,
-    textTracksPosition = _ref6.textTracksPosition;
+    textTracksPosition = _ref6.textTracksPosition,
+    onLoad = _ref6.onLoad,
+    onError = _ref6.onError;
   return Object.entries(videoTextTracks).map(function (_ref7, index) {
     var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
       kind = _ref8[0],
@@ -78,7 +102,9 @@ var TextTracks = exports.TextTracks = /*#__PURE__*/(0, _react.memo)(function (_r
       kind: kind,
       tracks: tracks,
       selectedTrackIndex: selectedTrackIndex,
-      textTracksPosition: textTracksPosition
+      textTracksPosition: textTracksPosition,
+      onLoad: onLoad,
+      onError: onError
     });
   });
 });