@atlaskit/media-viewer 48.2.14 → 48.3.0

package/dist/cjs/viewers/doc/pdfRenderer.js

@@ -11,10 +11,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _pdf_viewer = require("pdfjs-dist/legacy/web/pdf_viewer");
 var _pdf = require("pdfjs-dist/legacy/build/pdf");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _cmaps = require("./cmaps");
 var _react2 = require("@emotion/react");
 var _zoomControls = require("../../zoomControls");
@@ -27,7 +28,10 @@ var _zoomLevel = require("../../domain/zoomLevel");
 var _processError = require("./processError");
 var _pdfJs = require("./pdfJs");
 var _extractCompressedBase = require("./extractCompressedBase64");
-var _templateObject;
+var _pdfPasswordInput = require("./pdfPasswordInput");
+var _analytics = require("../../analytics");
+var _pdfPasswordInput2 = require("../../analytics/events/screen/pdfPasswordInput");
+var _passwordPdf = require("../../analytics/events/screen/passwordPdf");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var pdfViewerClassName = exports.pdfViewerClassName = 'pdfViewer';
@@ -35,9 +39,58 @@ var pdfViewerClassName = exports.pdfViewerClassName = 'pdfViewer';
 // Styles are partially copied from https://github.com/mozilla/pdfjs-dist/blob/v2.9.359/web/pdf_viewer.css
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
-var globalStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n\n    .page {\n      margin: 1px auto ", " auto;\n      border: 9px solid transparent;\n      position: relative;\n    }\n\n    .canvasWrapper {\n      overflow: hidden;\n    }\n\n    .textLayer {\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      overflow: hidden;\n      opacity: 0.2;\n      line-height: 1;\n    }\n\n    .textLayer span,\n    .textLayer br {\n      color: transparent;\n      position: absolute;\n      white-space: pre;\n      cursor: text;\n      transform-origin: 0% 0%;\n    }\n\n    .textLayer ::-moz-selection {\n      background: rgba(0, 0, 255, 1);\n    }\n\n    .textLayer ::selection {\n      background: rgba(0, 0, 255, 1);\n    }\n\n    .annotationLayer section {\n      position: absolute;\n      text-align: initial;\n    }\n\n    .annotationLayer .linkAnnotation > a,\n    .annotationLayer .buttonWidgetAnnotation.pushButton > a {\n      position: absolute;\n      font-size: 1em;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    .annotationLayer .linkAnnotation > a:hover,\n    .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {\n      opacity: 0.2;\n      background: rgba(255, 255, 0, 1);\n      box-shadow: 0 2px 10px rgba(255, 255, 0, 1);\n    }\n  }\n"])), pdfViewerClassName, "var(--ds-space-800, 64px)", "var(--ds-space-800, 64px)", "var(--ds-space-negative-100, -8px)");
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage/preview */
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var globalStyles = (0, _react2.css)((0, _defineProperty2.default)({}, ".".concat(pdfViewerClassName), {
+  marginTop: "var(--ds-space-800, 64px)",
+  marginBottom: "var(--ds-space-800, 64px)",
+  '.page': {
+    margin: "1px auto ".concat("var(--ds-space-negative-100, -8px)", " auto"),
+    border: '9px solid transparent',
+    position: 'relative'
+  },
+  '.canvasWrapper': {
+    overflow: 'hidden'
+  },
+  '.textLayer': {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    opacity: 0.2,
+    lineHeight: 1
+  },
+  '.textLayer span, .textLayer br': {
+    color: 'transparent',
+    position: 'absolute',
+    whiteSpace: 'pre',
+    cursor: 'text',
+    transformOrigin: '0% 0%'
+  },
+  '.textLayer ::-moz-selection': {
+    background: 'rgba(0, 0, 255, 1)'
+  },
+  '.textLayer ::selection': {
+    background: 'rgba(0, 0, 255, 1)'
+  },
+  '.annotationLayer section': {
+    position: 'absolute',
+    textAlign: 'initial'
+  },
+  '.annotationLayer .linkAnnotation > a, .annotationLayer .buttonWidgetAnnotation.pushButton > a': {
+    position: 'absolute',
+    fontSize: '1em',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
+  },
+  '.annotationLayer .linkAnnotation > a:hover, .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover': {
+    opacity: 0.2,
+    background: 'rgba(255, 255, 0, 1)',
+    boxShadow: '0 2px 10px rgba(255, 255, 0, 1)'
+  }
+}));
 var CmapFacotry = /*#__PURE__*/function () {
   function CmapFacotry() {
     (0, _classCallCheck2.default)(this, CmapFacotry);
@@ -79,13 +132,14 @@ var CmapFacotry = /*#__PURE__*/function () {
   return CmapFacotry;
 }();
 var defaultWorkerUrl = '';
-var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
+var PDFRendererBase = function PDFRendererBase(_ref2) {
   var src = _ref2.src,
     onClose = _ref2.onClose,
     onSuccess = _ref2.onSuccess,
     onError = _ref2.onError,
     workerUrl = _ref2.workerUrl,
-    item = _ref2.item;
+    item = _ref2.item,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent;
   var _useState = (0, _react.useState)(new _zoomLevel.ZoomLevel(1)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     zoomLevel = _useState2[0],
@@ -94,18 +148,28 @@ var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     docOutcome = _useState4[0],
     setDocOutcome = _useState4[1];
+  var isPasswordPdfRef = (0, _react.useRef)(false);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    passwordProtected = _useState6[0],
+    setPasswordProtected = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    hasPasswordError = _useState8[0],
+    setHasPasswordError = _useState8[1];
   var pdfWrapperRef = (0, _react.useRef)();
   var docRef = (0, _react.useRef)();
   var pdfViewerRef = (0, _react.useRef)();
   var onSuccessRef = (0, _react.useRef)(onSuccess);
   onSuccessRef.current = onSuccess;
+  var updatePasswordRef = (0, _react.useRef)(undefined);
   var onErrorRef = (0, _react.useRef)(onError);
   onErrorRef.current = onError;
   (0, _react.useEffect)(function () {
     var isSubscribed = true;
     var fetchDoc = /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var blob, pdfError;
+        var blob, getDocumentTask, pdfError;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -121,29 +185,39 @@ var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
               defaultWorkerUrl = URL.createObjectURL(blob);
             case 6:
               _pdf.GlobalWorkerOptions.workerSrc = workerUrl !== null && workerUrl !== void 0 ? workerUrl : defaultWorkerUrl;
-              _context2.next = 9;
-              return (0, _pdf.getDocument)({
+              getDocumentTask = (0, _pdf.getDocument)({
                 url: src,
                 CMapReaderFactory: CmapFacotry
-              }).promise;
-            case 9:
+              });
+              getDocumentTask.onPassword = function (updatePassword, e) {
+                updatePasswordRef.current = updatePassword;
+                if (e === _pdf.PasswordResponses.NEED_PASSWORD) {
+                  isPasswordPdfRef.current = true;
+                  setPasswordProtected(true);
+                } else {
+                  setHasPasswordError(true);
+                }
+              };
+              _context2.next = 11;
+              return getDocumentTask.promise;
+            case 11:
               docRef.current = _context2.sent;
               isSubscribed && setDocOutcome(_domain.Outcome.successful(docRef.current));
-              _context2.next = 18;
+              _context2.next = 20;
               break;
-            case 13:
-              _context2.prev = 13;
+            case 15:
+              _context2.prev = 15;
               _context2.t0 = _context2["catch"](0);
               pdfError = (0, _processError.processError)(_context2.t0);
               isSubscribed && setDocOutcome(_domain.Outcome.failed(pdfError));
               if (onErrorRef.current) {
                 onErrorRef.current(pdfError);
               }
-            case 18:
+            case 20:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[0, 13]]);
+        }, _callee2, null, [[0, 15]]);
       }));
       return function fetchDoc() {
         return _ref3.apply(this, arguments);
@@ -175,10 +249,13 @@ var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
     pdfViewerRef.current.setDocument(docRef.current);
     pdfLinkService.setDocument(docRef.current, null);
     pdfViewerRef.current.firstPagePromise.then(scaleToFit);
+    if (isPasswordPdfRef.current) {
+      (0, _analytics.fireAnalytics)((0, _passwordPdf.createPasswordPdfScreenEvent)(), createAnalyticsEvent);
+    }
     if (onSuccessRef.current) {
       onSuccessRef.current();
     }
-  }, [docOutcome]);
+  }, [createAnalyticsEvent, docOutcome]);
   var savePdfElement = function savePdfElement(el) {
     pdfWrapperRef.current = el;
   };
@@ -194,7 +271,18 @@ var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
   };
   return docOutcome.match({
     pending: function pending() {
-      return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+      return passwordProtected ? /*#__PURE__*/_react.default.createElement(_pdfPasswordInput.PDFPasswordInput, {
+        onRender: function onRender() {
+          return (0, _analytics.fireAnalytics)((0, _pdfPasswordInput2.createPdfPasswordInputScreenEvent)(), createAnalyticsEvent);
+        },
+        onSubmit: function onSubmit(data) {
+          var _updatePasswordRef$cu;
+          // Reset hasPasswordError on each submission
+          hasPasswordError && setHasPasswordError(false);
+          (_updatePasswordRef$cu = updatePasswordRef.current) === null || _updatePasswordRef$cu === void 0 || _updatePasswordRef$cu.call(updatePasswordRef, data.password);
+        },
+        hasPasswordError: hasPasswordError
+      }) : /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
     },
     successful: function successful() {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Global, {
@@ -202,7 +290,10 @@ var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
       }), /*#__PURE__*/_react.default.createElement(_styleWrappers.PDFWrapper, {
         "data-testid": "media-viewer-pdf-content",
         ref: savePdfElement
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      },
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+      _react.default.createElement("div", {
         className: pdfViewerClassName,
         onClick: (0, _closeOnDirectClick.closeOnDirectClick)(onClose)
       }), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {
@@ -219,4 +310,6 @@ var PDFRenderer = exports.PDFRenderer = function PDFRenderer(_ref2) {
       });
     }
   });
-};
+};
+
+var PDFRenderer = exports.PDFRenderer = (0, _analyticsNext.withAnalyticsEvents)()(PDFRendererBase);

package/dist/cjs/viewers/image/index.js

@@ -62,7 +62,7 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var _this$props, fileState, mediaClient, collectionName, traceContext, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, controller, response, imgError;
+        var _this$props, fileState, mediaClient, collectionName, traceContext, controller, orientation, objectUrl, originalBinaryImageUrl, isLocalFileReference, preview, _yield$preview, value, origin, item, response, imgError;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -73,50 +73,50 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               }
               return _context.abrupt("return");
             case 3:
-              _context.prev = 3;
+              controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
+              _context.prev = 4;
               orientation = 1;
               isLocalFileReference = false;
               preview = fileState.preview;
               if (!preview) {
-                _context.next = 24;
+                _context.next = 25;
                 break;
               }
-              _context.next = 10;
+              _context.next = 11;
               return preview;
-            case 10:
+            case 11:
               _yield$preview = _context.sent;
               value = _yield$preview.value;
               origin = _yield$preview.origin;
               if (!(value instanceof Blob)) {
-                _context.next = 21;
+                _context.next = 22;
                 break;
               }
-              _context.next = 16;
+              _context.next = 17;
               return (0, _mediaUi.getOrientation)(value);
-            case 16:
+            case 17:
               orientation = _context.sent;
               objectUrl = URL.createObjectURL(value);
               isLocalFileReference = origin === 'local';
-              _context.next = 22;
+              _context.next = 23;
               break;
-            case 21:
-              objectUrl = value;
             case 22:
+              objectUrl = value;
+            case 23:
               _context.next = 38;
               break;
-            case 24:
+            case 25:
               if (!(0, _mediaClient.isImageRepresentationReady)(fileState)) {
                 _context.next = 36;
                 break;
               }
               item = processedFileStateToMediaItem(fileState);
-              controller = typeof AbortController !== 'undefined' ? new AbortController() : undefined;
               response = mediaClient.getImage(item.details.id, {
                 collection: collectionName,
                 mode: 'fit'
               }, controller, true, traceContext);
               this.cancelImageFetch = function () {
-                return controller && controller.abort();
+                return controller === null || controller === void 0 ? void 0 : controller.abort();
               };
               _context.t0 = URL;
               _context.next = 32;
@@ -154,9 +154,9 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
               break;
             case 45:
               _context.prev = 45;
-              _context.t2 = _context["catch"](3);
+              _context.t2 = _context["catch"](4);
               // TODO : properly handle aborted requests (MS-2843)
-              if (!(0, _mediaClient.isAbortedRequestError)(_context.t2)) {
+              if (!(controller !== null && controller !== void 0 && controller.signal.aborted)) {
                 imgError = new _errors.MediaViewerError('imageviewer-fetch-url', _context.t2 instanceof Error ? _context.t2 : undefined);
                 this.setState({
                   content: _domain.Outcome.failed(imgError)
@@ -167,7 +167,7 @@ var ImageViewer = exports.ImageViewer = /*#__PURE__*/function (_BaseViewer) {
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[3, 45]]);
+        }, _callee, this, [[4, 45]]);
       }));
       function init() {
         return _init.apply(this, arguments);

package/dist/es2019/analytics/events/screen/passwordPdf.js

@@ -0,0 +1,6 @@
+export const createPasswordPdfScreenEvent = () => ({
+  eventType: 'screen',
+  action: 'viewed',
+  actionSubject: 'mediaViewerPasswordPdfScreen',
+  name: 'mediaViewerPasswordPdfScreen'
+});

package/dist/es2019/analytics/events/screen/pdfPasswordInput.js

@@ -0,0 +1,6 @@
+export const createPdfPasswordInputScreenEvent = () => ({
+  eventType: 'screen',
+  action: 'viewed',
+  actionSubject: 'mediaViewerPdfPasswordInputScreen',
+  name: 'mediaViewerPdfPasswordInputScreen'
+});

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.2.14";
+const packageVersion = "48.3.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.2.14";
+const packageVersion = "48.3.0";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

package/dist/es2019/domain/outcome.js

@@ -13,17 +13,18 @@ export class Outcome {
       status: 'PENDING'
     });
   }
-  static failed(err) {
+  static failed(err, data) {
     return new Outcome({
       status: 'FAILED',
-      err
+      err,
+      data
     });
   }
   get status() {
     return this.state.status;
   }
   get data() {
-    if (this.state.status === 'SUCCESSFUL') {
+    if (this.state.status === 'SUCCESSFUL' || this.state.status === 'FAILED') {
       return this.state.data;
     } else {
       return;
@@ -62,21 +63,7 @@ export class Outcome {
       case 'PENDING':
         return pending();
       case 'FAILED':
-        return failed(this.state.err);
-    }
-  }
-  mapSuccessful(map) {
-    if (this.state.status === 'SUCCESSFUL') {
-      return Outcome.successful(map(this.state.data));
-    } else {
-      return new Outcome(this.state);
-    }
-  }
-  mapFailed(map) {
-    if (this.state.status === 'FAILED') {
-      return Outcome.failed(map(this.state.err));
-    } else {
-      return new Outcome(this.state);
+        return failed(this.state.err, this.state.data);
     }
   }
 }

package/dist/es2019/item-viewer.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
@@ -78,9 +79,9 @@ export class ItemViewerBase extends React.Component {
         }
       });
     });
-    _defineProperty(this, "onLoadFail", mediaViewerError => {
+    _defineProperty(this, "onLoadFail", (mediaViewerError, data) => {
       this.safeSetState({
-        item: Outcome.failed(mediaViewerError)
+        item: Outcome.failed(mediaViewerError, data)
       });
     });
     _defineProperty(this, "onExternalImgSuccess", () => {
@@ -170,7 +171,9 @@ export class ItemViewerBase extends React.Component {
       case 'doc':
         return /*#__PURE__*/React.createElement(DocViewer, _extends({
           onSuccess: this.onSuccess,
-          onError: this.onLoadFail
+          onError: err => {
+            this.onLoadFail(err, fileState);
+          }
         }, viewerProps));
       case 'archive':
         return /*#__PURE__*/React.createElement(ArchiveViewerLoader, _extends({
@@ -232,21 +235,23 @@ export class ItemViewerBase extends React.Component {
           });
         } else {
           // render a FileState fetched through media-client
-          const fileState = fileItem;
-          switch (fileState.status) {
+          switch (fileItem.status) {
             case 'processed':
             case 'uploading':
             case 'processing':
-              return this.renderItem(fileState);
+              return this.renderItem(fileItem);
             case 'failed-processing':
-              return this.renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileState);
+              if (getBooleanFF('platform.corex.password-protected-pdf_ht8re') && fileItem.mediaType === 'doc' && fileItem.mimeType === 'application/pdf') {
+                return this.renderItem(fileItem);
+              }
+              return this.renderError(new MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
             case 'error':
-              return this.renderError(new MediaViewerError('itemviewer-file-error-status'), fileState);
+              return this.renderError(new MediaViewerError('itemviewer-file-error-status'), fileItem);
           }
         }
       },
       pending: () => /*#__PURE__*/React.createElement(Spinner, null),
-      failed: error => this.renderError(error, item.data)
+      failed: (error, data) => this.renderError(error, data)
     });
   }
   renderDownloadButton(fileState, error) {

package/dist/es2019/media-viewer.js

@@ -103,7 +103,8 @@ export class MediaViewerComponent extends React.Component {
       className: mediaViewerPopupClass
     }, /*#__PURE__*/React.createElement(Shortcut, {
       code: 'Escape',
-      handler: this.onShortcutClosed
+      handler: this.onShortcutClosed,
+      eventType: 'keyup'
     }), /*#__PURE__*/React.createElement(Content, {
       isSidebarVisible: isSidebarVisible,
       onClose: this.onContentClose

package/dist/es2019/navigation.js

@@ -59,7 +59,8 @@ export class NavigationBase extends Component {
       className: hideControlsClassName
     }, /*#__PURE__*/React.createElement(Shortcut, {
       code: 'ArrowLeft',
-      handler: prev('keyboard')
+      handler: prev('keyboard'),
+      eventType: 'keyup'
     }), /*#__PURE__*/React.createElement(Button, {
       testId: prevNavButtonId,
       onClick: prev('mouse'),
@@ -77,7 +78,8 @@ export class NavigationBase extends Component {
       className: hideControlsClassName
     }, /*#__PURE__*/React.createElement(Shortcut, {
       code: 'ArrowRight',
-      handler: next('keyboard')
+      handler: next('keyboard'),
+      eventType: 'keyup'
     }), /*#__PURE__*/React.createElement(Button, {
       testId: nextNavButtonId,
       onClick: next('mouse'),

package/dist/es2019/v2/item-viewer-v2.js

@@ -19,23 +19,23 @@ import { InteractiveImg } from '../viewers/image/interactive-img';
 import ArchiveViewerLoader from '../viewers/archiveSidebar/archiveViewerLoader';
 import { getRandomHex } from '@atlaskit/media-common';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from '../analytics/ufoExperiences';
-const ImageViewer = Loadable({
+const ImageViewerV2 = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'../viewers/image').then(mod => mod.ImageViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const VideoViewer = Loadable({
+const VideoViewerV2 = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'../viewers/video').then(mod => mod.VideoViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const AudioViewer = Loadable({
+const AudioViewerV2 = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'../viewers/audio').then(mod => mod.AudioViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const DocViewer = Loadable({
+const DocViewerV2 = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'../viewers/doc').then(mod => mod.DocViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
-const CodeViewer = Loadable({
+const CodeViewerV2 = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'../viewers/codeViewer').then(mod => mod.CodeViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
 });
@@ -206,7 +206,7 @@ export const ItemViewerV2Base = ({
               if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
                 return renderError(new MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
               }
-              return /*#__PURE__*/React.createElement(CodeViewer, _extends({
+              return /*#__PURE__*/React.createElement(CodeViewerV2, _extends({
                 onSuccess: onSuccess,
                 onError: onLoadFail
               }, viewerProps));
@@ -216,26 +216,26 @@ export const ItemViewerV2Base = ({
             } = fileItem;
             switch (mediaType) {
               case 'image':
-                return /*#__PURE__*/React.createElement(ImageViewer, _extends({
+                return /*#__PURE__*/React.createElement(ImageViewerV2, _extends({
                   onLoad: onSuccess,
                   onError: onLoadFail,
                   contextId: contextId,
                   traceContext: traceContext.current
                 }, viewerProps));
               case 'audio':
-                return /*#__PURE__*/React.createElement(AudioViewer, _extends({
+                return /*#__PURE__*/React.createElement(AudioViewerV2, _extends({
                   showControls: showControls,
                   onCanPlay: onSuccess,
                   onError: onLoadFail
                 }, viewerProps));
               case 'video':
-                return /*#__PURE__*/React.createElement(VideoViewer, _extends({
+                return /*#__PURE__*/React.createElement(VideoViewerV2, _extends({
                   showControls: showControls,
                   onCanPlay: onSuccess,
                   onError: onLoadFail
                 }, viewerProps));
               case 'doc':
-                return /*#__PURE__*/React.createElement(DocViewer, _extends({
+                return /*#__PURE__*/React.createElement(DocViewerV2, _extends({
                   onSuccess: onSuccess,
                   onError: onLoadFail
                 }, viewerProps));

package/dist/es2019/viewers/doc/index.js

@@ -2,11 +2,9 @@ import React from 'react';
 import { isPreviewableFileState } from '@atlaskit/media-client';
 import { Outcome } from '../../domain';
 import { MediaViewerError } from '../../errors';
-import { Spinner } from '../../loading';
+import { PDFRenderer } from './pdfRenderer';
 import { BaseViewer } from '../base-viewer';
 import { getObjectUrlFromFileState } from '../../utils/getObjectUrlFromFileState';
-const moduleLoader = () => import( /* webpackChunkName: "@atlaskit-internal_media-pdf-viewer" */'./pdfRenderer');
-const componentLoader = () => moduleLoader().then(module => module.PDFRenderer);
 export class DocViewer extends BaseViewer {
   get initialState() {
     return {
@@ -14,9 +12,6 @@ export class DocViewer extends BaseViewer {
     };
   }
   async init() {
-    if (!DocViewer.PDFComponent) {
-      await this.loadDocViewer();
-    }
     const {
       item,
       mediaClient,
@@ -37,6 +32,24 @@ export class DocViewer extends BaseViewer {
     } else if (item.status === 'processed') {
       try {
         const src = await mediaClient.file.getArtifactURL(item.artifacts, 'document.pdf', collectionName);
+        this.onMediaDisplayed();
+        this.setState({
+          content: Outcome.successful(src)
+        });
+      } catch (error) {
+        const docError = new MediaViewerError('docviewer-fetch-url', error instanceof Error ? error : undefined);
+        this.setState({
+          content: Outcome.failed(docError)
+        });
+        if (onError) {
+          onError(docError);
+        }
+      }
+    } else if (item.status === 'failed-processing') {
+      try {
+        const src = await mediaClient.file.getFileBinaryURL(item.id, collectionName, 2940 // 2940 seconds ~= 50 mins
+        );
+
         this.onMediaDisplayed();
         this.setState({
           content: Outcome.successful(src)
@@ -52,10 +65,6 @@ export class DocViewer extends BaseViewer {
       }
     }
   }
-  async loadDocViewer() {
-    DocViewer.PDFComponent = await componentLoader();
-    this.forceUpdate();
-  }
   release() {
     const {
       content
@@ -72,13 +81,7 @@ export class DocViewer extends BaseViewer {
       onSuccess,
       onError
     } = this.props;
-    const {
-      PDFComponent
-    } = DocViewer;
-    if (!PDFComponent) {
-      return /*#__PURE__*/React.createElement(Spinner, null);
-    }
-    return /*#__PURE__*/React.createElement(PDFComponent, {
+    return /*#__PURE__*/React.createElement(PDFRenderer, {
       item: item,
       src: content,
       onSuccess: onSuccess,