@atlaskit/media-card 74.0.0 → 74.1.2
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 +26 -0
- package/dist/cjs/errors.js +4 -0
- package/dist/cjs/root/card/cardAnalytics.js +6 -2
- package/dist/cjs/root/card/getCardPreview/index.js +47 -20
- package/dist/cjs/root/card/imageRefetchingAnalytics.js +45 -0
- package/dist/cjs/root/card/index.js +35 -29
- package/dist/cjs/root/inlinePlayerLazy.js +48 -0
- package/dist/cjs/utils/analytics.js +29 -2
- package/dist/cjs/utils/document.js +9 -1
- package/dist/cjs/utils/ufoExperiences.js +7 -3
- package/dist/cjs/utils/viewportDetector.js +11 -36
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/errors.js +4 -0
- package/dist/es2019/root/card/cardAnalytics.js +3 -2
- package/dist/es2019/root/card/getCardPreview/index.js +27 -2
- package/dist/es2019/root/card/imageRefetchingAnalytics.js +30 -0
- package/dist/es2019/root/card/index.js +32 -33
- package/dist/es2019/root/inlinePlayerLazy.js +11 -0
- package/dist/es2019/utils/analytics.js +18 -1
- package/dist/es2019/utils/document.js +11 -1
- package/dist/es2019/utils/ufoExperiences.js +4 -3
- package/dist/es2019/utils/viewportDetector.js +9 -36
- package/dist/es2019/version.json +1 -1
- package/dist/esm/errors.js +4 -0
- package/dist/esm/root/card/cardAnalytics.js +5 -2
- package/dist/esm/root/card/getCardPreview/index.js +47 -20
- package/dist/esm/root/card/imageRefetchingAnalytics.js +32 -0
- package/dist/esm/root/card/index.js +37 -33
- package/dist/esm/root/inlinePlayerLazy.js +29 -0
- package/dist/esm/utils/analytics.js +22 -1
- package/dist/esm/utils/document.js +9 -1
- package/dist/esm/utils/ufoExperiences.js +6 -3
- package/dist/esm/utils/viewportDetector.js +9 -36
- package/dist/esm/version.json +1 -1
- package/dist/types/errors.d.ts +5 -1
- package/dist/types/root/card/cardAnalytics.d.ts +1 -1
- package/dist/types/root/card/getCardPreview/index.d.ts +4 -1
- package/dist/types/root/card/imageRefetchingAnalytics.d.ts +10 -0
- package/dist/types/root/card/index.d.ts +2 -4
- package/dist/types/root/inlinePlayerLazy.d.ts +2 -0
- package/dist/types/utils/analytics.d.ts +17 -1
- package/dist/types/utils/document.d.ts +1 -1
- package/dist/types/utils/ufoExperiences.d.ts +1 -1
- package/dist/types/utils/viewportDetector.d.ts +0 -10
- package/package.json +11 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @atlaskit/media-card
|
|
2
2
|
|
|
3
|
+
## 74.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f9fee1fbf49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9fee1fbf49) - Use react lazy to avoid pulling InlinePlayer component code if it is not being used on a page
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
10
|
+
## 74.1.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
|
|
15
|
+
|
|
16
|
+
## 74.1.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [`a332288b5ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a332288b5ea) - Added analytics for media-card memoryCacheLogging and added relevant featureFlag keys for media-common package.
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- [`baece961cdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/baece961cdd) - Add media-card example for use by media-pollinator-test
|
|
25
|
+
- [`2285a60dc65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2285a60dc65) - Logs events when status is error, even if there is no error data
|
|
26
|
+
- [`196bfa84bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/196bfa84bfd) - Removed custom anchors from ViewportObserver in favour of IntersectionObserver's rootMargin
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
3
29
|
## 74.0.0
|
|
4
30
|
|
|
5
31
|
### Major Changes
|
package/dist/cjs/errors.js
CHANGED
|
@@ -29,6 +29,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
29
29
|
|
|
30
30
|
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; } }
|
|
31
31
|
|
|
32
|
+
/**
|
|
33
|
+
* Primary reason is logged through Data Portal.
|
|
34
|
+
* Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
|
|
35
|
+
*/
|
|
32
36
|
var MediaCardError = /*#__PURE__*/function (_Error) {
|
|
33
37
|
(0, _inherits2.default)(MediaCardError, _Error);
|
|
34
38
|
|
|
@@ -7,7 +7,11 @@ exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent
|
|
|
7
7
|
|
|
8
8
|
var _analytics = require("../../utils/analytics");
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _errors = require("./../../errors");
|
|
11
|
+
|
|
12
|
+
var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
|
|
13
|
+
var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
|
|
14
|
+
|
|
11
15
|
var fireEvent = function fireEvent(payload) {
|
|
12
16
|
return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
|
|
13
17
|
};
|
|
@@ -22,7 +26,7 @@ var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, s
|
|
|
22
26
|
break;
|
|
23
27
|
|
|
24
28
|
case 'error':
|
|
25
|
-
|
|
29
|
+
fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
|
|
26
30
|
break;
|
|
27
31
|
}
|
|
28
32
|
};
|
|
@@ -54,6 +54,8 @@ var _dimensionComparer = require("../../../utils/dimensionComparer");
|
|
|
54
54
|
|
|
55
55
|
var _filePreviewStatus = require("./filePreviewStatus");
|
|
56
56
|
|
|
57
|
+
var _imageRefetchingAnalytics = require("../imageRefetchingAnalytics");
|
|
58
|
+
|
|
57
59
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
58
60
|
|
|
59
61
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -124,48 +126,57 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
|
|
|
124
126
|
|
|
125
127
|
var getCardPreview = /*#__PURE__*/function () {
|
|
126
128
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
|
|
127
|
-
var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, mode, cachedPreview, dimensionsAreBigger, localPreview;
|
|
129
|
+
var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
|
|
128
130
|
|
|
129
131
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
130
132
|
while (1) {
|
|
131
133
|
switch (_context.prev = _context.next) {
|
|
132
134
|
case 0:
|
|
133
|
-
mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
|
|
135
|
+
mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs, createAnalyticsEvent = _ref.createAnalyticsEvent, featureFlags = _ref.featureFlags;
|
|
134
136
|
mode = imageUrlParams.mode;
|
|
135
137
|
cachedPreview = _cache.default.get(id, mode);
|
|
136
138
|
dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
|
|
137
139
|
|
|
138
140
|
if (!(cachedPreview && !dimensionsAreBigger)) {
|
|
139
|
-
_context.next =
|
|
141
|
+
_context.next = 7;
|
|
140
142
|
break;
|
|
141
143
|
}
|
|
142
144
|
|
|
145
|
+
if ((0, _mediaCommon.getMediaFeatureFlag)('memoryCacheLogging', featureFlags)) {
|
|
146
|
+
createAnalyticsEvent && (0, _imageRefetchingAnalytics.fireImageFetchingOperationalEvent)(createAnalyticsEvent, 'cache-hit', {
|
|
147
|
+
fileId: id,
|
|
148
|
+
prevDimensions: cachedPreview.dimensions,
|
|
149
|
+
currentDimensions: dimensions,
|
|
150
|
+
source: cachedPreview.source
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
|
|
143
154
|
return _context.abrupt("return", cachedPreview);
|
|
144
155
|
|
|
145
|
-
case
|
|
146
|
-
_context.prev =
|
|
156
|
+
case 7:
|
|
157
|
+
_context.prev = 7;
|
|
147
158
|
|
|
148
159
|
if (!filePreview) {
|
|
149
|
-
_context.next =
|
|
160
|
+
_context.next = 13;
|
|
150
161
|
break;
|
|
151
162
|
}
|
|
152
163
|
|
|
153
|
-
_context.next =
|
|
164
|
+
_context.next = 11;
|
|
154
165
|
return (0, _helpers.getCardPreviewFromFilePreview)(filePreview);
|
|
155
166
|
|
|
156
|
-
case
|
|
167
|
+
case 11:
|
|
157
168
|
localPreview = _context.sent;
|
|
158
169
|
return _context.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
|
|
159
170
|
dimensions: dimensions
|
|
160
171
|
}), mediaBlobUrlAttrs));
|
|
161
172
|
|
|
162
|
-
case
|
|
163
|
-
_context.next =
|
|
173
|
+
case 13:
|
|
174
|
+
_context.next = 20;
|
|
164
175
|
break;
|
|
165
176
|
|
|
166
|
-
case
|
|
167
|
-
_context.prev =
|
|
168
|
-
_context.t0 = _context["catch"](
|
|
177
|
+
case 15:
|
|
178
|
+
_context.prev = 15;
|
|
179
|
+
_context.t0 = _context["catch"](7);
|
|
169
180
|
|
|
170
181
|
/**
|
|
171
182
|
* We report the error if:
|
|
@@ -187,29 +198,45 @@ var getCardPreview = /*#__PURE__*/function () {
|
|
|
187
198
|
|
|
188
199
|
|
|
189
200
|
if (isRemotePreviewReady) {
|
|
190
|
-
_context.next =
|
|
201
|
+
_context.next = 20;
|
|
191
202
|
break;
|
|
192
203
|
}
|
|
193
204
|
|
|
194
205
|
throw _context.t0;
|
|
195
206
|
|
|
196
|
-
case
|
|
207
|
+
case 20:
|
|
197
208
|
if (isRemotePreviewReady) {
|
|
198
|
-
_context.next =
|
|
209
|
+
_context.next = 22;
|
|
199
210
|
break;
|
|
200
211
|
}
|
|
201
212
|
|
|
202
213
|
throw new _errors.MediaCardError('remote-preview-not-ready');
|
|
203
214
|
|
|
204
|
-
case 21:
|
|
205
|
-
return _context.abrupt("return", fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs));
|
|
206
|
-
|
|
207
215
|
case 22:
|
|
216
|
+
_context.next = 24;
|
|
217
|
+
return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
|
|
218
|
+
|
|
219
|
+
case 24:
|
|
220
|
+
remotePreview = _context.sent;
|
|
221
|
+
|
|
222
|
+
if ((0, _mediaCommon.getMediaFeatureFlag)('memoryCacheLogging', featureFlags)) {
|
|
223
|
+
createAnalyticsEvent && (0, _imageRefetchingAnalytics.fireImageFetchingOperationalEvent)(createAnalyticsEvent, 'remote-success', {
|
|
224
|
+
fileId: id,
|
|
225
|
+
prevDimensions: cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions,
|
|
226
|
+
currentDimensions: dimensions,
|
|
227
|
+
dimensionsPercentageDiff: (0, _imageRefetchingAnalytics.calculatePercentageDifference)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions),
|
|
228
|
+
source: remotePreview.source
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
return _context.abrupt("return", remotePreview);
|
|
233
|
+
|
|
234
|
+
case 27:
|
|
208
235
|
case "end":
|
|
209
236
|
return _context.stop();
|
|
210
237
|
}
|
|
211
238
|
}
|
|
212
|
-
}, _callee, null, [[
|
|
239
|
+
}, _callee, null, [[7, 15]]);
|
|
213
240
|
}));
|
|
214
241
|
|
|
215
242
|
return function getCardPreview(_x) {
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.fireImageFetchingOperationalEvent = exports.calculatePercentageDifference = void 0;
|
|
7
|
+
|
|
8
|
+
var _analytics = require("../../utils/analytics");
|
|
9
|
+
|
|
10
|
+
var fireImageFetchingOperationalEvent = function fireImageFetchingOperationalEvent(createAnalyticsEvent, action, cardPreviewAttributes) {
|
|
11
|
+
var fireEvent = function fireEvent(payload) {
|
|
12
|
+
return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
switch (action) {
|
|
16
|
+
case 'cache-hit':
|
|
17
|
+
fireEvent((0, _analytics.getCacheHitEventPayload)(cardPreviewAttributes));
|
|
18
|
+
break;
|
|
19
|
+
|
|
20
|
+
case 'remote-success':
|
|
21
|
+
fireEvent((0, _analytics.getRemoteSuccessEventPayload)(cardPreviewAttributes));
|
|
22
|
+
break;
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
exports.fireImageFetchingOperationalEvent = fireImageFetchingOperationalEvent;
|
|
27
|
+
|
|
28
|
+
var calculatePercentageDifference = function calculatePercentageDifference(prevDimensions, currentDimensions) {
|
|
29
|
+
if (!prevDimensions) {
|
|
30
|
+
return undefined;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
var prevWidth = parseInt("".concat(prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.width), 10);
|
|
34
|
+
var currWidth = parseInt("".concat(currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.width), 10);
|
|
35
|
+
var prevHeight = parseInt("".concat(prevDimensions === null || prevDimensions === void 0 ? void 0 : prevDimensions.height), 10);
|
|
36
|
+
var currHeight = parseInt("".concat(currentDimensions === null || currentDimensions === void 0 ? void 0 : currentDimensions.height), 10);
|
|
37
|
+
var percentageDiffInWidth = ((currWidth - prevWidth) / prevWidth * 100).toFixed(2);
|
|
38
|
+
var percentageDiffInHeight = ((currHeight - prevHeight) / prevHeight * 100).toFixed(2);
|
|
39
|
+
return {
|
|
40
|
+
width: percentageDiffInWidth,
|
|
41
|
+
height: percentageDiffInHeight
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.calculatePercentageDifference = calculatePercentageDifference;
|
|
@@ -55,7 +55,7 @@ var _getCardPreview = require("./getCardPreview");
|
|
|
55
55
|
|
|
56
56
|
var _metadata = require("../../utils/metadata");
|
|
57
57
|
|
|
58
|
-
var
|
|
58
|
+
var _inlinePlayerLazy = require("../inlinePlayerLazy");
|
|
59
59
|
|
|
60
60
|
var _analytics = require("../../utils/analytics");
|
|
61
61
|
|
|
@@ -90,7 +90,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
90
90
|
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; } }
|
|
91
91
|
|
|
92
92
|
var packageName = "@atlaskit/media-card";
|
|
93
|
-
var packageVersion = "74.
|
|
93
|
+
var packageVersion = "74.1.2";
|
|
94
94
|
|
|
95
95
|
var CardBase = /*#__PURE__*/function (_Component) {
|
|
96
96
|
(0, _inherits2.default)(CardBase, _Component);
|
|
@@ -112,8 +112,6 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
112
112
|
wasStatusUploading: false,
|
|
113
113
|
wasStatusProcessing: false
|
|
114
114
|
});
|
|
115
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPreAnchorRef", /*#__PURE__*/(0, _react.createRef)());
|
|
116
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportPostAnchorRef", /*#__PURE__*/(0, _react.createRef)());
|
|
117
115
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ssrReliability", {
|
|
118
116
|
server: {
|
|
119
117
|
status: 'unknown'
|
|
@@ -162,7 +160,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
162
160
|
var _this$props2 = _this.props,
|
|
163
161
|
_this$props2$dimensio = _this$props2.dimensions,
|
|
164
162
|
dimensions = _this$props2$dimensio === void 0 ? {} : _this$props2$dimensio,
|
|
165
|
-
mediaClient = _this$props2.mediaClient
|
|
163
|
+
mediaClient = _this$props2.mediaClient,
|
|
164
|
+
createAnalyticsEvent = _this$props2.createAnalyticsEvent;
|
|
166
165
|
return {
|
|
167
166
|
mediaClient: mediaClient,
|
|
168
167
|
id: id,
|
|
@@ -171,7 +170,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
171
170
|
filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
|
|
172
171
|
isRemotePreviewReady: (0, _mediaClient2.isImageRepresentationReady)(fileState),
|
|
173
172
|
imageUrlParams: _this.getImageURLParams(identifier),
|
|
174
|
-
mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState)
|
|
173
|
+
mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
|
|
174
|
+
createAnalyticsEvent: createAnalyticsEvent,
|
|
175
|
+
featureFlags: _this.props.featureFlags
|
|
175
176
|
};
|
|
176
177
|
});
|
|
177
178
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCacheSSRPreview", function (identifier) {
|
|
@@ -482,7 +483,12 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
482
483
|
var _this$state = _this.state,
|
|
483
484
|
shouldAutoplay = _this$state.shouldAutoplay,
|
|
484
485
|
cardPreview = _this$state.cardPreview;
|
|
485
|
-
|
|
486
|
+
|
|
487
|
+
var card = _this.renderCard(false, 'loading', false);
|
|
488
|
+
|
|
489
|
+
return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
|
490
|
+
fallback: card
|
|
491
|
+
}, /*#__PURE__*/_react.default.createElement(_inlinePlayerLazy.InlinePlayerLazy, {
|
|
486
492
|
mediaClient: mediaClient,
|
|
487
493
|
dimensions: dimensions,
|
|
488
494
|
originalDimensions: originalDimensions,
|
|
@@ -495,7 +501,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
495
501
|
ref: _this.setRef,
|
|
496
502
|
testId: testId,
|
|
497
503
|
cardPreview: cardPreview
|
|
498
|
-
});
|
|
504
|
+
}));
|
|
499
505
|
});
|
|
500
506
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMediaViewerClose", function () {
|
|
501
507
|
_this.setState({
|
|
@@ -550,6 +556,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
550
556
|
}), document.body);
|
|
551
557
|
});
|
|
552
558
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
|
|
559
|
+
var withCallbacks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
560
|
+
var cardStatusOverride = arguments.length > 1 ? arguments[1] : undefined;
|
|
561
|
+
var izLazyOverride = arguments.length > 2 ? arguments[2] : undefined;
|
|
553
562
|
var _this$props9 = _this.props,
|
|
554
563
|
identifier = _this$props9.identifier,
|
|
555
564
|
isLazy = _this$props9.isLazy,
|
|
@@ -583,17 +592,18 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
583
592
|
onCardViewClick = _assertThisInitialize4.onCardViewClick,
|
|
584
593
|
onDisplayImage = _assertThisInitialize4.onDisplayImage,
|
|
585
594
|
actions = _assertThisInitialize4.actions,
|
|
586
|
-
onMouseEnter = _assertThisInitialize4.onMouseEnter;
|
|
587
|
-
// For example, when we have the image in cache
|
|
595
|
+
onMouseEnter = _assertThisInitialize4.onMouseEnter;
|
|
588
596
|
|
|
597
|
+
var isLazyWithOverride = izLazyOverride === undefined ? isLazy : izLazyOverride; // Card can be artificially turned visible before entering the viewport
|
|
598
|
+
// For example, when we have the image in cache
|
|
589
599
|
|
|
590
|
-
var nativeLazyLoad =
|
|
600
|
+
var nativeLazyLoad = isLazyWithOverride && !isCardVisible; // Force Media Image to always display img for SSR
|
|
591
601
|
|
|
592
602
|
var forceSyncDisplay = !!ssr;
|
|
593
603
|
var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(!!useInlinePlayer, !!shouldOpenMediaViewer, status === 'error' || status === 'failed-processing', !!_this.state.cardPreview, metadata.mediaType);
|
|
594
604
|
|
|
595
605
|
var card = /*#__PURE__*/_react.default.createElement(_cardView.CardView, {
|
|
596
|
-
status: status,
|
|
606
|
+
status: cardStatusOverride || status,
|
|
597
607
|
error: error,
|
|
598
608
|
mediaItemType: mediaItemType,
|
|
599
609
|
metadata: metadata,
|
|
@@ -605,35 +615,27 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
605
615
|
actions: actions,
|
|
606
616
|
selectable: selectable,
|
|
607
617
|
selected: selected,
|
|
608
|
-
onClick: onCardViewClick,
|
|
609
|
-
onMouseEnter: onMouseEnter,
|
|
618
|
+
onClick: withCallbacks ? onCardViewClick : undefined,
|
|
619
|
+
onMouseEnter: withCallbacks ? onMouseEnter : undefined,
|
|
610
620
|
disableOverlay: disableOverlay,
|
|
611
621
|
progress: progress,
|
|
612
|
-
onDisplayImage: onDisplayImage,
|
|
622
|
+
onDisplayImage: withCallbacks ? onDisplayImage : undefined,
|
|
613
623
|
innerRef: _this.setRef,
|
|
614
624
|
testId: testId,
|
|
615
625
|
featureFlags: featureFlags,
|
|
616
626
|
titleBoxBgColor: titleBoxBgColor,
|
|
617
627
|
titleBoxIcon: titleBoxIcon,
|
|
618
|
-
onImageError: _this.onImageError,
|
|
619
|
-
onImageLoad: _this.onImageLoad,
|
|
628
|
+
onImageError: withCallbacks ? _this.onImageError : undefined,
|
|
629
|
+
onImageLoad: withCallbacks ? _this.onImageLoad : undefined,
|
|
620
630
|
nativeLazyLoad: nativeLazyLoad,
|
|
621
631
|
forceSyncDisplay: forceSyncDisplay,
|
|
622
632
|
mediaCardCursor: mediaCardCursor
|
|
623
633
|
});
|
|
624
634
|
|
|
625
|
-
return
|
|
635
|
+
return isLazyWithOverride ? /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportDetector, {
|
|
626
636
|
cardEl: cardRef,
|
|
627
|
-
preAnchorRef: _this.viewportPreAnchorRef,
|
|
628
|
-
postAnchorRef: _this.viewportPostAnchorRef,
|
|
629
637
|
onVisible: _this.onCardInViewport
|
|
630
|
-
},
|
|
631
|
-
ref: _this.viewportPreAnchorRef,
|
|
632
|
-
offsetTop: -_viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
|
|
633
|
-
}), card, /*#__PURE__*/_react.default.createElement(_viewportDetector.ViewportAnchor, {
|
|
634
|
-
ref: _this.viewportPostAnchorRef,
|
|
635
|
-
offsetTop: _viewportDetector.ABS_VIEWPORT_ANCHOR_OFFSET_TOP
|
|
636
|
-
})) : card;
|
|
638
|
+
}, card) : card;
|
|
637
639
|
});
|
|
638
640
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "storeSSRData", function () {
|
|
639
641
|
var _this$ssrReliability$;
|
|
@@ -762,6 +764,8 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
762
764
|
(0, _createClass2.default)(CardBase, [{
|
|
763
765
|
key: "componentDidMount",
|
|
764
766
|
value: function componentDidMount() {
|
|
767
|
+
var _getDocument;
|
|
768
|
+
|
|
765
769
|
this.hasBeenMounted = true;
|
|
766
770
|
var _this$state3 = this.state,
|
|
767
771
|
isCardVisible = _this$state3.isCardVisible,
|
|
@@ -795,7 +799,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
795
799
|
// won't work in IE11
|
|
796
800
|
|
|
797
801
|
|
|
798
|
-
(0, _document.default)().addEventListener('copy', this.fireCopiedEvent);
|
|
802
|
+
(_getDocument = (0, _document.default)()) === null || _getDocument === void 0 ? void 0 : _getDocument.addEventListener('copy', this.fireCopiedEvent);
|
|
799
803
|
}
|
|
800
804
|
}, {
|
|
801
805
|
key: "componentDidUpdate",
|
|
@@ -890,9 +894,11 @@ var CardBase = /*#__PURE__*/function (_Component) {
|
|
|
890
894
|
}, {
|
|
891
895
|
key: "componentWillUnmount",
|
|
892
896
|
value: function componentWillUnmount() {
|
|
897
|
+
var _getDocument2;
|
|
898
|
+
|
|
893
899
|
this.hasBeenMounted = false;
|
|
894
900
|
this.unsubscribe();
|
|
895
|
-
(0, _document.default)().removeEventListener('copy', this.fireCopiedEvent);
|
|
901
|
+
(_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.removeEventListener('copy', this.fireCopiedEvent);
|
|
896
902
|
}
|
|
897
903
|
}, {
|
|
898
904
|
key: "updateStateForIdentifier",
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.InlinePlayerLazy = void 0;
|
|
11
|
+
|
|
12
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
13
|
+
|
|
14
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
15
|
+
|
|
16
|
+
var _react = require("react");
|
|
17
|
+
|
|
18
|
+
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); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
var InlinePlayerLazy = /*#__PURE__*/(0, _react.lazy)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
|
|
23
|
+
var _yield$import, InlinePlayer;
|
|
24
|
+
|
|
25
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
26
|
+
while (1) {
|
|
27
|
+
switch (_context.prev = _context.next) {
|
|
28
|
+
case 0:
|
|
29
|
+
_context.next = 2;
|
|
30
|
+
return Promise.resolve().then(function () {
|
|
31
|
+
return _interopRequireWildcard(require('./inlinePlayer'));
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
case 2:
|
|
35
|
+
_yield$import = _context.sent;
|
|
36
|
+
InlinePlayer = _yield$import.InlinePlayer;
|
|
37
|
+
return _context.abrupt("return", {
|
|
38
|
+
default: InlinePlayer
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
case 5:
|
|
42
|
+
case "end":
|
|
43
|
+
return _context.stop();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}, _callee);
|
|
47
|
+
})));
|
|
48
|
+
exports.InlinePlayerLazy = InlinePlayerLazy;
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.extractErrorInfo = exports.createAndFireMediaCardEvent = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
|
|
9
9
|
exports.fireMediaCardEvent = fireMediaCardEvent;
|
|
10
|
-
exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
|
|
10
|
+
exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
|
|
11
11
|
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
13
|
|
|
@@ -30,7 +30,8 @@ var relevantFlags = {
|
|
|
30
30
|
observedWidth: true,
|
|
31
31
|
mediaInline: false,
|
|
32
32
|
folderUploads: false,
|
|
33
|
-
mediaUploadApiV2: true
|
|
33
|
+
mediaUploadApiV2: true,
|
|
34
|
+
memoryCacheLogging: true
|
|
34
35
|
};
|
|
35
36
|
var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
|
|
36
37
|
exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
|
|
@@ -94,6 +95,32 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
|
|
|
94
95
|
|
|
95
96
|
exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
|
|
96
97
|
|
|
98
|
+
var getCacheHitEventPayload = function getCacheHitEventPayload(cardPreviewAttributes) {
|
|
99
|
+
return {
|
|
100
|
+
eventType: 'operational',
|
|
101
|
+
action: 'cache-hit',
|
|
102
|
+
actionSubject: 'mediaCardCache',
|
|
103
|
+
attributes: {
|
|
104
|
+
cardPreviewAttributes: cardPreviewAttributes
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
exports.getCacheHitEventPayload = getCacheHitEventPayload;
|
|
110
|
+
|
|
111
|
+
var getRemoteSuccessEventPayload = function getRemoteSuccessEventPayload(cardPreviewAttributes) {
|
|
112
|
+
return {
|
|
113
|
+
eventType: 'operational',
|
|
114
|
+
action: 'Remote-success',
|
|
115
|
+
actionSubject: 'mediaCardCache',
|
|
116
|
+
attributes: {
|
|
117
|
+
cardPreviewAttributes: cardPreviewAttributes
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
exports.getRemoteSuccessEventPayload = getRemoteSuccessEventPayload;
|
|
123
|
+
|
|
97
124
|
var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
|
|
98
125
|
return {
|
|
99
126
|
eventType: 'operational',
|
|
@@ -6,7 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
8
|
var _default = function _default() {
|
|
9
|
-
|
|
9
|
+
if (typeof window === 'undefined') {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
if (typeof window.document === 'undefined') {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return window.document;
|
|
10
18
|
};
|
|
11
19
|
|
|
12
20
|
exports.default = _default;
|
|
@@ -13,6 +13,8 @@ var _ufo = require("@atlaskit/ufo");
|
|
|
13
13
|
|
|
14
14
|
var _analytics = require("./analytics");
|
|
15
15
|
|
|
16
|
+
var _errors = require("../errors");
|
|
17
|
+
|
|
16
18
|
var _mediaClient = require("@atlaskit/media-client");
|
|
17
19
|
|
|
18
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -20,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
20
22
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
23
|
|
|
22
24
|
var packageName = "@atlaskit/media-card";
|
|
23
|
-
var packageVersion = "74.
|
|
25
|
+
var packageVersion = "74.1.2";
|
|
24
26
|
var concurrentExperience;
|
|
25
27
|
|
|
26
28
|
var getExperience = function getExperience(id) {
|
|
@@ -45,7 +47,9 @@ var startUfoExperience = function startUfoExperience(id) {
|
|
|
45
47
|
|
|
46
48
|
exports.startUfoExperience = startUfoExperience;
|
|
47
49
|
|
|
48
|
-
var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability
|
|
50
|
+
var completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
|
|
51
|
+
var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
|
|
52
|
+
|
|
49
53
|
switch (status) {
|
|
50
54
|
case 'complete':
|
|
51
55
|
succeedUfoExperience(id, {
|
|
@@ -65,7 +69,7 @@ var completeUfoExperience = function completeUfoExperience(id, status, fileAttri
|
|
|
65
69
|
break;
|
|
66
70
|
|
|
67
71
|
case 'error':
|
|
68
|
-
|
|
72
|
+
failUfoExperience(id, _objectSpread(_objectSpread({
|
|
69
73
|
fileAttributes: fileAttributes
|
|
70
74
|
}, (0, _analytics.extractErrorInfo)(error)), {}, {
|
|
71
75
|
request: (0, _analytics.getRenderErrorRequestMetadata)(error),
|