@atlaskit/media-card 78.1.1 → 78.2.0
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 +22 -0
- package/dist/cjs/card/card.js +3 -3
- package/dist/cjs/card/fileCard.js +1 -3
- package/dist/cjs/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/cjs/inline/loader.js +1 -1
- package/dist/cjs/utils/mediaPerformanceObserver/mediaPerformanceObserver.js +2 -0
- package/dist/cjs/utils/ufoExperiences.js +1 -1
- package/dist/es2019/card/card.js +3 -3
- package/dist/es2019/card/fileCard.js +1 -3
- package/dist/es2019/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/es2019/inline/loader.js +1 -1
- package/dist/es2019/utils/mediaPerformanceObserver/mediaPerformanceObserver.js +2 -0
- package/dist/es2019/utils/ufoExperiences.js +1 -1
- package/dist/esm/card/card.js +3 -3
- package/dist/esm/card/fileCard.js +1 -3
- package/dist/esm/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/esm/inline/loader.js +1 -1
- package/dist/esm/utils/mediaPerformanceObserver/mediaPerformanceObserver.js +2 -0
- package/dist/esm/utils/ufoExperiences.js +1 -1
- package/package.json +11 -13
- package/dist/cjs/card/cardviews/cardViewWrapper.js +0 -112
- package/dist/cjs/card/cardviews/errorCardView.js +0 -91
- package/dist/cjs/card/cardviews/iconCardView.js +0 -83
- package/dist/cjs/card/cardviews/imageCardView.js +0 -93
- package/dist/cjs/card/cardviews/index.js +0 -292
- package/dist/cjs/card/cardviews/loadingCardView.js +0 -58
- package/dist/cjs/card/cardviews/processingCardView.js +0 -69
- package/dist/cjs/card/cardviews/videoCardView.js +0 -98
- package/dist/es2019/card/cardviews/cardViewWrapper.js +0 -103
- package/dist/es2019/card/cardviews/errorCardView.js +0 -86
- package/dist/es2019/card/cardviews/iconCardView.js +0 -74
- package/dist/es2019/card/cardviews/imageCardView.js +0 -79
- package/dist/es2019/card/cardviews/index.js +0 -278
- package/dist/es2019/card/cardviews/loadingCardView.js +0 -53
- package/dist/es2019/card/cardviews/processingCardView.js +0 -64
- package/dist/es2019/card/cardviews/videoCardView.js +0 -84
- package/dist/esm/card/cardviews/cardViewWrapper.js +0 -105
- package/dist/esm/card/cardviews/errorCardView.js +0 -83
- package/dist/esm/card/cardviews/iconCardView.js +0 -75
- package/dist/esm/card/cardviews/imageCardView.js +0 -85
- package/dist/esm/card/cardviews/index.js +0 -281
- package/dist/esm/card/cardviews/loadingCardView.js +0 -50
- package/dist/esm/card/cardviews/processingCardView.js +0 -61
- package/dist/esm/card/cardviews/videoCardView.js +0 -90
- package/dist/types/card/cardviews/cardViewWrapper.d.ts +0 -41
- package/dist/types/card/cardviews/errorCardView.d.ts +0 -15
- package/dist/types/card/cardviews/iconCardView.d.ts +0 -17
- package/dist/types/card/cardviews/imageCardView.d.ts +0 -34
- package/dist/types/card/cardviews/index.d.ts +0 -51
- package/dist/types/card/cardviews/loadingCardView.d.ts +0 -14
- package/dist/types/card/cardviews/processingCardView.d.ts +0 -11
- package/dist/types/card/cardviews/videoCardView.d.ts +0 -34
- package/dist/types-ts4.5/card/cardviews/cardViewWrapper.d.ts +0 -41
- package/dist/types-ts4.5/card/cardviews/errorCardView.d.ts +0 -15
- package/dist/types-ts4.5/card/cardviews/iconCardView.d.ts +0 -17
- package/dist/types-ts4.5/card/cardviews/imageCardView.d.ts +0 -34
- package/dist/types-ts4.5/card/cardviews/index.d.ts +0 -51
- package/dist/types-ts4.5/card/cardviews/loadingCardView.d.ts +0 -14
- package/dist/types-ts4.5/card/cardviews/processingCardView.d.ts +0 -11
- package/dist/types-ts4.5/card/cardviews/videoCardView.d.ts +0 -34
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/media-card
|
|
2
2
|
|
|
3
|
+
## 78.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#134978](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134978)
|
|
8
|
+
[`3dabd40fd0af7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3dabd40fd0af7) -
|
|
9
|
+
Updates media-card to support React 18
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`84c0869e8c5c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/84c0869e8c5c6) -
|
|
14
|
+
remove unused cardview refactor FF and components
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
17
|
+
## 78.1.2
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [`eaacfc7b03414`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eaacfc7b03414) -
|
|
22
|
+
Changed the feature flag used for analytics publishing to prevent spamming due to cached clients
|
|
23
|
+
using bugged versions of Card
|
|
24
|
+
|
|
3
25
|
## 78.1.1
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/dist/cjs/card/card.js
CHANGED
|
@@ -21,7 +21,7 @@ var _excluded = ["identifier"];
|
|
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
23
23
|
var packageName = "@atlaskit/media-card";
|
|
24
|
-
var packageVersion = "78.
|
|
24
|
+
var packageVersion = "78.2.0";
|
|
25
25
|
var CardBase = exports.CardBase = function CardBase(_ref) {
|
|
26
26
|
var identifier = _ref.identifier,
|
|
27
27
|
otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
@@ -40,12 +40,12 @@ var CardWithPerformanceObserver = exports.CardWithPerformanceObserver = function
|
|
|
40
40
|
var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
|
|
41
41
|
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
|
|
42
42
|
(0, _react.useEffect)(function () {
|
|
43
|
-
if ((0, _platformFeatureFlags.fg)('platform.media-card-performance-
|
|
43
|
+
if ((0, _platformFeatureFlags.fg)('platform.media-card-performance-observer_a803k')) {
|
|
44
44
|
(0, _mediaPerformanceObserver.startResourceObserver)();
|
|
45
45
|
}
|
|
46
46
|
}, []);
|
|
47
47
|
(0, _react.useEffect)(function () {
|
|
48
|
-
if ((0, _platformFeatureFlags.fg)('platform.media-card-performance-
|
|
48
|
+
if ((0, _platformFeatureFlags.fg)('platform.media-card-performance-observer_a803k')) {
|
|
49
49
|
(0, _mediaPerformanceObserver.setAnalyticsContext)(createAnalyticsEvent);
|
|
50
50
|
}
|
|
51
51
|
}, [createAnalyticsEvent]);
|
|
@@ -32,7 +32,6 @@ var _viewportDetector = require("../utils/viewportDetector");
|
|
|
32
32
|
var _cardDimensions = require("../utils/cardDimensions");
|
|
33
33
|
var _cardAnalytics = require("./cardAnalytics");
|
|
34
34
|
var _cardView = require("./cardView");
|
|
35
|
-
var _cardviews = require("./cardviews");
|
|
36
35
|
var _inlinePlayerLazy = require("./inlinePlayerLazy");
|
|
37
36
|
var _mediaFilePreview = require("@atlaskit/media-file-preview");
|
|
38
37
|
var _performance = require("./performance");
|
|
@@ -42,7 +41,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
42
41
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
43
42
|
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; }
|
|
44
43
|
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; }
|
|
45
|
-
var LoadedCardView = (0, _platformFeatureFlags.fg)('platform.media-experience.card-views-refactor_b91lr') ? _cardviews.CardViews : _cardView.CardView;
|
|
46
44
|
var FileCard = exports.FileCard = function FileCard(_ref) {
|
|
47
45
|
var _ref$appearance = _ref.appearance,
|
|
48
46
|
appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
|
|
@@ -577,7 +575,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
|
|
|
577
575
|
var nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && (0, _types.isSSRPreview)(preview);
|
|
578
576
|
// Force Media Image to always display img for SSR
|
|
579
577
|
var forceSyncDisplay = !!ssr;
|
|
580
|
-
var card = /*#__PURE__*/_react.default.createElement(
|
|
578
|
+
var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
|
|
581
579
|
status: cardStatusOverride || finalStatus,
|
|
582
580
|
error: finalError,
|
|
583
581
|
mediaItemType: mediaItemType,
|
|
@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
|
|
|
90
90
|
}(_react.default.Component);
|
|
91
91
|
(0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
92
92
|
var packageName = "@atlaskit/media-card";
|
|
93
|
-
var packageVersion = "78.
|
|
93
|
+
var packageVersion = "78.2.0";
|
|
94
94
|
|
|
95
95
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
96
96
|
var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
|
|
@@ -119,7 +119,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
|
|
|
119
119
|
ErrorBoundary = _this$state.ErrorBoundary;
|
|
120
120
|
var analyticsContext = {
|
|
121
121
|
packageVersion: "@atlaskit/media-card",
|
|
122
|
-
packageName: "78.
|
|
122
|
+
packageName: "78.2.0",
|
|
123
123
|
componentName: 'mediaInlineCard',
|
|
124
124
|
component: 'mediaInlineCard'
|
|
125
125
|
};
|
|
@@ -29,6 +29,7 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
29
29
|
var fileId = matchFileId[1];
|
|
30
30
|
var clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
|
|
31
31
|
var ssr = matchSSR ? 'server' : undefined;
|
|
32
|
+
var navigationTime = performance.getEntriesByType('navigation')[0];
|
|
32
33
|
var event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
|
|
33
34
|
eventType: 'operational',
|
|
34
35
|
action: 'succeeded',
|
|
@@ -37,6 +38,7 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
37
38
|
ssr: ssr,
|
|
38
39
|
fileId: fileId,
|
|
39
40
|
mediaClientId: clientId,
|
|
41
|
+
startedAt: entry.startTime - ((navigationTime === null || navigationTime === void 0 ? void 0 : navigationTime.domContentLoadedEventEnd) || 0),
|
|
40
42
|
/**
|
|
41
43
|
* Performance resource timing data regarding the loading of an
|
|
42
44
|
* application's resources as described in
|
|
@@ -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 = "78.
|
|
18
|
+
var packageVersion = "78.2.0";
|
|
19
19
|
var concurrentExperience;
|
|
20
20
|
var getExperience = function getExperience(id) {
|
|
21
21
|
if (!concurrentExperience) {
|
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 { fg } from '@atlaskit/platform-feature-flags';
|
|
11
11
|
const packageName = "@atlaskit/media-card";
|
|
12
|
-
const packageVersion = "78.
|
|
12
|
+
const packageVersion = "78.2.0";
|
|
13
13
|
export const CardBase = ({
|
|
14
14
|
identifier,
|
|
15
15
|
...otherProps
|
|
@@ -30,12 +30,12 @@ export const CardWithPerformanceObserver = props => {
|
|
|
30
30
|
createAnalyticsEvent
|
|
31
31
|
} = useAnalyticsEvents();
|
|
32
32
|
useEffect(() => {
|
|
33
|
-
if (fg('platform.media-card-performance-
|
|
33
|
+
if (fg('platform.media-card-performance-observer_a803k')) {
|
|
34
34
|
startResourceObserver();
|
|
35
35
|
}
|
|
36
36
|
}, []);
|
|
37
37
|
useEffect(() => {
|
|
38
|
-
if (fg('platform.media-card-performance-
|
|
38
|
+
if (fg('platform.media-card-performance-observer_a803k')) {
|
|
39
39
|
setAnalyticsContext(createAnalyticsEvent);
|
|
40
40
|
}
|
|
41
41
|
}, [createAnalyticsEvent]);
|
|
@@ -21,14 +21,12 @@ import { ViewportDetector } from '../utils/viewportDetector';
|
|
|
21
21
|
import { getDefaultCardDimensions } from '../utils/cardDimensions';
|
|
22
22
|
import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from './cardAnalytics';
|
|
23
23
|
import { CardView } from './cardView';
|
|
24
|
-
import { CardViews } from './cardviews';
|
|
25
24
|
import { InlinePlayerLazy } from './inlinePlayerLazy';
|
|
26
25
|
import { useFilePreview } from '@atlaskit/media-file-preview';
|
|
27
26
|
import { performanceNow } from './performance';
|
|
28
27
|
import { useContext } from 'react';
|
|
29
28
|
import { DateOverrideContext } from '../dateOverrideContext';
|
|
30
29
|
import { SvgView } from './svgView';
|
|
31
|
-
const LoadedCardView = fg('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
|
|
32
30
|
export const FileCard = ({
|
|
33
31
|
appearance = 'auto',
|
|
34
32
|
resizeMode = 'crop',
|
|
@@ -528,7 +526,7 @@ export const FileCard = ({
|
|
|
528
526
|
const nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
|
|
529
527
|
// Force Media Image to always display img for SSR
|
|
530
528
|
const forceSyncDisplay = !!ssr;
|
|
531
|
-
const card = /*#__PURE__*/React.createElement(
|
|
529
|
+
const card = /*#__PURE__*/React.createElement(CardView, {
|
|
532
530
|
status: cardStatusOverride || finalStatus,
|
|
533
531
|
error: finalError,
|
|
534
532
|
mediaItemType: mediaItemType,
|
|
@@ -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 = "78.
|
|
69
|
+
const packageVersion = "78.2.0";
|
|
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({
|
|
@@ -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: "78.
|
|
40
|
+
packageName: "78.2.0",
|
|
41
41
|
componentName: 'mediaInlineCard',
|
|
42
42
|
component: 'mediaInlineCard'
|
|
43
43
|
};
|
|
@@ -23,6 +23,7 @@ const createAndGetResourceObserver = () => {
|
|
|
23
23
|
const fileId = matchFileId[1];
|
|
24
24
|
const clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
|
|
25
25
|
const ssr = matchSSR ? 'server' : undefined;
|
|
26
|
+
const navigationTime = performance.getEntriesByType('navigation')[0];
|
|
26
27
|
const event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
|
|
27
28
|
eventType: 'operational',
|
|
28
29
|
action: 'succeeded',
|
|
@@ -31,6 +32,7 @@ const createAndGetResourceObserver = () => {
|
|
|
31
32
|
ssr,
|
|
32
33
|
fileId: fileId,
|
|
33
34
|
mediaClientId: clientId,
|
|
35
|
+
startedAt: entry.startTime - ((navigationTime === null || navigationTime === void 0 ? void 0 : navigationTime.domContentLoadedEventEnd) || 0),
|
|
34
36
|
/**
|
|
35
37
|
* Performance resource timing data regarding the loading of an
|
|
36
38
|
* application's resources as described in
|
|
@@ -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 = "78.
|
|
8
|
+
const packageVersion = "78.2.0";
|
|
9
9
|
let concurrentExperience;
|
|
10
10
|
const getExperience = id => {
|
|
11
11
|
if (!concurrentExperience) {
|
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 { fg } from '@atlaskit/platform-feature-flags';
|
|
13
13
|
var packageName = "@atlaskit/media-card";
|
|
14
|
-
var packageVersion = "78.
|
|
14
|
+
var packageVersion = "78.2.0";
|
|
15
15
|
export var CardBase = function CardBase(_ref) {
|
|
16
16
|
var identifier = _ref.identifier,
|
|
17
17
|
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -30,12 +30,12 @@ export var CardWithPerformanceObserver = function CardWithPerformanceObserver(pr
|
|
|
30
30
|
var _useAnalyticsEvents = useAnalyticsEvents(),
|
|
31
31
|
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
|
|
32
32
|
useEffect(function () {
|
|
33
|
-
if (fg('platform.media-card-performance-
|
|
33
|
+
if (fg('platform.media-card-performance-observer_a803k')) {
|
|
34
34
|
startResourceObserver();
|
|
35
35
|
}
|
|
36
36
|
}, []);
|
|
37
37
|
useEffect(function () {
|
|
38
|
-
if (fg('platform.media-card-performance-
|
|
38
|
+
if (fg('platform.media-card-performance-observer_a803k')) {
|
|
39
39
|
setAnalyticsContext(createAnalyticsEvent);
|
|
40
40
|
}
|
|
41
41
|
}, [createAnalyticsEvent]);
|
|
@@ -26,14 +26,12 @@ import { ViewportDetector } from '../utils/viewportDetector';
|
|
|
26
26
|
import { getDefaultCardDimensions } from '../utils/cardDimensions';
|
|
27
27
|
import { fireCommencedEvent, fireCopiedEvent, fireNonCriticalErrorEvent, fireOperationalEvent, fireScreenEvent } from './cardAnalytics';
|
|
28
28
|
import { CardView } from './cardView';
|
|
29
|
-
import { CardViews } from './cardviews';
|
|
30
29
|
import { InlinePlayerLazy } from './inlinePlayerLazy';
|
|
31
30
|
import { useFilePreview } from '@atlaskit/media-file-preview';
|
|
32
31
|
import { performanceNow } from './performance';
|
|
33
32
|
import { useContext } from 'react';
|
|
34
33
|
import { DateOverrideContext } from '../dateOverrideContext';
|
|
35
34
|
import { SvgView } from './svgView';
|
|
36
|
-
var LoadedCardView = fg('platform.media-experience.card-views-refactor_b91lr') ? CardViews : CardView;
|
|
37
35
|
export var FileCard = function FileCard(_ref) {
|
|
38
36
|
var _ref$appearance = _ref.appearance,
|
|
39
37
|
appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
|
|
@@ -568,7 +566,7 @@ export var FileCard = function FileCard(_ref) {
|
|
|
568
566
|
var nativeLazyLoad = isLazyWithOverride && !isCardVisible && preview && isSSRPreview(preview);
|
|
569
567
|
// Force Media Image to always display img for SSR
|
|
570
568
|
var forceSyncDisplay = !!ssr;
|
|
571
|
-
var card = /*#__PURE__*/React.createElement(
|
|
569
|
+
var card = /*#__PURE__*/React.createElement(CardView, {
|
|
572
570
|
status: cardStatusOverride || finalStatus,
|
|
573
571
|
error: finalError,
|
|
574
572
|
mediaItemType: mediaItemType,
|
|
@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
|
|
|
83
83
|
}(React.Component);
|
|
84
84
|
_defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
|
|
85
85
|
var packageName = "@atlaskit/media-card";
|
|
86
|
-
var packageVersion = "78.
|
|
86
|
+
var packageVersion = "78.2.0";
|
|
87
87
|
|
|
88
88
|
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
89
89
|
var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
|
|
@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
103
103
|
ErrorBoundary = _this$state.ErrorBoundary;
|
|
104
104
|
var analyticsContext = {
|
|
105
105
|
packageVersion: "@atlaskit/media-card",
|
|
106
|
-
packageName: "78.
|
|
106
|
+
packageName: "78.2.0",
|
|
107
107
|
componentName: 'mediaInlineCard',
|
|
108
108
|
component: 'mediaInlineCard'
|
|
109
109
|
};
|
|
@@ -23,6 +23,7 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
23
23
|
var fileId = matchFileId[1];
|
|
24
24
|
var clientId = matchClientId === null || matchClientId === void 0 ? void 0 : matchClientId[1];
|
|
25
25
|
var ssr = matchSSR ? 'server' : undefined;
|
|
26
|
+
var navigationTime = performance.getEntriesByType('navigation')[0];
|
|
26
27
|
var event = window[MEDIA_CARD_PERF_STATE_KEY].mediaCardCreateAnalyticsEvent({
|
|
27
28
|
eventType: 'operational',
|
|
28
29
|
action: 'succeeded',
|
|
@@ -31,6 +32,7 @@ var createAndGetResourceObserver = function createAndGetResourceObserver() {
|
|
|
31
32
|
ssr: ssr,
|
|
32
33
|
fileId: fileId,
|
|
33
34
|
mediaClientId: clientId,
|
|
35
|
+
startedAt: entry.startTime - ((navigationTime === null || navigationTime === void 0 ? void 0 : navigationTime.domContentLoadedEventEnd) || 0),
|
|
34
36
|
/**
|
|
35
37
|
* Performance resource timing data regarding the loading of an
|
|
36
38
|
* application's resources as described in
|
|
@@ -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 = "78.
|
|
11
|
+
var packageVersion = "78.2.0";
|
|
12
12
|
var concurrentExperience;
|
|
13
13
|
var getExperience = function getExperience(id) {
|
|
14
14
|
if (!concurrentExperience) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-card",
|
|
3
|
-
"version": "78.
|
|
3
|
+
"version": "78.2.0",
|
|
4
4
|
"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,15 +33,16 @@
|
|
|
33
33
|
"releaseModel": "continuous",
|
|
34
34
|
"website": {
|
|
35
35
|
"name": "Media Card"
|
|
36
|
-
}
|
|
36
|
+
},
|
|
37
|
+
"runReact18": true
|
|
37
38
|
},
|
|
38
39
|
"dependencies": {
|
|
39
40
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
40
|
-
"@atlaskit/dropdown-menu": "^12.
|
|
41
|
+
"@atlaskit/dropdown-menu": "^12.18.0",
|
|
41
42
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
42
|
-
"@atlaskit/icon": "^22.
|
|
43
|
-
"@atlaskit/media-client": "^27.
|
|
44
|
-
"@atlaskit/media-client-react": "^2.
|
|
43
|
+
"@atlaskit/icon": "^22.15.0",
|
|
44
|
+
"@atlaskit/media-client": "^27.6.0",
|
|
45
|
+
"@atlaskit/media-client-react": "^2.2.0",
|
|
45
46
|
"@atlaskit/media-common": "^11.4.0",
|
|
46
47
|
"@atlaskit/media-file-preview": "^0.8.0",
|
|
47
48
|
"@atlaskit/media-svg": "^0.1.3",
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
"@atlaskit/tokens": "^1.59.0",
|
|
55
56
|
"@atlaskit/tooltip": "^18.7.0",
|
|
56
57
|
"@atlaskit/ufo": "^0.3.0",
|
|
57
|
-
"@atlaskit/ufo-interaction-ignore": "^1.
|
|
58
|
+
"@atlaskit/ufo-interaction-ignore": "^1.3.0",
|
|
58
59
|
"@atlaskit/visually-hidden": "^1.5.0",
|
|
59
60
|
"@babel/runtime": "^7.0.0",
|
|
60
61
|
"classnames": "^2.2.5",
|
|
@@ -65,8 +66,8 @@
|
|
|
65
66
|
},
|
|
66
67
|
"peerDependencies": {
|
|
67
68
|
"@emotion/react": "^11.7.1",
|
|
68
|
-
"react": "^16.8.0",
|
|
69
|
-
"react-dom": "^16.8.0",
|
|
69
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
|
|
70
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0",
|
|
70
71
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
71
72
|
},
|
|
72
73
|
"devDependencies": {
|
|
@@ -103,13 +104,10 @@
|
|
|
103
104
|
"wait-for-expect": "^1.2.0"
|
|
104
105
|
},
|
|
105
106
|
"platform-feature-flags": {
|
|
106
|
-
"platform.media-experience.card-views-refactor_b91lr": {
|
|
107
|
-
"type": "boolean"
|
|
108
|
-
},
|
|
109
107
|
"platform.media-card-svg-rendering_6tdbv": {
|
|
110
108
|
"type": "boolean"
|
|
111
109
|
},
|
|
112
|
-
"platform.media-card-performance-
|
|
110
|
+
"platform.media-card-performance-observer_a803k": {
|
|
113
111
|
"type": "boolean"
|
|
114
112
|
}
|
|
115
113
|
},
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.CardViewWrapper = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
-
var _react = require("@emotion/react");
|
|
11
|
-
var _react2 = _interopRequireDefault(require("react"));
|
|
12
|
-
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
13
|
-
var _wrapper = require("../ui/wrapper");
|
|
14
|
-
var _actions = require("../actions");
|
|
15
|
-
var _titleBox = require("../ui/titleBox/titleBox");
|
|
16
|
-
var _tickBox = require("../ui/tickBox/tickBox");
|
|
17
|
-
var _blanket = require("../ui/blanket/blanket");
|
|
18
|
-
var _actionsBar = require("../ui/actionsBar/actionsBar");
|
|
19
|
-
var _classnames = require("../classnames");
|
|
20
|
-
var _openMediaViewerButton = _interopRequireDefault(require("../ui/openMediaViewerButton/openMediaViewerButton"));
|
|
21
|
-
var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef", "overriddenCreationDate"];
|
|
22
|
-
/**
|
|
23
|
-
* @jsxRuntime classic
|
|
24
|
-
* @jsx jsx
|
|
25
|
-
*/
|
|
26
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
27
|
-
var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
|
|
28
|
-
var cardPreview = _ref.cardPreview,
|
|
29
|
-
testId = _ref.testId,
|
|
30
|
-
dimensions = _ref.dimensions,
|
|
31
|
-
_ref$appearance = _ref.appearance,
|
|
32
|
-
appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
|
|
33
|
-
metadata = _ref.metadata,
|
|
34
|
-
selected = _ref.selected,
|
|
35
|
-
selectable = _ref.selectable,
|
|
36
|
-
actions = _ref.actions,
|
|
37
|
-
breakpoint = _ref.breakpoint,
|
|
38
|
-
disableOverlay = _ref.disableOverlay,
|
|
39
|
-
titleBoxBgColor = _ref.titleBoxBgColor,
|
|
40
|
-
titleBoxIcon = _ref.titleBoxIcon,
|
|
41
|
-
shouldHideTooltip = _ref.shouldHideTooltip,
|
|
42
|
-
children = _ref.children,
|
|
43
|
-
onClick = _ref.onClick,
|
|
44
|
-
onMouseEnter = _ref.onMouseEnter,
|
|
45
|
-
mediaCardCursor = _ref.mediaCardCursor,
|
|
46
|
-
customBlanket = _ref.customBlanket,
|
|
47
|
-
customTitleBox = _ref.customTitleBox,
|
|
48
|
-
progressBar = _ref.progressBar,
|
|
49
|
-
shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
|
|
50
|
-
_ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
|
|
51
|
-
openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
|
|
52
|
-
overriddenCreationDate = _ref.overriddenCreationDate,
|
|
53
|
-
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
54
|
-
var _ref2 = metadata || {},
|
|
55
|
-
name = _ref2.name,
|
|
56
|
-
createdAt = _ref2.createdAt,
|
|
57
|
-
mediaType = _ref2.mediaType;
|
|
58
|
-
var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
|
|
59
|
-
var defaultBlanket = !disableOverlay && (0, _react.jsx)(_blanket.Blanket, null);
|
|
60
|
-
var defaultTitleBox = !disableOverlay && !!name && (0, _react.jsx)(_titleBox.TitleBox, {
|
|
61
|
-
name: name,
|
|
62
|
-
createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
|
|
63
|
-
breakpoint: breakpoint,
|
|
64
|
-
titleBoxIcon: titleBoxIcon,
|
|
65
|
-
titleBoxBgColor: titleBoxBgColor
|
|
66
|
-
});
|
|
67
|
-
var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)(_wrapper.ImageContainer, (0, _extends2.default)({
|
|
68
|
-
testId: _classnames.fileCardImageViewSelector,
|
|
69
|
-
mediaName: name,
|
|
70
|
-
status: status,
|
|
71
|
-
selected: selected ? true : undefined
|
|
72
|
-
}, props), children, customBlanket ? customBlanket() : defaultBlanket, customTitleBox ? customTitleBox() : defaultTitleBox, !disableOverlay && !!selectable && (0, _react.jsx)(_tickBox.TickBox, {
|
|
73
|
-
selected: selected
|
|
74
|
-
}), progressBar && progressBar()), !disableOverlay && actions && actions.length !== 0 && (0, _react.jsx)(_actionsBar.ActionsBar, {
|
|
75
|
-
filename: name,
|
|
76
|
-
actions: actionsWithDetails
|
|
77
|
-
}));
|
|
78
|
-
var shouldRenderPlayButton = function shouldRenderPlayButton() {
|
|
79
|
-
if (mediaType !== 'video' || !cardPreview) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
return true;
|
|
83
|
-
};
|
|
84
|
-
var isPlayButtonClickable = shouldRenderPlayButton() && disableOverlay;
|
|
85
|
-
var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
|
|
86
|
-
var shouldDisplayTooltip = !disableOverlay && !shouldHideTooltip;
|
|
87
|
-
var shouldDisplayBackground = !cardPreview || !disableOverlay;
|
|
88
|
-
return (0, _react.jsx)(_react2.default.Fragment, null, shouldOpenMediaViewer && (0, _react.jsx)(_openMediaViewerButton.default, {
|
|
89
|
-
fileName: name !== null && name !== void 0 ? name : '',
|
|
90
|
-
innerRef: openMediaViewerButtonRef,
|
|
91
|
-
onClick: onClick
|
|
92
|
-
}), (0, _react.jsx)(_wrapper.Wrapper, {
|
|
93
|
-
testId: testId || 'media-card-view',
|
|
94
|
-
dimensions: dimensions,
|
|
95
|
-
appearance: appearance,
|
|
96
|
-
onClick: onClick,
|
|
97
|
-
onMouseEnter: onMouseEnter,
|
|
98
|
-
innerRef: ref,
|
|
99
|
-
breakpoint: breakpoint,
|
|
100
|
-
mediaCardCursor: mediaCardCursor,
|
|
101
|
-
disableOverlay: !!disableOverlay,
|
|
102
|
-
selected: !!selected,
|
|
103
|
-
displayBackground: shouldDisplayBackground,
|
|
104
|
-
isPlayButtonClickable: !!isPlayButtonClickable,
|
|
105
|
-
isTickBoxSelectable: isTickBoxSelectable,
|
|
106
|
-
shouldDisplayTooltip: shouldDisplayTooltip
|
|
107
|
-
}, shouldDisplayTooltip ? (0, _react.jsx)(_tooltip.default, {
|
|
108
|
-
content: name,
|
|
109
|
-
position: "bottom",
|
|
110
|
-
tag: "div"
|
|
111
|
-
}, contents) : contents));
|
|
112
|
-
});
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ErrorCardView = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _react = require("@emotion/react");
|
|
10
|
-
var _react2 = require("react");
|
|
11
|
-
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
12
|
-
var _analytics = require("../../utils/analytics");
|
|
13
|
-
var _useBreakpoint = require("../useBreakpoint");
|
|
14
|
-
var _cardViewWrapper = require("./cardViewWrapper");
|
|
15
|
-
var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
|
|
16
|
-
var _iconWrapper = require("../ui/iconWrapper/iconWrapper");
|
|
17
|
-
var _failedTitleBox = require("../ui/titleBox/failedTitleBox");
|
|
18
|
-
var _iconMessage = require("../ui/iconMessage");
|
|
19
|
-
var _errors = require("../../errors");
|
|
20
|
-
var _mediaUi = require("@atlaskit/media-ui");
|
|
21
|
-
/**
|
|
22
|
-
* @jsxRuntime classic
|
|
23
|
-
* @jsx jsx
|
|
24
|
-
*/
|
|
25
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
26
|
-
|
|
27
|
-
var IconMessage = function IconMessage(_ref) {
|
|
28
|
-
var error = _ref.error,
|
|
29
|
-
metadata = _ref.metadata;
|
|
30
|
-
var _ref2 = error || {},
|
|
31
|
-
secondaryError = _ref2.secondaryError;
|
|
32
|
-
if ((0, _errors.isRateLimitedError)(secondaryError) || (0, _errors.isPollingError)(secondaryError)) {
|
|
33
|
-
return (0, _react.jsx)(_iconMessage.PreviewCurrentlyUnavailable, null);
|
|
34
|
-
} else if ((0, _errors.isUploadError)(error)) {
|
|
35
|
-
return (0, _react.jsx)(_iconMessage.FailedToUpload, null);
|
|
36
|
-
} else if (!metadata) {
|
|
37
|
-
return (0, _react.jsx)(_iconMessage.FailedToLoad, null);
|
|
38
|
-
} else {
|
|
39
|
-
return (0, _react.jsx)(_iconMessage.PreviewUnavailable, null);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
var ErrorCardViewBase = function ErrorCardViewBase(props) {
|
|
43
|
-
var error = props.error,
|
|
44
|
-
metadata = props.metadata,
|
|
45
|
-
dimensions = props.dimensions,
|
|
46
|
-
disableOverlay = props.disableOverlay;
|
|
47
|
-
var _ref3 = metadata || {},
|
|
48
|
-
name = _ref3.name,
|
|
49
|
-
mediaType = _ref3.mediaType,
|
|
50
|
-
mimeType = _ref3.mimeType;
|
|
51
|
-
var divRef = (0, _react2.useRef)(null);
|
|
52
|
-
var breakpoint = (0, _useBreakpoint.useBreakpoint)(dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, divRef);
|
|
53
|
-
var customMessage = (0, _errors.isUploadError)(props.error) ? _mediaUi.messages.failed_to_upload : undefined;
|
|
54
|
-
var renderFailedTitleBox = !disableOverlay && (!name || !!customMessage);
|
|
55
|
-
var renderTitleBox = !disableOverlay && !!name && !customMessage;
|
|
56
|
-
var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
|
|
57
|
-
return (0, _react.jsx)(_cardViewWrapper.CardViewWrapper, (0, _extends2.default)({}, props, {
|
|
58
|
-
metadata: metadata,
|
|
59
|
-
breakpoint: breakpoint,
|
|
60
|
-
"data-test-status": "error",
|
|
61
|
-
ref: divRef,
|
|
62
|
-
customTitleBox: renderFailedTitleBox ? function () {
|
|
63
|
-
return (0, _react.jsx)(_failedTitleBox.FailedTitleBox, {
|
|
64
|
-
breakpoint: breakpoint,
|
|
65
|
-
customMessage: customMessage
|
|
66
|
-
});
|
|
67
|
-
} : undefined
|
|
68
|
-
}), (0, _react.jsx)(_iconWrapper.IconWrapper, {
|
|
69
|
-
breakpoint: breakpoint,
|
|
70
|
-
hasTitleBox: hasTitleBox
|
|
71
|
-
}, (0, _react.jsx)(_mimeTypeIcon.MimeTypeIcon, {
|
|
72
|
-
testId: "media-card-file-type-icon",
|
|
73
|
-
mediaType: mediaType,
|
|
74
|
-
mimeType: mimeType,
|
|
75
|
-
name: name
|
|
76
|
-
}), !renderFailedTitleBox && (0, _react.jsx)(IconMessage, {
|
|
77
|
-
error: error,
|
|
78
|
-
metadata: metadata
|
|
79
|
-
})));
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
// TODO: check if analytics is correct
|
|
83
|
-
|
|
84
|
-
var ErrorCardView = exports.ErrorCardView = (0, _analyticsNext.withAnalyticsEvents)({
|
|
85
|
-
onClick: (0, _analytics.createAndFireMediaCardEvent)({
|
|
86
|
-
eventType: 'ui',
|
|
87
|
-
action: 'clicked',
|
|
88
|
-
actionSubject: 'mediaCard',
|
|
89
|
-
attributes: {}
|
|
90
|
-
})
|
|
91
|
-
})(ErrorCardViewBase);
|