@atlaskit/media-card 79.6.4 → 79.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/card/card.js +1 -1
- package/dist/cjs/card/fileCard.js +1 -1
- package/dist/cjs/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/cjs/card/ui/imageRenderer/helpers.js +22 -5
- package/dist/cjs/card/ui/imageRenderer/imageRendererV2.js +13 -1
- package/dist/cjs/card/ui/wrapper/wrapper-compiled.js +4 -1
- package/dist/cjs/inline/loader.js +1 -1
- package/dist/cjs/utils/ufoExperiences.js +1 -1
- package/dist/es2019/card/card.js +1 -1
- package/dist/es2019/card/fileCard.js +1 -1
- package/dist/es2019/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/es2019/card/ui/imageRenderer/helpers.js +22 -5
- package/dist/es2019/card/ui/imageRenderer/imageRendererV2.js +13 -1
- package/dist/es2019/card/ui/wrapper/wrapper-compiled.js +5 -1
- package/dist/es2019/inline/loader.js +1 -1
- package/dist/es2019/utils/ufoExperiences.js +1 -1
- package/dist/esm/card/card.js +1 -1
- package/dist/esm/card/fileCard.js +1 -1
- package/dist/esm/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/esm/card/ui/imageRenderer/helpers.js +22 -5
- package/dist/esm/card/ui/imageRenderer/imageRendererV2.js +13 -1
- package/dist/esm/card/ui/wrapper/wrapper-compiled.js +4 -1
- package/dist/esm/inline/loader.js +1 -1
- package/dist/esm/utils/ufoExperiences.js +1 -1
- package/package.json +9 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/media-card
|
|
2
2
|
|
|
3
|
+
## 79.7.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 79.7.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`7ecc830bdd14e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ecc830bdd14e) -
|
|
14
|
+
Updated the image renderer to maintain ssr dimensions if the returned image is the same ratio as
|
|
15
|
+
the parent, and maintained the native "lazy" attribute for images that are in view to avoid late
|
|
16
|
+
mutation
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 79.6.4
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/dist/cjs/card/card.js
CHANGED
|
@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
|
|
|
20
20
|
var _excluded = ["identifier"];
|
|
21
21
|
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); }
|
|
22
22
|
var packageName = "@atlaskit/media-card";
|
|
23
|
-
var packageVersion = "
|
|
23
|
+
var packageVersion = "0.0.0-development";
|
|
24
24
|
var CardBase = exports.CardBase = function CardBase(_ref) {
|
|
25
25
|
var identifier = _ref.identifier,
|
|
26
26
|
otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
@@ -600,7 +600,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
|
|
|
600
600
|
// Side note: We should not lazy load if the cardPreview is available from local cache,
|
|
601
601
|
// in order to avoid flickers during re-mount of the component
|
|
602
602
|
// CXP-2723 TODO: Create test cases for the above scenarios
|
|
603
|
-
var nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && (0, _types.isSSRPreview)(preview);
|
|
603
|
+
var nativeLazyLoad = isLazyWithOverride && ((0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix') || !isCardVisible) && preview && (0, _types.isSSRPreview)(preview);
|
|
604
604
|
// Force Media Image to always display img for SSR
|
|
605
605
|
var forceSyncDisplay = !!ssr;
|
|
606
606
|
var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
|
|
@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
|
|
|
87
87
|
}(_react.default.Component);
|
|
88
88
|
(0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
89
89
|
var packageName = "@atlaskit/media-card";
|
|
90
|
-
var packageVersion = "
|
|
90
|
+
var packageVersion = "0.0.0-development";
|
|
91
91
|
|
|
92
92
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
93
93
|
var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
|
|
@@ -4,6 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.calculateInitialDimensions = exports.calculateDimensions = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
|
+
var roundedRatio = function roundedRatio(ratio) {
|
|
9
|
+
return Math.round(ratio * 100) / 100;
|
|
10
|
+
};
|
|
11
|
+
var DEFAULT_CROP_DIMENSIONS = {
|
|
12
|
+
maxWidth: '100%'
|
|
13
|
+
};
|
|
14
|
+
var DEFAULT_STRETCHY_FIT_DIMENSIONS = {
|
|
15
|
+
width: '100%',
|
|
16
|
+
maxHeight: '100%'
|
|
17
|
+
};
|
|
7
18
|
var calculateDimensions = exports.calculateDimensions = function calculateDimensions(imgElement, parentElement, resizeMode) {
|
|
8
19
|
var naturalWidth = imgElement.naturalWidth,
|
|
9
20
|
width = imgElement.width,
|
|
@@ -24,6 +35,15 @@ var calculateDimensions = exports.calculateDimensions = function calculateDimens
|
|
|
24
35
|
}
|
|
25
36
|
var imgRatio = imgWidth / imgHeight;
|
|
26
37
|
var cardRatio = parentWidth / parentHeight;
|
|
38
|
+
if ((0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
|
|
39
|
+
var isSameRatio = roundedRatio(imgWidth / parentWidth) === roundedRatio(imgHeight / parentHeight);
|
|
40
|
+
if (isSameRatio) {
|
|
41
|
+
if (resizeMode === 'stretchy-fit') {
|
|
42
|
+
return DEFAULT_STRETCHY_FIT_DIMENSIONS;
|
|
43
|
+
}
|
|
44
|
+
return DEFAULT_CROP_DIMENSIONS;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
27
47
|
var isImageLandscapier = imgRatio > cardRatio;
|
|
28
48
|
if (resizeMode === 'stretchy-fit') {
|
|
29
49
|
if (isImageLandscapier) {
|
|
@@ -62,15 +82,12 @@ var calculateInitialDimensions = exports.calculateInitialDimensions = function c
|
|
|
62
82
|
}
|
|
63
83
|
if (resizeMode === 'stretchy-fit') {
|
|
64
84
|
// assume the image is landscape
|
|
65
|
-
return
|
|
66
|
-
width: '100%',
|
|
67
|
-
maxHeight: '100%'
|
|
68
|
-
};
|
|
85
|
+
return DEFAULT_STRETCHY_FIT_DIMENSIONS;
|
|
69
86
|
}
|
|
70
87
|
|
|
71
88
|
// resizeMode === 'crop'
|
|
72
89
|
// assume the image is landscape
|
|
73
|
-
return {
|
|
90
|
+
return (0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix') ? DEFAULT_CROP_DIMENSIONS : {
|
|
74
91
|
width: '100%'
|
|
75
92
|
};
|
|
76
93
|
};
|
|
@@ -80,7 +80,19 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
|
|
|
80
80
|
hasMediaComponent: true
|
|
81
81
|
}
|
|
82
82
|
}), /*#__PURE__*/_react.default.createElement("img", {
|
|
83
|
-
ref:
|
|
83
|
+
ref: function ref(_ref2) {
|
|
84
|
+
if ((0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
|
|
85
|
+
if (!imgRef.current && _ref2 !== null && _ref2 !== void 0 && _ref2.complete) {
|
|
86
|
+
// we need to set the imgRef before calling onLoad to avoid recursive rendering
|
|
87
|
+
imgRef.current = _ref2;
|
|
88
|
+
onLoad({
|
|
89
|
+
currentTarget: _ref2
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
} else {
|
|
93
|
+
imgRef.current = _ref2;
|
|
94
|
+
}
|
|
95
|
+
},
|
|
84
96
|
"data-testid": testId,
|
|
85
97
|
"data-fileid": (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : null,
|
|
86
98
|
"data-filecollection": (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName : null,
|
|
@@ -14,6 +14,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
15
|
var _cardConstants = require("../../cardConstants");
|
|
16
16
|
var _vcMedia = require("@atlaskit/react-ufo/vc-media");
|
|
17
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
18
|
var _colors = require("@atlaskit/theme/colors");
|
|
18
19
|
var _cardDimensions = require("../../../utils/cardDimensions");
|
|
19
20
|
var _getCSSUnitValue = require("../../../utils/getCSSUnitValue");
|
|
@@ -83,7 +84,9 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
|
|
|
83
84
|
,
|
|
84
85
|
onMouseEnter: onMouseEnter
|
|
85
86
|
}, _vcMedia.VcMediaWrapperProps, {
|
|
86
|
-
style: _objectSpread(_objectSpread({}, _objectSpread((
|
|
87
|
+
style: _objectSpread(_objectSpread({}, _objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), (0, _platformFeatureFlags.fg)('jfp-magma-media-cursor') ? {
|
|
88
|
+
cursor: mediaCardCursor
|
|
89
|
+
} : undefined), getResponsiveStyles(breakpoint))), {}, {
|
|
87
90
|
"--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")")),
|
|
88
91
|
"--_mt8cm6": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N0, ")")),
|
|
89
92
|
"--_13xf2t5": (0, _runtime.ix)("var(--ds-icon-subtle, ".concat(_colors.N100, ")"))
|
|
@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
|
|
|
116
116
|
ErrorBoundary = _this$state.ErrorBoundary;
|
|
117
117
|
var analyticsContext = {
|
|
118
118
|
packageVersion: "@atlaskit/media-card",
|
|
119
|
-
packageName: "
|
|
119
|
+
packageName: "0.0.0-development",
|
|
120
120
|
componentName: 'mediaInlineCard',
|
|
121
121
|
component: 'mediaInlineCard'
|
|
122
122
|
};
|
|
@@ -15,7 +15,7 @@ var _mediaClient = require("@atlaskit/media-client");
|
|
|
15
15
|
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; }
|
|
16
16
|
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; }
|
|
17
17
|
var packageName = "@atlaskit/media-card";
|
|
18
|
-
var packageVersion = "
|
|
18
|
+
var packageVersion = "0.0.0-development";
|
|
19
19
|
var SAMPLE_RATE = 0.05;
|
|
20
20
|
var concurrentExperience;
|
|
21
21
|
var getExperience = function getExperience(id) {
|
package/dist/es2019/card/card.js
CHANGED
|
@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
|
|
|
9
9
|
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
10
10
|
import UFOLabel from '@atlaskit/react-ufo/label';
|
|
11
11
|
const packageName = "@atlaskit/media-card";
|
|
12
|
-
const packageVersion = "
|
|
12
|
+
const packageVersion = "0.0.0-development";
|
|
13
13
|
export const CardBase = ({
|
|
14
14
|
identifier,
|
|
15
15
|
...otherProps
|
|
@@ -523,7 +523,7 @@ export const FileCard = ({
|
|
|
523
523
|
// Side note: We should not lazy load if the cardPreview is available from local cache,
|
|
524
524
|
// in order to avoid flickers during re-mount of the component
|
|
525
525
|
// CXP-2723 TODO: Create test cases for the above scenarios
|
|
526
|
-
const nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
|
|
526
|
+
const nativeLazyLoad = isLazyWithOverride && (fg('media-perf-uplift-mutation-fix') || !isCardVisible) && preview && isSSRPreview(preview);
|
|
527
527
|
// Force Media Image to always display img for SSR
|
|
528
528
|
const forceSyncDisplay = !!ssr;
|
|
529
529
|
const card = /*#__PURE__*/React.createElement(CardView, {
|
|
@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
|
|
|
66
66
|
}
|
|
67
67
|
_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
68
68
|
const packageName = "@atlaskit/media-card";
|
|
69
|
-
const packageVersion = "
|
|
69
|
+
const packageVersion = "0.0.0-development";
|
|
70
70
|
|
|
71
71
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
72
72
|
const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
const roundedRatio = ratio => {
|
|
3
|
+
return Math.round(ratio * 100) / 100;
|
|
4
|
+
};
|
|
5
|
+
const DEFAULT_CROP_DIMENSIONS = {
|
|
6
|
+
maxWidth: '100%'
|
|
7
|
+
};
|
|
8
|
+
const DEFAULT_STRETCHY_FIT_DIMENSIONS = {
|
|
9
|
+
width: '100%',
|
|
10
|
+
maxHeight: '100%'
|
|
11
|
+
};
|
|
1
12
|
export const calculateDimensions = (imgElement, parentElement, resizeMode) => {
|
|
2
13
|
const {
|
|
3
14
|
naturalWidth,
|
|
@@ -21,6 +32,15 @@ export const calculateDimensions = (imgElement, parentElement, resizeMode) => {
|
|
|
21
32
|
}
|
|
22
33
|
const imgRatio = imgWidth / imgHeight;
|
|
23
34
|
const cardRatio = parentWidth / parentHeight;
|
|
35
|
+
if (fg('media-perf-uplift-mutation-fix')) {
|
|
36
|
+
const isSameRatio = roundedRatio(imgWidth / parentWidth) === roundedRatio(imgHeight / parentHeight);
|
|
37
|
+
if (isSameRatio) {
|
|
38
|
+
if (resizeMode === 'stretchy-fit') {
|
|
39
|
+
return DEFAULT_STRETCHY_FIT_DIMENSIONS;
|
|
40
|
+
}
|
|
41
|
+
return DEFAULT_CROP_DIMENSIONS;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
24
44
|
const isImageLandscapier = imgRatio > cardRatio;
|
|
25
45
|
if (resizeMode === 'stretchy-fit') {
|
|
26
46
|
if (isImageLandscapier) {
|
|
@@ -59,15 +79,12 @@ export const calculateInitialDimensions = resizeMode => {
|
|
|
59
79
|
}
|
|
60
80
|
if (resizeMode === 'stretchy-fit') {
|
|
61
81
|
// assume the image is landscape
|
|
62
|
-
return
|
|
63
|
-
width: '100%',
|
|
64
|
-
maxHeight: '100%'
|
|
65
|
-
};
|
|
82
|
+
return DEFAULT_STRETCHY_FIT_DIMENSIONS;
|
|
66
83
|
}
|
|
67
84
|
|
|
68
85
|
// resizeMode === 'crop'
|
|
69
86
|
// assume the image is landscape
|
|
70
|
-
return {
|
|
87
|
+
return fg('media-perf-uplift-mutation-fix') ? DEFAULT_CROP_DIMENSIONS : {
|
|
71
88
|
width: '100%'
|
|
72
89
|
};
|
|
73
90
|
};
|
|
@@ -60,7 +60,19 @@ export const ImageRenderer = ({
|
|
|
60
60
|
hasMediaComponent: true
|
|
61
61
|
}
|
|
62
62
|
}), /*#__PURE__*/React.createElement("img", {
|
|
63
|
-
ref:
|
|
63
|
+
ref: ref => {
|
|
64
|
+
if (fg('media-perf-uplift-mutation-fix')) {
|
|
65
|
+
if (!imgRef.current && ref !== null && ref !== void 0 && ref.complete) {
|
|
66
|
+
// we need to set the imgRef before calling onLoad to avoid recursive rendering
|
|
67
|
+
imgRef.current = ref;
|
|
68
|
+
onLoad({
|
|
69
|
+
currentTarget: ref
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
} else {
|
|
73
|
+
imgRef.current = ref;
|
|
74
|
+
}
|
|
75
|
+
},
|
|
64
76
|
"data-testid": testId,
|
|
65
77
|
"data-fileid": isFileIdentifier(identifier) ? identifier.id : null,
|
|
66
78
|
"data-filecollection": isFileIdentifier(identifier) ? identifier.collectionName : null,
|
|
@@ -5,6 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
6
|
import { newFileExperienceClassName } from '../../cardConstants';
|
|
7
7
|
import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
|
|
8
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
|
|
9
10
|
import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
|
|
10
11
|
import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
|
|
@@ -76,7 +77,10 @@ export const Wrapper = props => {
|
|
|
76
77
|
style: {
|
|
77
78
|
[LOCAL_WIDTH_VARIABLE]: width,
|
|
78
79
|
[LOCAL_HEIGHT_VARIABLE]: height,
|
|
79
|
-
|
|
80
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
81
|
+
...(fg('jfp-magma-media-cursor') ? {
|
|
82
|
+
cursor: mediaCardCursor
|
|
83
|
+
} : undefined),
|
|
80
84
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
81
85
|
...getResponsiveStyles(breakpoint)
|
|
82
86
|
},
|
|
@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
|
|
|
37
37
|
} = this.state;
|
|
38
38
|
const analyticsContext = {
|
|
39
39
|
packageVersion: "@atlaskit/media-card",
|
|
40
|
-
packageName: "
|
|
40
|
+
packageName: "0.0.0-development",
|
|
41
41
|
componentName: 'mediaInlineCard',
|
|
42
42
|
component: 'mediaInlineCard'
|
|
43
43
|
};
|
|
@@ -5,7 +5,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
|
|
|
5
5
|
import { MediaCardError } from '../errors';
|
|
6
6
|
import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
|
|
7
7
|
const packageName = "@atlaskit/media-card";
|
|
8
|
-
const packageVersion = "
|
|
8
|
+
const packageVersion = "0.0.0-development";
|
|
9
9
|
const SAMPLE_RATE = 0.05;
|
|
10
10
|
let concurrentExperience;
|
|
11
11
|
const getExperience = id => {
|
package/dist/esm/card/card.js
CHANGED
|
@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
|
|
|
11
11
|
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
12
12
|
import UFOLabel from '@atlaskit/react-ufo/label';
|
|
13
13
|
var packageName = "@atlaskit/media-card";
|
|
14
|
-
var packageVersion = "
|
|
14
|
+
var packageVersion = "0.0.0-development";
|
|
15
15
|
export var CardBase = function CardBase(_ref) {
|
|
16
16
|
var identifier = _ref.identifier,
|
|
17
17
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -592,7 +592,7 @@ export var FileCard = function FileCard(_ref) {
|
|
|
592
592
|
// Side note: We should not lazy load if the cardPreview is available from local cache,
|
|
593
593
|
// in order to avoid flickers during re-mount of the component
|
|
594
594
|
// CXP-2723 TODO: Create test cases for the above scenarios
|
|
595
|
-
var nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
|
|
595
|
+
var nativeLazyLoad = isLazyWithOverride && (fg('media-perf-uplift-mutation-fix') || !isCardVisible) && preview && isSSRPreview(preview);
|
|
596
596
|
// Force Media Image to always display img for SSR
|
|
597
597
|
var forceSyncDisplay = !!ssr;
|
|
598
598
|
var card = /*#__PURE__*/React.createElement(CardView, {
|
|
@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
|
|
|
80
80
|
}(React.Component);
|
|
81
81
|
_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
82
82
|
var packageName = "@atlaskit/media-card";
|
|
83
|
-
var packageVersion = "
|
|
83
|
+
var packageVersion = "0.0.0-development";
|
|
84
84
|
|
|
85
85
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
86
86
|
var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
var roundedRatio = function roundedRatio(ratio) {
|
|
3
|
+
return Math.round(ratio * 100) / 100;
|
|
4
|
+
};
|
|
5
|
+
var DEFAULT_CROP_DIMENSIONS = {
|
|
6
|
+
maxWidth: '100%'
|
|
7
|
+
};
|
|
8
|
+
var DEFAULT_STRETCHY_FIT_DIMENSIONS = {
|
|
9
|
+
width: '100%',
|
|
10
|
+
maxHeight: '100%'
|
|
11
|
+
};
|
|
1
12
|
export var calculateDimensions = function calculateDimensions(imgElement, parentElement, resizeMode) {
|
|
2
13
|
var naturalWidth = imgElement.naturalWidth,
|
|
3
14
|
width = imgElement.width,
|
|
@@ -18,6 +29,15 @@ export var calculateDimensions = function calculateDimensions(imgElement, parent
|
|
|
18
29
|
}
|
|
19
30
|
var imgRatio = imgWidth / imgHeight;
|
|
20
31
|
var cardRatio = parentWidth / parentHeight;
|
|
32
|
+
if (fg('media-perf-uplift-mutation-fix')) {
|
|
33
|
+
var isSameRatio = roundedRatio(imgWidth / parentWidth) === roundedRatio(imgHeight / parentHeight);
|
|
34
|
+
if (isSameRatio) {
|
|
35
|
+
if (resizeMode === 'stretchy-fit') {
|
|
36
|
+
return DEFAULT_STRETCHY_FIT_DIMENSIONS;
|
|
37
|
+
}
|
|
38
|
+
return DEFAULT_CROP_DIMENSIONS;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
21
41
|
var isImageLandscapier = imgRatio > cardRatio;
|
|
22
42
|
if (resizeMode === 'stretchy-fit') {
|
|
23
43
|
if (isImageLandscapier) {
|
|
@@ -56,15 +76,12 @@ export var calculateInitialDimensions = function calculateInitialDimensions(resi
|
|
|
56
76
|
}
|
|
57
77
|
if (resizeMode === 'stretchy-fit') {
|
|
58
78
|
// assume the image is landscape
|
|
59
|
-
return
|
|
60
|
-
width: '100%',
|
|
61
|
-
maxHeight: '100%'
|
|
62
|
-
};
|
|
79
|
+
return DEFAULT_STRETCHY_FIT_DIMENSIONS;
|
|
63
80
|
}
|
|
64
81
|
|
|
65
82
|
// resizeMode === 'crop'
|
|
66
83
|
// assume the image is landscape
|
|
67
|
-
return {
|
|
84
|
+
return fg('media-perf-uplift-mutation-fix') ? DEFAULT_CROP_DIMENSIONS : {
|
|
68
85
|
width: '100%'
|
|
69
86
|
};
|
|
70
87
|
};
|
|
@@ -71,7 +71,19 @@ export var ImageRenderer = function ImageRenderer(_ref) {
|
|
|
71
71
|
hasMediaComponent: true
|
|
72
72
|
}
|
|
73
73
|
}), /*#__PURE__*/React.createElement("img", {
|
|
74
|
-
ref:
|
|
74
|
+
ref: function ref(_ref2) {
|
|
75
|
+
if (fg('media-perf-uplift-mutation-fix')) {
|
|
76
|
+
if (!imgRef.current && _ref2 !== null && _ref2 !== void 0 && _ref2.complete) {
|
|
77
|
+
// we need to set the imgRef before calling onLoad to avoid recursive rendering
|
|
78
|
+
imgRef.current = _ref2;
|
|
79
|
+
onLoad({
|
|
80
|
+
currentTarget: _ref2
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
} else {
|
|
84
|
+
imgRef.current = _ref2;
|
|
85
|
+
}
|
|
86
|
+
},
|
|
75
87
|
"data-testid": testId,
|
|
76
88
|
"data-fileid": isFileIdentifier(identifier) ? identifier.id : null,
|
|
77
89
|
"data-filecollection": isFileIdentifier(identifier) ? identifier.collectionName : null,
|
|
@@ -8,6 +8,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
8
8
|
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) { _defineProperty(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; }
|
|
9
9
|
import { newFileExperienceClassName } from '../../cardConstants';
|
|
10
10
|
import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
12
|
import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
|
|
12
13
|
import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
|
|
13
14
|
import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
|
|
@@ -74,7 +75,9 @@ export var Wrapper = function Wrapper(props) {
|
|
|
74
75
|
,
|
|
75
76
|
onMouseEnter: onMouseEnter
|
|
76
77
|
}, VcMediaWrapperProps, {
|
|
77
|
-
style: _objectSpread(_objectSpread({}, _objectSpread(
|
|
78
|
+
style: _objectSpread(_objectSpread({}, _objectSpread(_objectSpread(_defineProperty(_defineProperty({}, LOCAL_WIDTH_VARIABLE, width), LOCAL_HEIGHT_VARIABLE, height), fg('jfp-magma-media-cursor') ? {
|
|
79
|
+
cursor: mediaCardCursor
|
|
80
|
+
} : undefined), getResponsiveStyles(breakpoint))), {}, {
|
|
78
81
|
"--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")")),
|
|
79
82
|
"--_mt8cm6": ix("var(--ds-background-input, ".concat(N0, ")")),
|
|
80
83
|
"--_13xf2t5": ix("var(--ds-icon-subtle, ".concat(N100, ")"))
|
|
@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
101
101
|
ErrorBoundary = _this$state.ErrorBoundary;
|
|
102
102
|
var analyticsContext = {
|
|
103
103
|
packageVersion: "@atlaskit/media-card",
|
|
104
|
-
packageName: "
|
|
104
|
+
packageName: "0.0.0-development",
|
|
105
105
|
componentName: 'mediaInlineCard',
|
|
106
106
|
component: 'mediaInlineCard'
|
|
107
107
|
};
|
|
@@ -8,7 +8,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
|
|
|
8
8
|
import { MediaCardError } from '../errors';
|
|
9
9
|
import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
|
|
10
10
|
var packageName = "@atlaskit/media-card";
|
|
11
|
-
var packageVersion = "
|
|
11
|
+
var packageVersion = "0.0.0-development";
|
|
12
12
|
var SAMPLE_RATE = 0.05;
|
|
13
13
|
var concurrentExperience;
|
|
14
14
|
var getExperience = function getExperience(id) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-card",
|
|
3
|
-
"version": "79.
|
|
3
|
+
"version": "79.7.1",
|
|
4
4
|
"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@atlaskit/media-client": "^35.6.0",
|
|
40
40
|
"@atlaskit/media-client-react": "^4.1.0",
|
|
41
41
|
"@atlaskit/media-common": "^12.3.0",
|
|
42
|
-
"@atlaskit/media-file-preview": "^0.
|
|
42
|
+
"@atlaskit/media-file-preview": "^0.14.0",
|
|
43
43
|
"@atlaskit/media-svg": "^2.1.0",
|
|
44
44
|
"@atlaskit/media-ui": "^28.7.0",
|
|
45
45
|
"@atlaskit/media-viewer": "^52.4.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@af/integration-testing": "workspace:^",
|
|
72
72
|
"@atlaskit/analytics-listeners": "^9.1.0",
|
|
73
|
-
"@atlaskit/analytics-namespaced-context": "^7.
|
|
73
|
+
"@atlaskit/analytics-namespaced-context": "^7.2.0",
|
|
74
74
|
"@atlaskit/form": "^14.2.0",
|
|
75
75
|
"@atlaskit/inline-message": "^15.4.0",
|
|
76
76
|
"@atlaskit/media-core": "^37.0.0",
|
|
@@ -117,6 +117,9 @@
|
|
|
117
117
|
"platform_editor_ssr_media": {
|
|
118
118
|
"type": "boolean"
|
|
119
119
|
},
|
|
120
|
+
"jfp-magma-media-cursor": {
|
|
121
|
+
"type": "boolean"
|
|
122
|
+
},
|
|
120
123
|
"platform_media_card_image_render": {
|
|
121
124
|
"type": "boolean"
|
|
122
125
|
},
|
|
@@ -131,6 +134,9 @@
|
|
|
131
134
|
},
|
|
132
135
|
"platfrom_close_blindspot_for_img": {
|
|
133
136
|
"type": "boolean"
|
|
137
|
+
},
|
|
138
|
+
"media-perf-uplift-mutation-fix": {
|
|
139
|
+
"type": "boolean"
|
|
134
140
|
}
|
|
135
141
|
},
|
|
136
142
|
"techstack": {
|