contentoh-components-library 21.6.54 → 21.6.56

package/.claude/launch.json

@@ -0,0 +1,14 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "start",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": [
+        "run",
+        "start"
+      ],
+      "port": 3000
+    }
+  ]
+}

package/.env.test

@@ -75,3 +75,4 @@ REACT_APP_ENVIRONMENT=test
 REACT_APP_REGION=us-east-1
 REACT_APP_VARIANTS_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/variants
 REACT_APP_NEW_ARTICLES_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/new-articles
+REACT_APP_ASSETS_PRESIGN_ENDPOINT=https://7o2hp8msfl.execute-api.us-east-1.amazonaws.com/test/articles-assets/presign

package/dist/components/atoms/IconFile/index.js

@@ -69,14 +69,85 @@ var IconFile = function IconFile(props) {
       type: "csv"
     },
     // file image
-    svg: {
+    gif: {
       icon: _freeSolidSvgIcons.faFileImage,
       type: "image"
     },
-    gif: {
+    jpg: {
+      icon: _freeSolidSvgIcons.faFileImage,
+      type: "image"
+    },
+    jpeg: {
+      icon: _freeSolidSvgIcons.faFileImage,
+      type: "image"
+    },
+    png: {
       icon: _freeSolidSvgIcons.faFileImage,
       type: "image"
     },
+    webp: {
+      icon: _freeSolidSvgIcons.faFileImage,
+      type: "image"
+    },
+    // archivos de diseño editables: no se pueden previsualizar en el navegador,
+    // así que el icono es lo único que distingue uno de otro en la bandeja.
+    psd: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    psb: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    ai: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    eps: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    indd: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    idml: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    sketch: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    fig: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    xd: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    afphoto: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    afdesign: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    svg: {
+      icon: _freeSolidSvgIcons.faSwatchbook,
+      type: "design"
+    },
+    // proyectos de animación y edición de video
+    aep: {
+      icon: _freeSolidSvgIcons.faFilm,
+      type: "motion"
+    },
+    prproj: {
+      icon: _freeSolidSvgIcons.faFilm,
+      type: "motion"
+    },
     // file pdf
     pdf: {
       icon: _freeSolidSvgIcons.faFilePdf,
@@ -132,6 +203,10 @@ var IconFile = function IconFile(props) {
       icon: _freeSolidSvgIcons.faFileZipper,
       type: "zip"
     },
+    "7z": {
+      icon: _freeSolidSvgIcons.faFileZipper,
+      type: "zip"
+    },
     // file code
     xml: {
       icon: _freeSolidSvgIcons.faFileCode,
@@ -198,6 +273,14 @@ var IconFile = function IconFile(props) {
       icon: _freeSolidSvgIcons.faFileVideo,
       type: "video"
     },
+    mov: {
+      icon: _freeSolidSvgIcons.faFileVideo,
+      type: "video"
+    },
+    webm: {
+      icon: _freeSolidSvgIcons.faFileVideo,
+      type: "video"
+    },
     mpeg: {
       icon: _freeSolidSvgIcons.faFileVideo,
       type: "video"

package/dist/components/atoms/IconFile/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  cursor: default;\n  display: grid;\n  place-items: center;\n  padding: 0px;\n  border-radius: ", ";\n  border: none;\n\n  // colores de acuerdo al tipo de icono\n  &.icon-word .icon {\n    color: #1f3780;\n    border-color: #1f3780;\n  }\n  &.icon-excel .icon {\n    color: #2d5639;\n    border-color: #2d5639;\n  }\n  &.icon-csv .icon {\n    color: #6b8e73;\n    border-color: #6b8e73;\n  }\n  &.icon-image .icon {\n    color: #ca7f4d;\n    border-color: #ca7f4d;\n  }\n  &.icon-pdf .icon {\n    color: #951a1a;\n    border-color: #951a1a;\n  }\n  &.icon-powerPoint .icon {\n    color: #ba4f19;\n    border-color: #ba4f19;\n  }\n  &.icon-zip .icon {\n    color: #b8950c;\n    border-color: #b8950c;\n  }\n  &.icon-code .icon {\n    color: #1c778e;\n    border-color: #1c778e;\n  }\n  &.icon-video .icon {\n    color: #a15bb1;\n    border-color: #a15bb1;\n  }\n  &.icon-audio .icon {\n    color: #3090e9;\n    border-color: #3090e9;\n  }\n  &.icon-default .icon {\n    color: #5e6265;\n    border-color: #5e6265;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  min-width: min-content;\n  min-height: min-content;\n  overflow: hidden;\n  cursor: default;\n  display: grid;\n  place-items: center;\n  padding: 0px;\n  border-radius: ", ";\n  border: none;\n\n  // colores de acuerdo al tipo de icono\n  &.icon-word .icon {\n    color: #1f3780;\n    border-color: #1f3780;\n  }\n  &.icon-excel .icon {\n    color: #2d5639;\n    border-color: #2d5639;\n  }\n  &.icon-csv .icon {\n    color: #6b8e73;\n    border-color: #6b8e73;\n  }\n  &.icon-image .icon {\n    color: #ca7f4d;\n    border-color: #ca7f4d;\n  }\n  &.icon-pdf .icon {\n    color: #951a1a;\n    border-color: #951a1a;\n  }\n  &.icon-powerPoint .icon {\n    color: #ba4f19;\n    border-color: #ba4f19;\n  }\n  &.icon-zip .icon {\n    color: #b8950c;\n    border-color: #b8950c;\n  }\n  &.icon-code .icon {\n    color: #1c778e;\n    border-color: #1c778e;\n  }\n  &.icon-design .icon {\n    color: #2a5cb8;\n    border-color: #2a5cb8;\n  }\n  &.icon-motion .icon {\n    color: #6d3fc0;\n    border-color: #6d3fc0;\n  }\n  &.icon-video .icon {\n    color: #a15bb1;\n    border-color: #a15bb1;\n  }\n  &.icon-audio .icon {\n    color: #3090e9;\n    border-color: #3090e9;\n  }\n  &.icon-default .icon {\n    color: #5e6265;\n    border-color: #5e6265;\n  }\n"])), function (_ref) {
   var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "6px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "0px";
 });

package/dist/components/atoms/ProductImage/ProductImage.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Template = void 0;
+exports.default = exports.VideoReproductor = exports.VideoMiniaturas = exports.Template = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
@@ -36,4 +36,72 @@ var ProductImageDefault = Template.bind({});
 ProductImageDefault.args = {
   imageType: "main-image",
   altText: "default image"
-};
+};
+/*
+  Las escalas de video, lado a lado. Las cuatro primeras son miniaturas: sin
+  controles, con su duración y un botón de play, y todo el recuadro clicable.
+  Las dos últimas son reproductores de verdad.
+*/
+
+var VIDEO = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+
+var Escala = function Escala(_ref) {
+  var imageType = _ref.imageType;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
+    style: {
+      margin: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProductImage, {
+      img: VIDEO,
+      ext: "mp4",
+      imageType: imageType,
+      altText: "video de producto",
+      onClick: function onClick() {
+        return console.log("clic en", imageType);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("figcaption", {
+      style: {
+        fontFamily: "Lato",
+        fontSize: 11,
+        marginTop: 4
+      },
+      children: imageType
+    })]
+  });
+};
+
+var VideoMiniaturas = function VideoMiniaturas() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: "flex",
+      gap: 24,
+      alignItems: "flex-start"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "carousel-image"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "catalogue-image-small-size"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "catalogue-modal-image"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "catalogue-image-big-size"
+    })]
+  });
+};
+
+exports.VideoMiniaturas = VideoMiniaturas;
+
+var VideoReproductor = function VideoReproductor() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: "flex",
+      gap: 24,
+      alignItems: "flex-start"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Escala, {
+      imageType: "main-image"
+    })
+  });
+};
+
+exports.VideoReproductor = VideoReproductor;

package/dist/components/atoms/ProductImage/index.js

@@ -7,46 +7,119 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProductImage = void 0;
 
-var _styles = require("./styles");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
 
 var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
 
+var _styles = require("./styles");
+
+var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+
 var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+/*
+  Tamaños en los que un video se muestra como miniatura y no como reproductor.
+
+  Los controles nativos del navegador necesitan alrededor de 150px de ancho
+  para ser usables; en un recuadro de 60 o de 85 se pintan encimados y no se
+  puede ni dar play. Peor aún, un <video> con controles se traga el clic, así
+  que un video en el carrusel no se podía ni seleccionar: `onClick` nunca
+  llegaba a correr.
+
+  En estos tamaños se muestra el primer fotograma con su duración y un botón de
+  play, y el recuadro completo lleva al visor grande, que es donde el video sí
+  se ve y se controla.
+*/
+var THUMBNAIL_TYPES = ["carousel-image", "catalogue-image-small-size", "catalogue-image-big-size", "catalogue-modal-image"];
+
+var PlayBadge = function PlayBadge() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "play-badge",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      viewBox: "0 0 24 24",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: "12",
+        cy: "12",
+        r: "11"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("polygon", {
+        points: "9.5,7.5 17,12 9.5,16.5"
+      })]
+    })
+  });
+};
+/**
+ * Imagen —o video— de producto.
+ *
+ * El tipo de archivo se decide por `ext`/`mime` cuando quien llama los conoce.
+ * Antes se comprobaba con `/\.mp4$/` sobre la URL, y nunca acertaba: la URL
+ * guardada apunta al redimensionador de CloudFront y no conserva la extensión.
+ * El regex queda solo como respaldo para los llamadores que aún mandan `img`
+ * a secas.
+ */
+
+
 var ProductImage = function ProductImage(_ref) {
   var img = _ref.img,
       imageType = _ref.imageType,
       altText = _ref.altText,
-      onClick = _ref.onClick;
-  // Expresión regular para validar que los últimos tres caracteres sean ".mp4"
-  var regex = /\.mp4$/;
-
-  if (regex.test(img)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      className: imageType,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
-        controls: true,
-        width: "100%",
-        height: "auto",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
-          src: img,
-          type: "video/mp4"
-        })
-      })
-    });
-  } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      className: imageType,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
-        src: img,
-        fallbackImage: _defaultProductImage.default,
-        alt: altText,
-        onClick: onClick
-      })
+      onClick = _ref.onClick,
+      ext = _ref.ext,
+      mime = _ref.mime,
+      poster = _ref.poster;
+
+  // La duración no está en la base: se toma de los metadatos, que el navegador
+  // ya descarga por el `preload="metadata"`. No cuesta una petición extra.
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      duration = _useState2[0],
+      setDuration = _useState2[1];
+
+  var kind = ext || mime ? (0, _assetTypes.resolvePreviewKind)({
+    ext: ext,
+    mime: mime
+  }) : /\.mp4($|[?#])/i.test(img || "") ? _assetTypes.ASSET_PREVIEW.VIDEO : _assetTypes.ASSET_PREVIEW.IMAGE;
+
+  if (kind === _assetTypes.ASSET_PREVIEW.VIDEO) {
+    var isThumbnail = THUMBNAIL_TYPES.includes(imageType);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      className: "".concat(imageType, " ").concat(isThumbnail ? "video-thumbnail" : "video-player"),
+      onClick: isThumbnail ? onClick : undefined,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+        // `#t=0.5` hace que el navegador muestre el fotograma del medio
+        // segundo en lugar de un cuadro negro, sin descargar el archivo
+        // completo.
+        src: poster ? img : "".concat(img, "#t=0.5"),
+        poster: poster || undefined,
+        controls: !isThumbnail,
+        muted: isThumbnail,
+        playsInline: true,
+        preload: "metadata",
+        onLoadedMetadata: function onLoadedMetadata(e) {
+          return setDuration(e.target.duration);
+        }
+      }), isThumbnail && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayBadge, {}), duration ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "video-duration",
+          children: (0, _assetTypes.formatDuration)(duration)
+        }) : null]
+      })]
     });
   }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: imageType,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
+      src: img,
+      fallbackImage: _defaultProductImage.default,
+      alt: altText,
+      onClick: onClick
+    })
+  });
 };
 
 exports.ProductImage = ProductImage;

package/dist/components/atoms/ProductImage/styles.js

@@ -11,8 +11,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _variables = require("../../../global-files/variables");
+
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img {\n    object-fit: contain;\n  }\n\n  &.carousel-image {\n    img {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    display: flex; \n    justify-content: center; \n    align-items: center; \n    img {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n    display: flex; \n    justify-content: center; \n    align-items: center; \n\n    img {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img,\n  video {\n    object-fit: contain;\n  }\n\n  /*\n    Miniatura de video: fotograma quieto, con su duraci\xF3n y un bot\xF3n de play.\n    El clic lo recibe el contenedor, no el <video>, para que lleve al visor\n    grande en vez de quedarse peleando con los controles.\n  */\n  &.video-thumbnail {\n    position: relative;\n    cursor: pointer;\n\n    video {\n      pointer-events: none;\n      background: #000;\n    }\n\n    .play-badge {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 32px;\n      height: 32px;\n      pointer-events: none;\n\n      svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n\n      circle {\n        fill: rgba(0, 0, 0, 0.55);\n      }\n\n      polygon {\n        fill: #ffffff;\n      }\n    }\n\n    &:hover .play-badge circle {\n      fill: rgba(0, 0, 0, 0.75);\n    }\n\n    .video-duration {\n      position: absolute;\n      right: 4px;\n      bottom: 4px;\n      padding: 0 4px;\n      border-radius: 3px;\n      background: rgba(0, 0, 0, 0.75);\n      color: #ffffff;\n      font-family: ", ";\n      font-size: 10px;\n      line-height: 15px;\n      pointer-events: none;\n    }\n  }\n\n  /* En 60px un badge de 32 tapa el fotograma completo. */\n  &.catalogue-image-small-size.video-thumbnail .play-badge {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.carousel-image.video-thumbnail {\n    .play-badge {\n      width: 22px;\n      height: 22px;\n    }\n\n    .video-duration {\n      font-size: 9px;\n      line-height: 13px;\n    }\n  }\n\n  &.carousel-image {\n    img,\n    video {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img,\n    video {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    display: flex; \n    justify-content: center; \n    align-items: center; \n    img,\n    video {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img,\n    video {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img,\n\n    video {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n    display: flex; \n    justify-content: center; \n    align-items: center; \n\n    img,\n\n    video {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])), _variables.FontFamily.Lato);
 
 exports.Container = Container;

package/dist/components/molecules/EditionActiveImage/index.js

@@ -16,12 +16,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 var EditionActiveImage = function EditionActiveImage(_ref) {
   var img = _ref.img,
       altText = _ref.altText,
-      setShowModal = _ref.setShowModal;
+      setShowModal = _ref.setShowModal,
+      ext = _ref.ext;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
       img: img,
       imageType: "main-image",
-      altText: altText
+      altText: altText,
+      ext: ext
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
       buttonType: "open-modal-button",
       onClick: function onClick() {

package/dist/components/molecules/GalleryElement/index.js

@@ -36,7 +36,7 @@ var _Tooltip = require("../../atoms/Tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GalleryElement = function GalleryElement(_ref) {
-  var _auditImages$values$n, _auditImages$values$n2;
+  var _auditImages$values$n, _auditImages$values$n2, _auditImages$values$n3;
 
   var image = _ref.image,
       _ref$gridLayout = _ref.gridLayout,
@@ -54,7 +54,8 @@ var GalleryElement = function GalleryElement(_ref) {
       setCheckAll = _ref.setCheckAll,
       auditImages = _ref.auditImages,
       compare = _ref.compare,
-      updateApprovedInputsImages = _ref.updateApprovedInputsImages;
+      updateApprovedInputsImages = _ref.updateApprovedInputsImages,
+      onSelect = _ref.onSelect;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -133,8 +134,16 @@ var GalleryElement = function GalleryElement(_ref) {
       className: "image-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
         img: compare ? auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n2 = auditImages.values[number]) === null || _auditImages$values$n2 === void 0 ? void 0 : _auditImages$values$n2.src : image === null || image === void 0 ? void 0 : image.src,
-        altText: image === null || image === void 0 ? void 0 : image.altText,
-        imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
+        altText: image === null || image === void 0 ? void 0 : image.altText // Sin `ext`, un video se pinta como <img> rota: la URL guardada no
+        // conserva la extensión del archivo.
+        ,
+        ext: compare ? auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n3 = auditImages.values[number]) === null || _auditImages$values$n3 === void 0 ? void 0 : _auditImages$values$n3.ext : image === null || image === void 0 ? void 0 : image.ext,
+        imageType: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size") // La miniatura de un video ya no lleva controles, así que el clic es
+        // la única forma de llegar al visor grande. Se aplica también a las
+        // imágenes: dos recuadros idénticos donde solo uno responde al clic
+        // sería peor que no responder ninguno.
+        ,
+        onClick: onSelect
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "information-container",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {

package/dist/components/molecules/GalleryHeader/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GalleryHeader = void 0;
+exports.GalleryHeader = exports.GALLERY_COLUMNS = void 0;
 
 var _styles = require("./styles");
 
@@ -11,13 +11,97 @@ var _CheckBox = require("../../atoms/CheckBox");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+/*
+  Las columnas de la bandeja dependen de qué se está listando: un PDF no tiene
+  "tipo de toma" ni alto por ancho, y una foto no tiene "tipo de activo".
+  Estaban escritas a mano en el marcado, así que la única forma de cambiarlas
+  era duplicar el componente.
+
+  El preset `image` reproduce exactamente las columnas y clases de antes, para
+  que la bandeja de imágenes se vea idéntica sin que nadie tenga que pasar nada.
+*/
+var GALLERY_COLUMNS = {
+  image: {
+    template: "0.1fr 1fr 1fr 1fr 1fr 1fr",
+    columns: [{
+      key: "preview",
+      label: "Imagen",
+      className: "image-header"
+    }, {
+      key: "name",
+      label: "Nombre",
+      className: "image-name"
+    }, {
+      key: "size",
+      label: "Tamaño",
+      className: "image-size"
+    }, {
+      key: "format",
+      label: "Formato",
+      className: "image-format"
+    }, {
+      key: "legend",
+      label: "¿Tiene leyenda?",
+      className: "image-description"
+    }, {
+      key: "shotType",
+      label: "Tipo de toma",
+      className: "shoot-type"
+    }]
+  },
+  asset: {
+    template: "0.1fr 1fr 1fr 1fr 1fr",
+    columns: [{
+      key: "preview",
+      label: "Activo",
+      className: "asset-header"
+    }, {
+      key: "name",
+      label: "Nombre",
+      className: "asset-name"
+    }, {
+      key: "weight",
+      label: "Peso",
+      className: "asset-weight"
+    }, {
+      key: "format",
+      label: "Formato",
+      className: "asset-format"
+    }, {
+      key: "assetType",
+      label: "Tipo de activo",
+      className: "asset-type"
+    }]
+  }
+};
+/**
+ * Encabezado de la bandeja, con su casilla de "seleccionar todo".
+ *
+ * `checkAllId` e `itemSelector` se pueden cambiar porque imágenes y activos
+ * conviven en la misma pestaña: si las dos listas compartieran el id de la
+ * casilla global, marcar todas las imágenes marcaría también los activos.
+ */
+
+exports.GALLERY_COLUMNS = GALLERY_COLUMNS;
+
 var GalleryHeader = function GalleryHeader(_ref) {
+  var _GALLERY_COLUMNS$vari;
+
   var setCheckAll = _ref.setCheckAll,
       setSelectedImages = _ref.setSelectedImages,
-      shotThd = _ref.shotThd;
+      shotThd = _ref.shotThd,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "image" : _ref$variant,
+      columns = _ref.columns,
+      _ref$checkAllId = _ref.checkAllId,
+      checkAllId = _ref$checkAllId === void 0 ? "check-all-images" : _ref$checkAllId,
+      _ref$itemSelector = _ref.itemSelector,
+      itemSelector = _ref$itemSelector === void 0 ? "[id^='gallery-element-']" : _ref$itemSelector;
+  var preset = (_GALLERY_COLUMNS$vari = GALLERY_COLUMNS[variant]) !== null && _GALLERY_COLUMNS$vari !== void 0 ? _GALLERY_COLUMNS$vari : GALLERY_COLUMNS.image;
+  var visibleColumns = columns !== null && columns !== void 0 ? columns : preset.columns;
 
   var checkAll = function checkAll(e) {
-    var checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    var checkboxList = document.querySelectorAll(itemSelector);
     checkboxList.forEach(function (chk) {
       return chk.checked = e.target.checked;
     });
@@ -26,35 +110,23 @@ var GalleryHeader = function GalleryHeader(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    template: preset.template,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "checkbox",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
-        id: "check-all-images",
+        id: checkAllId,
         onChange: function onChange(e) {
           return checkAll(e);
         }
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "information",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-header",
-        children: "Imagen"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-name",
-        children: "Nombre"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-size",
-        children: "Tama\xF1o"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-format",
-        children: "Formato"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "image-description",
-        children: "\xBFTiene leyenda?"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: "shoot-type",
-        children: "Tipo de toma"
-      })]
+      children: visibleColumns.map(function (column) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: column.className,
+          children: column.label
+        }, column.key);
+      })
     })]
   });
 };

package/dist/components/molecules/GalleryHeader/styles.js

@@ -15,6 +15,9 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  .checkbox{\n    width: 5.25%;\n  }\n\n  .information{\n    width: 90%;\n    display: grid;\n    grid-template-columns: 0.1fr 1fr 1fr 1fr 1fr 1fr;\n  }\n    .image-header{\n\n    }\n\n    .image-name{\n      padding-left: 1.75rem;\n    }\n\n    .image-size{\n      padding-left: 2.75rem;\n\n    }\n\n    .image-format{\n      padding-left: 4.5rem;\n\n    }\n\n    .image-description{\n      margin-left: -1rem;\n    }\n\n    .shoot-type{\n    }\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    /*&.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n\n    &.image-description {\n      max-width: 120px;\n    }*/\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  .checkbox{\n    width: 5.25%;\n  }\n\n  .information{\n    width: 90%;\n    display: grid;\n    /* Lo define el preset de columnas; el valor por defecto es el de im\xE1genes. */\n    grid-template-columns: ", ";\n  }\n    .image-header{\n\n    }\n\n    .image-name{\n      padding-left: 1.75rem;\n    }\n\n    .image-size{\n      padding-left: 2.75rem;\n\n    }\n\n    .image-format{\n      padding-left: 4.5rem;\n\n    }\n\n    .image-description{\n      margin-left: -1rem;\n    }\n\n    .shoot-type{\n    }\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    /*&.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n\n    &.image-description {\n      max-width: 120px;\n    }*/\n  }\n"])), function (_ref) {
+  var template = _ref.template;
+  return template || "0.1fr 1fr 1fr 1fr 1fr 1fr";
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
 
 exports.Container = Container;

package/dist/components/molecules/ImageSelector/index.js

@@ -24,6 +24,7 @@ var ImageSelector = function ImageSelector(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImage, {
         img: image.src,
         altText: image.altText,
+        ext: image.ext,
         imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
         onClick: function onClick() {
           return setActiveImage(index);

package/dist/components/organisms/ImagePreviewer/index.js

@@ -23,6 +23,7 @@ var ImagePreviewer = function ImagePreviewer(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionActiveImage.EditionActiveImage, {
       img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
       altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+      ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
       setShowModal: setShowModal
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
       images: imagesArray,