@atlaskit/media-card 77.1.2 → 77.2.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-card
 
+## 77.2.1
+
+### Patch Changes
+
+- [#41932](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41932) [`756dd90f1a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/756dd90f1a3) - 1. Deprecate withMediaClient HOC in media-client and migrated it to media-client-react 2. clean up deprecated imports from media-client
+- Updated dependencies
+
+## 77.2.0
+
+### Minor Changes
+
+- [#41358](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41358) [`80f2161f1bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/80f2161f1bb) - MEX-2581 Convert inline player base to functional component
+
 ## 77.1.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -49,7 +49,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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 = "77.1.2";
+var packageVersion = "77.2.1";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.1.2";
+var packageVersion = "77.2.1";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/cjs/card/useBreakpoint.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreakpoint = void 0;
+var _react = require("react");
+var _styles = require("./ui/styles");
+var _utils = require("../utils");
+// Hook to calculate the breakpoint based on the width of the element
+var useBreakpoint = exports.useBreakpoint = function useBreakpoint() {
+  var dimensionWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var divRef = arguments.length > 1 ? arguments[1] : undefined;
+  var breakpoint = (0, _react.useMemo)(function () {
+    var widthToCalculate;
+    if (dimensionWidth) {
+      if ((0, _utils.isValidPercentageUnit)(dimensionWidth) && divRef.current) {
+        var width = (0, _utils.getElementDimension)(divRef.current, 'width');
+        widthToCalculate = width || _utils.defaultImageCardDimensions.width;
+      } else {
+        widthToCalculate = dimensionWidth;
+      }
+    } else {
+      widthToCalculate = _utils.defaultImageCardDimensions.width;
+    }
+    return (0, _styles.calcBreakpointSize)(parseInt("".concat(widthToCalculate), 10));
+  }, [dimensionWidth, divRef]);
+  return breakpoint;
+};

package/dist/cjs/card/v2/cardV2.js

@@ -31,7 +31,7 @@ var _videoIsPlayable = require("../../utils/videoIsPlayable");
 var _getDataURIDimension = require("../../utils/getDataURIDimension");
 var _getCardPreview = require("../getCardPreview");
 var _metadata = require("../../utils/metadata");
-var _inlinePlayerLazy = require("../inlinePlayerLazy");
+var _inlinePlayerLazyV = require("./inlinePlayerLazyV2");
 var _analytics = require("../../utils/analytics");
 var _errors = require("../../errors");
 var _cardAnalytics = require("../cardAnalytics");
@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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 = "77.1.2";
+var packageVersion = "77.2.1";
 var CardV2Base = exports.CardV2Base = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardV2Base, _Component);
   var _super = _createSuper(CardV2Base);
@@ -452,7 +452,6 @@ var CardV2Base = exports.CardV2Base = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderInlinePlayer", function () {
       var _this$props6 = _this.props,
         identifier = _this$props6.identifier,
-        mediaClient = _this$props6.mediaClient,
         dimensions = _this$props6.dimensions,
         selected = _this$props6.selected,
         testId = _this$props6.testId,
@@ -464,8 +463,7 @@ var CardV2Base = exports.CardV2Base = /*#__PURE__*/function (_Component) {
       var card = _this.renderCard(false, 'loading', false);
       return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
         fallback: card
-      }, /*#__PURE__*/_react.default.createElement(_inlinePlayerLazy.InlinePlayerLazy, {
-        mediaClient: mediaClient,
+      }, /*#__PURE__*/_react.default.createElement(_inlinePlayerLazyV.InlinePlayerLazyV2, {
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,

package/dist/cjs/card/v2/cardV2Loader.js

@@ -44,12 +44,14 @@ var MediaCardErrorBoundary = (0, _reactLoadable.default)({
     return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
   }
 });
-var MediaCardWithMediaClient = function MediaCardWithMediaClient(props) {
+var CardWithMediaClient = function CardWithMediaClient(props) {
   var dimensions = props.dimensions,
     onClick = props.onClick,
-    useMediaClient = props.useMediaClient,
+    withMediaClient = props.withMediaClient,
     featureFlags = props.featureFlags;
-  var mediaClient = useMediaClient();
+  var Card = _react.default.useMemo(function () {
+    return withMediaClient(MediaV2Card);
+  }, [withMediaClient]);
   var featureFlagsWithMediaCardV2 = _react.default.useMemo(function () {
     return _objectSpread(_objectSpread({}, featureFlags), {}, {
       mediaCardV2: true //used for analytics - internal use only
@@ -58,9 +60,8 @@ var MediaCardWithMediaClient = function MediaCardWithMediaClient(props) {
   return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, {
     dimensions: dimensions,
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(MediaV2Card, (0, _extends2.default)({}, props, {
-    featureFlags: featureFlagsWithMediaCardV2,
-    mediaClient: mediaClient
+  }, /*#__PURE__*/_react.default.createElement(Card, (0, _extends2.default)({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
   })));
 };
 var MediaCardWithMediaClientProvider = (0, _reactLoadable.default)({
@@ -73,17 +74,9 @@ var MediaCardWithMediaClientProvider = (0, _reactLoadable.default)({
     return /*#__PURE__*/_react.default.createElement(CardLoadingWithContext, null);
   },
   render: function render(loaded, props) {
-    var mediaCard = /*#__PURE__*/_react.default.createElement(MediaCardWithMediaClient, (0, _extends2.default)({}, props, {
-      useMediaClient: loaded.useMediaClient
+    return /*#__PURE__*/_react.default.createElement(CardWithMediaClient, (0, _extends2.default)({}, props, {
+      withMediaClient: loaded.withMediaClient
     }));
-    return /*#__PURE__*/_react.default.createElement(loaded.MediaClientContext.Consumer, null, function (value) {
-      return value ? mediaCard :
-      /*#__PURE__*/
-      // TODO - make clientConfig optional
-      _react.default.createElement(loaded.MediaClientProvider, {
-        clientConfig: props.mediaClientConfig
-      }, mediaCard);
-    });
   }
 });
 var CardLoader = function CardLoader(props) {

package/dist/cjs/card/v2/cardViewV2.js

@@ -15,9 +15,6 @@ var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _mediaUi = require("@atlaskit/media-ui");
-var _cardDimensions = require("../../utils/cardDimensions");
-var _isValidPercentageUnit = require("../../utils/isValidPercentageUnit");
-var _getElementDimension = require("../../utils/getElementDimension");
 var _analytics = require("../../utils/analytics");
 var _actions = require("../actions");
 var _styles = require("../ui/styles");
@@ -34,6 +31,7 @@ var _iconMessage2 = require("../ui/iconMessage");
 var _errors = require("../../errors");
 var _wrapper = require("../ui/wrapper");
 var _classnames = require("../classnames");
+var _useBreakpoint = require("../useBreakpoint");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -67,24 +65,13 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     titleBoxIcon = _ref.titleBoxIcon,
     error = _ref.error,
     disableAnimation = _ref.disableAnimation;
-  var _useState = (0, _react2.useState)(),
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    elementWidth = _useState2[0],
-    setElementWidth = _useState2[1];
-  var _useState3 = (0, _react2.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    didImageRender = _useState4[0],
-    setDidImageRender = _useState4[1];
+    didImageRender = _useState2[0],
+    setDidImageRender = _useState2[1];
   var divRef = (0, _react2.useRef)(null);
   var prevCardPreviewRef = (0, _react2.useRef)();
-  var width = (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || 0;
-  (0, _react2.useEffect)(function () {
-    // If the dimensions.width is a percentage, we need to transform it into a pixel value in order to get the right breakpoints applied.
-    if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!divRef.current) {
-      var _elementWidth = (0, _getElementDimension.getElementDimension)(divRef.current, 'width');
-      setElementWidth(_elementWidth);
-    }
-  }, [width]);
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
   (0, _react2.useEffect)(function () {
     innerRef && !!divRef.current && innerRef(divRef.current);
   }, [innerRef]);
@@ -114,10 +101,6 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     setDidImageRender(false);
     onImageError === null || onImageError === void 0 || onImageError(cardPreview);
   };
-  var breakpoint = (0, _react2.useMemo)(function () {
-    var width = elementWidth || (dimensions ? dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
-    return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
-  }, [elementWidth, dimensions]);
   var shouldRenderPlayButton = function shouldRenderPlayButton() {
     var _ref2 = metadata || {},
       mediaType = _ref2.mediaType;

package/dist/cjs/card/v2/inlinePlayerLazyV2.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlinePlayerLazyV2 = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var InlinePlayerLazyV2 = exports.InlinePlayerLazyV2 = /*#__PURE__*/(0, _react.lazy)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+  var _yield$import, InlinePlayerV2;
+  return _regenerator.default.wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        _context.next = 2;
+        return Promise.resolve().then(function () {
+          return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-card-inlineplayer-v2" */
+          './inlinePlayerV2'));
+        });
+      case 2:
+        _yield$import = _context.sent;
+        InlinePlayerV2 = _yield$import.InlinePlayerV2;
+        return _context.abrupt("return", {
+          default: InlinePlayerV2
+        });
+      case 5:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

package/dist/cjs/card/v2/inlinePlayerV2.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPreferredVideoArtifact = exports.InlinePlayerV2 = exports.InlinePlayerBaseV2 = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaUi = require("@atlaskit/media-ui");
+var _utils = require("../../utils");
+var _cardLoading = require("../../utils/lightCards/cardLoading");
+var _progressBar = require("../ui/progressBar/progressBar");
+var _inlinePlayerWrapper = require("../inlinePlayerWrapper");
+var _useBreakpoint = require("../useBreakpoint");
+var _mediaClientReact = require("@atlaskit/media-client-react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var getPreferredVideoArtifact = exports.getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
+  if (fileState.status === 'processed' || fileState.status === 'processing') {
+    var artifacts = fileState.artifacts;
+    if (!artifacts) {
+      return undefined;
+    }
+    return artifacts['video_1280.mp4'] ? 'video_1280.mp4' : artifacts['video_640.mp4'] ? 'video_640.mp4' : undefined;
+  }
+  return undefined;
+};
+var InlinePlayerBaseV2 = exports.InlinePlayerBaseV2 = function InlinePlayerBaseV2(_ref) {
+  var identifier = _ref.identifier,
+    onError = _ref.onError,
+    onClick = _ref.onClick,
+    _ref$dimensions = _ref.dimensions,
+    dimensions = _ref$dimensions === void 0 ? _utils.defaultImageCardDimensions : _ref$dimensions,
+    originalDimensions = _ref.originalDimensions,
+    selected = _ref.selected,
+    testId = _ref.testId,
+    forwardRef = _ref.forwardRef,
+    autoplay = _ref.autoplay,
+    cardPreview = _ref.cardPreview,
+    onFullscreenChange = _ref.onFullscreenChange;
+  // === States ===
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fileSrc = _useState2[0],
+    setFileSrc = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isUploading = _useState4[0],
+    setIsUploading = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    progress = _useState6[0],
+    setProgress = _useState6[1];
+
+  // === Refs and Local Variables ===
+  var divRef = (0, _react.useRef)(null);
+  var onErrorRef = (0, _react.useRef)(onError);
+  onErrorRef.current = onError;
+  var id = identifier.id,
+    collectionName = identifier.collectionName,
+    occurrenceKey = identifier.occurrenceKey;
+  var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var _useFileState = (0, _mediaClientReact.useFileState)(id, {
+      collectionName: collectionName,
+      occurrenceKey: occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  (0, _react.useEffect)(function () {
+    var subscribeFileState = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(fileState) {
+        var _yield$fileState$prev, value, newFileSrc, artifactName, artifacts, _newFileSrc, _newFileSrc2;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (fileState.status === 'uploading') {
+                setIsUploading(true);
+                setProgress(fileState.progress);
+              } else {
+                setIsUploading(false);
+              }
+
+              // We reuse the existing fileSrc to prevent re renders, therefore we only perform fileSrc updates when there isn't any
+              if (!fileSrc) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              if (!(fileState.status !== 'error' && fileState.preview)) {
+                _context.next = 12;
+                break;
+              }
+              _context.next = 6;
+              return fileState.preview;
+            case 6:
+              _yield$fileState$prev = _context.sent;
+              value = _yield$fileState$prev.value;
+              if (!(value instanceof Blob && value.type.indexOf('video/') === 0)) {
+                _context.next = 12;
+                break;
+              }
+              newFileSrc = URL.createObjectURL(value);
+              setFileSrc(newFileSrc);
+              return _context.abrupt("return");
+            case 12:
+              if (!(fileState.status === 'processed' || fileState.status === 'processing')) {
+                _context.next = 37;
+                break;
+              }
+              artifactName = getPreferredVideoArtifact(fileState);
+              artifacts = fileState.artifacts;
+              if (!(!artifactName || !artifacts)) {
+                _context.next = 27;
+                break;
+              }
+              _context.prev = 16;
+              _context.next = 19;
+              return mediaClient.file.getFileBinaryURL(id, collectionName);
+            case 19:
+              _newFileSrc = _context.sent;
+              setFileSrc(_newFileSrc);
+              _context.next = 26;
+              break;
+            case 23:
+              _context.prev = 23;
+              _context.t0 = _context["catch"](16);
+              if (onErrorRef.current && _context.t0 instanceof Error) {
+                onErrorRef.current(_context.t0);
+              }
+            case 26:
+              return _context.abrupt("return");
+            case 27:
+              _context.prev = 27;
+              _context.next = 30;
+              return mediaClient.file.getArtifactURL(artifacts, artifactName, collectionName);
+            case 30:
+              _newFileSrc2 = _context.sent;
+              setFileSrc(_newFileSrc2);
+              _context.next = 37;
+              break;
+            case 34:
+              _context.prev = 34;
+              _context.t1 = _context["catch"](27);
+              if (onErrorRef.current && _context.t1 instanceof Error) {
+                onErrorRef.current(_context.t1);
+              }
+            case 37:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[16, 23], [27, 34]]);
+      }));
+      return function subscribeFileState(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    if (fileState) {
+      subscribeFileState(fileState);
+    }
+  }, [fileState, collectionName, fileSrc, id, mediaClient]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      fileSrc && URL.revokeObjectURL(fileSrc);
+    };
+  }, [fileSrc]);
+
+  // === Render ===
+  return fileSrc ? /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapper.InlinePlayerWrapper, {
+    testId: testId || 'media-card-inline-player',
+    selected: {
+      selected: selected
+    },
+    onClick: onClick,
+    innerRef: forwardRef || undefined,
+    dimensions: dimensions
+  }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function (checkMouseMovement) {
+    return /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
+      type: "video",
+      src: fileSrc,
+      onFullscreenChange: onFullscreenChange,
+      fileId: id,
+      isAutoPlay: autoplay,
+      isHDAvailable: false,
+      onDownloadClick: function onDownloadClick() {
+        mediaClient.file.downloadBinary(id, undefined, collectionName);
+      },
+      onFirstPlay: function onFirstPlay() {
+        _mediaClient.globalMediaEventEmitter.emit('media-viewed', {
+          fileId: id,
+          viewingLevel: 'full'
+        });
+      },
+      lastWatchTimeConfig: {
+        contentId: id
+      },
+      originalDimensions: originalDimensions,
+      showControls: checkMouseMovement,
+      poster: cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI
+    });
+  }), isUploading && /*#__PURE__*/_react.default.createElement(_progressBar.ProgressBar, {
+    progress: progress,
+    breakpoint: breakpoint,
+    positionBottom: true,
+    showOnTop: true
+  })) : /*#__PURE__*/_react.default.createElement(_cardLoading.CardLoading, {
+    testId: testId,
+    dimensions: dimensions
+  });
+};
+var InlinePlayerForwardRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(InlinePlayerBaseV2, (0, _extends2.default)({}, props, {
+    forwardRef: ref
+  }));
+});
+var InlinePlayerV2 = exports.InlinePlayerV2 = InlinePlayerForwardRef;

package/dist/cjs/inline/loader.js

@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.1.2",
+        packageName: "77.2.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ 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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.1.2";
+var packageVersion = "77.2.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -27,7 +27,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.2";
+const packageVersion = "77.2.1";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.2";
+const packageVersion = "77.2.1";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/useBreakpoint.js

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { calcBreakpointSize } from './ui/styles';
+import { getElementDimension, isValidPercentageUnit, defaultImageCardDimensions } from '../utils';
+
+// Hook to calculate the breakpoint based on the width of the element
+export const useBreakpoint = (dimensionWidth = 0, divRef) => {
+  const breakpoint = useMemo(() => {
+    let widthToCalculate;
+    if (dimensionWidth) {
+      if (isValidPercentageUnit(dimensionWidth) && divRef.current) {
+        const width = getElementDimension(divRef.current, 'width');
+        widthToCalculate = width || defaultImageCardDimensions.width;
+      } else {
+        widthToCalculate = dimensionWidth;
+      }
+    } else {
+      widthToCalculate = defaultImageCardDimensions.width;
+    }
+    return calcBreakpointSize(parseInt(`${widthToCalculate}`, 10));
+  }, [dimensionWidth, divRef]);
+  return breakpoint;
+};

package/dist/es2019/card/v2/cardV2.js

@@ -15,7 +15,7 @@ import { videoIsPlayable } from '../../utils/videoIsPlayable';
 import { getRequestedDimensions } from '../../utils/getDataURIDimension';
 import { getCardPreview, getCardPreviewFromCache, removeCardPreviewFromCache, getFilePreviewFromFileState, shouldResolvePreview, getSSRCardPreview, isLocalPreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, fetchAndCacheRemotePreview } from '../getCardPreview';
 import { getFileDetails } from '../../utils/metadata';
-import { InlinePlayerLazy } from '../inlinePlayerLazy';
+import { InlinePlayerLazyV2 } from './inlinePlayerLazyV2';
 import { getFileAttributes, extractErrorInfo } from '../../utils/analytics';
 import { isLocalPreviewError, MediaCardError, MediaFileStateError, ensureMediaCardError, ImageLoadError } from '../../errors';
 import { fireOperationalEvent, fireCommencedEvent, fireCopiedEvent, fireScreenEvent, fireNonCriticalErrorEvent } from '../cardAnalytics';
@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../../utils/generateUniqueId';
 import { useFileState } from '@atlaskit/media-client-react';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.1.2";
+const packageVersion = "77.2.1";
 export class CardV2Base extends Component {
   constructor(props) {
     super(props);
@@ -403,7 +403,6 @@ export class CardV2Base extends Component {
     _defineProperty(this, "renderInlinePlayer", () => {
       const {
         identifier,
-        mediaClient,
         dimensions,
         selected,
         testId,
@@ -417,8 +416,7 @@ export class CardV2Base extends Component {
       const card = this.renderCard(false, 'loading', false);
       return /*#__PURE__*/React.createElement(Suspense, {
         fallback: card
-      }, /*#__PURE__*/React.createElement(InlinePlayerLazy, {
-        mediaClient: mediaClient,
+      }, /*#__PURE__*/React.createElement(InlinePlayerLazyV2, {
         dimensions: dimensions,
         originalDimensions: originalDimensions,
         identifier: identifier,

package/dist/es2019/card/v2/cardV2Loader.js

@@ -15,14 +15,16 @@ const MediaCardErrorBoundary = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-card-error-boundary" */'../media-card-analytics-error-boundary').then(mod => mod.default),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null)
 });
-const MediaCardWithMediaClient = props => {
+const CardWithMediaClient = props => {
   const {
     dimensions,
     onClick,
-    useMediaClient,
+    withMediaClient,
     featureFlags
   } = props;
-  const mediaClient = useMediaClient();
+  const Card = React.useMemo(() => {
+    return withMediaClient(MediaV2Card);
+  }, [withMediaClient]);
   const featureFlagsWithMediaCardV2 = React.useMemo(() => ({
     ...featureFlags,
     mediaCardV2: true //used for analytics - internal use only
@@ -30,25 +32,16 @@ const MediaCardWithMediaClient = props => {
   return /*#__PURE__*/React.createElement(MediaCardErrorBoundary, {
     dimensions: dimensions,
     onClick: onClick
-  }, /*#__PURE__*/React.createElement(MediaV2Card, _extends({}, props, {
-    featureFlags: featureFlagsWithMediaCardV2,
-    mediaClient: mediaClient
+  }, /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
   })));
 };
 const MediaCardWithMediaClientProvider = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_media-client-react" */'@atlaskit/media-client-react'),
   loading: () => /*#__PURE__*/React.createElement(CardLoadingWithContext, null),
-  render: (loaded, props) => {
-    const mediaCard = /*#__PURE__*/React.createElement(MediaCardWithMediaClient, _extends({}, props, {
-      useMediaClient: loaded.useMediaClient
-    }));
-    return /*#__PURE__*/React.createElement(loaded.MediaClientContext.Consumer, null, value => value ? mediaCard :
-    /*#__PURE__*/
-    // TODO - make clientConfig optional
-    React.createElement(loaded.MediaClientProvider, {
-      clientConfig: props.mediaClientConfig
-    }, mediaCard));
-  }
+  render: (loaded, props) => /*#__PURE__*/React.createElement(CardWithMediaClient, _extends({}, props, {
+    withMediaClient: loaded.withMediaClient
+  }))
 });
 const CardLoader = props => {
   return /*#__PURE__*/React.createElement(MediaCardContext.Provider, {