@atlaskit/media-viewer 52.3.2 → 52.4.0

package/dist/es2019/viewers/doc-next/doc-viewer.js

@@ -0,0 +1,138 @@
+/* doc-viewer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./doc-viewer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useReducer } from 'react';
+import { isCommonMediaClientError } from '@atlaskit/media-client';
+import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
+import { useStaticCallback } from '@atlaskit/media-common';
+import { MediaViewerError } from '../../errors';
+import { ZoomControls } from '../../zoomControls';
+import { ZoomLevel } from '../../domain/zoomLevel';
+import { PasswordInput } from './passwordInput';
+const initialState = {
+  isMissingPassword: false,
+  hasPasswordError: false,
+  password: '',
+  zoomLevel: new ZoomLevel(1.75)
+};
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'submit_password':
+      return {
+        ...state,
+        password: action.password
+      };
+    case 'set_zoom_level':
+      return {
+        ...state,
+        zoomLevel: action.zoomLevel
+      };
+    case 'password_validation_failed':
+      return {
+        ...state,
+        hasPasswordError: true
+      };
+    case 'password_validation_succeeded':
+      return {
+        ...state,
+        isMissingPassword: false,
+        hasPasswordError: false
+      };
+    case 'content_fetch_failed_password_required':
+      return {
+        ...state,
+        isMissingPassword: true
+      };
+    default:
+      return state;
+  }
+};
+const documentViewerStyles = null;
+export const DocViewer = ({
+  mediaClient,
+  fileState,
+  collectionName,
+  onError,
+  traceContext
+}) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const getContent = useStaticCallback(async (pageStart, pageEnd) => {
+    try {
+      return await mediaClient.mediaStore.getDocumentContent(fileState.id, {
+        pageStart,
+        pageEnd,
+        collectionName,
+        password: state.password
+      }, traceContext);
+    } catch (error) {
+      if (isCommonMediaClientError(error) && error.reason === 'serverEntityLocked') {
+        dispatch({
+          type: 'content_fetch_failed_password_required'
+        });
+      } else {
+        onError(new MediaViewerError('docviewer-content-fetch-failed', error instanceof Error ? error : undefined));
+      }
+      throw error;
+    }
+  });
+  const onPasswordSubmit = useStaticCallback(async data => {
+    dispatch({
+      type: 'submit_password',
+      password: data.password
+    });
+    try {
+      // checking if the password is correct currently requires content fetch but we may have a faster enpoint for this in the future
+      await mediaClient.mediaStore.getDocumentContent(fileState.id, {
+        pageStart: 0,
+        pageEnd: 1,
+        collectionName,
+        password: data.password
+      }, traceContext);
+      dispatch({
+        type: 'password_validation_succeeded'
+      });
+    } catch (error) {
+      if (isCommonMediaClientError(error) && error.reason === 'serverEntityLocked') {
+        dispatch({
+          type: 'password_validation_failed'
+        });
+      } else {
+        onError(new MediaViewerError('docviewer-content-fetch-failed', error instanceof Error ? error : undefined));
+      }
+    }
+  });
+  const getPageImageUrl = useStaticCallback(async (pageNumber, zoom) => {
+    const src = await mediaClient.mediaStore.getDocumentPageImage(fileState.id, {
+      page: pageNumber,
+      zoom,
+      collectionName,
+      password: state.password
+    }, traceContext);
+    return URL.createObjectURL(src);
+  });
+  const onZoomChange = useStaticCallback(newZoomLevel => {
+    dispatch({
+      type: 'set_zoom_level',
+      zoomLevel: newZoomLevel
+    });
+  });
+  if (state.isMissingPassword) {
+    return /*#__PURE__*/React.createElement(PasswordInput, {
+      onSubmit: onPasswordSubmit,
+      hasPasswordError: state.hasPasswordError
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    id: DOCUMENT_SCROLL_ROOT_ID,
+    className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
+  }, /*#__PURE__*/React.createElement(DocumentViewer, {
+    getContent: getContent,
+    getPageImageUrl: getPageImageUrl,
+    zoom: state.zoomLevel.value
+  }), /*#__PURE__*/React.createElement(ZoomControls, {
+    onChange: onZoomChange,
+    zoomLevel: state.zoomLevel
+  }));
+};
+export default DocViewer;

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

@@ -1,44 +1,20 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./index.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
+import React from 'react';
 import { Outcome } from '../../domain';
 import { BaseViewer } from '../base-viewer';
-import { ZoomControls } from '../../zoomControls';
 import { ZoomLevel } from '../../domain/zoomLevel';
-const documentViewerStyles = null;
+import { DocViewer as DocViewerComponent } from './doc-viewer';
 export class DocViewer extends BaseViewer {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "isObjectUrl", false);
-    _defineProperty(this, "getContent", async (pageStart, pageEnd) => {
-      const src = await this.props.mediaClient.mediaStore.getDocumentContent(this.props.item.id, {
-        pageStart,
-        pageEnd,
-        collectionName: this.props.collectionName
-      });
-      return src;
-    });
-    _defineProperty(this, "getPageImageUrl", async (pageNumber, zoom) => {
-      const src = await this.props.mediaClient.mediaStore.getDocumentPageImage(this.props.item.id, {
-        page: pageNumber,
-        zoom,
-        collectionName: this.props.collectionName
-      });
-      return URL.createObjectURL(src);
-    });
-    _defineProperty(this, "onZoomChange", newZoomLevel => {
-      this.setState({
-        zoomLevel: newZoomLevel
-      });
-    });
   }
   get initialState() {
     return {
       content: Outcome.pending(),
-      zoomLevel: new ZoomLevel(1.75)
+      zoomLevel: new ZoomLevel(1.75),
+      isPasswordProtected: false,
+      hasPasswordError: false
     };
   }
   needsReset(propsA, propsB) {
@@ -67,16 +43,12 @@ export class DocViewer extends BaseViewer {
     }
   }
   renderSuccessful() {
-    return /*#__PURE__*/React.createElement("div", {
-      id: DOCUMENT_SCROLL_ROOT_ID,
-      className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
-    }, /*#__PURE__*/React.createElement(DocumentViewer, {
-      getContent: this.getContent,
-      getPageImageUrl: this.getPageImageUrl,
-      zoom: this.state.zoomLevel.value
-    }), /*#__PURE__*/React.createElement(ZoomControls, {
-      onChange: this.onZoomChange,
-      zoomLevel: this.state.zoomLevel
-    }));
+    return /*#__PURE__*/React.createElement(DocViewerComponent, {
+      mediaClient: this.props.mediaClient,
+      fileState: this.props.item,
+      collectionName: this.props.collectionName,
+      onError: this.props.onError,
+      traceContext: this.props.traceContext
+    });
   }
 }

package/dist/es2019/viewers/doc-next/passwordInput.compiled.css

@@ -0,0 +1,11 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._12nx2smr h1{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._125x1366 p{color:#fd9891}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
+._1e0c1txw{display:flex}
+._1nda9txx h1{color:#b6c2cf}
+._1twlmoej h1{font-weight:var(--ds-font-weight-bold,700)}
+._4cvr1h6o{align-items:center}
+._syaz1366{color:#fd9891}

package/dist/es2019/viewers/doc-next/passwordInput.js

@@ -0,0 +1,112 @@
+/* passwordInput.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./passwordInput.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useRef, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import TextField from '@atlaskit/textfield';
+import LockIcon from '@atlaskit/icon/core/migration/lock-locked--lock';
+import Form, { Field } from '@atlaskit/form';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui';
+import { xcss, Box, Flex, Text } from '@atlaskit/primitives';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import Heading from '@atlaskit/heading';
+const COLOR_SHADE = '#b6c2cf';
+const ERROR_COLOR = '#FD9891';
+const headingStyle = null;
+const errorMessageWrapperStyle = null;
+const errorMessageStyle = null;
+const headerStyles = xcss({
+  textAlign: 'center',
+  marginTop: 'space.200',
+  marginBottom: 'space.200'
+});
+const inputStyle = xcss({
+  width: '330px'
+});
+const footerStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  justifyContent: 'center'
+});
+export const PasswordInput = ({
+  onSubmit,
+  hasPasswordError,
+  onRender
+}) => {
+  const passwordInputRef = useRef(null);
+  const onRenderRef = useRef(onRender);
+  const [formError, setFormError] = useState(hasPasswordError);
+  const intl = useIntl();
+  useEffect(() => {
+    var _onRenderRef$current;
+    (_onRenderRef$current = onRenderRef.current) === null || _onRenderRef$current === void 0 ? void 0 : _onRenderRef$current.call(onRenderRef);
+  }, []);
+  useEffect(() => {
+    if (hasPasswordError) {
+      var _passwordInputRef$cur;
+      setFormError(true);
+      (_passwordInputRef$cur = passwordInputRef.current) === null || _passwordInputRef$cur === void 0 ? void 0 : _passwordInputRef$cur.focus();
+    }
+  }, [hasPasswordError]);
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: onSubmit
+  }, ({
+    formProps,
+    submitting
+  }) => /*#__PURE__*/React.createElement("form", formProps, /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(LockIcon, {
+    label: "",
+    LEGACY_size: "xlarge",
+    color: COLOR_SHADE
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: headerStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_12nx2smr _1twlmoej _1nda9txx"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h1",
+    size: "medium"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.password_protected_pdf)))), /*#__PURE__*/React.createElement(Field, {
+    "aria-required": true,
+    name: "password",
+    defaultValue: "",
+    isRequired: true
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Box, {
+    xcss: inputStyle
+  }, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+    type: "password",
+    "aria-label": intl.formatMessage(messages.password),
+    placeholder: intl.formatMessage(messages.enter_password),
+    ref: passwordInputRef,
+    "aria-describedby": formError ? `${fieldProps.id}-error` : undefined,
+    onChange: value => {
+      fieldProps.onChange(value);
+      setFormError(false);
+    }
+  })), formError && /*#__PURE__*/React.createElement("div", {
+    id: `${fieldProps.id}-error`,
+    className: ax(["_11c8dcr7 _19pk1b66 _1e0c1txw _4cvr1h6o _syaz1366 _125x1366"])
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    color: "currentColor",
+    LEGACY_size: "small",
+    label: "",
+    size: "small"
+  }), /*#__PURE__*/React.createElement("div", {
+    id: `${fieldProps.id}-errorMessage`,
+    className: ax(["_19pkidpf _18u01b66"])
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.incorrect_password)))))), /*#__PURE__*/React.createElement(Box, {
+    xcss: footerStyles
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    type: "submit",
+    isLoading: submitting
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.submit)))));
+};

package/dist/esm/analytics/index.js

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

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.3.1";
+var packageVersion = "52.3.3";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/esm/viewers/archiveSidebar/archive-sidebar-folder-entry.js

@@ -60,7 +60,7 @@ var ArchiveSidebarFolderEntryBase = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
         shouldRenderAbuseModal = _this$props2.shouldRenderAbuseModal,
         intl = _this$props2.intl;
-      var tooltip = intl.formatMessage(messages.download_disabled_security_policy);
+      var tooltip = enforceDataSecurityPolicy ? intl.formatMessage(messages.download_disabled_security_policy) : undefined;
       var downloadFn = function downloadFn() {
         return _this.downloadZipEntry(entry, root);
       };

package/dist/esm/viewers/doc-next/doc-viewer.js

@@ -0,0 +1,192 @@
+/* doc-viewer.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./doc-viewer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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; }
+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; }
+import { useReducer } from 'react';
+import { isCommonMediaClientError } from '@atlaskit/media-client';
+import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
+import { useStaticCallback } from '@atlaskit/media-common';
+import { MediaViewerError } from '../../errors';
+import { ZoomControls } from '../../zoomControls';
+import { ZoomLevel } from '../../domain/zoomLevel';
+import { PasswordInput } from './passwordInput';
+var initialState = {
+  isMissingPassword: false,
+  hasPasswordError: false,
+  password: '',
+  zoomLevel: new ZoomLevel(1.75)
+};
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case 'submit_password':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        password: action.password
+      });
+    case 'set_zoom_level':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        zoomLevel: action.zoomLevel
+      });
+    case 'password_validation_failed':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        hasPasswordError: true
+      });
+    case 'password_validation_succeeded':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isMissingPassword: false,
+        hasPasswordError: false
+      });
+    case 'content_fetch_failed_password_required':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isMissingPassword: true
+      });
+    default:
+      return state;
+  }
+};
+var documentViewerStyles = null;
+export var DocViewer = function DocViewer(_ref) {
+  var mediaClient = _ref.mediaClient,
+    fileState = _ref.fileState,
+    collectionName = _ref.collectionName,
+    onError = _ref.onError,
+    traceContext = _ref.traceContext;
+  var _useReducer = useReducer(reducer, initialState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var getContent = useStaticCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(pageStart, pageEnd) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return mediaClient.mediaStore.getDocumentContent(fileState.id, {
+              pageStart: pageStart,
+              pageEnd: pageEnd,
+              collectionName: collectionName,
+              password: state.password
+            }, traceContext);
+          case 3:
+            return _context.abrupt("return", _context.sent);
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](0);
+            if (isCommonMediaClientError(_context.t0) && _context.t0.reason === 'serverEntityLocked') {
+              dispatch({
+                type: 'content_fetch_failed_password_required'
+              });
+            } else {
+              onError(new MediaViewerError('docviewer-content-fetch-failed', _context.t0 instanceof Error ? _context.t0 : undefined));
+            }
+            throw _context.t0;
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 6]]);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
+  var onPasswordSubmit = useStaticCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(data) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            dispatch({
+              type: 'submit_password',
+              password: data.password
+            });
+            _context2.prev = 1;
+            _context2.next = 4;
+            return mediaClient.mediaStore.getDocumentContent(fileState.id, {
+              pageStart: 0,
+              pageEnd: 1,
+              collectionName: collectionName,
+              password: data.password
+            }, traceContext);
+          case 4:
+            dispatch({
+              type: 'password_validation_succeeded'
+            });
+            _context2.next = 10;
+            break;
+          case 7:
+            _context2.prev = 7;
+            _context2.t0 = _context2["catch"](1);
+            if (isCommonMediaClientError(_context2.t0) && _context2.t0.reason === 'serverEntityLocked') {
+              dispatch({
+                type: 'password_validation_failed'
+              });
+            } else {
+              onError(new MediaViewerError('docviewer-content-fetch-failed', _context2.t0 instanceof Error ? _context2.t0 : undefined));
+            }
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 7]]);
+    }));
+    return function (_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }());
+  var getPageImageUrl = useStaticCallback( /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(pageNumber, zoom) {
+      var src;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return mediaClient.mediaStore.getDocumentPageImage(fileState.id, {
+              page: pageNumber,
+              zoom: zoom,
+              collectionName: collectionName,
+              password: state.password
+            }, traceContext);
+          case 2:
+            src = _context3.sent;
+            return _context3.abrupt("return", URL.createObjectURL(src));
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x4, _x5) {
+      return _ref4.apply(this, arguments);
+    };
+  }());
+  var onZoomChange = useStaticCallback(function (newZoomLevel) {
+    dispatch({
+      type: 'set_zoom_level',
+      zoomLevel: newZoomLevel
+    });
+  });
+  if (state.isMissingPassword) {
+    return /*#__PURE__*/React.createElement(PasswordInput, {
+      onSubmit: onPasswordSubmit,
+      hasPasswordError: state.hasPasswordError
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    id: DOCUMENT_SCROLL_ROOT_ID,
+    className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
+  }, /*#__PURE__*/React.createElement(DocumentViewer, {
+    getContent: getContent,
+    getPageImageUrl: getPageImageUrl,
+    zoom: state.zoomLevel.value
+  }), /*#__PURE__*/React.createElement(ZoomControls, {
+    onChange: onZoomChange,
+    zoomLevel: state.zoomLevel
+  }));
+};
+export default DocViewer;