@atlaskit/media-file-preview 0.7.0 → 0.8.1

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 (7) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/useFilePreview.js +13 -4
  3. package/dist/es2019/useFilePreview.js +15 -5
  4. package/dist/esm/useFilePreview.js +13 -4
  5. package/dist/types/useFilePreview.d.ts +3 -1
  6. package/dist/types-ts4.5/useFilePreview.d.ts +3 -1
  7. package/package.json +11 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/media-file-preview
2
2
 
3
+ ## 0.8.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#132551](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132551)
8
+ [`19eb1d802c7f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/19eb1d802c7f9) -
9
+ Fixed the dual fetching of image when medaiBlobUrlAttributes change
10
+
11
+ ## 0.8.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#130787](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130787)
16
+ [`64a680780dc57`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64a680780dc57) -
17
+ Add performance observer metrics for Media Card to assist investigation into hot-110955
18
+
19
+ ### Patch Changes
20
+
21
+ - [#131947](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131947)
22
+ [`871136a343690`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/871136a343690) -
23
+ Fixed issue with images being refetched if the items responded before upfront preview resolved
24
+ - Updated dependencies
25
+
3
26
  ## 0.7.0
4
27
 
5
28
  ### Minor Changes
package/dist/cjs/useFilePreview.js CHANGED
@@ -11,6 +11,7 @@ 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");
14
15
  var _analytics = require("./analytics");
15
16
  var _errors = require("./errors");
16
17
  var _getPreview = require("./getPreview");
@@ -30,7 +31,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
30
31
  _ref$allowAnimated = _ref.allowAnimated,
31
32
  allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
32
33
  upscale = _ref.upscale,
33
- maxAge = _ref.maxAge;
34
+ maxAge = _ref.maxAge,
35
+ source = _ref.source;
34
36
  var mediaClient = (0, _mediaClientReact.useMediaClient)();
35
37
  var _useState = (0, _react.useState)('loading'),
36
38
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -72,6 +74,12 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
72
74
  upscale: upscale,
73
75
  'max-age': maxAge
74
76
  });
77
+ if ((0, _platformFeatureFlags.fg)('platform.media-card-performance-observer_lgc7b')) {
78
+ imageURLParams = _objectSpread(_objectSpread({}, imageURLParams), {}, {
79
+ source: source,
80
+ ssr: ssr
81
+ });
82
+ }
75
83
  var previewInitializer = function previewInitializer() {
76
84
  var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
77
85
  if (preview) {
@@ -192,6 +200,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
192
200
  // Cache, Local & Remote Preview
193
201
  //----------------------------------------------------------------
194
202
 
203
+ var mediaBlobUrlAttrsRef = (0, _helpers.useCurrentValueRef)(mediaBlobUrlAttrs);
195
204
  (0, _react.useEffect)(function () {
196
205
  var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
197
206
 
@@ -205,7 +214,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
205
214
  // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
206
215
  // Then, local Preview NOT available
207
216
 
208
- (0, _getPreview.getAndCacheLocalPreview)(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
217
+ (0, _getPreview.getAndCacheLocalPreview)(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(function (e) {
209
218
  setIsBannedLocalPreview(true);
210
219
  // CXP-2723 TODO: We might have to wrap this error in MediaCardError
211
220
  setNonCriticalError(e);
@@ -214,7 +223,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
214
223
  // Remote Preview ----------------------------------------------------------------
215
224
  else if (!error && !nonCriticalError && (!preview || (0, _helpers.isBigger)(preview.dimensions, requestDimensions) ||
216
225
  // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
217
- (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
226
+ (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
218
227
  getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
219
228
  var wrappedError = (0, _errors.ensureMediaFilePreviewError)('preview-fetch', e);
220
229
  if (!preview) {
@@ -226,7 +235,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
226
235
  }
227
236
  });
228
237
  }
229
- }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
238
+ }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
230
239
 
231
240
  //----------------------------------------------------------------
232
241
  // RETURN
package/dist/es2019/useFilePreview.js CHANGED
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
2
  import { isImageRepresentationReady } from '@atlaskit/media-client';
3
3
  import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
4
4
  import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { createFailedSSRObject, extractErrorInfo } from './analytics';
6
7
  import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
7
8
  import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
@@ -18,7 +19,8 @@ export const useFilePreview = ({
18
19
  // TODO: mediaBlobUrlAttrs can be missing several values contained in the file details. The preview hook is not updating the params in the preview after the file details are available.
19
20
  allowAnimated = true,
20
21
  upscale,
21
- maxAge
22
+ maxAge,
23
+ source
22
24
  }) => {
23
25
  const mediaClient = useMediaClient();
24
26
  const [status, setStatus] = useState('loading');
@@ -36,7 +38,7 @@ export const useFilePreview = ({
36
38
  });
37
39
  const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
38
40
  const requestDimensionsRef = useCurrentValueRef(requestDimensions);
39
- const imageURLParams = {
41
+ let imageURLParams = {
40
42
  collection: identifier.collectionName,
41
43
  mode: resizeMode,
42
44
  ...requestDimensions,
@@ -44,6 +46,13 @@ export const useFilePreview = ({
44
46
  upscale,
45
47
  'max-age': maxAge
46
48
  };
49
+ if (fg('platform.media-card-performance-observer_lgc7b')) {
50
+ imageURLParams = {
51
+ ...imageURLParams,
52
+ source,
53
+ ssr
54
+ };
55
+ }
47
56
  const previewInitializer = () => {
48
57
  const preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
49
58
  if (preview) {
@@ -166,6 +175,7 @@ export const useFilePreview = ({
166
175
  // Cache, Local & Remote Preview
167
176
  //----------------------------------------------------------------
168
177
 
178
+ const mediaBlobUrlAttrsRef = useCurrentValueRef(mediaBlobUrlAttrs);
169
179
  useEffect(() => {
170
180
  const cachedPreview = mediaFilePreviewCache.get(identifier.id, resizeMode);
171
181
 
@@ -179,7 +189,7 @@ export const useFilePreview = ({
179
189
  // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
180
190
  // Then, local Preview NOT available
181
191
 
182
- getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(e => {
192
+ getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(e => {
183
193
  setIsBannedLocalPreview(true);
184
194
  // CXP-2723 TODO: We might have to wrap this error in MediaCardError
185
195
  setNonCriticalError(e);
@@ -188,7 +198,7 @@ export const useFilePreview = ({
188
198
  // Remote Preview ----------------------------------------------------------------
189
199
  else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
190
200
  // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
191
- isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
201
+ isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
192
202
  getAndCacheRemotePreviewRef.current().then(setPreview).catch(e => {
193
203
  const wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
194
204
  if (!preview) {
@@ -200,7 +210,7 @@ export const useFilePreview = ({
200
210
  }
201
211
  });
202
212
  }
203
- }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
213
+ }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
204
214
 
205
215
  //----------------------------------------------------------------
206
216
  // RETURN
package/dist/esm/useFilePreview.js CHANGED
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
6
6
  import { isImageRepresentationReady } from '@atlaskit/media-client';
7
7
  import { useFileState, useMediaClient } from '@atlaskit/media-client-react';
8
8
  import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { createFailedSSRObject, extractErrorInfo } from './analytics';
10
11
  import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
11
12
  import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
@@ -23,7 +24,8 @@ export var useFilePreview = function useFilePreview(_ref) {
23
24
  _ref$allowAnimated = _ref.allowAnimated,
24
25
  allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
25
26
  upscale = _ref.upscale,
26
- maxAge = _ref.maxAge;
27
+ maxAge = _ref.maxAge,
28
+ source = _ref.source;
27
29
  var mediaClient = useMediaClient();
28
30
  var _useState = useState('loading'),
29
31
  _useState2 = _slicedToArray(_useState, 2),
@@ -65,6 +67,12 @@ export var useFilePreview = function useFilePreview(_ref) {
65
67
  upscale: upscale,
66
68
  'max-age': maxAge
67
69
  });
70
+ if (fg('platform.media-card-performance-observer_lgc7b')) {
71
+ imageURLParams = _objectSpread(_objectSpread({}, imageURLParams), {}, {
72
+ source: source,
73
+ ssr: ssr
74
+ });
75
+ }
68
76
  var previewInitializer = function previewInitializer() {
69
77
  var preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
70
78
  if (preview) {
@@ -185,6 +193,7 @@ export var useFilePreview = function useFilePreview(_ref) {
185
193
  // Cache, Local & Remote Preview
186
194
  //----------------------------------------------------------------
187
195
 
196
+ var mediaBlobUrlAttrsRef = useCurrentValueRef(mediaBlobUrlAttrs);
188
197
  useEffect(function () {
189
198
  var cachedPreview = mediaFilePreviewCache.get(identifier.id, resizeMode);
190
199
 
@@ -198,7 +207,7 @@ export var useFilePreview = function useFilePreview(_ref) {
198
207
  // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
199
208
  // Then, local Preview NOT available
200
209
 
201
- getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
210
+ getAndCacheLocalPreview(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(function (e) {
202
211
  setIsBannedLocalPreview(true);
203
212
  // CXP-2723 TODO: We might have to wrap this error in MediaCardError
204
213
  setNonCriticalError(e);
@@ -207,7 +216,7 @@ export var useFilePreview = function useFilePreview(_ref) {
207
216
  // Remote Preview ----------------------------------------------------------------
208
217
  else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
209
218
  // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
210
- isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus !== 'not-resolved' && isBackendPreviewReady) {
219
+ isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
211
220
  getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
212
221
  var wrappedError = ensureMediaFilePreviewError('preview-fetch', e);
213
222
  if (!preview) {
@@ -219,7 +228,7 @@ export var useFilePreview = function useFilePreview(_ref) {
219
228
  }
220
229
  });
221
230
  }
222
- }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
231
+ }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
223
232
 
224
233
  //----------------------------------------------------------------
225
234
  // RETURN
package/dist/types/useFilePreview.d.ts CHANGED
@@ -26,8 +26,10 @@ export interface UseFilePreviewParams {
26
26
  /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
27
27
  */
28
28
  readonly maxAge?: number;
29
+ /** Defines the source component */
30
+ readonly source?: string;
29
31
  }
30
- export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
32
+ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, }: UseFilePreviewParams) => {
31
33
  preview: MediaFilePreview | undefined;
32
34
  status: MediaFilePreviewStatus;
33
35
  error: MediaFilePreviewError | undefined;
package/dist/types-ts4.5/useFilePreview.d.ts CHANGED
@@ -26,8 +26,10 @@ export interface UseFilePreviewParams {
26
26
  /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
27
27
  */
28
28
  readonly maxAge?: number;
29
+ /** Defines the source component */
30
+ readonly source?: string;
29
31
  }
30
- export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
32
+ export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, }: UseFilePreviewParams) => {
31
33
  preview: MediaFilePreview | undefined;
32
34
  status: MediaFilePreviewStatus;
33
35
  error: MediaFilePreviewError | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-file-preview",
3
- "version": "0.7.0",
3
+ "version": "0.8.1",
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",
@@ -36,10 +36,11 @@
36
36
  ".": "./src/index.ts"
37
37
  },
38
38
  "dependencies": {
39
- "@atlaskit/media-client": "^27.3.0",
40
- "@atlaskit/media-client-react": "^2.0.1",
41
- "@atlaskit/media-common": "^11.3.0",
39
+ "@atlaskit/media-client": "^27.4.0",
40
+ "@atlaskit/media-client-react": "^2.1.0",
41
+ "@atlaskit/media-common": "^11.4.0",
42
42
  "@atlaskit/media-ui": "^25.11.0",
43
+ "@atlaskit/platform-feature-flags": "^0.3.0",
43
44
  "@babel/runtime": "^7.0.0",
44
45
  "eventemitter2": "^4.1.0",
45
46
  "lru_map": "^0.4.1"
@@ -52,7 +53,7 @@
52
53
  "@af/integration-testing": "*",
53
54
  "@af/visual-regression": "*",
54
55
  "@atlaskit/media-state": "^1.1.0",
55
- "@atlaskit/media-test-data": "^2.5.0",
56
+ "@atlaskit/media-test-data": "^2.6.0",
56
57
  "@atlaskit/section-message": "^6.6.0",
57
58
  "@atlaskit/ssr": "*",
58
59
  "@atlaskit/visual-regression": "*",
@@ -96,5 +97,10 @@
96
97
  "import-no-extraneous-disable-for-examples-and-docs"
97
98
  ]
98
99
  }
100
+ },
101
+ "platform-feature-flags": {
102
+ "platform.media-card-performance-observer_lgc7b": {
103
+ "type": "boolean"
104
+ }
99
105
  }
100
106
  }