@atlaskit/media-file-preview 0.16.0 → 0.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/media-file-preview
|
|
2
2
|
|
|
3
|
+
## 0.16.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`6d87d08be8526`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6d87d08be8526) -
|
|
8
|
+
Add dependency for a11y testing.
|
|
9
|
+
|
|
10
|
+
## 0.16.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 0.16.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
dimensions = params.dimensions,
|
|
26
26
|
error = params.error,
|
|
27
27
|
featureFlags = params.featureFlags;
|
|
28
|
-
if (featureFlags[
|
|
28
|
+
if (featureFlags['media-perf-uplift-mutation-fix']) {
|
|
29
29
|
var _prevData$dimensions, _script$parentElement;
|
|
30
30
|
var prevData = mediaCardSsr[key];
|
|
31
31
|
var isPreviousImageLarger = prevData && prevData.mode === paramMode && ((_prevData$dimensions = prevData.dimensions) === null || _prevData$dimensions === void 0 ? void 0 : _prevData$dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && prevData.dimensions.width > dimensions.width;
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
dimensions: dimensions,
|
|
37
37
|
error: error,
|
|
38
38
|
srcSet: srcSet,
|
|
39
|
-
loading:
|
|
39
|
+
loading: 'lazy',
|
|
40
40
|
loadPromise: undefined,
|
|
41
41
|
mode: paramMode
|
|
42
42
|
};
|
|
43
|
-
var img = script === null || script === void 0 || (_script$parentElement = script.parentElement) === null || _script$parentElement === void 0 ? void 0 : _script$parentElement.querySelector(
|
|
43
|
+
var img = script === null || script === void 0 || (_script$parentElement = script.parentElement) === null || _script$parentElement === void 0 ? void 0 : _script$parentElement.querySelector('img');
|
|
44
44
|
globalMedia.mediaCountSsr = globalMedia.mediaCountSsr || 0;
|
|
45
45
|
if (img) {
|
|
46
|
-
if (featureFlags[
|
|
46
|
+
if (featureFlags['media-perf-lazy-loading-optimisation'] && globalMedia.mediaCountSsr < params.maxEagerLoadCount) {
|
|
47
47
|
globalMedia.mediaCountSsr++;
|
|
48
|
-
img.removeAttribute(
|
|
49
|
-
currData.loading =
|
|
48
|
+
img.removeAttribute('loading');
|
|
49
|
+
currData.loading = '';
|
|
50
50
|
var observer = new PerformanceObserver(function (entries) {
|
|
51
51
|
entries.getEntries().forEach(function (entry) {
|
|
52
52
|
if (srcSet.includes(entry.name)) {
|
|
@@ -68,12 +68,12 @@
|
|
|
68
68
|
}
|
|
69
69
|
currData.loadPromise = new Promise(function (resolve, reject) {
|
|
70
70
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
71
|
-
img.addEventListener(
|
|
71
|
+
img.addEventListener('load', function () {
|
|
72
72
|
return resolve();
|
|
73
73
|
});
|
|
74
74
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
75
|
-
img.addEventListener(
|
|
76
|
-
return reject(new Error(
|
|
75
|
+
img.addEventListener('error', function () {
|
|
76
|
+
return reject(new Error('Failed to load image'));
|
|
77
77
|
});
|
|
78
78
|
});
|
|
79
79
|
}
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
|
|
90
90
|
// this replace will be used as a placeholder for the stringified params to be injected into the script
|
|
91
91
|
})({
|
|
92
|
-
replace:
|
|
92
|
+
replace: ''
|
|
93
93
|
});
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
error,
|
|
26
26
|
featureFlags
|
|
27
27
|
} = params;
|
|
28
|
-
if (featureFlags[
|
|
28
|
+
if (featureFlags['media-perf-uplift-mutation-fix']) {
|
|
29
29
|
var _prevData$dimensions, _script$parentElement;
|
|
30
30
|
const prevData = mediaCardSsr[key];
|
|
31
31
|
const isPreviousImageLarger = prevData && prevData.mode === paramMode && ((_prevData$dimensions = prevData.dimensions) === null || _prevData$dimensions === void 0 ? void 0 : _prevData$dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && prevData.dimensions.width > dimensions.width;
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
dimensions,
|
|
37
37
|
error,
|
|
38
38
|
srcSet,
|
|
39
|
-
loading:
|
|
39
|
+
loading: 'lazy',
|
|
40
40
|
loadPromise: undefined,
|
|
41
41
|
mode: paramMode
|
|
42
42
|
};
|
|
43
|
-
const img = script === null || script === void 0 ? void 0 : (_script$parentElement = script.parentElement) === null || _script$parentElement === void 0 ? void 0 : _script$parentElement.querySelector(
|
|
43
|
+
const img = script === null || script === void 0 ? void 0 : (_script$parentElement = script.parentElement) === null || _script$parentElement === void 0 ? void 0 : _script$parentElement.querySelector('img');
|
|
44
44
|
globalMedia.mediaCountSsr = globalMedia.mediaCountSsr || 0;
|
|
45
45
|
if (img) {
|
|
46
|
-
if (featureFlags[
|
|
46
|
+
if (featureFlags['media-perf-lazy-loading-optimisation'] && globalMedia.mediaCountSsr < params.maxEagerLoadCount) {
|
|
47
47
|
globalMedia.mediaCountSsr++;
|
|
48
|
-
img.removeAttribute(
|
|
49
|
-
currData.loading =
|
|
48
|
+
img.removeAttribute('loading');
|
|
49
|
+
currData.loading = '';
|
|
50
50
|
const observer = new PerformanceObserver(entries => {
|
|
51
51
|
entries.getEntries().forEach(entry => {
|
|
52
52
|
if (srcSet.includes(entry.name)) {
|
|
@@ -68,9 +68,9 @@
|
|
|
68
68
|
}
|
|
69
69
|
currData.loadPromise = new Promise(function (resolve, reject) {
|
|
70
70
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
71
|
-
img.addEventListener(
|
|
71
|
+
img.addEventListener('load', () => resolve());
|
|
72
72
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
73
|
-
img.addEventListener(
|
|
73
|
+
img.addEventListener('error', () => reject(new Error('Failed to load image')));
|
|
74
74
|
});
|
|
75
75
|
}
|
|
76
76
|
mediaCardSsr[key] = isPreviousImageLarger ? prevData : currData;
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
|
|
86
86
|
// this replace will be used as a placeholder for the stringified params to be injected into the script
|
|
87
87
|
})({
|
|
88
|
-
replace:
|
|
88
|
+
replace: ''
|
|
89
89
|
});
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
dimensions = params.dimensions,
|
|
24
24
|
error = params.error,
|
|
25
25
|
featureFlags = params.featureFlags;
|
|
26
|
-
if (featureFlags[
|
|
26
|
+
if (featureFlags['media-perf-uplift-mutation-fix']) {
|
|
27
27
|
var _prevData$dimensions, _script$parentElement;
|
|
28
28
|
var prevData = mediaCardSsr[key];
|
|
29
29
|
var isPreviousImageLarger = prevData && prevData.mode === paramMode && ((_prevData$dimensions = prevData.dimensions) === null || _prevData$dimensions === void 0 ? void 0 : _prevData$dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && prevData.dimensions.width > dimensions.width;
|
|
@@ -34,17 +34,17 @@
|
|
|
34
34
|
dimensions: dimensions,
|
|
35
35
|
error: error,
|
|
36
36
|
srcSet: srcSet,
|
|
37
|
-
loading:
|
|
37
|
+
loading: 'lazy',
|
|
38
38
|
loadPromise: undefined,
|
|
39
39
|
mode: paramMode
|
|
40
40
|
};
|
|
41
|
-
var img = script === null || script === void 0 || (_script$parentElement = script.parentElement) === null || _script$parentElement === void 0 ? void 0 : _script$parentElement.querySelector(
|
|
41
|
+
var img = script === null || script === void 0 || (_script$parentElement = script.parentElement) === null || _script$parentElement === void 0 ? void 0 : _script$parentElement.querySelector('img');
|
|
42
42
|
globalMedia.mediaCountSsr = globalMedia.mediaCountSsr || 0;
|
|
43
43
|
if (img) {
|
|
44
|
-
if (featureFlags[
|
|
44
|
+
if (featureFlags['media-perf-lazy-loading-optimisation'] && globalMedia.mediaCountSsr < params.maxEagerLoadCount) {
|
|
45
45
|
globalMedia.mediaCountSsr++;
|
|
46
|
-
img.removeAttribute(
|
|
47
|
-
currData.loading =
|
|
46
|
+
img.removeAttribute('loading');
|
|
47
|
+
currData.loading = '';
|
|
48
48
|
var observer = new PerformanceObserver(function (entries) {
|
|
49
49
|
entries.getEntries().forEach(function (entry) {
|
|
50
50
|
if (srcSet.includes(entry.name)) {
|
|
@@ -66,12 +66,12 @@
|
|
|
66
66
|
}
|
|
67
67
|
currData.loadPromise = new Promise(function (resolve, reject) {
|
|
68
68
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
69
|
-
img.addEventListener(
|
|
69
|
+
img.addEventListener('load', function () {
|
|
70
70
|
return resolve();
|
|
71
71
|
});
|
|
72
72
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
73
|
-
img.addEventListener(
|
|
74
|
-
return reject(new Error(
|
|
73
|
+
img.addEventListener('error', function () {
|
|
74
|
+
return reject(new Error('Failed to load image'));
|
|
75
75
|
});
|
|
76
76
|
});
|
|
77
77
|
}
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
|
|
88
88
|
// this replace will be used as a placeholder for the stringified params to be injected into the script
|
|
89
89
|
})({
|
|
90
|
-
replace:
|
|
90
|
+
replace: ''
|
|
91
91
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-file-preview",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.2",
|
|
4
4
|
"description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"sideEffects": false,
|
|
31
31
|
"atlaskit:src": "src/index.ts",
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@atlaskit/media-client": "^
|
|
34
|
-
"@atlaskit/media-client-react": "^
|
|
35
|
-
"@atlaskit/media-common": "^
|
|
33
|
+
"@atlaskit/media-client": "^36.0.0",
|
|
34
|
+
"@atlaskit/media-client-react": "^5.0.0",
|
|
35
|
+
"@atlaskit/media-common": "^13.0.0",
|
|
36
36
|
"@atlaskit/media-ui": "^28.7.0",
|
|
37
37
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
38
|
-
"@atlaskit/react-ufo": "^5.
|
|
38
|
+
"@atlaskit/react-ufo": "^5.4.0",
|
|
39
39
|
"@babel/runtime": "^7.0.0",
|
|
40
40
|
"eventemitter2": "^4.1.0",
|
|
41
41
|
"lru_map": "^0.4.1"
|
|
@@ -47,10 +47,11 @@
|
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@af/integration-testing": "workspace:^",
|
|
49
49
|
"@af/visual-regression": "workspace:^",
|
|
50
|
-
"@atlaskit/media-state": "^
|
|
50
|
+
"@atlaskit/media-state": "^2.0.0",
|
|
51
51
|
"@atlaskit/media-test-data": "^3.2.0",
|
|
52
52
|
"@atlaskit/section-message": "^8.12.0",
|
|
53
53
|
"@atlaskit/ssr": "workspace:^",
|
|
54
|
+
"@atlassian/a11y-jest-testing": "^0.10.0",
|
|
54
55
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
55
56
|
"@testing-library/react": "^16.3.0",
|
|
56
57
|
"react-dom": "^18.2.0",
|