cozy-viewer 1.1.0

package/dist/ViewersByFile/ImageViewer.js

@@ -0,0 +1,385 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _hammerjs = _interopRequireDefault(require("hammerjs"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FileImageLoader = _interopRequireDefault(require("cozy-ui/transpiled/react/FileImageLoader"));
+
+var _NoNetworkViewer = _interopRequireDefault(require("./NoNetworkViewer"));
+
+var _ViewerSpinner = _interopRequireDefault(require("../components/ViewerSpinner"));
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = {
+  "viewer-imageviewer": "styles__viewer-imageviewer___2O8pW",
+  "viewer-noviewer": "styles__viewer-noviewer___3HRGf",
+  "viewer-audioviewer": "styles__viewer-audioviewer___dpxUM",
+  "viewer-videoviewer": "styles__viewer-videoviewer___3yUQ5",
+  "viewer-pdfviewer": "styles__viewer-pdfviewer___3MJPk",
+  "viewer-textviewer": "styles__viewer-textviewer___1fl1c",
+  "viewer-canceled": "styles__viewer-canceled___3KRBk",
+  "viewer-textviewer-content": "styles__viewer-textviewer-content___30dhP",
+  "viewer-filename": "styles__viewer-filename___1-DIz",
+  "viewer-pdfviewer-pdf": "styles__viewer-pdfviewer-pdf___3R4jL",
+  "viewer-pdfviewer-page": "styles__viewer-pdfviewer-page___VvOF3",
+  "viewer-pdfviewer-toolbar": "styles__viewer-pdfviewer-toolbar___2Eat3",
+  "viewer-pdfMobile": "styles__viewer-pdfMobile___ym7we",
+  "viewer-pdfMobile--image": "styles__viewer-pdfMobile--image___3_zsS"
+};
+var MIN_SCALE = 1;
+var MAX_SCALE = 6;
+var MASS = 10; // If a paning gesture is released while the finger is still moving, the photo will keep paning for a little longer (a if you threw the photo). MASS determines how much the photo will keep paning (the higher the number, the more it will keep going)
+
+var FRICTION = 0.9; // When the photo is paning after a pan gesture ended suddenly, FRICTION determines how quickly the movement slows down. 0 would stop it imediately, 1 doesn't slow it down at all.
+
+var clamp = function clamp(min, value, max) {
+  return Math.max(min, Math.min(max, value));
+};
+
+var ImageViewer = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ImageViewer, _Component);
+
+  var _super = _createSuper(ImageViewer);
+
+  function ImageViewer(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ImageViewer);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "reload", function () {
+      _this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          loading: true,
+          canceled: false
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
+      _this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          loading: false,
+          canceled: true
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
+      _this.setState(function (state) {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          loading: false
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSwipe", function (e) {
+      // when a swipe happens while zoomed into an image, it's most likely a pan gesture and not a swipe
+      if (_this.state.scale > 1) return; // a pan event is triggered after the swipe and may trigger a getBoundingClientRect error
+
+      _this.gestures.off('pan');
+
+      _this.gestures.off('panend');
+
+      _this.props.onSwipe(e);
+    });
+    _this.state = {
+      loading: true,
+      canceled: false,
+      scale: 1,
+      offsetX: 0,
+      offsetY: 0,
+      initialOffset: {
+        x: 0,
+        y: 0
+      },
+      initialScale: 0,
+      momentum: {
+        x: 0,
+        y: 0
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(ImageViewer, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.file && this.props.file && nextProps.file.id !== this.props.file.id) {
+        this.tearDownGestures();
+        this.setState({
+          loading: true,
+          canceled: false,
+          scale: 1,
+          offsetX: 0,
+          offsetY: 0
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.gestures) this.initGestures();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var wasLoading = prevState.loading && !this.state.loading && !this.state.canceled;
+      if (!prevProps.gestures) this.initGestures();
+      if (wasLoading) this.setupGestures();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.tearDownGestures();
+    }
+  }, {
+    key: "tearDownGestures",
+    value: function tearDownGestures() {
+      if (this.gestures) {
+        this.gestures.off('swipe');
+        this.gestures.on('swipe', this.props.onSwipe);
+        this.gestures.off('panstart');
+        this.gestures.off('pinchstart');
+        this.gestures.off('pinchend');
+        this.gestures.off('pan');
+        this.gestures.off('pinch');
+        this.gestures.off('panend');
+      }
+    }
+  }, {
+    key: "initGestures",
+    value: function initGestures() {
+      this.gestures = this.props.gestures;
+      this.viewer = this.props.gesturesRef;
+    }
+  }, {
+    key: "setupGestures",
+    value: function setupGestures() {
+      var _this2 = this;
+
+      // We replace the swipe handler by ours
+      this.gestures.off('swipe');
+      this.gestures.on('swipe', this.onSwipe);
+      this.gestures.get('pinch').set({
+        enable: true
+      });
+      this.gestures.get('pan').set({
+        direction: _hammerjs.default.DIRECTION_ALL
+      }); // During a gesture, everything is computed with a base value (the state of the image when the gesture starts) and a delta (a translation / zoom, described by the gesture). When a gesture starts, we record the current state of the image.
+
+      this.gestures.on('panstart', this.prepareForGesture.bind(this));
+      this.gestures.on('pinchstart', this.prepareForGesture.bind(this)); // It frequently happens that at the end of a pinch gesture, a pan gesture is detected — because the fingers don't come off the screen at exactly the same time. Reseting the values at the end of the pinch makes sure the values are correct for the (accidental) pan event.
+
+      this.gestures.on('pinchend', this.prepareForGesture.bind(this)); // during a pan, we add the gestures delta to the initial offset to get the new offset. The new offset is then scaled : if the pan distance was 100px, but the image was scaled 2x, the actual offset should only be 50px. FInally, this value is clamped to make sure the user can't pan further than the edges.
+
+      this.gestures.on('pan', function (e) {
+        _this2.setState(function (state) {
+          var maxOffset = _this2.computeMaxOffset();
+
+          return {
+            offsetX: clamp(-maxOffset.x, state.initialOffset.x + e.deltaX / state.scale, maxOffset.x),
+            offsetY: clamp(-maxOffset.y, state.initialOffset.y + e.deltaY / state.scale, maxOffset.y)
+          };
+        });
+      }); // pinching / zooming / scaling is a bit more complicated, because the gesture's center has to be taken into account
+
+      this.gestures.on('pinch', function (e) {
+        if (e.isFinal) return; // hard to reproduce, but the final event seems to be causing problems and since it's just replaying the previous event, it can safely be discared
+
+        _this2.setState(function (state) {
+          // first we compute the scale factor: this is the number by which we will multiply the initial scale (as it was before the gesture started) to get the final scaling value. So if the initial scale is 2, and the scale factor is 1.5, the final scale will be 3.
+          // this value is clamped so so it stays within reasonable zoom limits.
+          var scaleFactor = clamp(MIN_SCALE / state.initialScale, e.scale, MAX_SCALE / state.initialScale); // When the user is zooming in or out, we want that the origin point of the gesture to stay in exactly the same place. The scaling origin is in the center of the viewer.
+          // If the gesture's origin is the same as the scaling origin, this works "out of the box" — you can imagine the pixels on all sides being "pushed" towards the outside. But if the gesture's origin is not in the center, we need to offset the whole image to produce the illusion that the scaling center is there.
+          // compute the center of the viewer
+
+          var wrapperBoundaries = _this2.viewer.getBoundingClientRect();
+
+          var viewerCenter = {
+            x: (wrapperBoundaries.right - wrapperBoundaries.left) / 2,
+            y: (wrapperBoundaries.bottom - wrapperBoundaries.top) / 2
+          }; // Compute the delta between the viewer's center and the gesture's center. This value is scaled back to the "natural" size — if the delta is 100px but the image is currently scale 2x, the real offset value is only 50px.
+
+          var offsetBeforeScale = {
+            x: (viewerCenter.x - e.center.x) / state.scale,
+            y: (viewerCenter.y - e.center.y) / state.scale
+          }; // Now we compute what this offset will be once we apply the new scale
+
+          var offsetAfterScale = {
+            x: offsetBeforeScale.x * scaleFactor,
+            y: offsetBeforeScale.y * scaleFactor
+          }; // finally, we compute the actual offset we want to apply. This is the difference between the offset *after* scaling and the offset *before* scaling. We also add any existing offset to preserve it (otherwise it is reset to the center each time)
+
+          var finalOffset = {
+            x: offsetAfterScale.x - offsetBeforeScale.x + state.initialOffset.x,
+            y: offsetAfterScale.y - offsetBeforeScale.y + state.initialOffset.y
+          }; // last thing: the offsets are clamped to make sure the offsetting doesn't go further than the edges
+
+          var maxOffset = _this2.computeMaxOffset();
+
+          return {
+            scale: state.initialScale * scaleFactor,
+            offsetX: clamp(-maxOffset.x, finalOffset.x, maxOffset.x),
+            offsetY: clamp(-maxOffset.y, finalOffset.y, maxOffset.y)
+          };
+        });
+      });
+      this.gestures.on('panend', function (e) {
+        // convert the remaining velocity into momentum
+        _this2.setState({
+          momentum: {
+            x: e.velocityX * MASS,
+            y: e.velocityY * MASS
+          }
+        }, _this2.applyMomentum.bind(_this2));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      if (this.state.canceled) {
+        return /*#__PURE__*/_react.default.createElement(_NoNetworkViewer.default, {
+          onReload: this.reload
+        });
+      }
+
+      var _this$props = this.props,
+          file = _this$props.file,
+          url = _this$props.url;
+      var _this$state = this.state,
+          scale = _this$state.scale,
+          offsetX = _this$state.offsetX,
+          offsetY = _this$state.offsetY,
+          loading = _this$state.loading;
+      var style = {
+        transform: "scale(".concat(scale, ") translate(").concat(offsetX, "px, ").concat(offsetY, "px)")
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles['viewer-imageviewer']
+      }, loading && /*#__PURE__*/_react.default.createElement(_ViewerSpinner.default, null), file && /*#__PURE__*/_react.default.createElement(_FileImageLoader.default, {
+        file: file,
+        url: url,
+        linkType: "large",
+        onError: this.onImageError,
+        key: file.id,
+        render: function render(src) {
+          return /*#__PURE__*/_react.default.createElement("img", {
+            ref: function ref(photo) {
+              return _this3.photo = photo;
+            },
+            style: style,
+            alt: file.name,
+            src: src,
+            onLoad: _this3.onImageLoad
+          });
+        }
+      }));
+    }
+    /**
+     * Things to do when a gesture starts:
+     * - saves the current scale and offset, which will be used as base values for calculations
+     * - kill any remaining momentum from previous gestures
+     * - hide the actions
+     */
+
+  }, {
+    key: "prepareForGesture",
+    value: function prepareForGesture() {
+      this.setState(function (state) {
+        return {
+          initialScale: state.scale,
+          initialOffset: {
+            x: state.offsetX,
+            y: state.offsetY
+          },
+          momentum: {
+            x: 0,
+            y: 0
+          }
+        };
+      });
+    }
+    /**
+     * Gradually applies the momentum after a pan end
+     */
+
+  }, {
+    key: "applyMomentum",
+    value: function applyMomentum() {
+      var _this4 = this;
+
+      this.setState(function (state) {
+        var maxOffset = _this4.computeMaxOffset();
+
+        return {
+          offsetX: clamp(-maxOffset.x, state.offsetX + state.momentum.x, maxOffset.x),
+          offsetY: clamp(-maxOffset.y, state.offsetY + state.momentum.y, maxOffset.y),
+          momentum: {
+            x: state.momentum.x * FRICTION,
+            y: state.momentum.y * FRICTION
+          }
+        };
+      }, function () {
+        if (Math.abs(_this4.state.momentum.x) > 0.1 || Math.abs(_this4.state.momentum.y) > 0.1) requestAnimationFrame(_this4.applyMomentum.bind(_this4));
+      });
+    }
+    /**
+     * Compute the maximum offset that can be applied to the photo on each axis before it goes over the edges
+     * @returns {object} A point with an x and y property
+     */
+
+  }, {
+    key: "computeMaxOffset",
+    value: function computeMaxOffset() {
+      if (this.viewer && this.photo) {
+        var wrapperBoundaries = this.viewer.getBoundingClientRect();
+        var photoBoundaries = this.photo.getBoundingClientRect();
+        return {
+          x: Math.max(photoBoundaries.width / 2 - wrapperBoundaries.width / 2, 0) / this.state.scale,
+          y: Math.max(photoBoundaries.height / 2 - wrapperBoundaries.height / 2, 0) / this.state.scale
+        };
+      } else {
+        return {
+          x: 0,
+          y: 0
+        };
+      }
+    }
+  }]);
+  return ImageViewer;
+}(_react.Component);
+
+var _default = ImageViewer;
+exports.default = _default;

package/dist/ViewersByFile/ImageViewer.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ViewersByFile/NoNetworkViewer.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/dist/ViewersByFile/NoNetworkViewer.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _CloudBroken = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CloudBroken"));
+
+var _Button = _interopRequireDefault(require("cozy-ui/transpiled/react/deprecated/Button"));
+
+var _withViewerLocales = require("../hoc/withViewerLocales");
+
+var styles = {
+  "viewer-imageviewer": "styles__viewer-imageviewer___2O8pW",
+  "viewer-noviewer": "styles__viewer-noviewer___3HRGf",
+  "viewer-audioviewer": "styles__viewer-audioviewer___dpxUM",
+  "viewer-videoviewer": "styles__viewer-videoviewer___3yUQ5",
+  "viewer-pdfviewer": "styles__viewer-pdfviewer___3MJPk",
+  "viewer-textviewer": "styles__viewer-textviewer___1fl1c",
+  "viewer-canceled": "styles__viewer-canceled___3KRBk",
+  "viewer-textviewer-content": "styles__viewer-textviewer-content___30dhP",
+  "viewer-filename": "styles__viewer-filename___1-DIz",
+  "viewer-pdfviewer-pdf": "styles__viewer-pdfviewer-pdf___3R4jL",
+  "viewer-pdfviewer-page": "styles__viewer-pdfviewer-page___VvOF3",
+  "viewer-pdfviewer-toolbar": "styles__viewer-pdfviewer-toolbar___2Eat3",
+  "viewer-pdfMobile": "styles__viewer-pdfMobile___ym7we",
+  "viewer-pdfMobile--image": "styles__viewer-pdfMobile--image___3_zsS"
+};
+
+var NoNetworkViewer = function NoNetworkViewer(_ref) {
+  var t = _ref.t,
+      onReload = _ref.onReload;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles['viewer-canceled']
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _CloudBroken.default,
+    width: 160,
+    height: 140
+  }), /*#__PURE__*/_react.default.createElement("h2", null, t('Viewer.error.network')), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onReload,
+    label: t('Viewer.retry')
+  }));
+};
+
+var _default = (0, _withViewerLocales.withViewerLocales)(NoNetworkViewer);
+
+exports.default = _default;

package/dist/ViewersByFile/OnlyOfficeViewer.d.ts

@@ -0,0 +1,2 @@
+declare var _default: any;
+export default _default;

package/dist/ViewersByFile/OnlyOfficeViewer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("cozy-ui/transpiled/react/deprecated/Button"));
+
+var _proptypes = require("cozy-ui/transpiled/react/proptypes");
+
+var _NoViewer = _interopRequireDefault(require("../NoViewer"));
+
+var _withViewerLocales = require("../hoc/withViewerLocales");
+
+var OnlyOfficeViewer = function OnlyOfficeViewer(_ref) {
+  var file = _ref.file,
+      onlyOfficeOpener = _ref.onlyOfficeOpener,
+      t = _ref.t;
+  return /*#__PURE__*/_react.default.createElement(_NoViewer.default, {
+    file: file,
+    renderFallbackExtraContent: function renderFallbackExtraContent() {
+      return /*#__PURE__*/_react.default.createElement(_Button.default, {
+        label: t('Viewer.openInOnlyOffice'),
+        onClick: function onClick() {
+          return onlyOfficeOpener(file);
+        }
+      });
+    }
+  });
+};
+
+OnlyOfficeViewer.propTypes = {
+  file: _proptypes.FileDoctype,
+  onlyOfficeOpener: _propTypes.default.func.isRequired
+};
+
+var _default = (0, _withViewerLocales.withViewerLocales)(OnlyOfficeViewer);
+
+exports.default = _default;

package/dist/ViewersByFile/PdfJsViewer.d.ts

@@ -0,0 +1,31 @@
+export const MIN_SCALE: 0.25;
+export const MAX_SCALE: 3;
+export const MAX_PAGES: 3;
+export class PdfJsViewer extends React.Component<any, any, any> {
+    constructor(props: Readonly<any>);
+    constructor(props: any, context?: any);
+    resizeListener: import("lodash").DebouncedFunc<() => void> | undefined;
+    onKeyUp: (e: any) => void;
+    toggleGestures(enable: any): void;
+    setWrapperSize: () => void;
+    onLoadSuccess: ({ numPages }: {
+        numPages: any;
+    }) => void;
+    onLoadError: (error: any) => void;
+    nextPage: () => void;
+    previousPage: () => void;
+    scaleUp: () => void;
+    scaleDown: () => void;
+    wrapper: HTMLDivElement | null | undefined;
+}
+export namespace PdfJsViewer {
+    namespace propTypes {
+        const url: PropTypes.Validator<string>;
+        const gestures: PropTypes.Requireable<object>;
+        const renderFallbackExtraContent: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+declare var _default: any;
+export default _default;
+import React from "react";
+import PropTypes from "prop-types";