@atlaskit/media-viewer 52.9.2 → 52.9.4
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 +15 -0
- package/dist/cjs/analytics/index.js +1 -1
- package/dist/cjs/analytics/ufoExperiences.js +1 -1
- package/dist/cjs/styleWrappers.compiled.css +2 -0
- package/dist/cjs/styleWrappers.js +31 -10
- package/dist/cjs/viewers/archiveSidebar/styleWrappers.js +14 -4
- package/dist/cjs/viewers/svg/ImageWrapper-compiled.js +12 -3
- package/dist/cjs/viewers/svg/index.js +3 -0
- package/dist/es2019/analytics/index.js +1 -1
- package/dist/es2019/analytics/ufoExperiences.js +1 -1
- package/dist/es2019/styleWrappers.compiled.css +2 -0
- package/dist/es2019/styleWrappers.js +33 -16
- package/dist/es2019/viewers/archiveSidebar/styleWrappers.js +10 -1
- package/dist/es2019/viewers/svg/ImageWrapper-compiled.js +19 -8
- package/dist/es2019/viewers/svg/index.js +4 -1
- package/dist/esm/analytics/index.js +1 -1
- package/dist/esm/analytics/ufoExperiences.js +1 -1
- package/dist/esm/styleWrappers.compiled.css +2 -0
- package/dist/esm/styleWrappers.js +28 -9
- package/dist/esm/viewers/archiveSidebar/styleWrappers.js +14 -3
- package/dist/esm/viewers/svg/ImageWrapper-compiled.js +12 -3
- package/dist/esm/viewers/svg/index.js +4 -1
- package/dist/types/styleWrappers.d.ts +1 -1
- package/dist/types/viewers/svg/ImageWrapper-compiled.d.ts +2 -2
- package/dist/types-ts4.5/styleWrappers.d.ts +1 -1
- package/dist/types-ts4.5/viewers/svg/ImageWrapper-compiled.d.ts +2 -2
- package/package.json +12 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/media-viewer
|
|
2
2
|
|
|
3
|
+
## 52.9.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 52.9.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`9896ce8e69e57`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9896ce8e69e57) -
|
|
14
|
+
Improve accessibility across media packages with semantic button elements and i18n support, all
|
|
15
|
+
changes are behind feature flag
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 52.9.2
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
|
|
|
10
10
|
var _analytics = require("@atlaskit/media-common/analytics");
|
|
11
11
|
var componentName = exports.component = exports.componentName = 'mediaViewer';
|
|
12
12
|
var packageName = exports.packageName = "@atlaskit/media-viewer";
|
|
13
|
-
var packageVersion = exports.packageVersion = "
|
|
13
|
+
var packageVersion = exports.packageVersion = "0.0.0-development";
|
|
14
14
|
function getFileAttributes(fileState) {
|
|
15
15
|
if (!fileState) {
|
|
16
16
|
return {
|
|
@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
13
13
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
14
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
15
|
var packageName = "@atlaskit/media-viewer";
|
|
16
|
-
var packageVersion = "
|
|
16
|
+
var packageVersion = "0.0.0-development";
|
|
17
17
|
var ufoExperience;
|
|
18
18
|
var getExperience = function getExperience() {
|
|
19
19
|
if (!ufoExperience) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
|
|
2
|
+
._kkk2n7od{all:unset}
|
|
2
3
|
._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
|
|
3
4
|
._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
._1bto1l2s{text-overflow:ellipsis}
|
|
28
29
|
._1e0c1o8l{display:inline-block}
|
|
29
30
|
._1e0c1txw{display:flex}
|
|
31
|
+
._1e0c1ule{display:block}
|
|
30
32
|
._1ghp1kxc video{max-height:100vh}
|
|
31
33
|
._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
|
|
32
34
|
._1jyy1poe._1jyy1poe h1{color:#c7d1db}
|
|
@@ -12,14 +12,21 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var React = _react;
|
|
13
13
|
var _runtime = require("@compiled/react/runtime");
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
16
17
|
var _reactScrolllock = require("react-scrolllock");
|
|
17
18
|
var _useCallbackRef = require("use-callback-ref");
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
20
|
var _primitives = require("@atlaskit/primitives");
|
|
19
21
|
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
|
|
22
|
+
var _reactIntlNext = require("react-intl-next");
|
|
23
|
+
var _mediaUi = require("@atlaskit/media-ui");
|
|
24
|
+
var _excluded = ["canDrag", "isDragging", "shouldPixelate", "data-testid", "src", "style", "onLoad", "onError", "alt", "className"];
|
|
25
|
+
/* eslint-disable @atlaskit/design-system/use-tokens-typography */
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
20
27
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
21
28
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
29
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
30
|
var blanketStyles = null;
|
|
24
31
|
var headerWrapperStyles = null;
|
|
25
32
|
var archiveHeaderWrapperStyles = null;
|
|
@@ -67,6 +74,7 @@ var downloadButtonWrapperStyles = null;
|
|
|
67
74
|
var customVideoPlayerWrapperStyles = null;
|
|
68
75
|
var sidebarWrapperStyles = null;
|
|
69
76
|
var spinnerWrapperStyles = null;
|
|
77
|
+
var resetButtonStyle = null;
|
|
70
78
|
var formattedMessageWrapperStyles = null;
|
|
71
79
|
// We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
|
|
72
80
|
var Blanket = exports.Blanket = function Blanket(_ref) {
|
|
@@ -239,12 +247,26 @@ var LeftHeader = exports.LeftHeader = function LeftHeader(_ref18) {
|
|
|
239
247
|
var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref19, ref) {
|
|
240
248
|
var children = _ref19.children,
|
|
241
249
|
datatestId = _ref19['data-testid'],
|
|
242
|
-
|
|
250
|
+
_onClick = _ref19.onClick,
|
|
243
251
|
style = _ref19.style,
|
|
244
252
|
className = _ref19.className;
|
|
245
|
-
|
|
253
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
254
|
+
return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
255
|
+
"data-testid": datatestId,
|
|
256
|
+
onClick: function onClick(event) {
|
|
257
|
+
return _onClick && _onClick(event);
|
|
258
|
+
},
|
|
259
|
+
ref: ref,
|
|
260
|
+
"aria-label": intl.formatMessage(_mediaUi.messages.svg_image_preview_label_assistive_text)
|
|
261
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
262
|
+
,
|
|
263
|
+
style: style
|
|
264
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
265
|
+
,
|
|
266
|
+
className: (0, _runtime.ax)(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
|
|
267
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
246
268
|
"data-testid": datatestId,
|
|
247
|
-
onClick:
|
|
269
|
+
onClick: _onClick,
|
|
248
270
|
ref: ref,
|
|
249
271
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
250
272
|
style: style
|
|
@@ -267,9 +289,9 @@ var Img = exports.Img = function Img(_ref20) {
|
|
|
267
289
|
style = _ref20.style,
|
|
268
290
|
onLoad = _ref20.onLoad,
|
|
269
291
|
onError = _ref20.onError,
|
|
270
|
-
onMouseDown = _ref20.onMouseDown,
|
|
271
292
|
alt = _ref20.alt,
|
|
272
|
-
className = _ref20.className
|
|
293
|
+
className = _ref20.className,
|
|
294
|
+
rest = (0, _objectWithoutProperties2.default)(_ref20, _excluded);
|
|
273
295
|
var cursor = (0, _react.useMemo)(function () {
|
|
274
296
|
if (canDrag && isDragging) {
|
|
275
297
|
return 'grabbing';
|
|
@@ -279,7 +301,7 @@ var Img = exports.Img = function Img(_ref20) {
|
|
|
279
301
|
return 'auto';
|
|
280
302
|
}
|
|
281
303
|
}, [canDrag, isDragging]);
|
|
282
|
-
return /*#__PURE__*/React.createElement("img", {
|
|
304
|
+
return /*#__PURE__*/React.createElement("img", (0, _extends2.default)({}, rest, {
|
|
283
305
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
284
306
|
className: (0, _runtime.ax)(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
|
|
285
307
|
alt: alt,
|
|
@@ -291,9 +313,8 @@ var Img = exports.Img = function Img(_ref20) {
|
|
|
291
313
|
cursor: cursor
|
|
292
314
|
}, style),
|
|
293
315
|
onLoad: onLoad,
|
|
294
|
-
onError: onError
|
|
295
|
-
|
|
296
|
-
});
|
|
316
|
+
onError: onError
|
|
317
|
+
}));
|
|
297
318
|
};
|
|
298
319
|
var MedatadataTextWrapper = exports.MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {
|
|
299
320
|
var children = _ref21.children;
|
|
@@ -10,9 +10,11 @@ require("./styleWrappers.compiled.css");
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var React = _react;
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
|
+
var _reactIntlNext = require("react-intl-next");
|
|
14
|
+
var _mediaUi = require("@atlaskit/media-ui");
|
|
15
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
|
-
|
|
16
18
|
var ARCHIVE_SIDE_BAR_WIDTH = exports.ARCHIVE_SIDE_BAR_WIDTH = 300;
|
|
17
19
|
var archiveItemViewerWrapperStyles = null;
|
|
18
20
|
var archiveSideBarStyles = null;
|
|
@@ -55,9 +57,17 @@ var ArchiveSidebarFolderWrapper = exports.ArchiveSidebarFolderWrapper = function
|
|
|
55
57
|
};
|
|
56
58
|
var ArchiveDownloadButtonWrapper = exports.ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(_ref4) {
|
|
57
59
|
var children = _ref4.children,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
_onClick = _ref4.onClick;
|
|
61
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
62
|
+
return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
63
|
+
"aria-label": intl.formatMessage(_mediaUi.messages.archive_download_label_assistive_text),
|
|
64
|
+
onClick: function onClick(event) {
|
|
65
|
+
return _onClick && _onClick(event);
|
|
66
|
+
},
|
|
67
|
+
"data-testid": "media-archiveDownloadButton",
|
|
68
|
+
className: (0, _runtime.ax)(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
|
|
69
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
onClick: _onClick,
|
|
61
71
|
"data-testid": "media-archiveDownloadButton",
|
|
62
72
|
className: (0, _runtime.ax)(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
|
|
63
73
|
}, children);
|
|
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.ImageWrapper = void 0;
|
|
9
9
|
require("./ImageWrapper-compiled.compiled.css");
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var React = _react;
|
|
12
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
|
+
var _mediaUi = require("@atlaskit/media-ui");
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _reactIntlNext = require("react-intl-next");
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
16
|
var imageWrapperStyles = null;
|
|
15
17
|
var dynamicImageWrapperStyles = null;
|
|
@@ -17,7 +19,14 @@ var ImageWrapper = exports.ImageWrapper = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
17
19
|
var children = _ref.children,
|
|
18
20
|
onClick = _ref.onClick,
|
|
19
21
|
isHidden = _ref.isHidden;
|
|
20
|
-
|
|
22
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
23
|
+
return (0, _platformFeatureFlags.fg)('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/_react.default.createElement("button", {
|
|
24
|
+
"data-testid": "media-viewer-svg-wrapper",
|
|
25
|
+
onClick: onClick,
|
|
26
|
+
ref: ref,
|
|
27
|
+
"aria-label": intl.formatMessage(_mediaUi.messages.svg_image_preview_label_assistive_text),
|
|
28
|
+
className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
|
|
29
|
+
}, children) : /*#__PURE__*/_react.default.createElement("div", {
|
|
21
30
|
"data-testid": "media-viewer-svg-wrapper",
|
|
22
31
|
onClick: onClick,
|
|
23
32
|
ref: ref,
|
|
@@ -20,6 +20,7 @@ var _errors = require("../../errors");
|
|
|
20
20
|
var _utils = require("./utils");
|
|
21
21
|
var _ImageWrapper = require("./ImageWrapper");
|
|
22
22
|
var _errors2 = require("./errors");
|
|
23
|
+
var _reactIntlNext = require("react-intl-next");
|
|
23
24
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
24
25
|
var SvgViewerBase = function SvgViewerBase(_ref) {
|
|
25
26
|
var identifier = _ref.identifier,
|
|
@@ -48,6 +49,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
|
|
|
48
49
|
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
49
50
|
wrapperScroll = _useState0[0],
|
|
50
51
|
setWrapperScroll = _useState0[1];
|
|
52
|
+
var intl = (0, _reactIntlNext.useIntl)();
|
|
51
53
|
var onResize = (0, _react.useCallback)(function () {
|
|
52
54
|
if (!wrapperRef.current || !camera) {
|
|
53
55
|
return;
|
|
@@ -164,6 +166,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
|
|
|
164
166
|
isHidden: isHidden
|
|
165
167
|
}, /*#__PURE__*/_react.default.createElement(_mediaSvg.default, {
|
|
166
168
|
testId: 'media-viewer-svg',
|
|
169
|
+
alt: intl.formatMessage(_mediaUi.messages.svg_base_alt),
|
|
167
170
|
identifier: identifier,
|
|
168
171
|
dimensions: imgDimensions
|
|
169
172
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
|
|
2
2
|
const componentName = 'mediaViewer';
|
|
3
3
|
const packageName = "@atlaskit/media-viewer";
|
|
4
|
-
const packageVersion = "
|
|
4
|
+
const packageVersion = "0.0.0-development";
|
|
5
5
|
export { packageName, packageVersion, componentName, componentName as component };
|
|
6
6
|
export function getFileAttributes(fileState) {
|
|
7
7
|
if (!fileState) {
|
|
@@ -3,7 +3,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
|
|
|
3
3
|
import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
const packageName = "@atlaskit/media-viewer";
|
|
6
|
-
const packageVersion = "
|
|
6
|
+
const packageVersion = "0.0.0-development";
|
|
7
7
|
let ufoExperience;
|
|
8
8
|
const getExperience = () => {
|
|
9
9
|
if (!ufoExperience) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
|
|
2
|
+
._kkk2n7od{all:unset}
|
|
2
3
|
._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
|
|
3
4
|
._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
._1bto1l2s{text-overflow:ellipsis}
|
|
28
29
|
._1e0c1o8l{display:inline-block}
|
|
29
30
|
._1e0c1txw{display:flex}
|
|
31
|
+
._1e0c1ule{display:block}
|
|
30
32
|
._1ghp1kxc video{max-height:100vh}
|
|
31
33
|
._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
|
|
32
34
|
._1jyy1poe._1jyy1poe h1{color:#c7d1db}
|
|
@@ -8,9 +8,12 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
8
8
|
import { forwardRef, useMemo } from 'react';
|
|
9
9
|
import { TouchScrollable } from 'react-scrolllock';
|
|
10
10
|
import { useMergeRefs } from 'use-callback-ref';
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
12
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
12
13
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
13
14
|
import Heading from '@atlaskit/heading';
|
|
15
|
+
import { useIntl } from 'react-intl-next';
|
|
16
|
+
import { messages } from '@atlaskit/media-ui';
|
|
14
17
|
const blanketStyles = null;
|
|
15
18
|
const headerWrapperStyles = null;
|
|
16
19
|
const archiveHeaderWrapperStyles = null;
|
|
@@ -58,6 +61,7 @@ const downloadButtonWrapperStyles = null;
|
|
|
58
61
|
const customVideoPlayerWrapperStyles = null;
|
|
59
62
|
const sidebarWrapperStyles = null;
|
|
60
63
|
const spinnerWrapperStyles = null;
|
|
64
|
+
const resetButtonStyle = null;
|
|
61
65
|
const formattedMessageWrapperStyles = null;
|
|
62
66
|
// We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
|
|
63
67
|
export const Blanket = ({
|
|
@@ -217,16 +221,30 @@ export const ImageWrapper = /*#__PURE__*/forwardRef(({
|
|
|
217
221
|
onClick,
|
|
218
222
|
style,
|
|
219
223
|
className
|
|
220
|
-
}, ref) =>
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
224
|
+
}, ref) => {
|
|
225
|
+
const intl = useIntl();
|
|
226
|
+
return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
227
|
+
"data-testid": datatestId,
|
|
228
|
+
onClick: event => onClick && onClick(event),
|
|
229
|
+
ref: ref,
|
|
230
|
+
"aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text)
|
|
231
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
232
|
+
,
|
|
233
|
+
style: style
|
|
234
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
235
|
+
,
|
|
236
|
+
className: ax(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
|
|
237
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
238
|
+
"data-testid": datatestId,
|
|
239
|
+
onClick: onClick,
|
|
240
|
+
ref: ref,
|
|
241
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
242
|
+
style: style
|
|
243
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
244
|
+
,
|
|
245
|
+
className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
|
|
246
|
+
}, children);
|
|
247
|
+
});
|
|
230
248
|
export const BaselineExtend = () => /*#__PURE__*/React.createElement("div", {
|
|
231
249
|
className: ax(["_4t3i1osq _1e0c1o8l _s7n4nkob"])
|
|
232
250
|
});
|
|
@@ -239,9 +257,9 @@ export const Img = ({
|
|
|
239
257
|
style,
|
|
240
258
|
onLoad,
|
|
241
259
|
onError,
|
|
242
|
-
onMouseDown,
|
|
243
260
|
alt,
|
|
244
|
-
className
|
|
261
|
+
className,
|
|
262
|
+
...rest
|
|
245
263
|
}) => {
|
|
246
264
|
const cursor = useMemo(() => {
|
|
247
265
|
if (canDrag && isDragging) {
|
|
@@ -252,7 +270,7 @@ export const Img = ({
|
|
|
252
270
|
return 'auto';
|
|
253
271
|
}
|
|
254
272
|
}, [canDrag, isDragging]);
|
|
255
|
-
return /*#__PURE__*/React.createElement("img", {
|
|
273
|
+
return /*#__PURE__*/React.createElement("img", _extends({}, rest, {
|
|
256
274
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
257
275
|
className: ax(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
|
|
258
276
|
alt: alt,
|
|
@@ -265,9 +283,8 @@ export const Img = ({
|
|
|
265
283
|
...style
|
|
266
284
|
},
|
|
267
285
|
onLoad: onLoad,
|
|
268
|
-
onError: onError
|
|
269
|
-
|
|
270
|
-
});
|
|
286
|
+
onError: onError
|
|
287
|
+
}));
|
|
271
288
|
};
|
|
272
289
|
export const MedatadataTextWrapper = ({
|
|
273
290
|
children
|
|
@@ -5,6 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
|
|
8
|
+
import { useIntl } from 'react-intl-next';
|
|
9
|
+
import { messages } from '@atlaskit/media-ui';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
11
|
export const ARCHIVE_SIDE_BAR_WIDTH = 300;
|
|
9
12
|
const archiveItemViewerWrapperStyles = null;
|
|
10
13
|
const archiveSideBarStyles = null;
|
|
@@ -49,7 +52,13 @@ export const ArchiveDownloadButtonWrapper = ({
|
|
|
49
52
|
children,
|
|
50
53
|
onClick
|
|
51
54
|
}) => {
|
|
52
|
-
|
|
55
|
+
const intl = useIntl();
|
|
56
|
+
return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
57
|
+
"aria-label": intl.formatMessage(messages.archive_download_label_assistive_text),
|
|
58
|
+
onClick: event => onClick && onClick(event),
|
|
59
|
+
"data-testid": "media-archiveDownloadButton",
|
|
60
|
+
className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
|
|
61
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
53
62
|
onClick: onClick,
|
|
54
63
|
"data-testid": "media-archiveDownloadButton",
|
|
55
64
|
className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
|
|
@@ -1,17 +1,28 @@
|
|
|
1
1
|
/* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./ImageWrapper-compiled.compiled.css";
|
|
3
|
-
import * as React from 'react';
|
|
4
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
-
import {
|
|
4
|
+
import { messages } from '@atlaskit/media-ui';
|
|
5
|
+
import React, { forwardRef } from 'react';
|
|
6
|
+
import { useIntl } from 'react-intl-next';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
8
|
const imageWrapperStyles = null;
|
|
7
9
|
const dynamicImageWrapperStyles = null;
|
|
8
10
|
export const ImageWrapper = /*#__PURE__*/forwardRef(({
|
|
9
11
|
children,
|
|
10
12
|
onClick,
|
|
11
13
|
isHidden
|
|
12
|
-
}, ref) =>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
}, ref) => {
|
|
15
|
+
const intl = useIntl();
|
|
16
|
+
return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
17
|
+
"data-testid": "media-viewer-svg-wrapper",
|
|
18
|
+
onClick: onClick,
|
|
19
|
+
ref: ref,
|
|
20
|
+
"aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text),
|
|
21
|
+
className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
|
|
22
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
"data-testid": "media-viewer-svg-wrapper",
|
|
24
|
+
onClick: onClick,
|
|
25
|
+
ref: ref,
|
|
26
|
+
className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
|
|
27
|
+
}, children);
|
|
28
|
+
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
|
|
2
|
-
import { Camera, Vector2 } from '@atlaskit/media-ui';
|
|
2
|
+
import { Camera, messages, Vector2 } from '@atlaskit/media-ui';
|
|
3
3
|
import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
|
|
4
4
|
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
5
5
|
import { BaselineExtend } from '../../styleWrappers';
|
|
@@ -11,6 +11,7 @@ import { MediaViewerError } from '../../errors';
|
|
|
11
11
|
import { clientRectangle, naturalSizeRectangle, zoomLevelAfterResize } from './utils';
|
|
12
12
|
import { ImageWrapper } from './ImageWrapper';
|
|
13
13
|
import { getErrorReason } from './errors';
|
|
14
|
+
import { useIntl } from 'react-intl-next';
|
|
14
15
|
const SvgViewerBase = ({
|
|
15
16
|
identifier,
|
|
16
17
|
onLoad,
|
|
@@ -24,6 +25,7 @@ const SvgViewerBase = ({
|
|
|
24
25
|
const [camera, setCamera] = useState();
|
|
25
26
|
const wrapperRef = useRef(null);
|
|
26
27
|
const [wrapperScroll, setWrapperScroll] = useState();
|
|
28
|
+
const intl = useIntl();
|
|
27
29
|
const onResize = useCallback(() => {
|
|
28
30
|
if (!wrapperRef.current || !camera) {
|
|
29
31
|
return;
|
|
@@ -149,6 +151,7 @@ const SvgViewerBase = ({
|
|
|
149
151
|
isHidden: isHidden
|
|
150
152
|
}, /*#__PURE__*/React.createElement(MediaSvg, {
|
|
151
153
|
testId: 'media-viewer-svg',
|
|
154
|
+
alt: intl.formatMessage(messages.svg_base_alt),
|
|
152
155
|
identifier: identifier,
|
|
153
156
|
dimensions: imgDimensions
|
|
154
157
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
|
|
2
2
|
var componentName = 'mediaViewer';
|
|
3
3
|
var packageName = "@atlaskit/media-viewer";
|
|
4
|
-
var packageVersion = "
|
|
4
|
+
var packageVersion = "0.0.0-development";
|
|
5
5
|
export { packageName, packageVersion, componentName, componentName as component };
|
|
6
6
|
export function getFileAttributes(fileState) {
|
|
7
7
|
if (!fileState) {
|
|
@@ -6,7 +6,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
|
|
|
6
6
|
import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
var packageName = "@atlaskit/media-viewer";
|
|
9
|
-
var packageVersion = "
|
|
9
|
+
var packageVersion = "0.0.0-development";
|
|
10
10
|
var ufoExperience;
|
|
11
11
|
var getExperience = function getExperience() {
|
|
12
12
|
if (!ufoExperience) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
|
|
2
|
+
._kkk2n7od{all:unset}
|
|
2
3
|
._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
|
|
3
4
|
._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
._1bto1l2s{text-overflow:ellipsis}
|
|
28
29
|
._1e0c1o8l{display:inline-block}
|
|
29
30
|
._1e0c1txw{display:flex}
|
|
31
|
+
._1e0c1ule{display:block}
|
|
30
32
|
._1ghp1kxc video{max-height:100vh}
|
|
31
33
|
._1itkdlpg{background-image:linear-gradient(0deg,#101214,rgba(14,22,36,0))}
|
|
32
34
|
._1jyy1poe._1jyy1poe h1{color:#c7d1db}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* styleWrappers.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
4
|
import _extends from "@babel/runtime/helpers/extends";
|
|
5
|
+
var _excluded = ["canDrag", "isDragging", "shouldPixelate", "data-testid", "src", "style", "onLoad", "onError", "alt", "className"];
|
|
4
6
|
import "./styleWrappers.compiled.css";
|
|
5
7
|
import * as React from 'react';
|
|
6
8
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -11,9 +13,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
11
13
|
import { forwardRef, useMemo } from 'react';
|
|
12
14
|
import { TouchScrollable } from 'react-scrolllock';
|
|
13
15
|
import { useMergeRefs } from 'use-callback-ref';
|
|
16
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
17
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
15
18
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
16
19
|
import Heading from '@atlaskit/heading';
|
|
20
|
+
import { useIntl } from 'react-intl-next';
|
|
21
|
+
import { messages } from '@atlaskit/media-ui';
|
|
17
22
|
var blanketStyles = null;
|
|
18
23
|
var headerWrapperStyles = null;
|
|
19
24
|
var archiveHeaderWrapperStyles = null;
|
|
@@ -61,6 +66,7 @@ var downloadButtonWrapperStyles = null;
|
|
|
61
66
|
var customVideoPlayerWrapperStyles = null;
|
|
62
67
|
var sidebarWrapperStyles = null;
|
|
63
68
|
var spinnerWrapperStyles = null;
|
|
69
|
+
var resetButtonStyle = null;
|
|
64
70
|
var formattedMessageWrapperStyles = null;
|
|
65
71
|
// We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
|
|
66
72
|
export var Blanket = function Blanket(_ref) {
|
|
@@ -233,12 +239,26 @@ export var LeftHeader = function LeftHeader(_ref18) {
|
|
|
233
239
|
export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref19, ref) {
|
|
234
240
|
var children = _ref19.children,
|
|
235
241
|
datatestId = _ref19['data-testid'],
|
|
236
|
-
|
|
242
|
+
_onClick = _ref19.onClick,
|
|
237
243
|
style = _ref19.style,
|
|
238
244
|
className = _ref19.className;
|
|
239
|
-
|
|
245
|
+
var intl = useIntl();
|
|
246
|
+
return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
247
|
+
"data-testid": datatestId,
|
|
248
|
+
onClick: function onClick(event) {
|
|
249
|
+
return _onClick && _onClick(event);
|
|
250
|
+
},
|
|
251
|
+
ref: ref,
|
|
252
|
+
"aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text)
|
|
253
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
254
|
+
,
|
|
255
|
+
style: style
|
|
256
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
257
|
+
,
|
|
258
|
+
className: ax(["_kkk2n7od _1e0c1ule", "_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", className])
|
|
259
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
240
260
|
"data-testid": datatestId,
|
|
241
|
-
onClick:
|
|
261
|
+
onClick: _onClick,
|
|
242
262
|
ref: ref,
|
|
243
263
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
244
264
|
style: style
|
|
@@ -261,9 +281,9 @@ export var Img = function Img(_ref20) {
|
|
|
261
281
|
style = _ref20.style,
|
|
262
282
|
onLoad = _ref20.onLoad,
|
|
263
283
|
onError = _ref20.onError,
|
|
264
|
-
onMouseDown = _ref20.onMouseDown,
|
|
265
284
|
alt = _ref20.alt,
|
|
266
|
-
className = _ref20.className
|
|
285
|
+
className = _ref20.className,
|
|
286
|
+
rest = _objectWithoutProperties(_ref20, _excluded);
|
|
267
287
|
var cursor = useMemo(function () {
|
|
268
288
|
if (canDrag && isDragging) {
|
|
269
289
|
return 'grabbing';
|
|
@@ -273,7 +293,7 @@ export var Img = function Img(_ref20) {
|
|
|
273
293
|
return 'auto';
|
|
274
294
|
}
|
|
275
295
|
}, [canDrag, isDragging]);
|
|
276
|
-
return /*#__PURE__*/React.createElement("img", {
|
|
296
|
+
return /*#__PURE__*/React.createElement("img", _extends({}, rest, {
|
|
277
297
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
278
298
|
className: ax(["_1e0c1o8l _s7n4nkob _kqswh2mm", shouldPixelate && "_1kemd8h4", className]),
|
|
279
299
|
alt: alt,
|
|
@@ -285,9 +305,8 @@ export var Img = function Img(_ref20) {
|
|
|
285
305
|
cursor: cursor
|
|
286
306
|
}, style),
|
|
287
307
|
onLoad: onLoad,
|
|
288
|
-
onError: onError
|
|
289
|
-
|
|
290
|
-
});
|
|
308
|
+
onError: onError
|
|
309
|
+
}));
|
|
291
310
|
};
|
|
292
311
|
export var MedatadataTextWrapper = function MedatadataTextWrapper(_ref21) {
|
|
293
312
|
var children = _ref21.children;
|
|
@@ -5,6 +5,9 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
|
|
8
|
+
import { useIntl } from 'react-intl-next';
|
|
9
|
+
import { messages } from '@atlaskit/media-ui';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
11
|
export var ARCHIVE_SIDE_BAR_WIDTH = 300;
|
|
9
12
|
var archiveItemViewerWrapperStyles = null;
|
|
10
13
|
var archiveSideBarStyles = null;
|
|
@@ -47,9 +50,17 @@ export var ArchiveSidebarFolderWrapper = function ArchiveSidebarFolderWrapper(_r
|
|
|
47
50
|
};
|
|
48
51
|
export var ArchiveDownloadButtonWrapper = function ArchiveDownloadButtonWrapper(_ref4) {
|
|
49
52
|
var children = _ref4.children,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
+
_onClick = _ref4.onClick;
|
|
54
|
+
var intl = useIntl();
|
|
55
|
+
return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
56
|
+
"aria-label": intl.formatMessage(messages.archive_download_label_assistive_text),
|
|
57
|
+
onClick: function onClick(event) {
|
|
58
|
+
return _onClick && _onClick(event);
|
|
59
|
+
},
|
|
60
|
+
"data-testid": "media-archiveDownloadButton",
|
|
61
|
+
className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
|
|
62
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
63
|
+
onClick: _onClick,
|
|
53
64
|
"data-testid": "media-archiveDownloadButton",
|
|
54
65
|
className: ax(["_19itglyw _2rkofajl _ca0qu2gc _u5f31v6z _n3td14y2 _19bvu2gc _bfhk1j28 _syaz1q3r _d0altlke _irr31dpa _1qamtlke _1di6fcek"])
|
|
55
66
|
}, children);
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
/* ImageWrapper-compiled.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./ImageWrapper-compiled.compiled.css";
|
|
3
|
-
import * as React from 'react';
|
|
4
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
-
import {
|
|
4
|
+
import { messages } from '@atlaskit/media-ui';
|
|
5
|
+
import React, { forwardRef } from 'react';
|
|
6
|
+
import { useIntl } from 'react-intl-next';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
8
|
var imageWrapperStyles = null;
|
|
7
9
|
var dynamicImageWrapperStyles = null;
|
|
8
10
|
export var ImageWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
9
11
|
var children = _ref.children,
|
|
10
12
|
onClick = _ref.onClick,
|
|
11
13
|
isHidden = _ref.isHidden;
|
|
12
|
-
|
|
14
|
+
var intl = useIntl();
|
|
15
|
+
return fg('platform_media_a11y_suppression_fixes') ? /*#__PURE__*/React.createElement("button", {
|
|
16
|
+
"data-testid": "media-viewer-svg-wrapper",
|
|
17
|
+
onClick: onClick,
|
|
18
|
+
ref: ref,
|
|
19
|
+
"aria-label": intl.formatMessage(messages.svg_image_preview_label_assistive_text),
|
|
20
|
+
className: ax(["_1reo1wug _18m91wug _1bsbauwl _4t3i1kxc _y3gn1h6o _s7n4nkob _o5721q9c", isHidden && "_1reo15vq _18m915vq"])
|
|
21
|
+
}, children) : /*#__PURE__*/React.createElement("div", {
|
|
13
22
|
"data-testid": "media-viewer-svg-wrapper",
|
|
14
23
|
onClick: onClick,
|
|
15
24
|
ref: ref,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
|
|
3
|
-
import { Camera, Vector2 } from '@atlaskit/media-ui';
|
|
3
|
+
import { Camera, messages, Vector2 } from '@atlaskit/media-ui';
|
|
4
4
|
import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
|
|
5
5
|
import { withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
6
6
|
import { BaselineExtend } from '../../styleWrappers';
|
|
@@ -12,6 +12,7 @@ import { MediaViewerError } from '../../errors';
|
|
|
12
12
|
import { clientRectangle, naturalSizeRectangle, zoomLevelAfterResize } from './utils';
|
|
13
13
|
import { ImageWrapper } from './ImageWrapper';
|
|
14
14
|
import { getErrorReason } from './errors';
|
|
15
|
+
import { useIntl } from 'react-intl-next';
|
|
15
16
|
var SvgViewerBase = function SvgViewerBase(_ref) {
|
|
16
17
|
var identifier = _ref.identifier,
|
|
17
18
|
onLoad = _ref.onLoad,
|
|
@@ -39,6 +40,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
|
|
|
39
40
|
_useState0 = _slicedToArray(_useState9, 2),
|
|
40
41
|
wrapperScroll = _useState0[0],
|
|
41
42
|
setWrapperScroll = _useState0[1];
|
|
43
|
+
var intl = useIntl();
|
|
42
44
|
var onResize = useCallback(function () {
|
|
43
45
|
if (!wrapperRef.current || !camera) {
|
|
44
46
|
return;
|
|
@@ -155,6 +157,7 @@ var SvgViewerBase = function SvgViewerBase(_ref) {
|
|
|
155
157
|
isHidden: isHidden
|
|
156
158
|
}, /*#__PURE__*/React.createElement(MediaSvg, {
|
|
157
159
|
testId: 'media-viewer-svg',
|
|
160
|
+
alt: intl.formatMessage(messages.svg_base_alt),
|
|
158
161
|
identifier: identifier,
|
|
159
162
|
dimensions: imgDimensions
|
|
160
163
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -81,7 +81,7 @@ export type ImgProps = {
|
|
|
81
81
|
onError: (() => void) | undefined;
|
|
82
82
|
alt?: string;
|
|
83
83
|
} & DataTestID & ClassName;
|
|
84
|
-
export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError,
|
|
84
|
+
export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, alt, className, ...rest }: ImgProps) => JSX.Element;
|
|
85
85
|
export declare const MedatadataTextWrapper: ({ children }: Children) => JSX.Element;
|
|
86
86
|
export declare const MetadataWrapper: ({ children }: Children) => JSX.Element;
|
|
87
87
|
type MetadataFileNameProps = DataTestID & Children;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
export type ImageWrapperProps = {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
isHidden: boolean;
|
|
5
5
|
onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
|
|
6
6
|
};
|
|
7
|
-
export declare const ImageWrapper:
|
|
7
|
+
export declare const ImageWrapper: React.ForwardRefExoticComponent<ImageWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -81,7 +81,7 @@ export type ImgProps = {
|
|
|
81
81
|
onError: (() => void) | undefined;
|
|
82
82
|
alt?: string;
|
|
83
83
|
} & DataTestID & ClassName;
|
|
84
|
-
export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError,
|
|
84
|
+
export declare const Img: ({ canDrag, isDragging, shouldPixelate, "data-testid": datatestId, src, style, onLoad, onError, alt, className, ...rest }: ImgProps) => JSX.Element;
|
|
85
85
|
export declare const MedatadataTextWrapper: ({ children }: Children) => JSX.Element;
|
|
86
86
|
export declare const MetadataWrapper: ({ children }: Children) => JSX.Element;
|
|
87
87
|
type MetadataFileNameProps = DataTestID & Children;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
export type ImageWrapperProps = {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
isHidden: boolean;
|
|
5
5
|
onClick: (e: React.MouseEvent<Element, MouseEvent>) => void;
|
|
6
6
|
};
|
|
7
|
-
export declare const ImageWrapper:
|
|
7
|
+
export declare const ImageWrapper: React.ForwardRefExoticComponent<ImageWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-viewer",
|
|
3
|
-
"version": "52.9.
|
|
3
|
+
"version": "52.9.4",
|
|
4
4
|
"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,14 +32,14 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/analytics-next": "^11.2.0",
|
|
35
|
-
"@atlaskit/button": "^23.
|
|
35
|
+
"@atlaskit/button": "^23.11.0",
|
|
36
36
|
"@atlaskit/code": "^17.4.0",
|
|
37
37
|
"@atlaskit/css": "^0.19.0",
|
|
38
38
|
"@atlaskit/form": "^15.5.0",
|
|
39
|
-
"@atlaskit/heading": "^5.
|
|
39
|
+
"@atlaskit/heading": "^5.4.0",
|
|
40
40
|
"@atlaskit/icon": "^34.0.0",
|
|
41
41
|
"@atlaskit/icon-file-type": "^7.0.0",
|
|
42
|
-
"@atlaskit/icon-lab": "^6.
|
|
42
|
+
"@atlaskit/icon-lab": "^6.4.0",
|
|
43
43
|
"@atlaskit/media-client": "^36.0.0",
|
|
44
44
|
"@atlaskit/media-client-react": "^5.0.0",
|
|
45
45
|
"@atlaskit/media-common": "^13.0.0",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"@atlaskit/media-svg": "^2.2.0",
|
|
48
48
|
"@atlaskit/media-ui": "^28.7.0",
|
|
49
49
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
50
|
-
"@atlaskit/portal": "^5.
|
|
50
|
+
"@atlaskit/portal": "^5.4.0",
|
|
51
51
|
"@atlaskit/primitives": "^18.1.0",
|
|
52
52
|
"@atlaskit/side-navigation": "^11.1.0",
|
|
53
|
-
"@atlaskit/spinner": "^19.
|
|
54
|
-
"@atlaskit/textfield": "^8.
|
|
55
|
-
"@atlaskit/theme": "^
|
|
53
|
+
"@atlaskit/spinner": "^19.1.0",
|
|
54
|
+
"@atlaskit/textfield": "^8.3.0",
|
|
55
|
+
"@atlaskit/theme": "^23.0.0",
|
|
56
56
|
"@atlaskit/tokens": "^11.4.0",
|
|
57
57
|
"@atlaskit/tooltip": "^21.1.0",
|
|
58
58
|
"@atlaskit/ufo": "^0.4.0",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"@atlaskit/media-test-data": "^3.2.0",
|
|
91
91
|
"@atlaskit/media-test-helpers": "^40.0.0",
|
|
92
92
|
"@atlaskit/ssr": "workspace:^",
|
|
93
|
-
"@atlaskit/toggle": "^15.
|
|
93
|
+
"@atlaskit/toggle": "^15.3.0",
|
|
94
94
|
"@atlassian/a11y-jest-testing": "^0.11.0",
|
|
95
95
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
96
96
|
"@atlassian/ufo": "^0.7.0",
|
|
@@ -130,6 +130,9 @@
|
|
|
130
130
|
},
|
|
131
131
|
"platform_media_react19_support": {
|
|
132
132
|
"type": "boolean"
|
|
133
|
+
},
|
|
134
|
+
"platform_media_a11y_suppression_fixes": {
|
|
135
|
+
"type": "boolean"
|
|
133
136
|
}
|
|
134
137
|
},
|
|
135
138
|
"techstack": {
|