@atlaskit/media-viewer 48.2.14 → 48.3.0

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

@@ -20,7 +20,7 @@ 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';
-var ImageViewer = Loadable({
+var ImageViewerV2 = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'../viewers/image').then(function (mod) {
       return mod.ImageViewer;
@@ -30,7 +30,7 @@ var ImageViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var VideoViewer = Loadable({
+var VideoViewerV2 = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'../viewers/video').then(function (mod) {
       return mod.VideoViewer;
@@ -40,7 +40,7 @@ var VideoViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var AudioViewer = Loadable({
+var AudioViewerV2 = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'../viewers/audio').then(function (mod) {
       return mod.AudioViewer;
@@ -50,7 +50,7 @@ var AudioViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var DocViewer = Loadable({
+var DocViewerV2 = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_docViewer" */'../viewers/doc').then(function (mod) {
       return mod.DocViewer;
@@ -60,7 +60,7 @@ var DocViewer = Loadable({
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
 });
-var CodeViewer = Loadable({
+var CodeViewerV2 = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'../viewers/codeViewer').then(function (mod) {
       return mod.CodeViewer;
@@ -239,7 +239,7 @@ export var ItemViewerV2Base = function ItemViewerV2Base(_ref) {
               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));
@@ -247,26 +247,26 @@ export var ItemViewerV2Base = function ItemViewerV2Base(_ref) {
             var mediaType = fileItem.mediaType;
             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/esm/viewers/doc/index.js

@@ -11,17 +11,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';
-var moduleLoader = function moduleLoader() {
-  return import( /* webpackChunkName: "@atlaskit-internal_media-pdf-viewer" */'./pdfRenderer');
-};
-var componentLoader = function componentLoader() {
-  return moduleLoader().then(function (module) {
-    return module.PDFRenderer;
-  });
-};
 export var DocViewer = /*#__PURE__*/function (_BaseViewer) {
   _inherits(DocViewer, _BaseViewer);
   var _super = _createSuper(DocViewer);
@@ -40,59 +32,52 @@ export var DocViewer = /*#__PURE__*/function (_BaseViewer) {
     key: "init",
     value: function () {
       var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this$props, item, mediaClient, collectionName, onError, src, _src, docError;
+        var _this$props, item, mediaClient, collectionName, onError, src, _src, docError, _src2, _docError;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (DocViewer.PDFComponent) {
-                _context.next = 3;
-                break;
-              }
-              _context.next = 3;
-              return this.loadDocViewer();
-            case 3:
               _this$props = this.props, item = _this$props.item, mediaClient = _this$props.mediaClient, collectionName = _this$props.collectionName, onError = _this$props.onError;
               if (!isPreviewableFileState(item)) {
-                _context.next = 14;
+                _context.next = 11;
                 break;
               }
-              _context.next = 7;
+              _context.next = 4;
               return getObjectUrlFromFileState(item);
-            case 7:
+            case 4:
               src = _context.sent;
               if (src) {
-                _context.next = 11;
+                _context.next = 8;
                 break;
               }
               this.setState({
                 content: Outcome.pending()
               });
               return _context.abrupt("return");
-            case 11:
+            case 8:
               this.setState({
                 content: Outcome.successful(src)
               });
-              _context.next = 28;
+              _context.next = 41;
               break;
-            case 14:
+            case 11:
               if (!(item.status === 'processed')) {
-                _context.next = 28;
+                _context.next = 27;
                 break;
               }
-              _context.prev = 15;
-              _context.next = 18;
+              _context.prev = 12;
+              _context.next = 15;
               return mediaClient.file.getArtifactURL(item.artifacts, 'document.pdf', collectionName);
-            case 18:
+            case 15:
               _src = _context.sent;
               this.onMediaDisplayed();
               this.setState({
                 content: Outcome.successful(_src)
               });
-              _context.next = 28;
+              _context.next = 25;
               break;
-            case 23:
-              _context.prev = 23;
-              _context.t0 = _context["catch"](15);
+            case 20:
+              _context.prev = 20;
+              _context.t0 = _context["catch"](12);
               docError = new MediaViewerError('docviewer-fetch-url', _context.t0 instanceof Error ? _context.t0 : undefined);
               this.setState({
                 content: Outcome.failed(docError)
@@ -100,40 +85,47 @@ export var DocViewer = /*#__PURE__*/function (_BaseViewer) {
               if (onError) {
                 onError(docError);
               }
-            case 28:
+            case 25:
+              _context.next = 41;
+              break;
+            case 27:
+              if (!(item.status === 'failed-processing')) {
+                _context.next = 41;
+                break;
+              }
+              _context.prev = 28;
+              _context.next = 31;
+              return mediaClient.file.getFileBinaryURL(item.id, collectionName, 2940 // 2940 seconds ~= 50 mins
+              );
+            case 31:
+              _src2 = _context.sent;
+              this.onMediaDisplayed();
+              this.setState({
+                content: Outcome.successful(_src2)
+              });
+              _context.next = 41;
+              break;
+            case 36:
+              _context.prev = 36;
+              _context.t1 = _context["catch"](28);
+              _docError = new MediaViewerError('docviewer-fetch-url', _context.t1 instanceof Error ? _context.t1 : undefined);
+              this.setState({
+                content: Outcome.failed(_docError)
+              });
+              if (onError) {
+                onError(_docError);
+              }
+            case 41:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[15, 23]]);
+        }, _callee, this, [[12, 20], [28, 36]]);
       }));
       function init() {
         return _init.apply(this, arguments);
       }
       return init;
     }()
-  }, {
-    key: "loadDocViewer",
-    value: function () {
-      var _loadDocViewer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return componentLoader();
-            case 2:
-              DocViewer.PDFComponent = _context2.sent;
-              this.forceUpdate();
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function loadDocViewer() {
-        return _loadDocViewer.apply(this, arguments);
-      }
-      return loadDocViewer;
-    }()
   }, {
     key: "release",
     value: function release() {
@@ -151,11 +143,7 @@ export var DocViewer = /*#__PURE__*/function (_BaseViewer) {
         onClose = _this$props2.onClose,
         onSuccess = _this$props2.onSuccess,
         onError = _this$props2.onError;
-      var PDFComponent = DocViewer.PDFComponent;
-      if (!PDFComponent) {
-        return /*#__PURE__*/React.createElement(Spinner, null);
-      }
-      return /*#__PURE__*/React.createElement(PDFComponent, {
+      return /*#__PURE__*/React.createElement(PDFRenderer, {
         item: item,
         src: content,
         onSuccess: onSuccess,

package/dist/esm/viewers/doc/pdfPasswordInput.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import LoadingButton from '@atlaskit/button/loading-button';
+import TextField from '@atlaskit/textfield';
+import LockIcon from '@atlaskit/icon/glyph/lock';
+import Form, { ErrorMessage, Field } from '@atlaskit/form';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import Heading from '@atlaskit/heading';
+import { xcss, Box, Flex } from '@atlaskit/primitives';
+var headerStyles = xcss({
+  textAlign: 'center',
+  marginTop: 'space.300',
+  marginBottom: 'space.100'
+});
+var inputStyle = xcss({
+  width: '330px'
+});
+var footerStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  justifyContent: 'center'
+});
+export var PDFPasswordInput = function PDFPasswordInput(_ref) {
+  var onSubmit = _ref.onSubmit,
+    hasPasswordError = _ref.hasPasswordError,
+    onRender = _ref.onRender;
+  var passwordInputRef = useRef(null);
+  var onRenderRef = useRef(onRender);
+  var _useState = useState(hasPasswordError),
+    _useState2 = _slicedToArray(_useState, 2),
+    formError = _useState2[0],
+    setFormError = _useState2[1];
+  var intl = useIntl();
+  useEffect(function () {
+    var _onRenderRef$current;
+    (_onRenderRef$current = onRenderRef.current) === null || _onRenderRef$current === void 0 || _onRenderRef$current.call(onRenderRef);
+  }, []);
+  useEffect(function () {
+    if (hasPasswordError) {
+      var _passwordInputRef$cur;
+      setFormError(true);
+      (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 || _passwordInputRef$cur.focus();
+    }
+  }, [hasPasswordError]);
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: onSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps,
+      submitting = _ref2.submitting;
+    return /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "center",
+      "aria-hidden": true
+    }, /*#__PURE__*/React.createElement(LockIcon, {
+      label: "forbidden-lock-icon",
+      size: "xlarge",
+      primaryColor: "var(--ds-text, #c7d1db)"
+    })), /*#__PURE__*/React.createElement(Box, {
+      xcss: headerStyles
+    }, /*#__PURE__*/React.createElement(Heading, {
+      as: "h1",
+      level: "h200"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf))), /*#__PURE__*/React.createElement(Field, {
+      "aria-required": true,
+      name: "password",
+      label: "Password",
+      isRequired: true
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: inputStyle
+      }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+        type: "password",
+        placeholder: intl.formatMessage(messages.enter_password),
+        ref: passwordInputRef,
+        onChange: function onChange(value) {
+          fieldProps.onChange(value);
+          setFormError(false);
+        }
+      })), formError && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.incorrect_password)));
+    }), /*#__PURE__*/React.createElement(Box, {
+      xcss: footerStyles
+    }, /*#__PURE__*/React.createElement(LoadingButton, {
+      appearance: "primary",
+      type: "submit",
+      isLoading: submitting
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit))));
+  });
+};

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

@@ -2,12 +2,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useRef, useState } from 'react';
 import { PDFViewer, EventBus, PDFLinkService, NullL10n } from 'pdfjs-dist/legacy/web/pdf_viewer';
-import { getDocument, GlobalWorkerOptions, CMapCompressionType } from 'pdfjs-dist/legacy/build/pdf';
+import { getDocument, GlobalWorkerOptions, CMapCompressionType, PasswordResponses } from 'pdfjs-dist/legacy/build/pdf';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { cmap } from './cmaps';
 import { css, Global } from '@emotion/react';
 import { ZoomControls } from '../../zoomControls';
@@ -20,14 +20,67 @@ import { ZoomLevel } from '../../domain/zoomLevel';
 import { processError } from './processError';
 import { pdfJs } from './pdfJs';
 import { extractCompressedBase64 } from './extractCompressedBase64';
+import { PDFPasswordInput } from './pdfPasswordInput';
+import { fireAnalytics } from '../../analytics';
+import { createPdfPasswordInputScreenEvent } from '../../analytics/events/screen/pdfPasswordInput';
+import { createPasswordPdfScreenEvent } from '../../analytics/events/screen/passwordPdf';
 export var 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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = css(_defineProperty({}, ".".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() {
     _classCallCheck(this, CmapFacotry);
@@ -69,13 +122,14 @@ var CmapFacotry = /*#__PURE__*/function () {
   return CmapFacotry;
 }();
 var defaultWorkerUrl = '';
-export var 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 = useState(new ZoomLevel(1)),
     _useState2 = _slicedToArray(_useState, 2),
     zoomLevel = _useState2[0],
@@ -84,18 +138,28 @@ export var PDFRenderer = function PDFRenderer(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     docOutcome = _useState4[0],
     setDocOutcome = _useState4[1];
+  var isPasswordPdfRef = useRef(false);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    passwordProtected = _useState6[0],
+    setPasswordProtected = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hasPasswordError = _useState8[0],
+    setHasPasswordError = _useState8[1];
   var pdfWrapperRef = useRef();
   var docRef = useRef();
   var pdfViewerRef = useRef();
   var onSuccessRef = useRef(onSuccess);
   onSuccessRef.current = onSuccess;
+  var updatePasswordRef = useRef(undefined);
   var onErrorRef = useRef(onError);
   onErrorRef.current = onError;
   useEffect(function () {
     var isSubscribed = true;
     var fetchDoc = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var blob, pdfError;
+        var blob, getDocumentTask, pdfError;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -111,29 +175,39 @@ export var PDFRenderer = function PDFRenderer(_ref2) {
               defaultWorkerUrl = URL.createObjectURL(blob);
             case 6:
               GlobalWorkerOptions.workerSrc = workerUrl !== null && workerUrl !== void 0 ? workerUrl : defaultWorkerUrl;
-              _context2.next = 9;
-              return getDocument({
+              getDocumentTask = getDocument({
                 url: src,
                 CMapReaderFactory: CmapFacotry
-              }).promise;
-            case 9:
+              });
+              getDocumentTask.onPassword = function (updatePassword, e) {
+                updatePasswordRef.current = updatePassword;
+                if (e === 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(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 = processError(_context2.t0);
               isSubscribed && setDocOutcome(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);
@@ -165,10 +239,13 @@ export var PDFRenderer = function PDFRenderer(_ref2) {
     pdfViewerRef.current.setDocument(docRef.current);
     pdfLinkService.setDocument(docRef.current, null);
     pdfViewerRef.current.firstPagePromise.then(scaleToFit);
+    if (isPasswordPdfRef.current) {
+      fireAnalytics(createPasswordPdfScreenEvent(), createAnalyticsEvent);
+    }
     if (onSuccessRef.current) {
       onSuccessRef.current();
     }
-  }, [docOutcome]);
+  }, [createAnalyticsEvent, docOutcome]);
   var savePdfElement = function savePdfElement(el) {
     pdfWrapperRef.current = el;
   };
@@ -184,7 +261,18 @@ export var PDFRenderer = function PDFRenderer(_ref2) {
   };
   return docOutcome.match({
     pending: function pending() {
-      return /*#__PURE__*/React.createElement(Spinner, null);
+      return passwordProtected ? /*#__PURE__*/React.createElement(PDFPasswordInput, {
+        onRender: function onRender() {
+          return fireAnalytics(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.createElement(Spinner, null);
     },
     successful: function successful() {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Global, {
@@ -192,7 +280,10 @@ export var PDFRenderer = function PDFRenderer(_ref2) {
       }), /*#__PURE__*/React.createElement(PDFWrapper, {
         "data-testid": "media-viewer-pdf-content",
         ref: savePdfElement
-      }, /*#__PURE__*/React.createElement("div", {
+      },
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+      React.createElement("div", {
         className: pdfViewerClassName,
         onClick: closeOnDirectClick(onClose)
       }), /*#__PURE__*/React.createElement(ZoomControls, {
@@ -209,4 +300,6 @@ export var PDFRenderer = function PDFRenderer(_ref2) {
       });
     }
   });
-};
+};
+
+export var PDFRenderer = withAnalyticsEvents()(PDFRendererBase);