contentoh-components-library 21.6.49 → 21.6.50

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/GalleryAssetElement/GalleryAssetElement.stories.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Subiendo = exports.Fila = exports.EncabezadosComparados = exports.Cuadricula = exports.ConError = exports.BandejaCompleta = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = require("react");
+
+var _index = require("./index");
+
+var _GalleryHeader = require("../GalleryHeader");
+
+var _assets = require("../../../global-files/digital-assets/assets.adapter");
+
+var _assets2 = require("../../../global-files/digital-assets/assets.mock");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SAMPLES = {
+  mp4: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+  gif: "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"
+};
+/* Las claves del mock apuntan a S3, que todavía no tiene nada: se sustituyen
+   por archivos públicos para poder ver el componente. */
+
+var assets = (0, _assets.fromBackendList)(_assets2.backendAssetsMock).map(function (asset) {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, asset), {}, {
+    url: asset.ext === "mp4" ? SAMPLES.mp4 : asset.ext === "gif" ? SAMPLES.gif : "",
+    poster: ""
+  });
+});
+var _default = {
+  title: "Components/molecules/GalleryAssetElement",
+  component: _index.GalleryAssetElement
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryAssetElement, (0, _objectSpread2.default)({}, args));
+};
+
+var Fila = Template.bind({});
+exports.Fila = Fila;
+Fila.args = {
+  asset: assets[0],
+  index: 0
+};
+var Cuadricula = Template.bind({});
+exports.Cuadricula = Cuadricula;
+Cuadricula.args = {
+  asset: assets[0],
+  index: 0,
+  gridLayout: true
+};
+var Subiendo = Template.bind({});
+exports.Subiendo = Subiendo;
+Subiendo.args = {
+  asset: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, assets[2]), {}, {
+    status: _assets.ASSET_STATUS.UPLOADING,
+    progress: 42
+  }),
+  index: 0
+};
+var ConError = Template.bind({});
+exports.ConError = ConError;
+ConError.args = {
+  asset: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, assets[3]), {}, {
+    status: _assets.ASSET_STATUS.ERROR,
+    error: "No se pudo subir el archivo. Intenta de nuevo."
+  }),
+  index: 0
+};
+/** La bandeja completa con su encabezado: es el uso real del componente. */
+
+var BandejaCompleta = function BandejaCompleta() {
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      width: 900
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+      variant: "asset",
+      checkAllId: "check-all-assets",
+      itemSelector: "[id^='gallery-asset-']",
+      setCheckAll: function setCheckAll() {},
+      setSelectedImages: setSelected
+    }), assets.map(function (asset, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryAssetElement, {
+        asset: asset,
+        index: index,
+        selectedAssets: selected,
+        setSelectedAssets: setSelected,
+        setCheckAll: function setCheckAll() {},
+        changeAsset: function changeAsset(_ref) {
+          var value = _ref.value;
+          return console.log("nuevo tipo:", value);
+        },
+        onRemove: function onRemove(item) {
+          return console.log("quitar:", item.name);
+        }
+      }, asset.id);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      style: {
+        fontFamily: "Lato",
+        fontSize: 12,
+        marginTop: 12
+      },
+      children: ["Seleccionados: ", selected.length]
+    })]
+  });
+};
+/** Comparación de los dos encabezados, para verificar que no se movió el de imágenes. */
+
+
+exports.BandejaCompleta = BandejaCompleta;
+
+var EncabezadosComparados = function EncabezadosComparados() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      width: 900
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+      variant: "image",
+      setCheckAll: function setCheckAll() {},
+      setSelectedImages: function setSelectedImages() {}
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+      variant: "asset",
+      checkAllId: "check-all-assets-demo",
+      itemSelector: "[id^='gallery-asset-demo-']",
+      setCheckAll: function setCheckAll() {},
+      setSelectedImages: function setSelectedImages() {}
+    })]
+  });
+};
+
+exports.EncabezadosComparados = EncabezadosComparados;

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

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GalleryAssetElement = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _styles = require("./styles");
+
+var _AssetPreview = require("../../atoms/AssetPreview");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _Select = _interopRequireDefault(require("../../atoms/Select"));
+
+var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+
+var _assets = require("../../../global-files/digital-assets/assets.adapter");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Fila de un activo digital en la bandeja.
+
+  Es un componente aparte de `GalleryElement` a propósito, no una bifurcación
+  dentro de él. Un activo no comparte casi nada con una imagen de producto: no
+  tiene tipo de toma, ni leyenda, ni panel de validación, ni comparación contra
+  la versión auditable. Meterlo en el mismo archivo habría partido su render en
+  dos mitades y puesto en riesgo la bandeja de imágenes, que ya funciona.
+
+  Lo que sí comparte —rejilla, tamaños, colores— vive en los estilos, calcados
+  de `GalleryElement` para que las dos listas se vean como una sola tabla.
+*/
+var GalleryAssetElement = function GalleryAssetElement(_ref) {
+  var _asset$progress;
+
+  var _ref$asset = _ref.asset,
+      asset = _ref$asset === void 0 ? {} : _ref$asset,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      id = _ref.id,
+      label = _ref.label,
+      _ref$selectedAssets = _ref.selectedAssets,
+      selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
+      setSelectedAssets = _ref.setSelectedAssets,
+      setCheckAll = _ref.setCheckAll,
+      changeAsset = _ref.changeAsset,
+      onRemove = _ref.onRemove,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$checkAllId = _ref.checkAllId,
+      checkAllId = _ref$checkAllId === void 0 ? "check-all-assets" : _ref$checkAllId,
+      _ref$itemSelector = _ref.itemSelector,
+      itemSelector = _ref$itemSelector === void 0 ? "[id^='gallery-asset-']" : _ref$itemSelector;
+  var elementId = id || "gallery-asset-".concat(index);
+  var key = (0, _assets.assetKey)(asset);
+  var isUploading = asset.status === _assets.ASSET_STATUS.UPLOADING;
+  var hasError = asset.status === _assets.ASSET_STATUS.ERROR;
+
+  var checkOnChange = function checkOnChange(e) {
+    var chkGlobal = document.getElementById(checkAllId);
+    var checkboxList = document.querySelectorAll(itemSelector);
+    var temp = selectedAssets.slice(); // Se compara por `assetKey` y no por `id`: un activo recién soltado todavía
+    // no tiene id del backend, y comparando por id todos los pendientes serían
+    // "el mismo" y se quitarían juntos de la selección.
+
+    temp = e.target.checked ? [].concat((0, _toConsumableArray2.default)(temp), [asset]) : temp.filter(function (item) {
+      return (0, _assets.assetKey)(item) !== key;
+    });
+    var counter = 0;
+    checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.forEach(function (chk) {
+      return chk.checked && counter++;
+    });
+    if (chkGlobal) chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll === null || setCheckAll === void 0 ? void 0 : setCheckAll(checkboxList.length === counter);
+    setSelectedAssets === null || setSelectedAssets === void 0 ? void 0 : setSelectedAssets(temp);
+  };
+  /*
+    Abrir el activo en otra pestaña.
+     Sirve para TODOS los tipos y por eso se prefiere a un visor propio: un video
+    se reproduce con el reproductor del navegador, un PDF se abre, y un .psd se
+    descarga. Sin esto, la bandeja mostraba el archivo pero no había forma de
+    verlo — un video quedaba como un fotograma fijo sin botón de reproducir.
+     Solo cuando ya está en S3: un activo recién soltado apunta al archivo del
+    disco del usuario y abrirlo no le diría nada nuevo.
+  */
+
+
+  var abrir = function abrir() {
+    if (!asset.id || !asset.url) return;
+    window.open(asset.url, "_blank", "noopener,noreferrer");
+  };
+
+  var onChangeType = function onChangeType(e) {
+    changeAsset === null || changeAsset === void 0 ? void 0 : changeAsset({
+      action: "changeAssetInfo",
+      attribute: "assetType",
+      value: e.target.value,
+      index: index
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "".concat(gridLayout ? "grid-gallery" : "row-gallery", " ").concat(hasError ? "asset-error" : "").trim(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "buttons-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: elementId,
+        label: label,
+        onChange: checkOnChange
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "asset-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AssetPreview.AssetPreview, {
+        asset: asset,
+        size: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
+        /*
+          En cuadrícula hay sitio para el reproductor; en la fila, de 60px,
+          los controles no caben y estorban al clic.
+        */
+        ,
+        controls: gridLayout && (0, _assetTypes.resolvePreviewKind)(asset) === _assetTypes.ASSET_PREVIEW.VIDEO,
+        onClick: abrir
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "information-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: asset.id ? "asset-name asset-link" : "asset-name",
+          title: asset.id ? "Abrir ".concat(asset.name) : asset.name,
+          onClick: abrir,
+          children: asset.name
+        }), !gridLayout && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "asset-weight",
+            children: (0, _assetTypes.formatBytes)(asset.sizeBytes)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "asset-format",
+            children: (asset.ext || "").toUpperCase()
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            width: "100%",
+            placeholder: "Tipo de activo",
+            options: (0, _assetTypes.assetTypeOptions)(),
+            valueSelected: asset.assetType,
+            onChange: onChangeType,
+            className: readOnly ? "disabled" : ""
+          })]
+        })]
+      })]
+    }), isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "asset-progress",
+      "aria-label": "Subiendo activo",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "asset-progress-fill",
+        style: {
+          width: "".concat(Math.min(100, Math.max(0, (_asset$progress = asset.progress) !== null && _asset$progress !== void 0 ? _asset$progress : 0)), "%")
+        }
+      })
+    }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "asset-error-message",
+      children: asset.error
+    }), onRemove && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: "asset-remove",
+      onClick: function onClick() {
+        return onRemove(asset);
+      },
+      title: "Quitar activo",
+      children: "\xD7"
+    })]
+  });
+};
+
+exports.GalleryAssetElement = GalleryAssetElement;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+/*
+  Calcado de `GalleryElement/styles.js` para que imágenes y activos se lean como
+  una sola tabla. Cambia solo la rejilla de la fila —cuatro columnas en vez de
+  cinco, porque un activo no tiene leyenda— y lo propio de un archivo que se
+  está subiendo: barra de progreso, mensaje de error y botón de quitar.
+*/
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  &.grid-gallery {\n    width: 179px;\n    border-radius: 3px;\n    overflow: hidden;\n\n    .buttons-container {\n      position: absolute;\n      top: 5px;\n      left: 5px;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      border: 1px solid #f0eef2;\n\n      .information-container {\n        background-color: ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0 2px;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 11px;\n          line-height: 17px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n\n  &.row-gallery {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 0.05fr 1fr;\n    align-items: center;\n    padding-right: 10px;\n\n    .buttons-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      align-items: center;\n      flex: 1;\n\n      .information-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        align-items: center;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 14px;\n          line-height: 17px;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        & > * {\n          flex: 1;\n          padding: 5px;\n        }\n      }\n    }\n  }\n\n  /* El nombre es el sitio donde uno intenta hacer clic para abrir un archivo. */\n  .asset-link {\n    cursor: pointer;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  &.asset-error {\n    border: 1px solid ", ";\n    border-radius: 3px;\n  }\n\n  /* Progreso de subida. Ocupa el borde inferior de la fila para no empujar el\n     resto del contenido mientras aparece y desaparece. */\n  .asset-progress {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 3px;\n    background: ", ";\n    border-radius: 2px;\n    overflow: hidden;\n  }\n\n  .asset-progress-fill {\n    height: 100%;\n    background: ", ";\n    transition: width 0.2s ease-out;\n  }\n\n  .asset-error-message {\n    margin: 2px 0 0;\n    padding: 0 8px;\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 15px;\n    color: ", ";\n  }\n\n  .asset-remove {\n    position: absolute;\n    top: 4px;\n    right: 6px;\n    width: 18px;\n    height: 18px;\n    display: grid;\n    place-items: center;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 1;\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.color_purple, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Lato, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+exports.Container = Container;

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", {