@atlaskit/media-card 70.9.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.
Files changed (181) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/dist/cjs/errors.js +109 -6
  3. package/dist/cjs/files/cardImageView/index.js +58 -89
  4. package/dist/cjs/files/index.js +0 -6
  5. package/dist/cjs/index.js +16 -6
  6. package/dist/cjs/root/card/cardAnalytics.js +33 -19
  7. package/dist/cjs/root/card/cardConstants.js +8 -0
  8. package/dist/cjs/root/card/cardSSRView.js +114 -0
  9. package/dist/cjs/root/card/cardState.js +50 -0
  10. package/dist/cjs/root/card/getCardPreview/cache.js +49 -0
  11. package/dist/cjs/root/card/getCardPreview/filePreviewStatus.js +50 -0
  12. package/dist/cjs/root/card/getCardPreview/helpers.js +215 -0
  13. package/dist/cjs/root/card/getCardPreview/index.js +225 -0
  14. package/dist/cjs/root/card/getCardStatus.js +16 -21
  15. package/dist/cjs/root/card/index.js +339 -398
  16. package/dist/cjs/root/cardView.js +108 -56
  17. package/dist/cjs/root/index.js +9 -1
  18. package/dist/cjs/root/inline/loader.js +22 -21
  19. package/dist/cjs/root/inline/{inlineMediaCard.js → mediaInlineCard.js} +66 -24
  20. package/dist/cjs/root/inlinePlayer.js +5 -15
  21. package/dist/cjs/root/ui/Breakpoint.js +13 -0
  22. package/dist/cjs/root/ui/common.js +5 -11
  23. package/dist/cjs/root/ui/iconMessage/index.js +17 -9
  24. package/dist/cjs/root/ui/imageRenderer/imageRenderer.js +32 -115
  25. package/dist/cjs/root/ui/loadingRateLimited/loadingRateLimited.js +2 -2
  26. package/dist/cjs/root/ui/progressBar/progressBar.js +2 -2
  27. package/dist/cjs/root/ui/progressBar/styled.js +3 -1
  28. package/dist/cjs/root/ui/styled.js +17 -80
  29. package/dist/cjs/root/ui/styledSSR.js +108 -0
  30. package/dist/cjs/root/ui/titleBox/failedTitleBox.js +7 -3
  31. package/dist/cjs/root/ui/titleBox/styled.js +3 -1
  32. package/dist/cjs/utils/analytics.js +26 -43
  33. package/dist/cjs/utils/dimensionComparer.js +1 -1
  34. package/dist/cjs/utils/document.js +12 -0
  35. package/dist/cjs/utils/getDataURIDimension.js +13 -2
  36. package/dist/cjs/utils/metadata.js +11 -3
  37. package/dist/cjs/utils/objectURLCache.js +6 -0
  38. package/dist/cjs/utils/resizeModeToMediaImageProps.js +13 -0
  39. package/dist/cjs/utils/shouldDisplayImageThumbnail.js +1 -1
  40. package/dist/cjs/utils/videoSnapshot.js +45 -0
  41. package/dist/cjs/version.json +1 -1
  42. package/dist/es2019/errors.js +52 -2
  43. package/dist/es2019/files/cardImageView/index.js +12 -46
  44. package/dist/es2019/files/index.js +1 -1
  45. package/dist/es2019/index.js +3 -3
  46. package/dist/es2019/root/card/cardAnalytics.js +23 -17
  47. package/dist/es2019/root/card/cardConstants.js +1 -0
  48. package/dist/es2019/root/card/cardSSRView.js +93 -0
  49. package/dist/es2019/root/card/cardState.js +26 -0
  50. package/dist/es2019/root/card/getCardPreview/cache.js +29 -0
  51. package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js +35 -0
  52. package/dist/es2019/root/card/getCardPreview/helpers.js +83 -0
  53. package/dist/es2019/root/card/getCardPreview/index.js +129 -0
  54. package/dist/es2019/root/card/getCardStatus.js +11 -15
  55. package/dist/es2019/root/card/index.js +292 -276
  56. package/dist/es2019/root/cardView.js +107 -53
  57. package/dist/es2019/root/index.js +2 -1
  58. package/dist/es2019/root/inline/loader.js +16 -15
  59. package/dist/es2019/root/inline/mediaInlineCard.js +127 -0
  60. package/dist/es2019/root/inlinePlayer.js +5 -13
  61. package/dist/es2019/root/ui/Breakpoint.js +6 -0
  62. package/dist/es2019/root/ui/common.js +1 -7
  63. package/dist/es2019/root/ui/iconMessage/index.js +10 -6
  64. package/dist/es2019/root/ui/imageRenderer/imageRenderer.js +22 -74
  65. package/dist/es2019/root/ui/loadingRateLimited/loadingRateLimited.js +1 -1
  66. package/dist/es2019/root/ui/progressBar/progressBar.js +1 -1
  67. package/dist/es2019/root/ui/progressBar/styled.js +2 -1
  68. package/dist/es2019/root/ui/styled.js +4 -64
  69. package/dist/es2019/root/ui/styledSSR.js +93 -0
  70. package/dist/es2019/root/ui/titleBox/failedTitleBox.js +5 -3
  71. package/dist/es2019/root/ui/titleBox/styled.js +2 -1
  72. package/dist/es2019/utils/analytics.js +29 -40
  73. package/dist/es2019/utils/dimensionComparer.js +1 -1
  74. package/dist/es2019/utils/document.js +1 -0
  75. package/dist/es2019/utils/getDataURIDimension.js +8 -0
  76. package/dist/es2019/utils/metadata.js +12 -4
  77. package/dist/es2019/utils/objectURLCache.js +5 -0
  78. package/dist/es2019/utils/resizeModeToMediaImageProps.js +6 -0
  79. package/dist/es2019/utils/shouldDisplayImageThumbnail.js +1 -1
  80. package/dist/es2019/utils/videoSnapshot.js +7 -0
  81. package/dist/es2019/version.json +1 -1
  82. package/dist/esm/errors.js +85 -2
  83. package/dist/esm/files/cardImageView/index.js +55 -87
  84. package/dist/esm/files/index.js +1 -1
  85. package/dist/esm/index.js +3 -3
  86. package/dist/esm/root/card/cardAnalytics.js +23 -18
  87. package/dist/esm/root/card/cardConstants.js +1 -0
  88. package/dist/esm/root/card/cardSSRView.js +92 -0
  89. package/dist/esm/root/card/cardState.js +32 -0
  90. package/dist/esm/root/card/getCardPreview/cache.js +33 -0
  91. package/dist/esm/root/card/getCardPreview/filePreviewStatus.js +35 -0
  92. package/dist/esm/root/card/getCardPreview/helpers.js +194 -0
  93. package/dist/esm/root/card/getCardPreview/index.js +174 -0
  94. package/dist/esm/root/card/getCardStatus.js +13 -17
  95. package/dist/esm/root/card/index.js +349 -401
  96. package/dist/esm/root/cardView.js +105 -52
  97. package/dist/esm/root/index.js +2 -1
  98. package/dist/esm/root/inline/loader.js +23 -22
  99. package/dist/esm/root/inline/{inlineMediaCard.js → mediaInlineCard.js} +62 -22
  100. package/dist/esm/root/inlinePlayer.js +5 -13
  101. package/dist/esm/root/ui/Breakpoint.js +6 -0
  102. package/dist/esm/root/ui/common.js +1 -7
  103. package/dist/esm/root/ui/iconMessage/index.js +12 -7
  104. package/dist/esm/root/ui/imageRenderer/imageRenderer.js +24 -106
  105. package/dist/esm/root/ui/loadingRateLimited/loadingRateLimited.js +1 -1
  106. package/dist/esm/root/ui/progressBar/progressBar.js +1 -1
  107. package/dist/esm/root/ui/progressBar/styled.js +2 -1
  108. package/dist/esm/root/ui/styled.js +13 -61
  109. package/dist/esm/root/ui/styledSSR.js +76 -0
  110. package/dist/esm/root/ui/titleBox/failedTitleBox.js +6 -3
  111. package/dist/esm/root/ui/titleBox/styled.js +2 -1
  112. package/dist/esm/utils/analytics.js +22 -35
  113. package/dist/esm/utils/dimensionComparer.js +1 -1
  114. package/dist/esm/utils/document.js +3 -0
  115. package/dist/esm/utils/getDataURIDimension.js +8 -0
  116. package/dist/esm/utils/metadata.js +12 -4
  117. package/dist/esm/utils/objectURLCache.js +6 -0
  118. package/dist/esm/utils/resizeModeToMediaImageProps.js +6 -0
  119. package/dist/esm/utils/shouldDisplayImageThumbnail.js +1 -1
  120. package/dist/esm/utils/videoSnapshot.js +31 -0
  121. package/dist/esm/version.json +1 -1
  122. package/dist/types/__tests_external__/page-objects/MediaCard.d.ts +4 -3
  123. package/dist/types/errors.d.ts +24 -2
  124. package/dist/types/files/cardImageView/index.d.ts +5 -12
  125. package/dist/types/files/cardImageView/styled.d.ts +1 -1
  126. package/dist/types/files/index.d.ts +1 -1
  127. package/dist/types/index.d.ts +9 -12
  128. package/dist/types/root/card/cardAnalytics.d.ts +5 -7
  129. package/dist/types/root/card/cardConstants.d.ts +1 -0
  130. package/dist/types/root/card/cardSSRView.d.ts +13 -0
  131. package/dist/types/root/card/cardState.d.ts +5 -0
  132. package/dist/types/root/card/getCardPreview/cache.d.ts +18 -0
  133. package/dist/types/root/card/getCardPreview/filePreviewStatus.d.ts +5 -0
  134. package/dist/types/root/card/getCardPreview/helpers.d.ts +9 -0
  135. package/dist/types/root/card/getCardPreview/index.d.ts +44 -0
  136. package/dist/types/root/card/getCardStatus.d.ts +4 -14
  137. package/dist/types/root/card/index.d.ts +17 -21
  138. package/dist/types/root/cardView.d.ts +12 -8
  139. package/dist/types/root/index.d.ts +1 -0
  140. package/dist/types/root/inline/loader.d.ts +8 -8
  141. package/dist/types/root/inline/{inlineMediaCard.d.ts → mediaInlineCard.d.ts} +4 -4
  142. package/dist/types/root/inlinePlayer.d.ts +1 -1
  143. package/dist/types/root/ui/Breakpoint.d.ts +4 -0
  144. package/dist/types/root/ui/common.d.ts +1 -4
  145. package/dist/types/root/ui/iconMessage/index.d.ts +7 -2
  146. package/dist/types/root/ui/iconWrapper/styled.d.ts +1 -1
  147. package/dist/types/root/ui/imageRenderer/imageRenderer.d.ts +2 -16
  148. package/dist/types/root/ui/loadingRateLimited/loadingRateLimited.d.ts +1 -1
  149. package/dist/types/root/ui/loadingRateLimited/styled.d.ts +1 -1
  150. package/dist/types/root/ui/progressBar/progressBar.d.ts +1 -1
  151. package/dist/types/root/ui/progressBar/styled.d.ts +1 -1
  152. package/dist/types/root/ui/styled.d.ts +3 -10
  153. package/dist/types/root/ui/styledSSR.d.ts +16 -0
  154. package/dist/types/root/ui/titleBox/failedTitleBox.d.ts +3 -1
  155. package/dist/types/root/ui/titleBox/styled.d.ts +1 -1
  156. package/dist/types/root/ui/titleBox/titleBox.d.ts +1 -1
  157. package/dist/types/types.d.ts +15 -1
  158. package/dist/types/utils/analytics.d.ts +20 -21
  159. package/dist/types/utils/cardDimensions.d.ts +5 -1
  160. package/dist/types/utils/dimensionComparer.d.ts +1 -1
  161. package/dist/types/utils/document.d.ts +2 -0
  162. package/dist/types/utils/getDataURIDimension.d.ts +3 -1
  163. package/dist/types/utils/index.d.ts +1 -0
  164. package/dist/types/utils/lazyContent/styled.d.ts +1 -1
  165. package/dist/types/utils/lightCards/types.d.ts +1 -1
  166. package/dist/types/utils/metadata.d.ts +2 -2
  167. package/dist/types/utils/objectURLCache.d.ts +2 -1
  168. package/dist/types/utils/resizeModeToMediaImageProps.d.ts +5 -0
  169. package/dist/types/utils/shouldDisplayImageThumbnail.d.ts +1 -1
  170. package/dist/types/utils/videoSnapshot.d.ts +1 -0
  171. package/example-helpers/index.tsx +21 -0
  172. package/package.json +19 -17
  173. package/dist/cjs/root/card/getCardPreview.js +0 -173
  174. package/dist/cjs/utils/fileAttributesContext.js +0 -40
  175. package/dist/es2019/root/card/getCardPreview.js +0 -86
  176. package/dist/es2019/root/inline/inlineMediaCard.js +0 -92
  177. package/dist/es2019/utils/fileAttributesContext.js +0 -19
  178. package/dist/esm/root/card/getCardPreview.js +0 -153
  179. package/dist/esm/utils/fileAttributesContext.js +0 -18
  180. package/dist/types/root/card/getCardPreview.d.ts +0 -8
  181. package/dist/types/utils/fileAttributesContext.d.ts +0 -10
@@ -34,14 +34,97 @@ export var MediaCardError = /*#__PURE__*/function (_Error) {
34
34
 
35
35
  return MediaCardError;
36
36
  }( /*#__PURE__*/_wrapNativeSuper(Error));
37
+ export var LocalPreviewError = /*#__PURE__*/function (_MediaCardError) {
38
+ _inherits(LocalPreviewError, _MediaCardError);
39
+
40
+ var _super2 = _createSuper(LocalPreviewError);
41
+
42
+ function LocalPreviewError(primaryReason, secondaryError) {
43
+ var _this2;
44
+
45
+ _classCallCheck(this, LocalPreviewError);
46
+
47
+ _this2 = _super2.call(this, primaryReason, secondaryError);
48
+ _this2.primaryReason = primaryReason;
49
+ _this2.secondaryError = secondaryError;
50
+ return _this2;
51
+ }
52
+
53
+ return LocalPreviewError;
54
+ }(MediaCardError);
55
+ export var RemotePreviewError = /*#__PURE__*/function (_MediaCardError2) {
56
+ _inherits(RemotePreviewError, _MediaCardError2);
57
+
58
+ var _super3 = _createSuper(RemotePreviewError);
59
+
60
+ function RemotePreviewError(primaryReason, secondaryError) {
61
+ var _this3;
62
+
63
+ _classCallCheck(this, RemotePreviewError);
64
+
65
+ _this3 = _super3.call(this, primaryReason, secondaryError);
66
+ _this3.primaryReason = primaryReason;
67
+ _this3.secondaryError = secondaryError;
68
+ return _this3;
69
+ }
70
+
71
+ return RemotePreviewError;
72
+ }(MediaCardError);
73
+ export var getImageLoadPrimaryReason = function getImageLoadPrimaryReason(source) {
74
+ switch (source) {
75
+ case 'cache-remote':
76
+ return 'cache-remote-uri';
77
+
78
+ case 'cache-local':
79
+ return 'cache-local-uri';
80
+
81
+ case 'external':
82
+ return 'external-uri';
83
+
84
+ case 'local':
85
+ return 'local-uri';
86
+
87
+ case 'remote':
88
+ return 'remote-uri';
89
+ // This fail reason will come from a bug, most likely.
90
+
91
+ default:
92
+ return "unknown-uri";
93
+ }
94
+ };
95
+ export var ImageLoadError = /*#__PURE__*/function (_MediaCardError3) {
96
+ _inherits(ImageLoadError, _MediaCardError3);
97
+
98
+ var _super4 = _createSuper(ImageLoadError);
99
+
100
+ function ImageLoadError(source) {
101
+ _classCallCheck(this, ImageLoadError);
102
+
103
+ return _super4.call(this, getImageLoadPrimaryReason(source));
104
+ }
105
+
106
+ return ImageLoadError;
107
+ }(MediaCardError);
37
108
  export function isMediaCardError(err) {
38
109
  return err instanceof MediaCardError;
39
110
  }
40
111
  export var isLocalPreviewError = function isLocalPreviewError(err) {
41
- return isMediaCardError(err) && err.primaryReason === 'local-preview-get';
42
- }; // In a try/catch statement, the error caught is the type of any.
112
+ return err instanceof LocalPreviewError;
113
+ };
114
+ export var isRemotePreviewError = function isRemotePreviewError(err) {
115
+ return err instanceof RemotePreviewError;
116
+ };
117
+ export var isUnsupportedLocalPreviewError = function isUnsupportedLocalPreviewError(err) {
118
+ return isMediaCardError(err) && err.primaryReason === 'local-preview-unsupported';
119
+ };
120
+ export function isImageLoadError(err) {
121
+ return err instanceof ImageLoadError;
122
+ } // In a try/catch statement, the error caught is the type of any.
43
123
  // We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
44
124
 
45
125
  export var ensureMediaCardError = function ensureMediaCardError(primaryReason, error) {
46
126
  return isMediaCardError(error) ? error : new MediaCardError(primaryReason, error);
127
+ };
128
+ export var isUploadError = function isUploadError(error) {
129
+ return error.primaryReason === 'upload';
47
130
  };
@@ -20,19 +20,17 @@ import { CardLoading } from '../../utils/lightCards/cardLoading';
20
20
  import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
21
21
  import { ProgressBar } from '../../utils/progressBar';
22
22
  import CardActions from '../../utils/cardActions';
23
- import { withAnalyticsEvents } from '@atlaskit/analytics-next';
24
- import { fireMediaCardEvent, RenderEventAction, getRenderSucceededEventPayload, getRenderFailedFileUriPayload, getRenderFailedExternalUriPayload } from '../../utils/analytics';
25
- import { withFileAttributes } from '../../utils/fileAttributesContext';
26
23
  export var fileCardImageViewSelector = 'media-file-card-view';
27
- export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
28
- _inherits(FileCardImageViewBase, _Component);
24
+ export var fileCardImageViewSelectedSelector = 'media-file-card-view-selected';
25
+ export var FileCardImageView = /*#__PURE__*/function (_Component) {
26
+ _inherits(FileCardImageView, _Component);
29
27
 
30
- var _super = _createSuper(FileCardImageViewBase);
28
+ var _super = _createSuper(FileCardImageView);
31
29
 
32
- function FileCardImageViewBase() {
30
+ function FileCardImageView() {
33
31
  var _this;
34
32
 
35
- _classCallCheck(this, FileCardImageViewBase);
33
+ _classCallCheck(this, FileCardImageView);
36
34
 
37
35
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
38
36
  args[_key] = arguments[_key];
@@ -56,7 +54,7 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
56
54
  // immediately, even if there's no image preview
57
55
 
58
56
 
59
- var isZeroSize = fileSize === '' && status === 'processing';
57
+ var isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
60
58
 
61
59
  if (mediaType !== 'video' && !_this.isFileCardImageReadyForDisplay && !isZeroSize) {
62
60
  return _this.renderLoadingContents();
@@ -158,42 +156,18 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
158
156
  })));
159
157
  });
160
158
 
161
- _defineProperty(_assertThisInitialized(_this), "onImageLoad", function () {
162
- var _this$props6 = _this.props,
163
- createAnalyticsEvent = _this$props6.createAnalyticsEvent,
164
- fileAttributes = _this$props6.fileAttributes;
165
-
166
- if (fileAttributes && _this.shouldFireEvent(RenderEventAction.SUCCEEDED)) {
167
- fireMediaCardEvent(getRenderSucceededEventPayload(fileAttributes), createAnalyticsEvent);
168
- }
169
- });
170
-
171
- _defineProperty(_assertThisInitialized(_this), "onImageError", function () {
172
- var fileAttributes = _this.props.fileAttributes;
173
-
174
- if (fileAttributes && _this.shouldFireEvent(RenderEventAction.FAILED)) {
175
- var _this$props7 = _this.props,
176
- createAnalyticsEvent = _this$props7.createAnalyticsEvent,
177
- mediaItemType = _this$props7.mediaItemType;
178
-
179
- if (mediaItemType === 'file') {
180
- fireMediaCardEvent(getRenderFailedFileUriPayload(fileAttributes), createAnalyticsEvent);
181
- } else if (mediaItemType === 'external-image') {
182
- fireMediaCardEvent(getRenderFailedExternalUriPayload(fileAttributes), createAnalyticsEvent);
183
- }
184
- }
185
- });
186
-
187
159
  _defineProperty(_assertThisInitialized(_this), "renderMediaImage", function () {
188
- var _this$props8 = _this.props,
189
- status = _this$props8.status,
190
- mediaItemType = _this$props8.mediaItemType,
191
- dataURI = _this$props8.dataURI,
192
- mediaType = _this$props8.mediaType,
193
- mimeType = _this$props8.mimeType,
194
- previewOrientation = _this$props8.previewOrientation,
195
- onDisplayImage = _this$props8.onDisplayImage,
196
- alt = _this$props8.alt;
160
+ var _this$props6 = _this.props,
161
+ status = _this$props6.status,
162
+ mediaItemType = _this$props6.mediaItemType,
163
+ dataURI = _this$props6.dataURI,
164
+ mediaType = _this$props6.mediaType,
165
+ mimeType = _this$props6.mimeType,
166
+ previewOrientation = _this$props6.previewOrientation,
167
+ onDisplayImage = _this$props6.onDisplayImage,
168
+ alt = _this$props6.alt,
169
+ onImageLoad = _this$props6.onImageLoad,
170
+ onImageError = _this$props6.onImageError;
197
171
 
198
172
  if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
199
173
  return null;
@@ -210,21 +184,17 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
210
184
  crop: _this.isCropped,
211
185
  stretch: _this.isStretched,
212
186
  previewOrientation: previewOrientation,
213
- onImageLoad: _this.onImageLoad,
214
- onImageError: _this.onImageError
187
+ onImageLoad: onImageLoad,
188
+ onImageError: onImageError
215
189
  });
216
190
  });
217
191
 
218
- _defineProperty(_assertThisInitialized(_this), "shouldFireEvent", function (action) {
219
- return !_this.lastAnalyticsAction || _this.lastAnalyticsAction !== action;
220
- });
221
-
222
192
  _defineProperty(_assertThisInitialized(_this), "renderProgressBar", function () {
223
- var _this$props9 = _this.props,
224
- mediaName = _this$props9.mediaName,
225
- progress = _this$props9.progress,
226
- actions = _this$props9.actions,
227
- status = _this$props9.status;
193
+ var _this$props7 = _this.props,
194
+ mediaName = _this$props7.mediaName,
195
+ progress = _this$props7.progress,
196
+ actions = _this$props7.actions,
197
+ status = _this$props7.status;
228
198
 
229
199
  if (status !== 'uploading') {
230
200
  return null;
@@ -243,10 +213,10 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
243
213
  });
244
214
 
245
215
  _defineProperty(_assertThisInitialized(_this), "renderSuccessCardContents", function () {
246
- var _this$props10 = _this.props,
247
- disableOverlay = _this$props10.disableOverlay,
248
- selectable = _this$props10.selectable,
249
- status = _this$props10.status;
216
+ var _this$props8 = _this.props,
217
+ disableOverlay = _this$props8.disableOverlay,
218
+ selectable = _this$props8.selectable,
219
+ status = _this$props8.status;
250
220
  var overlay = null;
251
221
 
252
222
  if (!disableOverlay) {
@@ -267,15 +237,15 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
267
237
  });
268
238
 
269
239
  _defineProperty(_assertThisInitialized(_this), "renderSuccessCardOverlay", function () {
270
- var _this$props11 = _this.props,
271
- status = _this$props11.status,
272
- mediaName = _this$props11.mediaName,
273
- mediaType = _this$props11.mediaType,
274
- fileSize = _this$props11.fileSize,
275
- dataURI = _this$props11.dataURI,
276
- selectable = _this$props11.selectable,
277
- selected = _this$props11.selected,
278
- actions = _this$props11.actions;
240
+ var _this$props9 = _this.props,
241
+ status = _this$props9.status,
242
+ mediaName = _this$props9.mediaName,
243
+ mediaType = _this$props9.mediaType,
244
+ fileSize = _this$props9.fileSize,
245
+ dataURI = _this$props9.dataURI,
246
+ selectable = _this$props9.selectable,
247
+ selected = _this$props9.selected,
248
+ actions = _this$props9.actions;
279
249
  var isPersistent = mediaType === 'doc' || !dataURI;
280
250
  return /*#__PURE__*/React.createElement(CardOverlay, {
281
251
  cardStatus: status,
@@ -292,17 +262,17 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
292
262
  return _this;
293
263
  }
294
264
 
295
- _createClass(FileCardImageViewBase, [{
265
+ _createClass(FileCardImageView, [{
296
266
  key: "render",
297
267
  value: function render() {
298
- var _this$props12 = this.props,
299
- disableOverlay = _this$props12.disableOverlay,
300
- selectable = _this$props12.selectable,
301
- selected = _this$props12.selected,
302
- mediaType = _this$props12.mediaType,
303
- progress = _this$props12.progress,
304
- status = _this$props12.status,
305
- mediaName = _this$props12.mediaName;
268
+ var _this$props10 = this.props,
269
+ disableOverlay = _this$props10.disableOverlay,
270
+ selectable = _this$props10.selectable,
271
+ selected = _this$props10.selected,
272
+ mediaType = _this$props10.mediaType,
273
+ progress = _this$props10.progress,
274
+ status = _this$props10.status,
275
+ mediaName = _this$props10.mediaName;
306
276
  return /*#__PURE__*/React.createElement(Wrapper, {
307
277
  "data-testid": "media-file-card-view",
308
278
  "data-test-media-name": mediaName,
@@ -313,16 +283,16 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
313
283
  selectable: selectable,
314
284
  selected: selected,
315
285
  mediaType: mediaType,
316
- className: fileCardImageViewSelector
286
+ className: "".concat(fileCardImageViewSelector, " ").concat(selected ? fileCardImageViewSelectedSelector : '')
317
287
  }, this.renderCardContents());
318
288
  }
319
289
  }, {
320
290
  key: "isFileCardImageReadyForDisplay",
321
291
  get: function get() {
322
- var _this$props13 = this.props,
323
- dataURI = _this$props13.dataURI,
324
- status = _this$props13.status;
325
- return !!dataURI || !['loading', 'processing'].includes(status);
292
+ var _this$props11 = this.props,
293
+ dataURI = _this$props11.dataURI,
294
+ status = _this$props11.status;
295
+ return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
326
296
  }
327
297
  }, {
328
298
  key: "isCropped",
@@ -338,12 +308,10 @@ export var FileCardImageViewBase = /*#__PURE__*/function (_Component) {
338
308
  }
339
309
  }]);
340
310
 
341
- return FileCardImageViewBase;
311
+ return FileCardImageView;
342
312
  }(Component);
343
313
 
344
- _defineProperty(FileCardImageViewBase, "defaultProps", {
314
+ _defineProperty(FileCardImageView, "defaultProps", {
345
315
  resizeMode: 'crop',
346
316
  disableOverlay: false
347
- });
348
-
349
- export var FileCardImageView = withAnalyticsEvents()(withFileAttributes(FileCardImageViewBase));
317
+ });
@@ -1 +1 @@
1
- export { FileCardImageView, FileCardImageViewBase } from './cardImageView';
1
+ export { FileCardImageView } from './cardImageView';
package/dist/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
- export { default as Card } from './root/card/cardLoader';
1
+ export { Card, MediaInlineCard } from './root';
2
2
  export { CardLoading } from './utils/lightCards/cardLoading';
3
3
  export { CardError } from './utils/lightCards/cardError';
4
4
  export { defaultImageCardDimensions } from './utils/cardDimensions';
5
- export { fileCardImageViewSelector } from './files/cardImageView';
5
+ export { fileCardImageViewSelector, fileCardImageViewSelectedSelector } from './files/cardImageView';
6
6
  export { inlinePlayerClassName } from './root/inlinePlayer';
7
- export { newFileExperienceClassName } from './root/cardView';
7
+ export { newFileExperienceClassName } from './root/card/cardConstants';
@@ -1,33 +1,38 @@
1
- import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload } from '../../utils/analytics';
2
- export var relevantFeatureFlagNames = ['newCardExperience', 'poll_intervalMs', 'poll_maxAttempts', 'poll_backoffFactor', 'poll_maxIntervalMs', 'captions'];
3
- export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes) {
4
- var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
5
- cardPreview = _ref.cardPreview,
6
- error = _ref.error;
7
-
1
+ import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../../utils/analytics';
2
+ export var relevantFeatureFlagNames = ['newCardExperience', 'captions'];
3
+ export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, error) {
8
4
  var fireEvent = function fireEvent(payload) {
9
5
  return fireMediaCardEvent(payload, createAnalyticsEvent);
10
6
  };
11
7
 
12
8
  switch (status) {
13
9
  case 'complete':
14
- /**
15
- * A Card that is considered Complete and has no preview,
16
- * reflects an expected behaviour, and thus a legitimate
17
- * success case to be logged.
18
- */
19
- if (!(cardPreview !== null && cardPreview !== void 0 && cardPreview.dataURI)) {
20
- fireEvent(getRenderSucceededEventPayload(fileAttributes));
21
- }
22
-
10
+ fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes));
23
11
  break;
24
12
 
25
13
  case 'failed-processing':
26
- fireEvent(getRenderFailedFileStatusPayload(fileAttributes));
14
+ fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes));
27
15
  break;
28
16
 
29
17
  case 'error':
30
- error && fireEvent(getRenderErrorEventPayload(fileAttributes, error));
18
+ error && fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error));
31
19
  break;
32
20
  }
21
+ };
22
+ export var fireCommencedEvent = function fireCommencedEvent(createAnalyticsEvent, fileAttributes, performanceAttributes) {
23
+ fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
24
+ };
25
+ export var fireCopiedEvent = function fireCopiedEvent(createAnalyticsEvent, fileId, cardRef) {
26
+ if (typeof window.getSelection === 'function') {
27
+ var _selection$containsNo;
28
+
29
+ var selection = window.getSelection();
30
+
31
+ if (selection !== null && selection !== void 0 && (_selection$containsNo = selection.containsNode) !== null && _selection$containsNo !== void 0 && _selection$containsNo.call(selection, cardRef, true)) {
32
+ fireMediaCardEvent(getCopiedFilePayload(fileId), createAnalyticsEvent);
33
+ }
34
+ }
35
+ };
36
+ export var fireScreenEvent = function fireScreenEvent(createAnalyticsEvent, fileAttributes) {
37
+ fireMediaCardEvent(getRenderPreviewableCardPayload(fileAttributes), createAnalyticsEvent);
33
38
  };
@@ -0,0 +1 @@
1
+ export var newFileExperienceClassName = 'new-file-experience-wrapper';
@@ -0,0 +1,92 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+
3
+ /*
4
+ * This file is designed to be optimised for maximum performance.
5
+ * Because of this the imports are optimised to import only what is required
6
+ * If you're adding a new dependency please ensure that the
7
+ * imported file only contains and depends on only what is required for it to function.
8
+ */
9
+ import React from 'react';
10
+ import { imageResizeModeToFileImageMode } from '@atlaskit/media-client';
11
+ import { MediaImage } from '@atlaskit/media-ui';
12
+ import SpinnerIcon from '@atlaskit/spinner';
13
+ import { getRequestedDimensions } from '../../utils/getDataURIDimension';
14
+ import { defaultImageCardDimensions } from '../../utils/cardDimensions';
15
+ import { IconWrapper } from '../ui/iconWrapper/styled';
16
+ import { SSRFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from '../ui/styledSSR';
17
+ import { Blanket } from '../ui/blanket/styled';
18
+ import { newFileExperienceClassName } from './cardConstants';
19
+ import { resizeModeToMediaImageProps } from '../../utils/resizeModeToMediaImageProps';
20
+ export var CardSSRView = function CardSSRView(_ref) {
21
+ var identifier = _ref.identifier,
22
+ dimensions = _ref.dimensions,
23
+ mediaClient = _ref.mediaClient,
24
+ resizeMode = _ref.resizeMode,
25
+ disableOverlay = _ref.disableOverlay,
26
+ isLazy = _ref.isLazy;
27
+ var dataURI;
28
+
29
+ try {
30
+ var _getRequestedDimensio = getRequestedDimensions({
31
+ dimensions: dimensions
32
+ }),
33
+ width = _getRequestedDimensio.width,
34
+ height = _getRequestedDimensio.height;
35
+
36
+ var mode = imageResizeModeToFileImageMode(resizeMode);
37
+ dataURI = mediaClient.getImageUrlSync(identifier.id, {
38
+ collection: identifier.collectionName,
39
+ mode: mode,
40
+ width: width,
41
+ height: height,
42
+ allowAnimated: true
43
+ });
44
+ } catch (e) {
45
+ // if we are unable to get the image url (eg missing auth) we want to continue rendering with a spinner
46
+ dataURI = '';
47
+ }
48
+
49
+ var shouldDisplayBackground = !dataURI || !disableOverlay;
50
+ return /*#__PURE__*/React.createElement(SSRFileExperienceWrapper, {
51
+ className: newFileExperienceClassName,
52
+ dimensions: dimensions,
53
+ breakpoint: calculateBreakpoint(dimensions),
54
+ shouldUsePointerCursor: Boolean(dataURI),
55
+ displayBackground: shouldDisplayBackground,
56
+ disableOverlay: !!disableOverlay,
57
+ selected: false,
58
+ "data-testid": "media-card-view"
59
+ }, /*#__PURE__*/React.createElement(CardImageContainer, {
60
+ className: "media-file-card-view",
61
+ "data-testid": "media-file-card-view"
62
+ }, /*#__PURE__*/React.createElement(IconWrapper, {
63
+ breakpoint: calculateBreakpoint(dimensions),
64
+ hasTitleBox: false
65
+ }, /*#__PURE__*/React.createElement(SpinnerIcon, null)), !!dataURI && /*#__PURE__*/React.createElement(MediaImage, _extends({
66
+ dataURI: dataURI // alt={alt} // having alt text causes the image to fail to render with a broken image.
67
+ // onImageLoad={this.onImageLoad} // TODO add these back as part of tracking performance.
68
+ // onImageError={this.onImageError}
69
+
70
+ }, resizeModeToMediaImageProps(resizeMode), {
71
+ loading: getLazyValue(isLazy)
72
+ })), !disableOverlay && /*#__PURE__*/React.createElement(Blanket, {
73
+ isFixed: false
74
+ })));
75
+ };
76
+
77
+ function getLazyValue(isLazy) {
78
+ switch (isLazy) {
79
+ case false:
80
+ return 'eager';
81
+
82
+ default:
83
+ return 'lazy';
84
+ }
85
+ }
86
+
87
+ function calculateBreakpoint(dimensions) {
88
+ var _dimensions$width;
89
+
90
+ var width = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : defaultImageCardDimensions.width;
91
+ return calcBreakpointSize(parseInt("".concat(width), 10));
92
+ }
@@ -0,0 +1,32 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+
3
+ 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; }
4
+
5
+ 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) { _defineProperty(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; }
6
+
7
+ import { isErrorFileState } from '@atlaskit/media-client';
8
+ import { MediaCardError } from '../../errors';
9
+ import { getCardStatus, isFinalCardStatus } from './getCardStatus';
10
+ import { extractFilePreviewStatus } from './getCardPreview';
11
+ export var createStateUpdater = function createStateUpdater(newState) {
12
+ return function (prevState) {
13
+ // Only override if previous status is non-final
14
+ // or new status is 'complete'
15
+ if (isFinalCardStatus(prevState.status) && newState.status !== 'complete') {
16
+ return prevState;
17
+ }
18
+
19
+ return _objectSpread(_objectSpread({}, prevState), newState);
20
+ };
21
+ };
22
+ export var getCardStateFromFileState = function getCardStateFromFileState(fileState, isBannedLocalPreview, featureFlags) {
23
+ var status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
24
+ var error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
25
+ var progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
26
+ return {
27
+ fileState: fileState,
28
+ status: status,
29
+ progress: progress,
30
+ error: error
31
+ };
32
+ };
@@ -0,0 +1,33 @@
1
+ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ import { createObjectURLCache } from '../../../utils/objectURLCache';
4
+ // Dimensions are used to create a key.
5
+ // Cache is invalidated when different dimensions are provided.
6
+ export var getCacheKey = function getCacheKey(id, dimensions) {
7
+ return [id, dimensions.height, dimensions.width].join('-');
8
+ };
9
+ export var CardPreviewCacheImpl = function CardPreviewCacheImpl(previewCache) {
10
+ var _this = this;
11
+
12
+ _classCallCheck(this, CardPreviewCacheImpl);
13
+
14
+ _defineProperty(this, "get", function (id, dimensions) {
15
+ var cacheKey = getCacheKey(id, dimensions);
16
+ return _this.previewCache.get(cacheKey);
17
+ });
18
+
19
+ _defineProperty(this, "set", function (id, dimensions, cardPreview) {
20
+ var cacheKey = getCacheKey(id, dimensions);
21
+
22
+ _this.previewCache.set(cacheKey, cardPreview);
23
+ });
24
+
25
+ _defineProperty(this, "remove", function (id, dimensions) {
26
+ var cacheKey = getCacheKey(id, dimensions);
27
+
28
+ _this.previewCache.remove(cacheKey);
29
+ });
30
+
31
+ this.previewCache = previewCache;
32
+ };
33
+ export default new CardPreviewCacheImpl(createObjectURLCache());
@@ -0,0 +1,35 @@
1
+ import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
2
+ import { isPreviewableFileState, isPreviewableType, isImageRepresentationReady } from '@atlaskit/media-client';
3
+ import { isSupportedLocalPreview } from './helpers'; // TODO: align these checks with helpers from Media Client
4
+ // https://product-fabric.atlassian.net/browse/BMPT-1300
5
+
6
+ export var extractFilePreviewStatus = function extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags) {
7
+ var hasFilesize = 'size' in fileState && !!fileState.size;
8
+
9
+ var _ref = 'mediaType' in fileState && fileState || {},
10
+ mediaType = _ref.mediaType;
11
+
12
+ var _ref2 = 'mimeType' in fileState && fileState || {},
13
+ mimeType = _ref2.mimeType;
14
+
15
+ var isPreviewable = !!mediaType && isPreviewableType(mediaType, featureFlags); // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
16
+ // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
17
+ // Then, local Preview NOT available
18
+
19
+ var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState(fileState) && isSupportedLocalPreview(mediaType) && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
20
+ var hasRemotePreview = isImageRepresentationReady(fileState);
21
+ var hasPreview = hasLocalPreview || hasRemotePreview;
22
+ var isSupportedByBrowser = !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
23
+ return {
24
+ hasFilesize: hasFilesize,
25
+ isPreviewable: isPreviewable,
26
+ hasPreview: hasPreview,
27
+ isSupportedByBrowser: isSupportedByBrowser
28
+ };
29
+ };
30
+ export var isPreviewableStatus = function isPreviewableStatus(cardStatus, _ref3) {
31
+ var isPreviewable = _ref3.isPreviewable,
32
+ hasPreview = _ref3.hasPreview,
33
+ isSupportedByBrowser = _ref3.isSupportedByBrowser;
34
+ return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' || cardStatus === 'processing' && isSupportedByBrowser);
35
+ };