@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/cjs/root/card/cardAnalytics.js

@@ -7,7 +7,11 @@ exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent
 
 var _analytics = require("../../utils/analytics");
 
-var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error) {
+var _errors = require("./../../errors");
+
+var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
+  var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
+
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
   };
@@ -22,7 +26,7 @@ var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, s
       break;
 
     case 'error':
-      error && fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
       break;
   }
 };

package/dist/cjs/root/card/getCardPreview/cache.js

@@ -15,10 +15,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectURLCache = require("../../../utils/objectURLCache");
 
-// Dimensions are used to create a key.
-// Cache is invalidated when different dimensions are provided.
-var getCacheKey = function getCacheKey(id, dimensions) {
-  return [id, dimensions.height, dimensions.width].join('-');
+var getCacheKey = function getCacheKey(id, mode) {
+  var resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
 };
 
 exports.getCacheKey = getCacheKey;
@@ -26,17 +25,17 @@ var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function Card
   var _this = this;
 
   (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
-  (0, _defineProperty2.default)(this, "get", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "get", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
     return _this.previewCache.get(cacheKey);
   });
-  (0, _defineProperty2.default)(this, "set", function (id, dimensions, cardPreview) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "set", function (id, mode, cardPreview) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.set(cacheKey, cardPreview);
   });
-  (0, _defineProperty2.default)(this, "remove", function (id, dimensions) {
-    var cacheKey = getCacheKey(id, dimensions);
+  (0, _defineProperty2.default)(this, "remove", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
 
     _this.previewCache.remove(cacheKey);
   });

package/dist/cjs/root/card/getCardPreview/index.js

@@ -54,6 +54,8 @@ var _dimensionComparer = require("../../../utils/dimensionComparer");
 
 var _filePreviewStatus = require("./filePreviewStatus");
 
+var _imageRefetchingAnalytics = require("../imageRefetchingAnalytics");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -74,7 +76,7 @@ var getFilePreviewFromFileState = function getFilePreviewFromFileState(fileState
 
 exports.getFilePreviewFromFileState = getFilePreviewFromFileState;
 
-var extendAndCachePreview = function extendAndCachePreview(id, dimensions, preview, mediaBlobUrlAttrs) {
+var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, mediaBlobUrlAttrs) {
   var source;
 
   switch (preview.source) {
@@ -101,7 +103,7 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
   var dataURI = mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI; // We store new cardPreview into cache
 
-  _cache.default.set(id, dimensions, _objectSpread(_objectSpread({}, preview), {}, {
+  _cache.default.set(id, mode, _objectSpread(_objectSpread({}, preview), {}, {
     source: source,
     dataURI: dataURI
   }));
@@ -124,44 +126,57 @@ var extendAndCachePreview = function extendAndCachePreview(id, dimensions, previ
 
 var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, cachedPreview, localPreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
 
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
-            cachedPreview = _cache.default.get(id, dimensions);
+            mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs, createAnalyticsEvent = _ref.createAnalyticsEvent, featureFlags = _ref.featureFlags;
+            mode = imageUrlParams.mode;
+            cachedPreview = _cache.default.get(id, mode);
+            dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
 
-            if (!cachedPreview) {
-              _context.next = 4;
+            if (!(cachedPreview && !dimensionsAreBigger)) {
+              _context.next = 7;
               break;
             }
 
+            if ((0, _mediaCommon.getMediaFeatureFlag)('memoryCacheLogging', featureFlags)) {
+              createAnalyticsEvent && (0, _imageRefetchingAnalytics.fireImageFetchingOperationalEvent)(createAnalyticsEvent, 'cache-hit', {
+                fileId: id,
+                prevDimensions: cachedPreview.dimensions,
+                currentDimensions: dimensions,
+                source: cachedPreview.source
+              });
+            }
+
             return _context.abrupt("return", cachedPreview);
 
-          case 4:
-            _context.prev = 4;
+          case 7:
+            _context.prev = 7;
 
             if (!filePreview) {
-              _context.next = 10;
+              _context.next = 13;
               break;
             }
 
-            _context.next = 8;
+            _context.next = 11;
             return (0, _helpers.getCardPreviewFromFilePreview)(filePreview);
 
-          case 8:
+          case 11:
             localPreview = _context.sent;
-            return _context.abrupt("return", extendAndCachePreview(id, dimensions, localPreview, mediaBlobUrlAttrs));
+            return _context.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
-          case 10:
-            _context.next = 17;
+          case 13:
+            _context.next = 20;
             break;
 
-          case 12:
-            _context.prev = 12;
-            _context.t0 = _context["catch"](4);
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](7);
 
             /**
              * We report the error if:
@@ -183,29 +198,45 @@ var getCardPreview = /*#__PURE__*/function () {
 
 
             if (isRemotePreviewReady) {
-              _context.next = 17;
+              _context.next = 20;
               break;
             }
 
             throw _context.t0;
 
-          case 17:
+          case 20:
             if (isRemotePreviewReady) {
-              _context.next = 19;
+              _context.next = 22;
               break;
             }
 
             throw new _errors.MediaCardError('remote-preview-not-ready');
 
-          case 19:
-            return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
+          case 22:
+            _context.next = 24;
+            return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+
+          case 24:
+            remotePreview = _context.sent;
+
+            if ((0, _mediaCommon.getMediaFeatureFlag)('memoryCacheLogging', featureFlags)) {
+              createAnalyticsEvent && (0, _imageRefetchingAnalytics.fireImageFetchingOperationalEvent)(createAnalyticsEvent, 'remote-success', {
+                fileId: id,
+                prevDimensions: cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions,
+                currentDimensions: dimensions,
+                dimensionsPercentageDiff: (0, _imageRefetchingAnalytics.calculatePercentageDifference)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions),
+                source: remotePreview.source
+              });
+            }
 
-          case 20:
+            return _context.abrupt("return", remotePreview);
+
+          case 27:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[4, 12]]);
+    }, _callee, null, [[7, 15]]);
   }));
 
   return function getCardPreview(_x) {
@@ -219,12 +250,16 @@ var shouldResolvePreview = function shouldResolvePreview(_ref3) {
   var status = _ref3.status,
       fileState = _ref3.fileState,
       dimensions = _ref3.dimensions,
-      prevDimensions = _ref3.prevDimensions,
+      identifier = _ref3.identifier,
+      fileImageMode = _ref3.fileImageMode,
       hasCardPreview = _ref3.hasCardPreview,
       isBannedLocalPreview = _ref3.isBannedLocalPreview,
       featureFlags = _ref3.featureFlags;
   var statusIsPreviewable = (0, _filePreviewStatus.isPreviewableStatus)(status, (0, _filePreviewStatus.extractFilePreviewStatus)(fileState, isBannedLocalPreview, featureFlags));
-  var dimensionsAreBigger = (0, _dimensionComparer.isBigger)(prevDimensions, dimensions);
+
+  var cardPreview = _cache.default.get(identifier.id, fileImageMode);
+
+  var dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dimensions, dimensions);
   return statusIsPreviewable && (!hasCardPreview || dimensionsAreBigger);
 };
 
@@ -296,7 +331,9 @@ var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
 
           case 2:
             remotePreview = _context2.sent;
-            return _context2.abrupt("return", extendAndCachePreview(id, dimensions, remotePreview, mediaBlobUrlAttrs));
+            return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
+              dimensions: dimensions
+            }), mediaBlobUrlAttrs));
 
           case 4:
           case "end":

package/dist/cjs/root/card/imageRefetchingAnalytics.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fireImageFetchingOperationalEvent = exports.calculatePercentageDifference = void 0;
+
+var _analytics = require("../../utils/analytics");
+
+var fireImageFetchingOperationalEvent = function fireImageFetchingOperationalEvent(createAnalyticsEvent, action, cardPreviewAttributes) {
+  var fireEvent = function fireEvent(payload) {
+    return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+  };
+
+  switch (action) {
+    case 'cache-hit':
+      fireEvent((0, _analytics.getCacheHitEventPayload)(cardPreviewAttributes));
+      break;
+
+    case 'remote-success':
+      fireEvent((0, _analytics.getRemoteSuccessEventPayload)(cardPreviewAttributes));
+      break;
+  }
+};
+
+exports.fireImageFetchingOperationalEvent = fireImageFetchingOperationalEvent;
+
+var calculatePercentageDifference = function calculatePercentageDifference(prevDimensions, currentDimensions) {
+  if (!prevDimensions) {
+    return undefined;
+  }
+
+  var prevWidth = parseInt("".concat(prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.width), 10);
+  var currWidth = parseInt("".concat(currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.width), 10);
+  var prevHeight = parseInt("".concat(prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.height), 10);
+  var currHeight = parseInt("".concat(currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.height), 10);
+  var percentageDiffInWidth = ((currWidth - prevWidth) / prevWidth * 100).toFixed(2);
+  var percentageDiffInHeight = ((currHeight - prevHeight) / prevHeight * 100).toFixed(2);
+  return {
+    width: percentageDiffInWidth,
+    height: percentageDiffInHeight
+  };
+};
+
+exports.calculatePercentageDifference = calculatePercentageDifference;

package/dist/cjs/root/card/index.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardBase = exports.Card = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -33,8 +33,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _version = require("../../version.json");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _mediaCommon = require("@atlaskit/media-common");
@@ -91,6 +89,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.1.0";
+
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
 
@@ -111,8 +112,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
       wasStatusUploading: false,
       wasStatusProcessing: false
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ssrReliability", {
       server: {
         status: 'unknown'
@@ -161,7 +160,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var _this$props2 = _this.props,
           _this$props2$dimensio = _this$props2.dimensions,
           dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
-          mediaClient = _this$props2.mediaClient;
+          mediaClient = _this$props2.mediaClient,
+          createAnalyticsEvent = _this$props2.createAnalyticsEvent;
       return {
         mediaClient: mediaClient,
         id: id,
@@ -170,7 +170,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
         filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
         isRemotePreviewReady: (0, _mediaClient2.isImageRepresentationReady)(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
-        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
+        mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
+        createAnalyticsEvent: createAnalyticsEvent,
+        featureFlags: _this.props.featureFlags
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCacheSSRPreview", function (identifier) {
@@ -335,9 +337,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
         var _this$props5 = _this.props,
             identifier = _this$props5.identifier,
-            _this$props5$dimensio = _this$props5.dimensions,
-            dimensions = _this$props5$dimensio === void 0 ? {} : _this$props5$dimensio;
-        (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, dimensions);
+            resizeMode = _this$props5.resizeMode;
+        var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
+        (0, _mediaClient2.isFileIdentifier)(identifier) && (0, _getCardPreview.removeCardPreviewFromCache)(identifier.id, fileImageMode);
 
         _this.safeSetState(updateState);
       } else {
@@ -623,16 +625,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
       return isLazy ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
         cardEl: cardRef,
-        preAnchorRef: _this.viewportPreAnchorRef,
-        postAnchorRef: _this.viewportPostAnchorRef,
         onVisible: _this.onCardInViewport
-      }, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
-        ref: _this.viewportPreAnchorRef,
-        offsetTop: -_viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      }), card, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
-        ref: _this.viewportPostAnchorRef,
-        offsetTop: _viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
-      })) : card;
+      }, card) : card;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "storeSSRData", function () {
       var _this$ssrReliability$;
@@ -691,14 +685,14 @@ var CardBase = /*#__PURE__*/function (_Component) {
 
     var _this$props11 = _this.props,
         _identifier = _this$props11.identifier,
-        _this$props11$dimensi = _this$props11.dimensions,
-        _dimensions = _this$props11$dimensi === void 0 ? {} : _this$props11$dimensi,
+        _resizeMode = _this$props11.resizeMode,
         _ssr = _this$props11.ssr,
         _mediaClient = _this$props11.mediaClient;
 
     if ((0, _mediaClient2.isFileIdentifier)(_identifier)) {
       var id = _identifier.id;
-      _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, _dimensions);
+      var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(_resizeMode);
+      _cardPreview = (0, _getCardPreview.getCardPreviewFromCache)(id, fileImageMode);
 
       if (!_cardPreview && _ssr) {
         var _this$ssrData, _this$ssrData2;
@@ -761,6 +755,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(CardBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _getDocument;
+
       this.hasBeenMounted = true;
       var _this$state3 = this.state,
           isCardVisible = _this$state3.isCardVisible,
@@ -794,14 +790,13 @@ var CardBase = /*#__PURE__*/function (_Component) {
       // won't work in IE11
 
 
-      (0, _document.default)().addEventListener('copy', this.fireCopiedEvent);
+      (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var prevMediaClient = prevProps.mediaClient,
-          prevIdentifier = prevProps.identifier,
-          prevDimensions = prevProps.dimensions;
+          prevIdentifier = prevProps.identifier;
       var prevIsCardVisible = prevState.isCardVisible;
       var _this$props13 = this.props,
           mediaClient = _this$props13.mediaClient,
@@ -809,7 +804,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
           dimensions = _this$props13.dimensions,
           featureFlags = _this$props13.featureFlags,
           useInlinePlayer = _this$props13.useInlinePlayer,
-          disableOverlay = _this$props13.disableOverlay;
+          disableOverlay = _this$props13.disableOverlay,
+          resizeMode = _this$props13.resizeMode;
       var _this$state4 = this.state,
           isCardVisible = _this$state4.isCardVisible,
           cardPreview = _this$state4.cardPreview,
@@ -821,6 +817,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var isDifferent = (0, _mediaClient2.isDifferentIdentifier)(prevIdentifier, identifier);
       var turnedVisible = !prevIsCardVisible && isCardVisible;
       var isNewMediaClient = prevMediaClient !== mediaClient;
+      var fileImageMode = (0, _mediaClient2.imageResizeModeToFileImageMode)(resizeMode);
       this.updateFileStateFlag(fileState);
 
       if ((0, _mediaClient2.isExternalImageIdentifier)(identifier) && isDifferent) {
@@ -853,7 +850,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
         status: status,
         fileState: fileState,
         dimensions: dimensions,
-        prevDimensions: prevDimensions,
+        identifier: identifier,
+        fileImageMode: fileImageMode,
         featureFlags: featureFlags,
         hasCardPreview: !!cardPreview,
         isBannedLocalPreview: isBannedLocalPreview
@@ -887,9 +885,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _getDocument2;
+
       this.hasBeenMounted = false;
       this.unsubscribe();
-      (0, _document.default)().removeEventListener('copy', this.fireCopiedEvent);
+      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
     }
   }, {
     key: "updateStateForIdentifier",
@@ -1048,8 +1048,8 @@ exports.CardBase = CardBase;
   featureFlags: {}
 });
 var Card = (0, _mediaCommon.withMediaAnalyticsContext)({
-  packageVersion: _version.version,
-  packageName: _version.name,
+  packageVersion: packageVersion,
+  packageName: packageName,
   componentName: 'mediaCard',
   component: 'mediaCard'
 }, {