@atlaskit/media-file-preview 0.11.5 → 0.11.7
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 +17 -0
- package/dist/cjs/useFilePreview.js +27 -7
- package/dist/es2019/useFilePreview.js +21 -4
- package/dist/esm/useFilePreview.js +28 -8
- package/dist/types/analytics.d.ts +1 -1
- package/dist/types/getPreview/getPreview.d.ts +1 -1
- package/dist/types/getPreview/helpers.d.ts +1 -1
- package/dist/types/globalScope/printScript.d.ts +1 -1
- package/dist/types/useFilePreview.d.ts +1 -2
- package/dist/types/useMediaImage.d.ts +0 -1
- package/dist/types-ts4.5/analytics.d.ts +1 -1
- package/dist/types-ts4.5/getPreview/getPreview.d.ts +1 -1
- package/dist/types-ts4.5/getPreview/helpers.d.ts +1 -1
- package/dist/types-ts4.5/globalScope/printScript.d.ts +1 -1
- package/dist/types-ts4.5/useFilePreview.d.ts +1 -2
- package/dist/types-ts4.5/useMediaImage.d.ts +0 -1
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/media-file-preview
|
|
2
2
|
|
|
3
|
+
## 0.11.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e0cc5dd07934c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0cc5dd07934c) -
|
|
8
|
+
Fixed perpetual loading of Media Card when SSR failed or when an unsupported media file was
|
|
9
|
+
requested.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 0.11.6
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#187759](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187759)
|
|
17
|
+
[`cb2080ec93b3c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb2080ec93b3c) -
|
|
18
|
+
Add UFO hold to reduce TTAI blindspot gap
|
|
19
|
+
|
|
3
20
|
## 0.11.5
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -11,6 +11,8 @@ var _react = require("react");
|
|
|
11
11
|
var _mediaClient = require("@atlaskit/media-client");
|
|
12
12
|
var _mediaClientReact = require("@atlaskit/media-client-react");
|
|
13
13
|
var _mediaCommon = require("@atlaskit/media-common");
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
|
+
var _interactionContext = require("@atlaskit/react-ufo/interaction-context");
|
|
14
16
|
var _analytics = require("./analytics");
|
|
15
17
|
var _errors = require("./errors");
|
|
16
18
|
var _getPreview = require("./getPreview");
|
|
@@ -61,6 +63,16 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
61
63
|
status: 'unknown'
|
|
62
64
|
}
|
|
63
65
|
});
|
|
66
|
+
var ufoContext = (0, _interactionContext.useInteractionContext)();
|
|
67
|
+
var _useState1 = (0, _react.useState)(false),
|
|
68
|
+
_useState10 = (0, _slicedToArray2.default)(_useState1, 2),
|
|
69
|
+
isLoading = _useState10[0],
|
|
70
|
+
setIsLoading = _useState10[1];
|
|
71
|
+
(0, _react.useLayoutEffect)(function () {
|
|
72
|
+
if (isLoading && (0, _platformFeatureFlags.fg)('platform_close_image_blindspot_2')) {
|
|
73
|
+
return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
|
|
74
|
+
}
|
|
75
|
+
}, [ufoContext, isLoading]);
|
|
64
76
|
var requestDimensions = (0, _react.useMemo)(function () {
|
|
65
77
|
return dimensions ? (0, _helpers.createRequestDimensions)(dimensions) : undefined;
|
|
66
78
|
}, [dimensions]);
|
|
@@ -107,10 +119,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
107
119
|
}
|
|
108
120
|
}
|
|
109
121
|
};
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
preview =
|
|
113
|
-
setPreview =
|
|
122
|
+
var _useState11 = (0, _react.useState)(previewInitializer),
|
|
123
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
124
|
+
preview = _useState12[0],
|
|
125
|
+
setPreview = _useState12[1];
|
|
114
126
|
|
|
115
127
|
//----------------------------------------------------------------
|
|
116
128
|
// FILE STATE
|
|
@@ -176,6 +188,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
176
188
|
// We block any possible future call to this method regardless of the outcome (success or fail)
|
|
177
189
|
// If it fails, the normal preview fetch should occur after the file state is fetched anyways
|
|
178
190
|
setUpfrontPreviewStatus('resolving');
|
|
191
|
+
setIsLoading(true);
|
|
179
192
|
var fetchedDimensions = _objectSpread({}, requestDimensions);
|
|
180
193
|
getAndCacheRemotePreviewRef.current().then(function (newPreview) {
|
|
181
194
|
// If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
|
|
@@ -186,6 +199,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
186
199
|
}).catch(function () {
|
|
187
200
|
// NO need to log error. If this call fails, a refetch will happen after
|
|
188
201
|
}).finally(function () {
|
|
202
|
+
setIsLoading(false);
|
|
189
203
|
setUpfrontPreviewStatus('resolved');
|
|
190
204
|
});
|
|
191
205
|
}
|
|
@@ -208,17 +222,20 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
208
222
|
// Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
|
|
209
223
|
// For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
|
|
210
224
|
// Then, local Preview NOT available
|
|
211
|
-
|
|
225
|
+
setIsLoading(true);
|
|
212
226
|
(0, _getPreview.getAndCacheLocalPreview)(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(function (e) {
|
|
213
227
|
setIsBannedLocalPreview(true);
|
|
214
228
|
// CXP-2723 TODO: We might have to wrap this error in MediaCardError
|
|
215
229
|
setNonCriticalError(e);
|
|
230
|
+
}).finally(function () {
|
|
231
|
+
setIsLoading(false);
|
|
216
232
|
});
|
|
217
233
|
}
|
|
218
234
|
// Remote Preview ----------------------------------------------------------------
|
|
219
235
|
else if (!error && !nonCriticalError && (!preview || (0, _helpers.isBigger)(preview.dimensions, requestDimensions) ||
|
|
220
236
|
// We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
|
|
221
237
|
(0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
|
|
238
|
+
setIsLoading(true);
|
|
222
239
|
getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
|
|
223
240
|
var wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', e);
|
|
224
241
|
if (!preview) {
|
|
@@ -228,6 +245,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
228
245
|
// If there is already a preview, we consider it a non-critical error
|
|
229
246
|
setNonCriticalError(wrappedError);
|
|
230
247
|
}
|
|
248
|
+
}).finally(function () {
|
|
249
|
+
setIsLoading(false);
|
|
231
250
|
});
|
|
232
251
|
}
|
|
233
252
|
}, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
|
|
@@ -243,9 +262,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
243
262
|
if ((0, _getPreview.isSSRClientPreview)(failedPreview)) {
|
|
244
263
|
ssrReliabilityRef.current.client = (0, _analytics.createFailedSSRObject)(failedPreview, traceContext);
|
|
245
264
|
}
|
|
265
|
+
var isSSR = (0, _getPreview.isSSRDataPreview)(failedPreview);
|
|
246
266
|
|
|
247
267
|
// If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
|
|
248
|
-
if (
|
|
268
|
+
if (isSSR) {
|
|
249
269
|
ssrReliabilityRef.current.server = (0, _analytics.createFailedSSRObject)(failedPreview, traceContext);
|
|
250
270
|
ssrReliabilityRef.current.client = (0, _analytics.createFailedSSRObject)(failedPreview, traceContext);
|
|
251
271
|
}
|
|
@@ -256,7 +276,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
|
|
|
256
276
|
}
|
|
257
277
|
var isLocal = (0, _getPreview.isLocalPreview)(failedPreview);
|
|
258
278
|
var isRemote = (0, _getPreview.isRemotePreview)(failedPreview);
|
|
259
|
-
if (isLocal || isRemote) {
|
|
279
|
+
if (isLocal || isRemote || isSSR) {
|
|
260
280
|
var _error = new _errors.ImageLoadError(failedPreview === null || failedPreview === void 0 ? void 0 : failedPreview.source);
|
|
261
281
|
_getPreview.mediaFilePreviewCache.remove(identifier.id, resizeMode);
|
|
262
282
|
if (isLocal) {
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { isImageRepresentationReady, toCommonMediaClientError } from '@atlaskit/media-client';
|
|
3
3
|
import { useCopyIntent, useFileState, useMediaClient } from '@atlaskit/media-client-react';
|
|
4
4
|
import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
|
|
5
7
|
import { createFailedSSRObject, extractErrorInfo } from './analytics';
|
|
6
8
|
import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
|
|
7
9
|
import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
|
|
@@ -35,6 +37,13 @@ export const useFilePreview = ({
|
|
|
35
37
|
status: 'unknown'
|
|
36
38
|
}
|
|
37
39
|
});
|
|
40
|
+
const ufoContext = useInteractionContext();
|
|
41
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
42
|
+
useLayoutEffect(() => {
|
|
43
|
+
if (isLoading && fg('platform_close_image_blindspot_2')) {
|
|
44
|
+
return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
|
|
45
|
+
}
|
|
46
|
+
}, [ufoContext, isLoading]);
|
|
38
47
|
const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
|
|
39
48
|
const requestDimensionsRef = useCurrentValueRef(requestDimensions);
|
|
40
49
|
let imageURLParams = {
|
|
@@ -149,6 +158,7 @@ export const useFilePreview = ({
|
|
|
149
158
|
// We block any possible future call to this method regardless of the outcome (success or fail)
|
|
150
159
|
// If it fails, the normal preview fetch should occur after the file state is fetched anyways
|
|
151
160
|
setUpfrontPreviewStatus('resolving');
|
|
161
|
+
setIsLoading(true);
|
|
152
162
|
const fetchedDimensions = {
|
|
153
163
|
...requestDimensions
|
|
154
164
|
};
|
|
@@ -161,6 +171,7 @@ export const useFilePreview = ({
|
|
|
161
171
|
}).catch(() => {
|
|
162
172
|
// NO need to log error. If this call fails, a refetch will happen after
|
|
163
173
|
}).finally(() => {
|
|
174
|
+
setIsLoading(false);
|
|
164
175
|
setUpfrontPreviewStatus('resolved');
|
|
165
176
|
});
|
|
166
177
|
}
|
|
@@ -183,17 +194,20 @@ export const useFilePreview = ({
|
|
|
183
194
|
// Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
|
|
184
195
|
// For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
|
|
185
196
|
// Then, local Preview NOT available
|
|
186
|
-
|
|
197
|
+
setIsLoading(true);
|
|
187
198
|
getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(e => {
|
|
188
199
|
setIsBannedLocalPreview(true);
|
|
189
200
|
// CXP-2723 TODO: We might have to wrap this error in MediaCardError
|
|
190
201
|
setNonCriticalError(e);
|
|
202
|
+
}).finally(() => {
|
|
203
|
+
setIsLoading(false);
|
|
191
204
|
});
|
|
192
205
|
}
|
|
193
206
|
// Remote Preview ----------------------------------------------------------------
|
|
194
207
|
else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
|
|
195
208
|
// We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
|
|
196
209
|
isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
|
|
210
|
+
setIsLoading(true);
|
|
197
211
|
getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
|
|
198
212
|
const wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
|
|
199
213
|
if (!preview) {
|
|
@@ -203,6 +217,8 @@ export const useFilePreview = ({
|
|
|
203
217
|
// If there is already a preview, we consider it a non-critical error
|
|
204
218
|
setNonCriticalError(wrappedError);
|
|
205
219
|
}
|
|
220
|
+
}).finally(() => {
|
|
221
|
+
setIsLoading(false);
|
|
206
222
|
});
|
|
207
223
|
}
|
|
208
224
|
}, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
|
|
@@ -218,9 +234,10 @@ export const useFilePreview = ({
|
|
|
218
234
|
if (isSSRClientPreview(failedPreview)) {
|
|
219
235
|
ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
|
|
220
236
|
}
|
|
237
|
+
const isSSR = isSSRDataPreview(failedPreview);
|
|
221
238
|
|
|
222
239
|
// If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
|
|
223
|
-
if (
|
|
240
|
+
if (isSSR) {
|
|
224
241
|
ssrReliabilityRef.current.server = createFailedSSRObject(failedPreview, traceContext);
|
|
225
242
|
ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
|
|
226
243
|
}
|
|
@@ -231,7 +248,7 @@ export const useFilePreview = ({
|
|
|
231
248
|
}
|
|
232
249
|
const isLocal = isLocalPreview(failedPreview);
|
|
233
250
|
const isRemote = isRemotePreview(failedPreview);
|
|
234
|
-
if (isLocal || isRemote) {
|
|
251
|
+
if (isLocal || isRemote || isSSR) {
|
|
235
252
|
const error = new ImageLoadError(failedPreview === null || failedPreview === void 0 ? void 0 : failedPreview.source);
|
|
236
253
|
mediaFilePreviewCache.remove(identifier.id, resizeMode);
|
|
237
254
|
if (isLocal) {
|
|
@@ -2,10 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
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; }
|
|
4
4
|
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) { _defineProperty(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; }
|
|
5
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
|
+
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { isImageRepresentationReady, toCommonMediaClientError } from '@atlaskit/media-client';
|
|
7
7
|
import { useCopyIntent, useFileState, useMediaClient } from '@atlaskit/media-client-react';
|
|
8
8
|
import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
|
|
9
11
|
import { createFailedSSRObject, extractErrorInfo } from './analytics';
|
|
10
12
|
import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
|
|
11
13
|
import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
|
|
@@ -54,6 +56,16 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
54
56
|
status: 'unknown'
|
|
55
57
|
}
|
|
56
58
|
});
|
|
59
|
+
var ufoContext = useInteractionContext();
|
|
60
|
+
var _useState1 = useState(false),
|
|
61
|
+
_useState10 = _slicedToArray(_useState1, 2),
|
|
62
|
+
isLoading = _useState10[0],
|
|
63
|
+
setIsLoading = _useState10[1];
|
|
64
|
+
useLayoutEffect(function () {
|
|
65
|
+
if (isLoading && fg('platform_close_image_blindspot_2')) {
|
|
66
|
+
return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
|
|
67
|
+
}
|
|
68
|
+
}, [ufoContext, isLoading]);
|
|
57
69
|
var requestDimensions = useMemo(function () {
|
|
58
70
|
return dimensions ? createRequestDimensions(dimensions) : undefined;
|
|
59
71
|
}, [dimensions]);
|
|
@@ -100,10 +112,10 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
100
112
|
}
|
|
101
113
|
}
|
|
102
114
|
};
|
|
103
|
-
var
|
|
104
|
-
|
|
105
|
-
preview =
|
|
106
|
-
setPreview =
|
|
115
|
+
var _useState11 = useState(previewInitializer),
|
|
116
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
117
|
+
preview = _useState12[0],
|
|
118
|
+
setPreview = _useState12[1];
|
|
107
119
|
|
|
108
120
|
//----------------------------------------------------------------
|
|
109
121
|
// FILE STATE
|
|
@@ -169,6 +181,7 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
169
181
|
// We block any possible future call to this method regardless of the outcome (success or fail)
|
|
170
182
|
// If it fails, the normal preview fetch should occur after the file state is fetched anyways
|
|
171
183
|
setUpfrontPreviewStatus('resolving');
|
|
184
|
+
setIsLoading(true);
|
|
172
185
|
var fetchedDimensions = _objectSpread({}, requestDimensions);
|
|
173
186
|
getAndCacheRemotePreviewRef.current().then(function (newPreview) {
|
|
174
187
|
// If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
|
|
@@ -179,6 +192,7 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
179
192
|
}).catch(function () {
|
|
180
193
|
// NO need to log error. If this call fails, a refetch will happen after
|
|
181
194
|
}).finally(function () {
|
|
195
|
+
setIsLoading(false);
|
|
182
196
|
setUpfrontPreviewStatus('resolved');
|
|
183
197
|
});
|
|
184
198
|
}
|
|
@@ -201,17 +215,20 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
201
215
|
// Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
|
|
202
216
|
// For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
|
|
203
217
|
// Then, local Preview NOT available
|
|
204
|
-
|
|
218
|
+
setIsLoading(true);
|
|
205
219
|
getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(function (e) {
|
|
206
220
|
setIsBannedLocalPreview(true);
|
|
207
221
|
// CXP-2723 TODO: We might have to wrap this error in MediaCardError
|
|
208
222
|
setNonCriticalError(e);
|
|
223
|
+
}).finally(function () {
|
|
224
|
+
setIsLoading(false);
|
|
209
225
|
});
|
|
210
226
|
}
|
|
211
227
|
// Remote Preview ----------------------------------------------------------------
|
|
212
228
|
else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
|
|
213
229
|
// We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
|
|
214
230
|
isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
|
|
231
|
+
setIsLoading(true);
|
|
215
232
|
getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
|
|
216
233
|
var wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
|
|
217
234
|
if (!preview) {
|
|
@@ -221,6 +238,8 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
221
238
|
// If there is already a preview, we consider it a non-critical error
|
|
222
239
|
setNonCriticalError(wrappedError);
|
|
223
240
|
}
|
|
241
|
+
}).finally(function () {
|
|
242
|
+
setIsLoading(false);
|
|
224
243
|
});
|
|
225
244
|
}
|
|
226
245
|
}, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
|
|
@@ -236,9 +255,10 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
236
255
|
if (isSSRClientPreview(failedPreview)) {
|
|
237
256
|
ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
|
|
238
257
|
}
|
|
258
|
+
var isSSR = isSSRDataPreview(failedPreview);
|
|
239
259
|
|
|
240
260
|
// If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
|
|
241
|
-
if (
|
|
261
|
+
if (isSSR) {
|
|
242
262
|
ssrReliabilityRef.current.server = createFailedSSRObject(failedPreview, traceContext);
|
|
243
263
|
ssrReliabilityRef.current.client = createFailedSSRObject(failedPreview, traceContext);
|
|
244
264
|
}
|
|
@@ -249,7 +269,7 @@ export var useFilePreview = function useFilePreview(_ref) {
|
|
|
249
269
|
}
|
|
250
270
|
var isLocal = isLocalPreview(failedPreview);
|
|
251
271
|
var isRemote = isRemotePreview(failedPreview);
|
|
252
|
-
if (isLocal || isRemote) {
|
|
272
|
+
if (isLocal || isRemote || isSSR) {
|
|
253
273
|
var _error = new ImageLoadError(failedPreview === null || failedPreview === void 0 ? void 0 : failedPreview.source);
|
|
254
274
|
mediaFilePreviewCache.remove(identifier.id, resizeMode);
|
|
255
275
|
if (isLocal) {
|
|
@@ -23,7 +23,7 @@ export type SSRStatus = {
|
|
|
23
23
|
};
|
|
24
24
|
export declare const getErrorTraceContext: (error: MediaFilePreviewError) => MediaTraceContext | undefined;
|
|
25
25
|
export declare const getRenderErrorFailReason: (error: MediaFilePreviewError) => FailedErrorFailReason;
|
|
26
|
-
export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason |
|
|
26
|
+
export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason | "nativeError";
|
|
27
27
|
export declare const getRenderErrorErrorDetail: (error: MediaFilePreviewError) => string;
|
|
28
28
|
export declare const extractErrorInfo: (error: MediaFilePreviewError, metadataTraceContext?: MediaTraceContext) => MediaFilePreviewErrorInfo;
|
|
29
29
|
export declare const createFailedSSRObject: (preview: MediaFilePreview, metadataTraceContext?: MediaTraceContext) => SSRStatusFail;
|
|
@@ -8,4 +8,4 @@ export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
|
|
|
8
8
|
export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
|
|
9
9
|
export declare const isSSRPreview: (preview: MediaFilePreview) => boolean;
|
|
10
10
|
export declare const getAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: MediaFilePreviewDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
|
|
11
|
-
export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams[
|
|
11
|
+
export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams["mode"], mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => Promise<MediaFilePreview>;
|
|
@@ -5,6 +5,6 @@ import { type MediaFilePreview } from '../types';
|
|
|
5
5
|
* This method tells the support for the media
|
|
6
6
|
* types covered in getCardPreviewFromFilePreview
|
|
7
7
|
*/
|
|
8
|
-
export declare const isSupportedLocalPreview: (mediaType?: MediaType) =>
|
|
8
|
+
export declare const isSupportedLocalPreview: (mediaType?: MediaType) => mediaType is "video" | "image";
|
|
9
9
|
export declare const getLocalPreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<MediaFilePreview>;
|
|
10
10
|
export declare const getRemotePreview: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const printFunctionCall: <T extends any
|
|
1
|
+
export declare const printFunctionCall: <T extends Array<any>>(fn: (...args: T) => void, ...args: T) => string;
|
|
2
2
|
export declare const printScript: (statements: string[]) => string;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { type FileIdentifier, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
|
|
3
2
|
import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
|
|
4
3
|
import { type SSRStatus } from './analytics';
|
|
@@ -38,5 +37,5 @@ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions,
|
|
|
38
37
|
onImageError: (failedPreview?: MediaFilePreview) => void;
|
|
39
38
|
onImageLoad: (newPreview?: MediaFilePreview) => void;
|
|
40
39
|
getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
|
|
41
|
-
copyNodeRef: (instance:
|
|
40
|
+
copyNodeRef: (instance: HTMLDivElement | HTMLImageElement | null) => void;
|
|
42
41
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { type FileIdentifier, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
|
|
3
2
|
import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
|
|
4
3
|
import { type MediaFilePreviewDimensions } from './types';
|
|
@@ -23,7 +23,7 @@ export type SSRStatus = {
|
|
|
23
23
|
};
|
|
24
24
|
export declare const getErrorTraceContext: (error: MediaFilePreviewError) => MediaTraceContext | undefined;
|
|
25
25
|
export declare const getRenderErrorFailReason: (error: MediaFilePreviewError) => FailedErrorFailReason;
|
|
26
|
-
export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason |
|
|
26
|
+
export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason | "nativeError";
|
|
27
27
|
export declare const getRenderErrorErrorDetail: (error: MediaFilePreviewError) => string;
|
|
28
28
|
export declare const extractErrorInfo: (error: MediaFilePreviewError, metadataTraceContext?: MediaTraceContext) => MediaFilePreviewErrorInfo;
|
|
29
29
|
export declare const createFailedSSRObject: (preview: MediaFilePreview, metadataTraceContext?: MediaTraceContext) => SSRStatusFail;
|
|
@@ -8,4 +8,4 @@ export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
|
|
|
8
8
|
export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
|
|
9
9
|
export declare const isSSRPreview: (preview: MediaFilePreview) => boolean;
|
|
10
10
|
export declare const getAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: MediaFilePreviewDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
|
|
11
|
-
export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams[
|
|
11
|
+
export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams["mode"], mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => Promise<MediaFilePreview>;
|
|
@@ -5,6 +5,6 @@ import { type MediaFilePreview } from '../types';
|
|
|
5
5
|
* This method tells the support for the media
|
|
6
6
|
* types covered in getCardPreviewFromFilePreview
|
|
7
7
|
*/
|
|
8
|
-
export declare const isSupportedLocalPreview: (mediaType?: MediaType) =>
|
|
8
|
+
export declare const isSupportedLocalPreview: (mediaType?: MediaType) => mediaType is "video" | "image";
|
|
9
9
|
export declare const getLocalPreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<MediaFilePreview>;
|
|
10
10
|
export declare const getRemotePreview: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const printFunctionCall: <T extends any
|
|
1
|
+
export declare const printFunctionCall: <T extends Array<any>>(fn: (...args: T) => void, ...args: T) => string;
|
|
2
2
|
export declare const printScript: (statements: string[]) => string;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { type FileIdentifier, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
|
|
3
2
|
import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
|
|
4
3
|
import { type SSRStatus } from './analytics';
|
|
@@ -38,5 +37,5 @@ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions,
|
|
|
38
37
|
onImageError: (failedPreview?: MediaFilePreview) => void;
|
|
39
38
|
onImageLoad: (newPreview?: MediaFilePreview) => void;
|
|
40
39
|
getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
|
|
41
|
-
copyNodeRef: (instance:
|
|
40
|
+
copyNodeRef: (instance: HTMLDivElement | HTMLImageElement | null) => void;
|
|
42
41
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { type FileIdentifier, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
|
|
3
2
|
import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
|
|
4
3
|
import { type MediaFilePreviewDimensions } from './types';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/media-file-preview",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.7",
|
|
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",
|
|
@@ -29,15 +29,13 @@
|
|
|
29
29
|
},
|
|
30
30
|
"sideEffects": false,
|
|
31
31
|
"atlaskit:src": "src/index.ts",
|
|
32
|
-
"af:exports": {
|
|
33
|
-
".": "./src/index.ts"
|
|
34
|
-
},
|
|
35
32
|
"dependencies": {
|
|
36
|
-
"@atlaskit/media-client": "^35.
|
|
33
|
+
"@atlaskit/media-client": "^35.3.0",
|
|
37
34
|
"@atlaskit/media-client-react": "^4.1.0",
|
|
38
35
|
"@atlaskit/media-common": "^12.3.0",
|
|
39
36
|
"@atlaskit/media-ui": "^28.6.0",
|
|
40
37
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
38
|
+
"@atlaskit/react-ufo": "^4.5.0",
|
|
41
39
|
"@babel/runtime": "^7.0.0",
|
|
42
40
|
"eventemitter2": "^4.1.0",
|
|
43
41
|
"lru_map": "^0.4.1"
|
|
@@ -51,13 +49,11 @@
|
|
|
51
49
|
"@af/visual-regression": "workspace:^",
|
|
52
50
|
"@atlaskit/media-state": "^1.8.0",
|
|
53
51
|
"@atlaskit/media-test-data": "^3.2.0",
|
|
54
|
-
"@atlaskit/section-message": "^8.
|
|
52
|
+
"@atlaskit/section-message": "^8.7.0",
|
|
55
53
|
"@atlaskit/ssr": "workspace:^",
|
|
56
|
-
"@atlaskit/visual-regression": "workspace:^",
|
|
57
54
|
"@testing-library/react": "^13.4.0",
|
|
58
55
|
"@testing-library/react-hooks": "^8.0.1",
|
|
59
56
|
"react-dom": "^18.2.0",
|
|
60
|
-
"typescript": "~5.4.2",
|
|
61
57
|
"wait-for-expect": "^1.2.0"
|
|
62
58
|
},
|
|
63
59
|
"techstack": {
|
|
@@ -95,5 +91,9 @@
|
|
|
95
91
|
]
|
|
96
92
|
}
|
|
97
93
|
},
|
|
98
|
-
"platform-feature-flags": {
|
|
94
|
+
"platform-feature-flags": {
|
|
95
|
+
"platform_close_image_blindspot_2": {
|
|
96
|
+
"type": "boolean"
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
99
|
}
|