@atlaskit/media-card 70.11.0 → 73.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 (197) hide show
  1. package/CHANGELOG.md +104 -0
  2. package/dist/cjs/errors.js +78 -5
  3. package/dist/cjs/files/cardImageView/cardOverlay/styled.js +1 -1
  4. package/dist/cjs/files/cardImageView/index.js +53 -104
  5. package/dist/cjs/files/cardImageView/styled.js +1 -1
  6. package/dist/cjs/files/index.js +0 -6
  7. package/dist/cjs/index.js +12 -6
  8. package/dist/cjs/root/card/cardAnalytics.js +11 -17
  9. package/dist/cjs/root/card/cardLoader.js +66 -124
  10. package/dist/cjs/root/card/cardState.js +50 -0
  11. package/dist/cjs/root/card/getCardPreview/cache.js +6 -1
  12. package/dist/cjs/root/card/getCardPreview/filePreviewStatus.js +53 -0
  13. package/dist/cjs/root/card/getCardPreview/helpers.js +14 -22
  14. package/dist/cjs/root/card/getCardPreview/index.js +176 -102
  15. package/dist/cjs/root/card/getCardStatus.js +7 -1
  16. package/dist/cjs/root/card/index.js +361 -281
  17. package/dist/cjs/root/cardView.js +109 -86
  18. package/dist/cjs/root/index.js +9 -1
  19. package/dist/cjs/root/inline/loader.js +22 -21
  20. package/dist/cjs/root/inline/{inlineMediaCard.js → mediaInlineCard.js} +84 -26
  21. package/dist/cjs/root/inlinePlayer.js +4 -3
  22. package/dist/cjs/root/styled.js +7 -3
  23. package/dist/cjs/root/ui/actionsBar/styled.js +1 -1
  24. package/dist/cjs/root/ui/blanket/styled.js +1 -1
  25. package/dist/cjs/root/ui/common.js +11 -5
  26. package/dist/cjs/root/ui/iconMessage/index.js +16 -7
  27. package/dist/cjs/root/ui/iconWrapper/styled.js +1 -1
  28. package/dist/cjs/root/ui/imageRenderer/imageRenderer.js +34 -124
  29. package/dist/cjs/root/ui/loadingRateLimited/loadingRateLimited.js +6 -4
  30. package/dist/cjs/root/ui/loadingRateLimited/styled.js +1 -1
  31. package/dist/cjs/root/ui/playButton/styled.js +1 -1
  32. package/dist/cjs/root/ui/progressBar/progressBar.js +2 -2
  33. package/dist/cjs/root/ui/progressBar/styled.js +2 -4
  34. package/dist/cjs/root/ui/styled.js +80 -17
  35. package/dist/cjs/root/ui/tickBox/styled.js +1 -1
  36. package/dist/cjs/root/ui/titleBox/failedTitleBox.js +9 -3
  37. package/dist/cjs/root/ui/titleBox/styled.js +2 -4
  38. package/dist/cjs/root/ui/titleBox/titleBox.js +2 -2
  39. package/dist/cjs/styles/index.js +25 -23
  40. package/dist/cjs/styles/mixins.js +1 -1
  41. package/dist/cjs/utils/analytics.js +21 -43
  42. package/dist/cjs/utils/breakpoint.js +1 -1
  43. package/dist/cjs/utils/cardActions/cardActionsDropdownMenu.js +16 -9
  44. package/dist/cjs/utils/cardActions/index.js +10 -10
  45. package/dist/cjs/utils/cardActions/styled.js +1 -1
  46. package/dist/cjs/utils/cardDimensions.js +1 -1
  47. package/dist/cjs/utils/dimensionComparer.js +1 -1
  48. package/dist/cjs/utils/getErrorMessage.js +2 -2
  49. package/dist/cjs/utils/index.js +46 -46
  50. package/dist/cjs/utils/lightCards/styled.js +1 -1
  51. package/dist/cjs/utils/metadata.js +11 -3
  52. package/dist/cjs/utils/objectURLCache.js +7 -1
  53. package/dist/cjs/utils/shouldDisplayImageThumbnail.js +1 -1
  54. package/dist/cjs/utils/viewportDetector.js +1 -1
  55. package/dist/cjs/version.json +1 -1
  56. package/dist/es2019/errors.js +42 -2
  57. package/dist/es2019/files/cardImageView/index.js +8 -61
  58. package/dist/es2019/files/index.js +1 -1
  59. package/dist/es2019/index.js +1 -1
  60. package/dist/es2019/root/card/cardAnalytics.js +7 -15
  61. package/dist/es2019/root/card/cardLoader.js +47 -53
  62. package/dist/es2019/root/card/cardState.js +26 -0
  63. package/dist/es2019/root/card/getCardPreview/cache.js +5 -0
  64. package/dist/es2019/root/card/getCardPreview/filePreviewStatus.js +38 -0
  65. package/dist/es2019/root/card/getCardPreview/helpers.js +2 -12
  66. package/dist/es2019/root/card/getCardPreview/index.js +112 -79
  67. package/dist/es2019/root/card/getCardStatus.js +1 -0
  68. package/dist/es2019/root/card/index.js +285 -190
  69. package/dist/es2019/root/cardView.js +93 -68
  70. package/dist/es2019/root/index.js +2 -1
  71. package/dist/es2019/root/inline/loader.js +16 -15
  72. package/dist/es2019/root/inline/mediaInlineCard.js +143 -0
  73. package/dist/es2019/root/inlinePlayer.js +3 -2
  74. package/dist/es2019/root/styled.js +2 -1
  75. package/dist/es2019/root/ui/common.js +7 -1
  76. package/dist/es2019/root/ui/iconMessage/index.js +8 -5
  77. package/dist/es2019/root/ui/imageRenderer/imageRenderer.js +25 -88
  78. package/dist/es2019/root/ui/loadingRateLimited/loadingRateLimited.js +4 -3
  79. package/dist/es2019/root/ui/progressBar/progressBar.js +1 -1
  80. package/dist/es2019/root/ui/progressBar/styled.js +1 -2
  81. package/dist/es2019/root/ui/styled.js +64 -3
  82. package/dist/es2019/root/ui/titleBox/failedTitleBox.js +6 -3
  83. package/dist/es2019/root/ui/titleBox/styled.js +1 -2
  84. package/dist/es2019/root/ui/titleBox/titleBox.js +1 -1
  85. package/dist/es2019/utils/analytics.js +15 -34
  86. package/dist/es2019/utils/cardActions/cardActionsDropdownMenu.js +8 -4
  87. package/dist/es2019/utils/dimensionComparer.js +1 -1
  88. package/dist/es2019/utils/getErrorMessage.js +1 -1
  89. package/dist/es2019/utils/metadata.js +12 -4
  90. package/dist/es2019/utils/objectURLCache.js +5 -0
  91. package/dist/es2019/utils/shouldDisplayImageThumbnail.js +1 -1
  92. package/dist/es2019/version.json +1 -1
  93. package/dist/esm/errors.js +60 -1
  94. package/dist/esm/files/cardImageView/index.js +51 -102
  95. package/dist/esm/files/index.js +1 -1
  96. package/dist/esm/index.js +1 -1
  97. package/dist/esm/root/card/cardAnalytics.js +7 -16
  98. package/dist/esm/root/card/cardLoader.js +66 -126
  99. package/dist/esm/root/card/cardState.js +32 -0
  100. package/dist/esm/root/card/getCardPreview/cache.js +6 -0
  101. package/dist/esm/root/card/getCardPreview/filePreviewStatus.js +38 -0
  102. package/dist/esm/root/card/getCardPreview/helpers.js +13 -21
  103. package/dist/esm/root/card/getCardPreview/index.js +142 -95
  104. package/dist/esm/root/card/getCardStatus.js +3 -0
  105. package/dist/esm/root/card/index.js +370 -284
  106. package/dist/esm/root/cardView.js +109 -84
  107. package/dist/esm/root/index.js +2 -1
  108. package/dist/esm/root/inline/loader.js +23 -22
  109. package/dist/esm/root/inline/mediaInlineCard.js +156 -0
  110. package/dist/esm/root/inlinePlayer.js +3 -2
  111. package/dist/esm/root/styled.js +3 -2
  112. package/dist/esm/root/ui/common.js +7 -1
  113. package/dist/esm/root/ui/iconMessage/index.js +10 -5
  114. package/dist/esm/root/ui/imageRenderer/imageRenderer.js +27 -118
  115. package/dist/esm/root/ui/loadingRateLimited/loadingRateLimited.js +4 -3
  116. package/dist/esm/root/ui/progressBar/progressBar.js +1 -1
  117. package/dist/esm/root/ui/progressBar/styled.js +1 -2
  118. package/dist/esm/root/ui/styled.js +61 -13
  119. package/dist/esm/root/ui/titleBox/failedTitleBox.js +7 -3
  120. package/dist/esm/root/ui/titleBox/styled.js +1 -2
  121. package/dist/esm/root/ui/titleBox/titleBox.js +1 -1
  122. package/dist/esm/utils/analytics.js +16 -35
  123. package/dist/esm/utils/cardActions/cardActionsDropdownMenu.js +16 -9
  124. package/dist/esm/utils/dimensionComparer.js +1 -1
  125. package/dist/esm/utils/getErrorMessage.js +1 -1
  126. package/dist/esm/utils/metadata.js +12 -4
  127. package/dist/esm/utils/objectURLCache.js +6 -0
  128. package/dist/esm/utils/shouldDisplayImageThumbnail.js +1 -1
  129. package/dist/esm/version.json +1 -1
  130. package/dist/types/errors.d.ts +15 -1
  131. package/dist/types/files/cardImageView/index.d.ts +4 -13
  132. package/dist/types/files/cardImageView/styled.d.ts +1 -1
  133. package/dist/types/files/index.d.ts +1 -1
  134. package/dist/types/index.d.ts +7 -5
  135. package/dist/types/root/card/cardAnalytics.d.ts +2 -6
  136. package/dist/types/root/card/cardLoader.d.ts +5 -19
  137. package/dist/types/root/card/cardState.d.ts +5 -0
  138. package/dist/types/root/card/getCardPreview/cache.d.ts +3 -1
  139. package/dist/types/root/card/getCardPreview/filePreviewStatus.d.ts +5 -0
  140. package/dist/types/root/card/getCardPreview/helpers.d.ts +3 -4
  141. package/dist/types/root/card/getCardPreview/index.d.ts +24 -14
  142. package/dist/types/root/card/getCardStatus.d.ts +1 -0
  143. package/dist/types/root/card/index.d.ts +19 -18
  144. package/dist/types/root/cardView.d.ts +13 -8
  145. package/dist/types/root/index.d.ts +1 -0
  146. package/dist/types/root/inline/loader.d.ts +8 -8
  147. package/dist/types/root/inline/{inlineMediaCard.d.ts → mediaInlineCard.d.ts} +4 -6
  148. package/dist/types/root/inlinePlayer.d.ts +1 -1
  149. package/dist/types/root/styled.d.ts +1 -0
  150. package/dist/types/root/ui/common.d.ts +4 -1
  151. package/dist/types/root/ui/iconMessage/index.d.ts +4 -3
  152. package/dist/types/root/ui/iconWrapper/styled.d.ts +1 -1
  153. package/dist/types/root/ui/imageRenderer/imageRenderer.d.ts +5 -15
  154. package/dist/types/root/ui/loadingRateLimited/loadingRateLimited.d.ts +2 -1
  155. package/dist/types/root/ui/loadingRateLimited/styled.d.ts +1 -1
  156. package/dist/types/root/ui/playButton/playButton.d.ts +1 -0
  157. package/dist/types/root/ui/progressBar/progressBar.d.ts +2 -1
  158. package/dist/types/root/ui/progressBar/styled.d.ts +1 -1
  159. package/dist/types/root/ui/styled.d.ts +10 -3
  160. package/dist/types/root/ui/tickBox/tickBox.d.ts +1 -0
  161. package/dist/types/root/ui/titleBox/failedTitleBox.d.ts +3 -1
  162. package/dist/types/root/ui/titleBox/styled.d.ts +1 -1
  163. package/dist/types/root/ui/titleBox/titleBox.d.ts +2 -10
  164. package/dist/types/styles/mixins.d.ts +1 -1
  165. package/dist/types/types.d.ts +7 -1
  166. package/dist/types/utils/analytics.d.ts +14 -15
  167. package/dist/types/utils/cardDimensions.d.ts +4 -4
  168. package/dist/types/utils/dimensionComparer.d.ts +1 -1
  169. package/dist/types/utils/getErrorMessage.d.ts +1 -0
  170. package/dist/types/utils/metadata.d.ts +2 -2
  171. package/dist/types/utils/objectURLCache.d.ts +2 -1
  172. package/example-helpers/developmentUseMessage.tsx +14 -0
  173. package/example-helpers/index.tsx +55 -4
  174. package/example-helpers/selectableCard.tsx +2 -1
  175. package/package.json +20 -16
  176. package/dist/cjs/root/card/cardSSRView.js +0 -99
  177. package/dist/cjs/root/card/getCardPreview/types.js +0 -5
  178. package/dist/cjs/root/ui/Breakpoint.js +0 -13
  179. package/dist/cjs/root/ui/styledSSR.js +0 -108
  180. package/dist/cjs/utils/fileAttributesContext.js +0 -40
  181. package/dist/es2019/root/card/cardSSRView.js +0 -79
  182. package/dist/es2019/root/card/getCardPreview/types.js +0 -1
  183. package/dist/es2019/root/inline/inlineMediaCard.js +0 -92
  184. package/dist/es2019/root/ui/Breakpoint.js +0 -6
  185. package/dist/es2019/root/ui/styledSSR.js +0 -93
  186. package/dist/es2019/utils/fileAttributesContext.js +0 -19
  187. package/dist/esm/root/card/cardSSRView.js +0 -78
  188. package/dist/esm/root/card/getCardPreview/types.js +0 -1
  189. package/dist/esm/root/inline/inlineMediaCard.js +0 -100
  190. package/dist/esm/root/ui/Breakpoint.js +0 -6
  191. package/dist/esm/root/ui/styledSSR.js +0 -76
  192. package/dist/esm/utils/fileAttributesContext.js +0 -18
  193. package/dist/types/root/card/cardSSRView.d.ts +0 -12
  194. package/dist/types/root/card/getCardPreview/types.d.ts +0 -5
  195. package/dist/types/root/ui/Breakpoint.d.ts +0 -4
  196. package/dist/types/root/ui/styledSSR.d.ts +0 -16
  197. package/dist/types/utils/fileAttributesContext.d.ts +0 -10
@@ -1,108 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.calcBreakpointSize = exports.CardImageContainer = exports.getWrapperDimensions = exports.SSRFileExperienceWrapper = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _consts = require("@atlaskit/editor-shared-styles/consts");
17
-
18
- var _colors = require("@atlaskit/theme/colors");
19
-
20
- var _constants = require("@atlaskit/theme/constants");
21
-
22
- var _selection = require("@atlaskit/editor-shared-styles/selection");
23
-
24
- var _mediaUi = require("@atlaskit/media-ui");
25
-
26
- var _styles = require("../../styles");
27
-
28
- var _cardDimensions = require("../../utils/cardDimensions");
29
-
30
- var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
31
-
32
- var _styled = require("./blanket/styled");
33
-
34
- var _common = require("./common");
35
-
36
- var _Breakpoint = require("./Breakpoint");
37
-
38
- var _templateObject, _templateObject2;
39
-
40
- var SSRFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n &:hover .", " {\n ", "\n }\n"])), function (_ref) {
41
- var breakpoint = _ref.breakpoint,
42
- dimensions = _ref.dimensions,
43
- appearance = _ref.appearance,
44
- shouldUsePointerCursor = _ref.shouldUsePointerCursor,
45
- displayBackground = _ref.displayBackground,
46
- disableOverlay = _ref.disableOverlay,
47
- selected = _ref.selected;
48
- return "\n ".concat((0, _styles.transition)(), "\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n position: relative;\n font-family: ").concat((0, _constants.fontFamily)(), ";\n ").concat(getWrapperDimensions(dimensions, appearance), "\n ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n ").concat(_mediaUi.borderRadius, "\n ").concat(getCursorStyle(shouldUsePointerCursor), "\n ").concat(generateResponsiveStyles(breakpoint), "\n ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n ").concat(getWrapperShadow(disableOverlay, selected), "\n ");
49
- }, _styled.blanketClassName, _styled.fixedBlanketStyles);
50
-
51
- exports.SSRFileExperienceWrapper = SSRFileExperienceWrapper;
52
- SSRFileExperienceWrapper.displayName = 'SSRFileExperienceWrapper';
53
-
54
- var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
55
- var _ref2 = dimensions || {},
56
- width = _ref2.width,
57
- height = _ref2.height;
58
-
59
- var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
60
- defaultWidth = _getDefaultCardDimens.width,
61
- defaultHeight = _getDefaultCardDimens.height;
62
-
63
- return "\n width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n max-width: 100%;\n height: ").concat((0, _getCSSUnitValue.getCSSUnitValue)(height || defaultHeight), ";\n max-height: 100%;\n ");
64
- };
65
-
66
- exports.getWrapperDimensions = getWrapperDimensions;
67
-
68
- var generateResponsiveStyles = function generateResponsiveStyles() {
69
- var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _Breakpoint.Breakpoint.SMALL;
70
- var setting = _common.responsiveSettings[breakpoint];
71
- return "\n font-size: ".concat(setting.fontSize, "px;\n line-height: ").concat(setting.lineHeight, "px;\n ");
72
- };
73
-
74
- var getCursorStyle = function getCursorStyle(shouldUsePointerCursor) {
75
- return "cursor: ".concat(shouldUsePointerCursor ? 'pointer' : 'default', ";");
76
- }; // This is a trick to simulate the blue border without affecting the dimensions.
77
- // CSS outline has no 'radius', therefore we can't achieve the same effect with it
78
-
79
-
80
- var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
81
- var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
82
- var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
83
- var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
84
- return shadow ? "box-shadow: ".concat(shadow, ";") : '';
85
- };
86
-
87
- var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n max-width: 100%;\n width: 100%;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"])), _mediaUi.borderRadius);
88
-
89
- exports.CardImageContainer = CardImageContainer;
90
- var breakpointSizes = [[_Breakpoint.Breakpoint.SMALL, 599], [_Breakpoint.Breakpoint.LARGE, Infinity]];
91
-
92
- var calcBreakpointSize = function calcBreakpointSize() {
93
- var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
94
-
95
- var _ref3 = breakpointSizes.find(function (_ref5) {
96
- var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
97
- _breakpoint = _ref6[0],
98
- limit = _ref6[1];
99
-
100
- return wrapperWidth <= limit;
101
- }) || [_Breakpoint.Breakpoint.SMALL],
102
- _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
103
- breakpoint = _ref4[0];
104
-
105
- return breakpoint;
106
- };
107
-
108
- exports.calcBreakpointSize = calcBreakpointSize;
@@ -1,40 +0,0 @@
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.withFileAttributes = withFileAttributes;
11
- exports.FileAttributesProvider = void 0;
12
-
13
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
14
-
15
- var _react = _interopRequireWildcard(require("react"));
16
-
17
- 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); }
18
-
19
- 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; }
20
-
21
- var FileAttributesContext = /*#__PURE__*/_react.default.createContext(null);
22
-
23
- var FileAttributesProvider = function FileAttributesProvider(_ref) {
24
- var children = _ref.children,
25
- data = _ref.data;
26
- return data ? /*#__PURE__*/_react.default.createElement(FileAttributesContext.Provider, {
27
- value: data
28
- }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
29
- };
30
-
31
- exports.FileAttributesProvider = FileAttributesProvider;
32
-
33
- function withFileAttributes(Component) {
34
- return function (props) {
35
- var fileAttributes = (0, _react.useContext)(FileAttributesContext);
36
- return fileAttributes ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
37
- fileAttributes: fileAttributes
38
- })) : /*#__PURE__*/_react.default.createElement(Component, props);
39
- };
40
- }
@@ -1,79 +0,0 @@
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 { MediaImage } from '@atlaskit/media-ui';
11
- import SpinnerIcon from '@atlaskit/spinner';
12
- import { getRequestedDimensions } from '../../utils/getDataURIDimension';
13
- import { defaultImageCardDimensions } from '../../utils/cardDimensions';
14
- import { IconWrapper } from '../ui/iconWrapper/styled';
15
- import { SSRFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from '../ui/styledSSR';
16
- import { Blanket } from '../ui/blanket/styled';
17
- import { newFileExperienceClassName } from './cardConstants';
18
- import { resizeModeToMediaImageProps } from '../../utils/resizeModeToMediaImageProps';
19
- export const CardSSRView = ({
20
- identifier,
21
- dimensions,
22
- mediaClient,
23
- resizeMode,
24
- disableOverlay
25
- }) => {
26
- let dataURI;
27
-
28
- try {
29
- const {
30
- width,
31
- height
32
- } = getRequestedDimensions({
33
- dimensions
34
- });
35
- const mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
36
- dataURI = mediaClient.getImageUrlSync(identifier.id, {
37
- collection: identifier.collectionName,
38
- mode,
39
- width,
40
- height,
41
- allowAnimated: true
42
- });
43
- } catch (e) {
44
- // if we are unable to get the image url (eg missing auth) we want to continue rendering with a spinner
45
- dataURI = '';
46
- }
47
-
48
- const shouldDisplayBackground = !dataURI || !disableOverlay;
49
- return /*#__PURE__*/React.createElement(SSRFileExperienceWrapper, {
50
- className: newFileExperienceClassName,
51
- dimensions: dimensions,
52
- breakpoint: calculateBreakpoint(dimensions),
53
- shouldUsePointerCursor: Boolean(dataURI),
54
- displayBackground: shouldDisplayBackground,
55
- disableOverlay: disableOverlay,
56
- selected: false,
57
- "data-testid": "media-card-view"
58
- }, /*#__PURE__*/React.createElement(CardImageContainer, {
59
- className: "media-file-card-view",
60
- "data-testid": "media-file-card-view"
61
- }, /*#__PURE__*/React.createElement(IconWrapper, {
62
- breakpoint: calculateBreakpoint(dimensions),
63
- hasTitleBox: false
64
- }, /*#__PURE__*/React.createElement(SpinnerIcon, null)), !!dataURI && /*#__PURE__*/React.createElement(MediaImage, _extends({
65
- dataURI: dataURI // alt={alt} // having alt text causes the image to fail to render with a broken image.
66
- // onImageLoad={this.onImageLoad} // TODO add these back as part of tracking performance.
67
- // onImageError={this.onImageError}
68
-
69
- }, resizeModeToMediaImageProps(resizeMode))), !disableOverlay && /*#__PURE__*/React.createElement(Blanket, {
70
- isFixed: false
71
- })));
72
- };
73
-
74
- function calculateBreakpoint(dimensions) {
75
- var _dimensions$width;
76
-
77
- const width = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : defaultImageCardDimensions.width;
78
- return calcBreakpointSize(parseInt(`${width}`, 10));
79
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,92 +0,0 @@
1
- import React, { useState, useEffect } from 'react';
2
- import ReactDOM from 'react-dom';
3
- import { injectIntl } from 'react-intl';
4
- import { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, messages } from '@atlaskit/media-ui';
5
- import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
6
- import { MediaViewer } from '@atlaskit/media-viewer';
7
- // UI component which renders an inline link in the appropiate state based on a media file
8
- export const InlineMediaCardInternal = ({
9
- mediaClient,
10
- identifier,
11
- shouldOpenMediaViewer,
12
- isSelected,
13
- onClick,
14
- mediaViewerDataSource,
15
- intl
16
- }) => {
17
- const [fileState, setFileState] = useState();
18
- const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
19
-
20
- const onInlineCardClick = event => {
21
- if (shouldOpenMediaViewer) {
22
- setMediaViewerVisible(true);
23
- }
24
-
25
- if (onClick) {
26
- onClick(event);
27
- }
28
- };
29
-
30
- const onMediaViewerClose = () => setMediaViewerVisible(false);
31
-
32
- const renderMediaViewer = () => {
33
- if (isMediaViewerVisible) {
34
- const dataSource = mediaViewerDataSource || {
35
- list: []
36
- };
37
- return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
38
- collectionName: identifier.collectionName || '',
39
- dataSource: dataSource,
40
- mediaClientConfig: mediaClient.mediaClientConfig,
41
- selectedItem: identifier,
42
- onClose: onMediaViewerClose
43
- }), document.body);
44
- }
45
-
46
- return null;
47
- };
48
-
49
- useEffect(() => {
50
- // [EDM-1948] TODO: use mediaClient.file.getFileState()
51
- // [EDM-1948] TODO: handle error here
52
- mediaClient.file.getCurrentState(identifier.id, {
53
- collectionName: identifier.collectionName
54
- }).then(fileState => {
55
- setFileState(fileState);
56
- });
57
- }, [identifier.collectionName, identifier.id, mediaClient.file]);
58
-
59
- if (!fileState) {
60
- return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
61
- url: intl.formatMessage(messages.loading_file),
62
- titleTextColor: "black",
63
- withoutHover: true
64
- });
65
- }
66
-
67
- if (fileState.status === 'error') {
68
- return /*#__PURE__*/React.createElement(InlineCardErroredView, {
69
- url: "",
70
- message: fileState.message || ''
71
- });
72
- }
73
-
74
- const {
75
- mediaType,
76
- name
77
- } = fileState;
78
- const linkIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
79
- testId: 'inline-media-card-file-type-icon',
80
- size: "small",
81
- type: mediaType
82
- });
83
- const mediaViewer = renderMediaViewer(); // [EDM-1948] TODO: add Tooltip
84
-
85
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineCardResolvedView, {
86
- icon: linkIcon,
87
- title: name,
88
- onClick: onInlineCardClick,
89
- isSelected: isSelected
90
- }), mediaViewer);
91
- };
92
- export const InlineMediaCard = injectIntl(InlineMediaCardInternal);
@@ -1,6 +0,0 @@
1
- export let Breakpoint;
2
-
3
- (function (Breakpoint) {
4
- Breakpoint["SMALL"] = "small";
5
- Breakpoint["LARGE"] = "large";
6
- })(Breakpoint || (Breakpoint = {}));
@@ -1,93 +0,0 @@
1
- import styled from 'styled-components';
2
- import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
3
- import { N20, N60A } from '@atlaskit/theme/colors';
4
- import { fontFamily } from '@atlaskit/theme/constants';
5
- import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
6
- import { borderRadius } from '@atlaskit/media-ui';
7
- import { transition } from '../../styles';
8
- import { getDefaultCardDimensions } from '../../utils/cardDimensions';
9
- import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
10
- import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
11
- import { responsiveSettings } from './common';
12
- import { Breakpoint } from './Breakpoint';
13
- export const SSRFileExperienceWrapper = styled.div`
14
- ${({
15
- breakpoint,
16
- dimensions,
17
- appearance,
18
- shouldUsePointerCursor,
19
- displayBackground,
20
- disableOverlay,
21
- selected
22
- }) => `
23
- ${transition()}
24
- box-sizing: border-box;
25
- * {
26
- box-sizing: border-box;
27
- }
28
- position: relative;
29
- font-family: ${fontFamily()};
30
- ${getWrapperDimensions(dimensions, appearance)}
31
- ${displayBackground ? `background-color: ${N20};` : ''}
32
- ${borderRadius}
33
- ${getCursorStyle(shouldUsePointerCursor)}
34
- ${generateResponsiveStyles(breakpoint)}
35
- ${hideNativeBrowserTextSelectionStyles}
36
- ${getWrapperShadow(disableOverlay, selected)}
37
- `}
38
- &:hover .${blanketClassName} {
39
- ${fixedBlanketStyles}
40
- }
41
- `;
42
- SSRFileExperienceWrapper.displayName = 'SSRFileExperienceWrapper';
43
- export const getWrapperDimensions = (dimensions, appearance) => {
44
- const {
45
- width,
46
- height
47
- } = dimensions || {};
48
- const {
49
- width: defaultWidth,
50
- height: defaultHeight
51
- } = getDefaultCardDimensions(appearance);
52
- return `
53
- width: ${getCSSUnitValue(width || defaultWidth)};
54
- max-width: 100%;
55
- height: ${getCSSUnitValue(height || defaultHeight)};
56
- max-height: 100%;
57
- `;
58
- };
59
-
60
- const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
61
- const setting = responsiveSettings[breakpoint];
62
- return `
63
- font-size: ${setting.fontSize}px;
64
- line-height: ${setting.lineHeight}px;
65
- `;
66
- };
67
-
68
- const getCursorStyle = shouldUsePointerCursor => `cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};`; // This is a trick to simulate the blue border without affecting the dimensions.
69
- // CSS outline has no 'radius', therefore we can't achieve the same effect with it
70
-
71
-
72
- const getWrapperShadow = (disableOverlay, selected) => {
73
- const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
74
- const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
75
- const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
76
- return shadow ? `box-shadow: ${shadow};` : '';
77
- };
78
-
79
- export const CardImageContainer = styled.div`
80
- display: flex;
81
- position: relative;
82
- max-width: 100%;
83
- width: 100%;
84
- height: 100%;
85
- max-height: 100%;
86
- overflow: hidden;
87
- ${borderRadius}
88
- `;
89
- const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
90
- export const calcBreakpointSize = (wrapperWidth = 0) => {
91
- const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
92
- return breakpoint;
93
- };
@@ -1,19 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useContext } from 'react';
3
- const FileAttributesContext = /*#__PURE__*/React.createContext(null);
4
- export const FileAttributesProvider = ({
5
- children,
6
- data
7
- }) => {
8
- return data ? /*#__PURE__*/React.createElement(FileAttributesContext.Provider, {
9
- value: data
10
- }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
11
- };
12
- export function withFileAttributes(Component) {
13
- return props => {
14
- const fileAttributes = useContext(FileAttributesContext);
15
- return fileAttributes ? /*#__PURE__*/React.createElement(Component, _extends({}, props, {
16
- fileAttributes: fileAttributes
17
- })) : /*#__PURE__*/React.createElement(Component, props);
18
- };
19
- }
@@ -1,78 +0,0 @@
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 { MediaImage } from '@atlaskit/media-ui';
11
- import SpinnerIcon from '@atlaskit/spinner';
12
- import { getRequestedDimensions } from '../../utils/getDataURIDimension';
13
- import { defaultImageCardDimensions } from '../../utils/cardDimensions';
14
- import { IconWrapper } from '../ui/iconWrapper/styled';
15
- import { SSRFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from '../ui/styledSSR';
16
- import { Blanket } from '../ui/blanket/styled';
17
- import { newFileExperienceClassName } from './cardConstants';
18
- import { resizeModeToMediaImageProps } from '../../utils/resizeModeToMediaImageProps';
19
- export var CardSSRView = function CardSSRView(_ref) {
20
- var identifier = _ref.identifier,
21
- dimensions = _ref.dimensions,
22
- mediaClient = _ref.mediaClient,
23
- resizeMode = _ref.resizeMode,
24
- disableOverlay = _ref.disableOverlay;
25
- var dataURI;
26
-
27
- try {
28
- var _getRequestedDimensio = getRequestedDimensions({
29
- dimensions: dimensions
30
- }),
31
- width = _getRequestedDimensio.width,
32
- height = _getRequestedDimensio.height;
33
-
34
- var mode = resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode;
35
- dataURI = mediaClient.getImageUrlSync(identifier.id, {
36
- collection: identifier.collectionName,
37
- mode: mode,
38
- width: width,
39
- height: height,
40
- allowAnimated: true
41
- });
42
- } catch (e) {
43
- // if we are unable to get the image url (eg missing auth) we want to continue rendering with a spinner
44
- dataURI = '';
45
- }
46
-
47
- var shouldDisplayBackground = !dataURI || !disableOverlay;
48
- return /*#__PURE__*/React.createElement(SSRFileExperienceWrapper, {
49
- className: newFileExperienceClassName,
50
- dimensions: dimensions,
51
- breakpoint: calculateBreakpoint(dimensions),
52
- shouldUsePointerCursor: Boolean(dataURI),
53
- displayBackground: shouldDisplayBackground,
54
- disableOverlay: disableOverlay,
55
- selected: false,
56
- "data-testid": "media-card-view"
57
- }, /*#__PURE__*/React.createElement(CardImageContainer, {
58
- className: "media-file-card-view",
59
- "data-testid": "media-file-card-view"
60
- }, /*#__PURE__*/React.createElement(IconWrapper, {
61
- breakpoint: calculateBreakpoint(dimensions),
62
- hasTitleBox: false
63
- }, /*#__PURE__*/React.createElement(SpinnerIcon, null)), !!dataURI && /*#__PURE__*/React.createElement(MediaImage, _extends({
64
- dataURI: dataURI // alt={alt} // having alt text causes the image to fail to render with a broken image.
65
- // onImageLoad={this.onImageLoad} // TODO add these back as part of tracking performance.
66
- // onImageError={this.onImageError}
67
-
68
- }, resizeModeToMediaImageProps(resizeMode))), !disableOverlay && /*#__PURE__*/React.createElement(Blanket, {
69
- isFixed: false
70
- })));
71
- };
72
-
73
- function calculateBreakpoint(dimensions) {
74
- var _dimensions$width;
75
-
76
- var width = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : defaultImageCardDimensions.width;
77
- return calcBreakpointSize(parseInt("".concat(width), 10));
78
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,100 +0,0 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import React, { useState, useEffect } from 'react';
3
- import ReactDOM from 'react-dom';
4
- import { injectIntl } from 'react-intl';
5
- import { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, messages } from '@atlaskit/media-ui';
6
- import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
7
- import { MediaViewer } from '@atlaskit/media-viewer';
8
- // UI component which renders an inline link in the appropiate state based on a media file
9
- export var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
10
- var mediaClient = _ref.mediaClient,
11
- identifier = _ref.identifier,
12
- shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
13
- isSelected = _ref.isSelected,
14
- onClick = _ref.onClick,
15
- mediaViewerDataSource = _ref.mediaViewerDataSource,
16
- intl = _ref.intl;
17
-
18
- var _useState = useState(),
19
- _useState2 = _slicedToArray(_useState, 2),
20
- fileState = _useState2[0],
21
- setFileState = _useState2[1];
22
-
23
- var _useState3 = useState(false),
24
- _useState4 = _slicedToArray(_useState3, 2),
25
- isMediaViewerVisible = _useState4[0],
26
- setMediaViewerVisible = _useState4[1];
27
-
28
- var onInlineCardClick = function onInlineCardClick(event) {
29
- if (shouldOpenMediaViewer) {
30
- setMediaViewerVisible(true);
31
- }
32
-
33
- if (onClick) {
34
- onClick(event);
35
- }
36
- };
37
-
38
- var onMediaViewerClose = function onMediaViewerClose() {
39
- return setMediaViewerVisible(false);
40
- };
41
-
42
- var renderMediaViewer = function renderMediaViewer() {
43
- if (isMediaViewerVisible) {
44
- var dataSource = mediaViewerDataSource || {
45
- list: []
46
- };
47
- return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
48
- collectionName: identifier.collectionName || '',
49
- dataSource: dataSource,
50
- mediaClientConfig: mediaClient.mediaClientConfig,
51
- selectedItem: identifier,
52
- onClose: onMediaViewerClose
53
- }), document.body);
54
- }
55
-
56
- return null;
57
- };
58
-
59
- useEffect(function () {
60
- // [EDM-1948] TODO: use mediaClient.file.getFileState()
61
- // [EDM-1948] TODO: handle error here
62
- mediaClient.file.getCurrentState(identifier.id, {
63
- collectionName: identifier.collectionName
64
- }).then(function (fileState) {
65
- setFileState(fileState);
66
- });
67
- }, [identifier.collectionName, identifier.id, mediaClient.file]);
68
-
69
- if (!fileState) {
70
- return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
71
- url: intl.formatMessage(messages.loading_file),
72
- titleTextColor: "black",
73
- withoutHover: true
74
- });
75
- }
76
-
77
- if (fileState.status === 'error') {
78
- return /*#__PURE__*/React.createElement(InlineCardErroredView, {
79
- url: "",
80
- message: fileState.message || ''
81
- });
82
- }
83
-
84
- var mediaType = fileState.mediaType,
85
- name = fileState.name;
86
- var linkIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
87
- testId: 'inline-media-card-file-type-icon',
88
- size: "small",
89
- type: mediaType
90
- });
91
- var mediaViewer = renderMediaViewer(); // [EDM-1948] TODO: add Tooltip
92
-
93
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineCardResolvedView, {
94
- icon: linkIcon,
95
- title: name,
96
- onClick: onInlineCardClick,
97
- isSelected: isSelected
98
- }), mediaViewer);
99
- };
100
- export var InlineMediaCard = injectIntl(InlineMediaCardInternal);
@@ -1,6 +0,0 @@
1
- export var Breakpoint;
2
-
3
- (function (Breakpoint) {
4
- Breakpoint["SMALL"] = "small";
5
- Breakpoint["LARGE"] = "large";
6
- })(Breakpoint || (Breakpoint = {}));