@atlaskit/media-card 71.0.0 → 72.0.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 +18 -0
- package/dist/cjs/errors.js +56 -5
- package/dist/cjs/files/cardImageView/index.js +53 -104
- package/dist/cjs/files/index.js +0 -6
- package/dist/cjs/root/card/cardAnalytics.js +3 -15
- package/dist/cjs/root/card/cardSSRView.js +4 -2
- package/dist/cjs/root/card/cardState.js +50 -0
- package/dist/cjs/root/card/getCardPreview/cache.js +5 -0
- package/dist/cjs/root/card/getCardPreview/filePreviewStatus.js +50 -0
- package/dist/cjs/root/card/getCardPreview/helpers.js +13 -21
- package/dist/cjs/root/card/getCardPreview/index.js +91 -94
- package/dist/cjs/root/card/getCardStatus.js +7 -1
- package/dist/cjs/root/card/index.js +271 -266
- package/dist/cjs/root/cardView.js +96 -60
- package/dist/cjs/root/inline/loader.js +2 -1
- package/dist/cjs/root/inline/mediaInlineCard.js +4 -3
- package/dist/cjs/root/ui/iconMessage/index.js +12 -5
- package/dist/cjs/root/ui/imageRenderer/imageRenderer.js +30 -124
- package/dist/cjs/root/ui/titleBox/failedTitleBox.js +7 -3
- package/dist/cjs/utils/analytics.js +6 -44
- package/dist/cjs/utils/dimensionComparer.js +1 -1
- package/dist/cjs/utils/metadata.js +11 -3
- package/dist/cjs/utils/objectURLCache.js +6 -0
- package/dist/cjs/utils/shouldDisplayImageThumbnail.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/errors.js +34 -2
- package/dist/es2019/files/cardImageView/index.js +8 -61
- package/dist/es2019/files/index.js +1 -1
- package/dist/es2019/root/card/cardAnalytics.js +3 -14
- package/dist/es2019/root/card/cardSSRView.js +3 -2
- package/dist/es2019/root/card/cardState.js +26 -0
- package/dist/es2019/root/card/getCardPreview/cache.js +5 -0
- package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js +35 -0
- package/dist/es2019/root/card/getCardPreview/helpers.js +2 -12
- package/dist/es2019/root/card/getCardPreview/index.js +71 -74
- package/dist/es2019/root/card/getCardStatus.js +1 -0
- package/dist/es2019/root/card/index.js +193 -171
- package/dist/es2019/root/cardView.js +100 -61
- package/dist/es2019/root/inline/loader.js +2 -1
- package/dist/es2019/root/inline/mediaInlineCard.js +4 -3
- package/dist/es2019/root/ui/iconMessage/index.js +5 -3
- package/dist/es2019/root/ui/imageRenderer/imageRenderer.js +21 -88
- package/dist/es2019/root/ui/titleBox/failedTitleBox.js +5 -3
- package/dist/es2019/utils/analytics.js +5 -34
- package/dist/es2019/utils/dimensionComparer.js +1 -1
- package/dist/es2019/utils/metadata.js +12 -4
- package/dist/es2019/utils/objectURLCache.js +5 -0
- package/dist/es2019/utils/shouldDisplayImageThumbnail.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/errors.js +42 -1
- package/dist/esm/files/cardImageView/index.js +51 -102
- package/dist/esm/files/index.js +1 -1
- package/dist/esm/root/card/cardAnalytics.js +3 -15
- package/dist/esm/root/card/cardSSRView.js +3 -2
- package/dist/esm/root/card/cardState.js +32 -0
- package/dist/esm/root/card/getCardPreview/cache.js +6 -0
- package/dist/esm/root/card/getCardPreview/filePreviewStatus.js +35 -0
- package/dist/esm/root/card/getCardPreview/helpers.js +13 -21
- package/dist/esm/root/card/getCardPreview/index.js +79 -88
- package/dist/esm/root/card/getCardStatus.js +3 -0
- package/dist/esm/root/card/index.js +278 -268
- package/dist/esm/root/cardView.js +98 -61
- package/dist/esm/root/inline/loader.js +2 -1
- package/dist/esm/root/inline/mediaInlineCard.js +4 -3
- package/dist/esm/root/ui/iconMessage/index.js +7 -3
- package/dist/esm/root/ui/imageRenderer/imageRenderer.js +23 -118
- package/dist/esm/root/ui/titleBox/failedTitleBox.js +6 -3
- package/dist/esm/utils/analytics.js +5 -36
- package/dist/esm/utils/dimensionComparer.js +1 -1
- package/dist/esm/utils/metadata.js +12 -4
- package/dist/esm/utils/objectURLCache.js +6 -0
- package/dist/esm/utils/shouldDisplayImageThumbnail.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/errors.d.ts +9 -1
- package/dist/types/files/cardImageView/index.d.ts +4 -13
- package/dist/types/files/cardImageView/styled.d.ts +1 -1
- package/dist/types/files/index.d.ts +1 -1
- package/dist/types/index.d.ts +4 -3
- package/dist/types/root/card/cardAnalytics.d.ts +1 -6
- package/dist/types/root/card/cardSSRView.d.ts +1 -1
- package/dist/types/root/card/cardState.d.ts +5 -0
- package/dist/types/root/card/getCardPreview/cache.d.ts +3 -1
- package/dist/types/root/card/getCardPreview/filePreviewStatus.d.ts +5 -0
- package/dist/types/root/card/getCardPreview/helpers.d.ts +3 -4
- package/dist/types/root/card/getCardPreview/index.d.ts +17 -13
- package/dist/types/root/card/getCardStatus.d.ts +1 -0
- package/dist/types/root/card/index.d.ts +11 -10
- package/dist/types/root/cardView.d.ts +11 -8
- package/dist/types/root/inlinePlayer.d.ts +1 -1
- package/dist/types/root/ui/iconMessage/index.d.ts +2 -1
- package/dist/types/root/ui/imageRenderer/imageRenderer.d.ts +2 -13
- package/dist/types/root/ui/styledSSR.d.ts +1 -1
- package/dist/types/root/ui/titleBox/failedTitleBox.d.ts +2 -0
- package/dist/types/styles/mixins.d.ts +1 -1
- package/dist/types/types.d.ts +7 -1
- package/dist/types/utils/analytics.d.ts +6 -15
- package/dist/types/utils/cardDimensions.d.ts +4 -4
- package/dist/types/utils/dimensionComparer.d.ts +1 -1
- package/dist/types/utils/metadata.d.ts +2 -2
- package/dist/types/utils/objectURLCache.d.ts +2 -1
- package/example-helpers/index.tsx +21 -0
- package/package.json +6 -5
- package/dist/cjs/root/card/getCardPreview/types.js +0 -5
- package/dist/cjs/utils/fileAttributesContext.js +0 -40
- package/dist/es2019/root/card/getCardPreview/types.js +0 -1
- package/dist/es2019/utils/fileAttributesContext.js +0 -19
- package/dist/esm/root/card/getCardPreview/types.js +0 -1
- package/dist/esm/utils/fileAttributesContext.js +0 -18
- package/dist/types/root/card/getCardPreview/types.d.ts +0 -5
- package/dist/types/utils/fileAttributesContext.d.ts +0 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/media-card
|
|
2
2
|
|
|
3
|
+
## 72.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`b3606652fa1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b3606652fa1) - [ux] Editor integration for Media Inline component
|
|
8
|
+
|
|
9
|
+
### Minor Changes
|
|
10
|
+
|
|
11
|
+
- [`269ee940b87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/269ee940b87) - redesign error UI on new media card experience
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`a81fdad4b7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a81fdad4b7b) - Refactored the internal status logic based on file processing status and preview render outcome
|
|
16
|
+
- [`b51fc0a9062`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b51fc0a9062) - Refactored internal helpers to match common type definitions from Media Client
|
|
17
|
+
- [`ebad8bc86e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ebad8bc86e5) - Moved analytics from image renderer to root component
|
|
18
|
+
- [`fe9ced0cd70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe9ced0cd70) - Removed feature flags for polling settings
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 71.0.0
|
|
4
22
|
|
|
5
23
|
### Major Changes
|
package/dist/cjs/errors.js
CHANGED
|
@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.isMediaCardError = isMediaCardError;
|
|
9
|
-
exports.
|
|
9
|
+
exports.isImageLoadError = isImageLoadError;
|
|
10
|
+
exports.isUploadError = exports.ensureMediaCardError = exports.isUnsupportedLocalPreviewError = exports.isRemotePreviewError = exports.isLocalPreviewError = exports.ImageLoadError = exports.getImageLoadPrimaryReason = exports.RemotePreviewError = exports.LocalPreviewError = exports.MediaCardError = void 0;
|
|
10
11
|
|
|
11
12
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
13
|
|
|
@@ -91,6 +92,46 @@ var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
|
|
|
91
92
|
|
|
92
93
|
exports.RemotePreviewError = RemotePreviewError;
|
|
93
94
|
|
|
95
|
+
var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
|
|
96
|
+
switch (source) {
|
|
97
|
+
case 'cache-remote':
|
|
98
|
+
return 'cache-remote-uri';
|
|
99
|
+
|
|
100
|
+
case 'cache-local':
|
|
101
|
+
return 'cache-local-uri';
|
|
102
|
+
|
|
103
|
+
case 'external':
|
|
104
|
+
return 'external-uri';
|
|
105
|
+
|
|
106
|
+
case 'local':
|
|
107
|
+
return 'local-uri';
|
|
108
|
+
|
|
109
|
+
case 'remote':
|
|
110
|
+
return 'remote-uri';
|
|
111
|
+
// This fail reason will come from a bug, most likely.
|
|
112
|
+
|
|
113
|
+
default:
|
|
114
|
+
return "unknown-uri";
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
exports.getImageLoadPrimaryReason = getImageLoadPrimaryReason;
|
|
119
|
+
|
|
120
|
+
var ImageLoadError = /*#__PURE__*/function (_MediaCardError3) {
|
|
121
|
+
(0, _inherits2.default)(ImageLoadError, _MediaCardError3);
|
|
122
|
+
|
|
123
|
+
var _super4 = _createSuper(ImageLoadError);
|
|
124
|
+
|
|
125
|
+
function ImageLoadError(source) {
|
|
126
|
+
(0, _classCallCheck2.default)(this, ImageLoadError);
|
|
127
|
+
return _super4.call(this, getImageLoadPrimaryReason(source));
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
return ImageLoadError;
|
|
131
|
+
}(MediaCardError);
|
|
132
|
+
|
|
133
|
+
exports.ImageLoadError = ImageLoadError;
|
|
134
|
+
|
|
94
135
|
function isMediaCardError(err) {
|
|
95
136
|
return err instanceof MediaCardError;
|
|
96
137
|
}
|
|
@@ -109,14 +150,24 @@ exports.isRemotePreviewError = isRemotePreviewError;
|
|
|
109
150
|
|
|
110
151
|
var isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
|
|
111
152
|
return isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
|
|
112
|
-
};
|
|
113
|
-
// We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
|
|
114
|
-
|
|
153
|
+
};
|
|
115
154
|
|
|
116
155
|
exports.isUnsupportedLocalPreviewError = isUnsupportedLocalPreviewError;
|
|
117
156
|
|
|
157
|
+
function isImageLoadError(err) {
|
|
158
|
+
return err instanceof ImageLoadError;
|
|
159
|
+
} // In a try/catch statement, the error caught is the type of any.
|
|
160
|
+
// We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
|
|
161
|
+
|
|
162
|
+
|
|
118
163
|
var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
|
|
119
164
|
return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
|
|
120
165
|
};
|
|
121
166
|
|
|
122
|
-
exports.ensureMediaCardError = ensureMediaCardError;
|
|
167
|
+
exports.ensureMediaCardError = ensureMediaCardError;
|
|
168
|
+
|
|
169
|
+
var isUploadError = function isUploadError(error) {
|
|
170
|
+
return error.primaryReason === 'upload';
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
exports.isUploadError = isUploadError;
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.FileCardImageView = exports.
|
|
10
|
+
exports.FileCardImageView = exports.fileCardImageViewSelectedSelector = exports.fileCardImageViewSelector = void 0;
|
|
11
11
|
|
|
12
12
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
13
|
|
|
@@ -41,12 +41,6 @@ var _progressBar = require("../../utils/progressBar");
|
|
|
41
41
|
|
|
42
42
|
var _cardActions = _interopRequireDefault(require("../../utils/cardActions"));
|
|
43
43
|
|
|
44
|
-
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
45
|
-
|
|
46
|
-
var _analytics = require("../../utils/analytics");
|
|
47
|
-
|
|
48
|
-
var _fileAttributesContext = require("../../utils/fileAttributesContext");
|
|
49
|
-
|
|
50
44
|
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); }
|
|
51
45
|
|
|
52
46
|
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; }
|
|
@@ -60,15 +54,15 @@ exports.fileCardImageViewSelector = fileCardImageViewSelector;
|
|
|
60
54
|
var fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
|
|
61
55
|
exports.fileCardImageViewSelectedSelector = fileCardImageViewSelectedSelector;
|
|
62
56
|
|
|
63
|
-
var
|
|
64
|
-
(0, _inherits2.default)(
|
|
57
|
+
var FileCardImageView = /*#__PURE__*/function (_Component) {
|
|
58
|
+
(0, _inherits2.default)(FileCardImageView, _Component);
|
|
65
59
|
|
|
66
|
-
var _super = _createSuper(
|
|
60
|
+
var _super = _createSuper(FileCardImageView);
|
|
67
61
|
|
|
68
|
-
function
|
|
62
|
+
function FileCardImageView() {
|
|
69
63
|
var _this;
|
|
70
64
|
|
|
71
|
-
(0, _classCallCheck2.default)(this,
|
|
65
|
+
(0, _classCallCheck2.default)(this, FileCardImageView);
|
|
72
66
|
|
|
73
67
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
74
68
|
args[_key] = arguments[_key];
|
|
@@ -186,58 +180,18 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
186
180
|
size: "large"
|
|
187
181
|
})));
|
|
188
182
|
});
|
|
189
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
|
|
190
|
-
var _this$props6 = _this.props,
|
|
191
|
-
createAnalyticsEvent = _this$props6.createAnalyticsEvent,
|
|
192
|
-
fileAttributes = _this$props6.fileAttributes,
|
|
193
|
-
timeElapsedTillCommenced = _this$props6.timeElapsedTillCommenced;
|
|
194
|
-
|
|
195
|
-
if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.SUCCEEDED)) {
|
|
196
|
-
var timeElapsedTillSucceeded = performance.now();
|
|
197
|
-
var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillSucceeded - timeElapsedTillCommenced;
|
|
198
|
-
var performanceAttributes = {
|
|
199
|
-
overall: {
|
|
200
|
-
durationSincePageStart: timeElapsedTillSucceeded,
|
|
201
|
-
durationSinceCommenced: durationSinceCommenced
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
(0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
|
|
205
|
-
}
|
|
206
|
-
});
|
|
207
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
|
|
208
|
-
var fileAttributes = _this.props.fileAttributes;
|
|
209
|
-
|
|
210
|
-
if (fileAttributes && _this.shouldFireEvent(_analytics.RenderEventAction.FAILED)) {
|
|
211
|
-
var _this$props7 = _this.props,
|
|
212
|
-
createAnalyticsEvent = _this$props7.createAnalyticsEvent,
|
|
213
|
-
mediaItemType = _this$props7.mediaItemType,
|
|
214
|
-
timeElapsedTillCommenced = _this$props7.timeElapsedTillCommenced;
|
|
215
|
-
var timeElapsedTillFailed = performance.now();
|
|
216
|
-
var durationSinceCommenced = timeElapsedTillCommenced && timeElapsedTillFailed - timeElapsedTillCommenced;
|
|
217
|
-
var performanceAttributes = {
|
|
218
|
-
overall: {
|
|
219
|
-
durationSincePageStart: timeElapsedTillFailed,
|
|
220
|
-
durationSinceCommenced: durationSinceCommenced
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
|
|
224
|
-
if (mediaItemType === 'file') {
|
|
225
|
-
(0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedFileUriPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
|
|
226
|
-
} else if (mediaItemType === 'external-image') {
|
|
227
|
-
(0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderFailedExternalUriPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
});
|
|
231
183
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaImage", function () {
|
|
232
|
-
var _this$
|
|
233
|
-
status = _this$
|
|
234
|
-
mediaItemType = _this$
|
|
235
|
-
dataURI = _this$
|
|
236
|
-
mediaType = _this$
|
|
237
|
-
mimeType = _this$
|
|
238
|
-
previewOrientation = _this$
|
|
239
|
-
onDisplayImage = _this$
|
|
240
|
-
alt = _this$
|
|
184
|
+
var _this$props6 = _this.props,
|
|
185
|
+
status = _this$props6.status,
|
|
186
|
+
mediaItemType = _this$props6.mediaItemType,
|
|
187
|
+
dataURI = _this$props6.dataURI,
|
|
188
|
+
mediaType = _this$props6.mediaType,
|
|
189
|
+
mimeType = _this$props6.mimeType,
|
|
190
|
+
previewOrientation = _this$props6.previewOrientation,
|
|
191
|
+
onDisplayImage = _this$props6.onDisplayImage,
|
|
192
|
+
alt = _this$props6.alt,
|
|
193
|
+
onImageLoad = _this$props6.onImageLoad,
|
|
194
|
+
onImageError = _this$props6.onImageError;
|
|
241
195
|
|
|
242
196
|
if (!(0, _shouldDisplayImageThumbnail.shouldDisplayImageThumbnail)(status, mediaItemType, dataURI, mediaType, mimeType)) {
|
|
243
197
|
return null;
|
|
@@ -254,19 +208,16 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
254
208
|
crop: _this.isCropped,
|
|
255
209
|
stretch: _this.isStretched,
|
|
256
210
|
previewOrientation: previewOrientation,
|
|
257
|
-
onImageLoad:
|
|
258
|
-
onImageError:
|
|
211
|
+
onImageLoad: onImageLoad,
|
|
212
|
+
onImageError: onImageError
|
|
259
213
|
});
|
|
260
214
|
});
|
|
261
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldFireEvent", function (action) {
|
|
262
|
-
return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
|
|
263
|
-
});
|
|
264
215
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderProgressBar", function () {
|
|
265
|
-
var _this$
|
|
266
|
-
mediaName = _this$
|
|
267
|
-
progress = _this$
|
|
268
|
-
actions = _this$
|
|
269
|
-
status = _this$
|
|
216
|
+
var _this$props7 = _this.props,
|
|
217
|
+
mediaName = _this$props7.mediaName,
|
|
218
|
+
progress = _this$props7.progress,
|
|
219
|
+
actions = _this$props7.actions,
|
|
220
|
+
status = _this$props7.status;
|
|
270
221
|
|
|
271
222
|
if (status !== 'uploading') {
|
|
272
223
|
return null;
|
|
@@ -284,10 +235,10 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
284
235
|
}) : null))));
|
|
285
236
|
});
|
|
286
237
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuccessCardContents", function () {
|
|
287
|
-
var _this$
|
|
288
|
-
disableOverlay = _this$
|
|
289
|
-
selectable = _this$
|
|
290
|
-
status = _this$
|
|
238
|
+
var _this$props8 = _this.props,
|
|
239
|
+
disableOverlay = _this$props8.disableOverlay,
|
|
240
|
+
selectable = _this$props8.selectable,
|
|
241
|
+
status = _this$props8.status;
|
|
291
242
|
var overlay = null;
|
|
292
243
|
|
|
293
244
|
if (!disableOverlay) {
|
|
@@ -307,15 +258,15 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
307
258
|
}, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
|
|
308
259
|
});
|
|
309
260
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuccessCardOverlay", function () {
|
|
310
|
-
var _this$
|
|
311
|
-
status = _this$
|
|
312
|
-
mediaName = _this$
|
|
313
|
-
mediaType = _this$
|
|
314
|
-
fileSize = _this$
|
|
315
|
-
dataURI = _this$
|
|
316
|
-
selectable = _this$
|
|
317
|
-
selected = _this$
|
|
318
|
-
actions = _this$
|
|
261
|
+
var _this$props9 = _this.props,
|
|
262
|
+
status = _this$props9.status,
|
|
263
|
+
mediaName = _this$props9.mediaName,
|
|
264
|
+
mediaType = _this$props9.mediaType,
|
|
265
|
+
fileSize = _this$props9.fileSize,
|
|
266
|
+
dataURI = _this$props9.dataURI,
|
|
267
|
+
selectable = _this$props9.selectable,
|
|
268
|
+
selected = _this$props9.selected,
|
|
269
|
+
actions = _this$props9.actions;
|
|
319
270
|
var isPersistent = mediaType === 'doc' || !dataURI;
|
|
320
271
|
return /*#__PURE__*/_react.default.createElement(_cardOverlay.CardOverlay, {
|
|
321
272
|
cardStatus: status,
|
|
@@ -331,17 +282,17 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
331
282
|
return _this;
|
|
332
283
|
}
|
|
333
284
|
|
|
334
|
-
(0, _createClass2.default)(
|
|
285
|
+
(0, _createClass2.default)(FileCardImageView, [{
|
|
335
286
|
key: "render",
|
|
336
287
|
value: function render() {
|
|
337
|
-
var _this$
|
|
338
|
-
disableOverlay = _this$
|
|
339
|
-
selectable = _this$
|
|
340
|
-
selected = _this$
|
|
341
|
-
mediaType = _this$
|
|
342
|
-
progress = _this$
|
|
343
|
-
status = _this$
|
|
344
|
-
mediaName = _this$
|
|
288
|
+
var _this$props10 = this.props,
|
|
289
|
+
disableOverlay = _this$props10.disableOverlay,
|
|
290
|
+
selectable = _this$props10.selectable,
|
|
291
|
+
selected = _this$props10.selected,
|
|
292
|
+
mediaType = _this$props10.mediaType,
|
|
293
|
+
progress = _this$props10.progress,
|
|
294
|
+
status = _this$props10.status,
|
|
295
|
+
mediaName = _this$props10.mediaName;
|
|
345
296
|
return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
|
|
346
297
|
"data-testid": "media-file-card-view",
|
|
347
298
|
"data-test-media-name": mediaName,
|
|
@@ -358,9 +309,9 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
358
309
|
}, {
|
|
359
310
|
key: "isFileCardImageReadyForDisplay",
|
|
360
311
|
get: function get() {
|
|
361
|
-
var _this$
|
|
362
|
-
dataURI = _this$
|
|
363
|
-
status = _this$
|
|
312
|
+
var _this$props11 = this.props,
|
|
313
|
+
dataURI = _this$props11.dataURI,
|
|
314
|
+
status = _this$props11.status;
|
|
364
315
|
return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
|
|
365
316
|
}
|
|
366
317
|
}, {
|
|
@@ -376,13 +327,11 @@ var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
|
|
|
376
327
|
return resizeMode === 'stretchy-fit';
|
|
377
328
|
}
|
|
378
329
|
}]);
|
|
379
|
-
return
|
|
330
|
+
return FileCardImageView;
|
|
380
331
|
}(_react.Component);
|
|
381
332
|
|
|
382
|
-
exports.
|
|
383
|
-
(0, _defineProperty2.default)(
|
|
333
|
+
exports.FileCardImageView = FileCardImageView;
|
|
334
|
+
(0, _defineProperty2.default)(FileCardImageView, "defaultProps", {
|
|
384
335
|
resizeMode: 'crop',
|
|
385
336
|
disableOverlay: false
|
|
386
|
-
});
|
|
387
|
-
var FileCardImageView = (0, _analyticsNext.withAnalyticsEvents)()((0, _fileAttributesContext.withFileAttributes)(FileCardImageViewBase));
|
|
388
|
-
exports.FileCardImageView = FileCardImageView;
|
|
337
|
+
});
|
package/dist/cjs/files/index.js
CHANGED
|
@@ -9,11 +9,5 @@ Object.defineProperty(exports, "FileCardImageView", {
|
|
|
9
9
|
return _cardImageView.FileCardImageView;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "FileCardImageViewBase", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _cardImageView.FileCardImageViewBase;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
12
|
|
|
19
13
|
var _cardImageView = require("./cardImageView");
|
|
@@ -7,29 +7,17 @@ exports.fireScreenEvent = exports.fireCopiedEvent = exports.fireCommencedEvent =
|
|
|
7
7
|
|
|
8
8
|
var _analytics = require("../../utils/analytics");
|
|
9
9
|
|
|
10
|
-
var relevantFeatureFlagNames = ['newCardExperience', '
|
|
10
|
+
var relevantFeatureFlagNames = ['newCardExperience', 'captions'];
|
|
11
11
|
exports.relevantFeatureFlagNames = relevantFeatureFlagNames;
|
|
12
12
|
|
|
13
|
-
var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes) {
|
|
14
|
-
var _ref = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
|
|
15
|
-
cardPreview = _ref.cardPreview,
|
|
16
|
-
error = _ref.error;
|
|
17
|
-
|
|
13
|
+
var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
|
|
18
14
|
var fireEvent = function fireEvent(payload) {
|
|
19
15
|
return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
|
|
20
16
|
};
|
|
21
17
|
|
|
22
18
|
switch (status) {
|
|
23
19
|
case 'complete':
|
|
24
|
-
|
|
25
|
-
* A Card that is considered Complete and has no preview,
|
|
26
|
-
* reflects an expected behaviour, and thus a legitimate
|
|
27
|
-
* success case to be logged.
|
|
28
|
-
*/
|
|
29
|
-
if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
|
|
30
|
-
fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes));
|
|
31
|
-
}
|
|
32
|
-
|
|
20
|
+
fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes));
|
|
33
21
|
break;
|
|
34
22
|
|
|
35
23
|
case 'failed-processing':
|
|
@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
11
11
|
|
|
12
12
|
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
|
|
14
|
+
var _mediaClient = require("@atlaskit/media-client");
|
|
15
|
+
|
|
14
16
|
var _mediaUi = require("@atlaskit/media-ui");
|
|
15
17
|
|
|
16
18
|
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
|
|
@@ -51,7 +53,7 @@ var CardSSRView = function CardSSRView(_ref) {
|
|
|
51
53
|
width = _getRequestedDimensio.width,
|
|
52
54
|
height = _getRequestedDimensio.height;
|
|
53
55
|
|
|
54
|
-
var mode =
|
|
56
|
+
var mode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
|
|
55
57
|
dataURI = mediaClient.getImageUrlSync(identifier.id, {
|
|
56
58
|
collection: identifier.collectionName,
|
|
57
59
|
mode: mode,
|
|
@@ -71,7 +73,7 @@ var CardSSRView = function CardSSRView(_ref) {
|
|
|
71
73
|
breakpoint: calculateBreakpoint(dimensions),
|
|
72
74
|
shouldUsePointerCursor: Boolean(dataURI),
|
|
73
75
|
displayBackground: shouldDisplayBackground,
|
|
74
|
-
disableOverlay: disableOverlay,
|
|
76
|
+
disableOverlay: !!disableOverlay,
|
|
75
77
|
selected: false,
|
|
76
78
|
"data-testid": "media-card-view"
|
|
77
79
|
}, /*#__PURE__*/_react.default.createElement(_styledSSR.CardImageContainer, {
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.getCardStateFromFileState = exports.createStateUpdater = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _mediaClient = require("@atlaskit/media-client");
|
|
13
|
+
|
|
14
|
+
var _errors = require("../../errors");
|
|
15
|
+
|
|
16
|
+
var _getCardStatus = require("./getCardStatus");
|
|
17
|
+
|
|
18
|
+
var _getCardPreview = require("./getCardPreview");
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
|
+
|
|
24
|
+
var createStateUpdater = function createStateUpdater(newState) {
|
|
25
|
+
return function (prevState) {
|
|
26
|
+
// Only override if previous status is non-final
|
|
27
|
+
// or new status is 'complete'
|
|
28
|
+
if ((0, _getCardStatus.isFinalCardStatus)(prevState.status) && newState.status !== 'complete') {
|
|
29
|
+
return prevState;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return _objectSpread(_objectSpread({}, prevState), newState);
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
exports.createStateUpdater = createStateUpdater;
|
|
37
|
+
|
|
38
|
+
var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {
|
|
39
|
+
var status = (0, _getCardStatus.getCardStatus)(fileState.status, (0, _getCardPreview.extractFilePreviewStatus)(fileState, isBannedLocalPreview, featureFlags));
|
|
40
|
+
var error = status === 'error' && (0, _mediaClient.isErrorFileState)(fileState) ? new _errors.MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
|
|
41
|
+
var progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
|
|
42
|
+
return {
|
|
43
|
+
fileState: fileState,
|
|
44
|
+
status: status,
|
|
45
|
+
progress: progress,
|
|
46
|
+
error: error
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.getCardStateFromFileState = getCardStateFromFileState;
|
|
@@ -34,6 +34,11 @@ var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
|
|
|
34
34
|
|
|
35
35
|
_this.previewCache.set(cacheKey, cardPreview);
|
|
36
36
|
});
|
|
37
|
+
(0, _defineProperty2.default)(this, "remove", function (id, dimensions) {
|
|
38
|
+
var cacheKey = getCacheKey(id, dimensions);
|
|
39
|
+
|
|
40
|
+
_this.previewCache.remove(cacheKey);
|
|
41
|
+
});
|
|
37
42
|
this.previewCache = previewCache;
|
|
38
43
|
};
|
|
39
44
|
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isPreviewableStatus = exports.extractFilePreviewStatus = void 0;
|
|
7
|
+
|
|
8
|
+
var _mediaCommon = require("@atlaskit/media-common");
|
|
9
|
+
|
|
10
|
+
var _mediaClient = require("@atlaskit/media-client");
|
|
11
|
+
|
|
12
|
+
var _helpers = require("./helpers");
|
|
13
|
+
|
|
14
|
+
// TODO: align these checks with helpers from Media Client
|
|
15
|
+
// https://product-fabric.atlassian.net/browse/BMPT-1300
|
|
16
|
+
var extractFilePreviewStatus = function extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags) {
|
|
17
|
+
var hasFilesize = 'size' in fileState && !!fileState.size;
|
|
18
|
+
|
|
19
|
+
var _ref = 'mediaType' in fileState && fileState || {},
|
|
20
|
+
mediaType = _ref.mediaType;
|
|
21
|
+
|
|
22
|
+
var _ref2 = 'mimeType' in fileState && fileState || {},
|
|
23
|
+
mimeType = _ref2.mimeType;
|
|
24
|
+
|
|
25
|
+
var isPreviewable = !!mediaType && (0, _mediaClient.isPreviewableType)(mediaType, featureFlags); // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
|
|
26
|
+
// For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
|
|
27
|
+
// Then, local Preview NOT available
|
|
28
|
+
|
|
29
|
+
var hasLocalPreview = !isBannedLocalPreview && (0, _mediaClient.isPreviewableFileState)(fileState) && (0, _helpers.isSupportedLocalPreview)(mediaType) && !!mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType);
|
|
30
|
+
var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
|
|
31
|
+
var hasPreview = hasLocalPreview || hasRemotePreview;
|
|
32
|
+
var isSupportedByBrowser = !!mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(mimeType);
|
|
33
|
+
return {
|
|
34
|
+
hasFilesize: hasFilesize,
|
|
35
|
+
isPreviewable: isPreviewable,
|
|
36
|
+
hasPreview: hasPreview,
|
|
37
|
+
isSupportedByBrowser: isSupportedByBrowser
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.extractFilePreviewStatus = extractFilePreviewStatus;
|
|
42
|
+
|
|
43
|
+
var isPreviewableStatus = function isPreviewableStatus(cardStatus, _ref3) {
|
|
44
|
+
var isPreviewable = _ref3.isPreviewable,
|
|
45
|
+
hasPreview = _ref3.hasPreview,
|
|
46
|
+
isSupportedByBrowser = _ref3.isSupportedByBrowser;
|
|
47
|
+
return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.isPreviewableStatus = isPreviewableStatus;
|
|
@@ -176,25 +176,17 @@ var getCardPreviewFromFilePreview = /*#__PURE__*/function () {
|
|
|
176
176
|
exports.getCardPreviewFromFilePreview = getCardPreviewFromFilePreview;
|
|
177
177
|
|
|
178
178
|
var getCardPreviewFromBackend = /*#__PURE__*/function () {
|
|
179
|
-
var
|
|
180
|
-
var
|
|
179
|
+
var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(mediaClient, id, params) {
|
|
180
|
+
var blob;
|
|
181
181
|
return _regenerator.default.wrap(function _callee4$(_context4) {
|
|
182
182
|
while (1) {
|
|
183
183
|
switch (_context4.prev = _context4.next) {
|
|
184
184
|
case 0:
|
|
185
|
-
|
|
186
|
-
_context4.
|
|
187
|
-
|
|
188
|
-
_context4.next = 5;
|
|
189
|
-
return mediaClient.getImage(id, {
|
|
190
|
-
collection: collectionName,
|
|
191
|
-
mode: mode,
|
|
192
|
-
width: width,
|
|
193
|
-
height: height,
|
|
194
|
-
allowAnimated: true
|
|
195
|
-
});
|
|
185
|
+
_context4.prev = 0;
|
|
186
|
+
_context4.next = 3;
|
|
187
|
+
return mediaClient.getImage(id, params);
|
|
196
188
|
|
|
197
|
-
case
|
|
189
|
+
case 3:
|
|
198
190
|
blob = _context4.sent;
|
|
199
191
|
return _context4.abrupt("return", {
|
|
200
192
|
dataURI: URL.createObjectURL(blob),
|
|
@@ -202,21 +194,21 @@ var getCardPreviewFromBackend = /*#__PURE__*/function () {
|
|
|
202
194
|
source: 'remote'
|
|
203
195
|
});
|
|
204
196
|
|
|
205
|
-
case
|
|
206
|
-
_context4.prev =
|
|
207
|
-
_context4.t0 = _context4["catch"](
|
|
197
|
+
case 7:
|
|
198
|
+
_context4.prev = 7;
|
|
199
|
+
_context4.t0 = _context4["catch"](0);
|
|
208
200
|
throw new _errors.RemotePreviewError('remote-preview-fetch', _context4.t0);
|
|
209
201
|
|
|
210
|
-
case
|
|
202
|
+
case 10:
|
|
211
203
|
case "end":
|
|
212
204
|
return _context4.stop();
|
|
213
205
|
}
|
|
214
206
|
}
|
|
215
|
-
}, _callee4, null, [[
|
|
207
|
+
}, _callee4, null, [[0, 7]]);
|
|
216
208
|
}));
|
|
217
209
|
|
|
218
|
-
return function getCardPreviewFromBackend(_x4, _x5, _x6
|
|
219
|
-
return
|
|
210
|
+
return function getCardPreviewFromBackend(_x4, _x5, _x6) {
|
|
211
|
+
return _ref4.apply(this, arguments);
|
|
220
212
|
};
|
|
221
213
|
}();
|
|
222
214
|
|