mirador-dl-plugin 0.13.0 → 1.0.0-alpha.1

package/README.md

@@ -4,25 +4,25 @@
 [![npm package][npm-badge]][npm]
 [![Coveralls][coveralls-badge]][coveralls]
 
-`mirador-dl-plugin` is a Mirador 3 plugin that adds manifest-provided download links (e.g. `rendering`) to the window options menu. A [live demo](https://mirador-download-plugin.netlify.app/) with several institutions' manifests is available for testing.
+`mirador-dl-plugin` is a Mirador 4 plugin that adds manifest-provided download links (e.g. `rendering`) to the window options menu. A [live demo](https://mirador-download-plugin.netlify.app/) with several institutions' manifests is available for testing.
 
 ![download option in menu](https://user-images.githubusercontent.com/5402927/87057974-5e665a80-c1bc-11ea-8f10-7b783bdc972f.png)
 
 ![mirador-download-options](https://user-images.githubusercontent.com/5402927/87057857-3d056e80-c1bc-11ea-8860-7662208c19fa.png)
 
 
-[build-badge]: https://img.shields.io/travis/projectmirador/mirador-dl-plugin/master.png?style=flat-square
+[build-badge]: https://img.shields.io/travis/projectmirador/mirador-dl-plugin/main.png?style=flat-square
 [build]: https://travis-ci.org/projectmirador/mirador-dl-plugin
 
 [npm-badge]: https://img.shields.io/npm/v/mirador-dl-plugin.png?style=flat-square
 [npm]: https://www.npmjs.org/package/mirador-dl-plugin
 
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
+[coveralls-badge]: https://img.shields.io/coveralls/user/repo/main.png?style=flat-square
 [coveralls]: https://coveralls.io/github/user/repo
 
 ## Installation
 
-`mirador-dl-plugin` requires an instance of Mirador 3. See the [Mirador wiki](https://github.com/ProjectMirador/mirador/wiki) for examples of embedding Mirador within an application and additional information about plugins. See the [live demo's index.js](https://github.com/ProjectMirador/mirador-dl-plugin/blob/master/demo/src/index.js) for an example of importing and configuring `mirador-dl-plugin`.
+`mirador-dl-plugin` requires an instance of Mirador 4. See the [Mirador wiki](https://github.com/ProjectMirador/mirador/wiki) for examples of embedding Mirador within an application and additional information about plugins. See the [live demo's index.js](https://github.com/ProjectMirador/mirador-dl-plugin/blob/main/demo/src/index.js) for an example of importing and configuring `mirador-dl-plugin`.
 
 ## Configuration
 

package/es/CanvasDownloadLinks.js

@@ -1,253 +1,237 @@
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
 import uniqBy from 'lodash/uniqBy';
-import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
+import { OSDReferences } from 'mirador';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import RenderingDownloadLink from './RenderingDownloadLink';
 
 /**
  * CanvasDownloadLinks ~
-*/
-
-var CanvasDownloadLinks = function (_Component) {
-  _inherits(CanvasDownloadLinks, _Component);
-
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CanvasDownloadLinks = /*#__PURE__*/function (_Component) {
   function CanvasDownloadLinks() {
     _classCallCheck(this, CanvasDownloadLinks);
-
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+    return _callSuper(this, CanvasDownloadLinks, arguments);
   }
-
-  CanvasDownloadLinks.prototype.zoomedImageLabel = function zoomedImageLabel() {
-    var bounds = this.currentBounds();
-    return 'Zoomed region (' + Math.floor(bounds.width) + ' x ' + Math.floor(bounds.height) + 'px)';
-  };
-
-  CanvasDownloadLinks.prototype.fullImageLabel = function fullImageLabel() {
-    var canvas = this.props.canvas;
-
-
-    return 'Whole image (' + canvas.getWidth() + ' x ' + canvas.getHeight() + 'px)';
-  };
-
-  CanvasDownloadLinks.prototype.smallImageLabel = function smallImageLabel() {
-    var canvas = this.props.canvas;
-
-
-    return 'Whole image (1000 x ' + Math.floor(1000 * canvas.getHeight() / canvas.getWidth()) + 'px)';
-  };
-
-  CanvasDownloadLinks.prototype.zoomedImageUrl = function zoomedImageUrl() {
-    var canvas = this.props.canvas;
-
-    var bounds = this.currentBounds();
-    var boundsUrl = canvas.getCanonicalImageUri().replace(/\/full\/.*\/0\//, '/' + bounds.x + ',' + bounds.y + ',' + bounds.width + ',' + bounds.height + '/full/0/');
-
-    return boundsUrl + '?download=true';
-  };
-
-  CanvasDownloadLinks.prototype.imageUrlForSize = function imageUrlForSize(size) {
-    var canvas = this.props.canvas;
-
-
-    return canvas.getCanonicalImageUri(size.width) + '?download=true';
-  };
-
-  CanvasDownloadLinks.prototype.fullImageUrl = function fullImageUrl() {
-    var canvas = this.props.canvas;
-
-
-    return canvas.getCanonicalImageUri().replace(/\/full\/.*\/0\//, '/full/full/0/') + '?download=true';
-  };
-
-  CanvasDownloadLinks.prototype.thousandPixelWideImage = function thousandPixelWideImage() {
-    var canvas = this.props.canvas;
-
-
-    return canvas.getCanonicalImageUri('1000') + '?download=true';
-  };
-
-  CanvasDownloadLinks.prototype.osdViewport = function osdViewport() {
-    var windowId = this.props.windowId;
-
-
-    return OSDReferences.get(windowId).current.viewport;
-  };
-
-  CanvasDownloadLinks.prototype.currentBounds = function currentBounds() {
-    var bounds = this.osdViewport().getBounds();
-
-    return Object.keys(bounds).reduce(function (object, key) {
-      object[key] = Math.ceil(bounds[key]); // eslint-disable-line no-param-reassign
-      return object;
-    }, {});
-  };
-
-  CanvasDownloadLinks.prototype.definedSizesRestrictsDownload = function definedSizesRestrictsDownload() {
-    var infoResponse = this.props.infoResponse;
-
-    if (!infoResponse.json) return false;
-    var _infoResponse$json = infoResponse.json,
+  _inherits(CanvasDownloadLinks, _Component);
+  return _createClass(CanvasDownloadLinks, [{
+    key: "zoomedImageLabel",
+    value: function zoomedImageLabel() {
+      var t = this.props.t;
+      var bounds = this.currentBounds();
+      return t('mirador-dl-plugin.zoomed_region', {
+        width: Math.floor(bounds.width),
+        height: Math.floor(bounds.height)
+      });
+    }
+  }, {
+    key: "fullImageLabel",
+    value: function fullImageLabel() {
+      var _this$props = this.props,
+        canvas = _this$props.canvas,
+        t = _this$props.t;
+      return t('mirador-dl-plugin.whole_image', {
+        width: canvas.getWidth(),
+        height: canvas.getHeight()
+      });
+    }
+  }, {
+    key: "smallImageLabel",
+    value: function smallImageLabel() {
+      var _this$props2 = this.props,
+        canvas = _this$props2.canvas,
+        t = _this$props2.t;
+      var height = Math.floor(1000 * canvas.getHeight() / canvas.getWidth());
+      return t('mirador-dl-plugin.whole_image', {
+        width: 1000,
+        height: height
+      });
+    }
+  }, {
+    key: "zoomedImageUrl",
+    value: function zoomedImageUrl() {
+      var canvas = this.props.canvas;
+      var bounds = this.currentBounds();
+      var boundsUrl = canvas.getCanonicalImageUri().replace(/\/full\/.*\/0\//, "/".concat(bounds.x, ",").concat(bounds.y, ",").concat(bounds.width, ",").concat(bounds.height, "/full/0/"));
+      return "".concat(boundsUrl, "?download=true");
+    }
+  }, {
+    key: "imageUrlForSize",
+    value: function imageUrlForSize(size) {
+      var canvas = this.props.canvas;
+      return "".concat(canvas.getCanonicalImageUri(size.width), "?download=true");
+    }
+  }, {
+    key: "fullImageUrl",
+    value: function fullImageUrl() {
+      var canvas = this.props.canvas;
+      return "".concat(canvas.getCanonicalImageUri().replace(/\/full\/.*\/0\//, '/full/full/0/'), "?download=true");
+    }
+  }, {
+    key: "thousandPixelWideImage",
+    value: function thousandPixelWideImage() {
+      var canvas = this.props.canvas;
+      return "".concat(canvas.getCanonicalImageUri('1000'), "?download=true");
+    }
+  }, {
+    key: "osdViewport",
+    value: function osdViewport() {
+      var windowId = this.props.windowId;
+      return OSDReferences.get(windowId).current.viewport;
+    }
+  }, {
+    key: "currentBounds",
+    value: function currentBounds() {
+      var bounds = this.osdViewport().getBounds();
+      return Object.keys(bounds).reduce(function (object, key) {
+        object[key] = Math.ceil(bounds[key]); // eslint-disable-line no-param-reassign
+        return object;
+      }, {});
+    }
+  }, {
+    key: "definedSizesRestrictsDownload",
+    value: function definedSizesRestrictsDownload() {
+      var infoResponse = this.props.infoResponse;
+      if (!infoResponse.json) return false;
+      var _infoResponse$json = infoResponse.json,
         height = _infoResponse$json.height,
         width = _infoResponse$json.width;
-
-
-    if (this.definedSizes().length !== 1) return false;
-
-    return this.definedSizes()[0].width <= width && this.definedSizes()[0].height <= height;
-  };
-
-  CanvasDownloadLinks.prototype.displayCurrentZoomLink = function displayCurrentZoomLink() {
-    var _props = this.props,
-        restrictDownloadOnSizeDefinition = _props.restrictDownloadOnSizeDefinition,
-        infoResponse = _props.infoResponse,
-        viewType = _props.viewType;
-
-
-    if (viewType !== 'single') return false;
-    if (restrictDownloadOnSizeDefinition && this.definedSizesRestrictsDownload()) return false;
-    if (!(infoResponse && infoResponse.json)) return false;
-
-    var bounds = this.currentBounds();
-    return bounds.height < infoResponse.json.height && bounds.width < infoResponse.json.width && bounds.x >= 0 && bounds.y >= 0;
-  };
-
-  /**
-   * This only returns unique sizes
-  */
-
-
-  CanvasDownloadLinks.prototype.definedSizes = function definedSizes() {
-    var infoResponse = this.props.infoResponse;
-
-    if (!(infoResponse && infoResponse.json && infoResponse.json.sizes)) return [];
-
-    return uniqBy(infoResponse.json.sizes, function (size) {
-      return '' + size.width + size.height;
-    });
-  };
-
-  CanvasDownloadLinks.prototype.fullImageLink = function fullImageLink() {
-    return React.createElement(
-      ListItem,
-      { disableGutters: true, divider: true, key: this.fullImageUrl() },
-      React.createElement(
-        Link,
-        { href: this.fullImageUrl(), rel: 'noopener noreferrer', target: '_blank', variant: 'body1' },
-        this.fullImageLabel()
-      )
-    );
-  };
-
-  CanvasDownloadLinks.prototype.thousandPixelWideLink = function thousandPixelWideLink() {
-    var canvas = this.props.canvas;
-
-
-    if (canvas.getWidth() < 1000) return '';
-
-    return React.createElement(
-      ListItem,
-      { disableGutters: true, divider: true, key: this.thousandPixelWideImage() },
-      React.createElement(
-        Link,
-        { href: this.thousandPixelWideImage(), rel: 'noopener noreferrer', target: '_blank', variant: 'body1' },
-        this.smallImageLabel()
-      )
-    );
-  };
-
-  CanvasDownloadLinks.prototype.linksForDefinedSizes = function linksForDefinedSizes() {
-    var _this2 = this;
-
-    return this.definedSizes().map(function (size) {
-      return React.createElement(
-        ListItem,
-        { disableGutters: true, divider: true, key: '' + size.width + size.height },
-        React.createElement(
-          Link,
-          { href: _this2.imageUrlForSize(size), rel: 'noopener noreferrer', target: '_blank', variant: 'body1' },
-          'Whole image (' + size.width + ' x ' + size.height + 'px)'
-        )
-      );
-    });
-  };
-
-  /**
-   * Returns the rendered component
-  */
-
-
-  CanvasDownloadLinks.prototype.render = function render() {
-    var _props2 = this.props,
-        canvas = _props2.canvas,
-        canvasLabel = _props2.canvasLabel,
-        classes = _props2.classes;
-
-
-    return React.createElement(
-      React.Fragment,
-      null,
-      React.createElement(
-        Typography,
-        { noWrap: true, variant: 'h3', className: classes.h3 },
-        canvasLabel
-      ),
-      React.createElement(
-        List,
-        null,
-        this.displayCurrentZoomLink() && React.createElement(
-          ListItem,
-          { disableGutters: true, divider: true },
-          React.createElement(
-            Link,
-            { href: this.zoomedImageUrl(), rel: 'noopener noreferrer', target: '_blank', variant: 'body1' },
-            this.zoomedImageLabel()
-          )
-        ),
-        this.definedSizes().length === 0 && [this.fullImageLink(), this.thousandPixelWideLink()],
-        this.definedSizes().length > 0 && this.linksForDefinedSizes(),
-        canvas.getRenderings().map(function (rendering) {
-          return React.createElement(RenderingDownloadLink, { rendering: rendering, key: rendering.id });
+      if (this.definedSizes().length !== 1) return false;
+      return this.definedSizes()[0].width <= width && this.definedSizes()[0].height <= height;
+    }
+  }, {
+    key: "displayCurrentZoomLink",
+    value: function displayCurrentZoomLink() {
+      var _this$props3 = this.props,
+        restrictDownloadOnSizeDefinition = _this$props3.restrictDownloadOnSizeDefinition,
+        infoResponse = _this$props3.infoResponse,
+        viewType = _this$props3.viewType;
+      if (viewType !== 'single') return false;
+      if (restrictDownloadOnSizeDefinition && this.definedSizesRestrictsDownload()) return false;
+      if (!(infoResponse && infoResponse.json)) return false;
+      var bounds = this.currentBounds();
+      return bounds.height < infoResponse.json.height && bounds.width < infoResponse.json.width && bounds.x >= 0 && bounds.y >= 0;
+    }
+
+    /**
+     * This only returns unique sizes
+     */
+  }, {
+    key: "definedSizes",
+    value: function definedSizes() {
+      var infoResponse = this.props.infoResponse;
+      if (!(infoResponse && infoResponse.json && infoResponse.json.sizes)) return [];
+      return uniqBy(infoResponse.json.sizes, function (size) {
+        return "".concat(size.width).concat(size.height);
+      });
+    }
+  }, {
+    key: "fullImageLink",
+    value: function fullImageLink() {
+      return /*#__PURE__*/_jsx(ListItem, {
+        disableGutters: true,
+        divider: true,
+        children: /*#__PURE__*/_jsx(Link, {
+          href: this.fullImageUrl(),
+          rel: "noopener noreferrer",
+          target: "_blank",
+          variant: "body1",
+          children: this.fullImageLabel()
         })
-      )
-    );
-  };
-
-  return CanvasDownloadLinks;
+      }, this.fullImageUrl());
+    }
+  }, {
+    key: "thousandPixelWideLink",
+    value: function thousandPixelWideLink() {
+      var canvas = this.props.canvas;
+      if (canvas.getWidth() < 1000) return '';
+      return /*#__PURE__*/_jsx(ListItem, {
+        disableGutters: true,
+        divider: true,
+        children: /*#__PURE__*/_jsx(Link, {
+          href: this.thousandPixelWideImage(),
+          rel: "noopener noreferrer",
+          target: "_blank",
+          variant: "body1",
+          children: this.smallImageLabel()
+        })
+      }, this.thousandPixelWideImage());
+    }
+  }, {
+    key: "linksForDefinedSizes",
+    value: function linksForDefinedSizes() {
+      var _this = this;
+      var t = this.props.t;
+      return this.definedSizes().map(function (size) {
+        return /*#__PURE__*/_jsx(ListItem, {
+          disableGutters: true,
+          divider: true,
+          children: /*#__PURE__*/_jsx(Link, {
+            href: _this.imageUrlForSize(size),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            variant: "body1",
+            children: t('mirador-dl-plugin.whole_image', {
+              width: size.width,
+              height: size.height
+            })
+          })
+        }, "".concat(size.width).concat(size.height));
+      });
+    }
+
+    /**
+     * Returns the rendered component
+     */
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        canvas = _this$props4.canvas,
+        canvasLabel = _this$props4.canvasLabel;
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          noWrap: true,
+          variant: "h3",
+          sx: {
+            marginTop: '20px'
+          },
+          children: canvasLabel
+        }), /*#__PURE__*/_jsxs(List, {
+          children: [this.displayCurrentZoomLink() && /*#__PURE__*/_jsx(ListItem, {
+            disableGutters: true,
+            divider: true,
+            children: /*#__PURE__*/_jsx(Link, {
+              href: this.zoomedImageUrl(),
+              download: true,
+              rel: "noopener noreferrer",
+              target: "_blank",
+              variant: "body1",
+              children: this.zoomedImageLabel()
+            })
+          }), this.definedSizes().length === 0 && [this.fullImageLink(), this.thousandPixelWideLink()], this.definedSizes().length > 0 && this.linksForDefinedSizes(), canvas.getRenderings().map(function (rendering) {
+            return /*#__PURE__*/_jsx(RenderingDownloadLink, {
+              rendering: rendering
+            }, rendering.id);
+          })]
+        })]
+      });
+    }
+  }]);
 }(Component);
-
-export { CanvasDownloadLinks as default };
-
-
-CanvasDownloadLinks.propTypes = process.env.NODE_ENV !== "production" ? {
-  canvas: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    getCanonicalImageUri: PropTypes.func.isRequired,
-    getHeight: PropTypes.func.isRequired,
-    getRenderings: PropTypes.func.isRequired,
-    getWidth: PropTypes.func.isRequired
-  }).isRequired,
-  canvasLabel: PropTypes.string.isRequired, // canvasLabel is passed because we need access to redux
-  classes: PropTypes.shape({
-    h3: PropTypes.string
-  }).isRequired,
-  infoResponse: PropTypes.shape({
-    json: PropTypes.shape({
-      height: PropTypes.number,
-      sizes: PropTypes.arrayOf(PropTypes.shape({ height: PropTypes.number, width: PropTypes.number })),
-      width: PropTypes.number
-    })
-  }).isRequired,
-  restrictDownloadOnSizeDefinition: PropTypes.bool.isRequired,
-  viewType: PropTypes.string.isRequired,
-  windowId: PropTypes.string.isRequired
-} : {};
+export { CanvasDownloadLinks as default };

package/es/ManifestDownloadLinks.js

@@ -1,64 +1,30 @@
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import List from '@material-ui/core/List';
-import Typography from '@material-ui/core/Typography';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
 import RenderingDownloadLink from './RenderingDownloadLink';
 
 /**
  * ManifestDownloadLinks ~
-*/
-
-var ManifestDownloadLinks = function (_Component) {
-  _inherits(ManifestDownloadLinks, _Component);
-
-  function ManifestDownloadLinks() {
-    _classCallCheck(this, ManifestDownloadLinks);
-
-    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
-  }
-
-  /**
-   * Returns the rendered component
-  */
-  ManifestDownloadLinks.prototype.render = function render() {
-    var _props = this.props,
-        classes = _props.classes,
-        renderings = _props.renderings;
-
-
-    return React.createElement(
-      React.Fragment,
-      null,
-      React.createElement(
-        Typography,
-        { variant: 'h3', className: classes.h3 },
-        'Other download options'
-      ),
-      React.createElement(
-        List,
-        null,
-        renderings.map(function (rendering) {
-          return React.createElement(RenderingDownloadLink, { rendering: rendering, key: rendering.id });
-        })
-      )
-    );
-  };
-
-  return ManifestDownloadLinks;
-}(Component);
-
-export { ManifestDownloadLinks as default };
-
-
-ManifestDownloadLinks.propTypes = process.env.NODE_ENV !== "production" ? {
-  classes: PropTypes.shape({
-    h3: PropTypes.string
-  }).isRequired,
-  renderings: PropTypes.array.isRequired // eslint-disable-line react/forbid-prop-types
-} : {};
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ManifestDownloadLinks(_ref) {
+  var renderings = _ref.renderings;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      sx: {
+        marginTop: '20px'
+      },
+      children: t('mirador-dl-plugin.other_download')
+    }), /*#__PURE__*/_jsx(List, {
+      children: renderings.map(function (rendering) {
+        return /*#__PURE__*/_jsx(RenderingDownloadLink, {
+          rendering: rendering
+        }, rendering.id);
+      })
+    })]
+  });
+}