contentoh-components-library 21.6.49 → 21.6.50

package/docs/activos-digitales.md

@@ -0,0 +1,273 @@
+# Activos digitales — estado del trabajo
+
+> Documento de continuidad. Última actualización: 2026-09-23.
+> **El circuito ya funciona de punta a punta en dev**, borrado en S3 incluido.
+> El exportable está escrito y probado en local, sin commitear ni desplegar.
+> Falta el póster.
+
+## La tarea
+
+1. Permitir el almacenamiento de activos digitales dentro de las bandejas de imágenes.
+2. Añadir en el exportable de los productos las URL de los activos almacenados,
+   para que el usuario los descargue por su cuenta.
+
+El punto 1 está hecho y desplegado en dev. El punto 2 está escrito, **sin
+commitear ni desplegar** (ver "El exportable").
+
+Pantalla: `RetailerProductEdition`, pestaña Imágenes, bandeja *Activos digitales*.
+
+---
+
+## 1. Cómo funciona hoy
+
+```
+NAVEGADOR                      LAMBDA                         S3
+────────────────────────────────────────────────────────────────────────
+1. Sueltas un archivo
+2. Valida en local
+   extensión, peso,
+   duración, cupo
+        │  (nada ha salido todavía)
+3. POST /articles-assets/presign ──────►
+                                 4. Comprueba sesión y acceso
+                                    Valida extensión → tipo
+                                    Genera la clave, firma
+        ◄──────────────────────── url + fields + key
+5. POST multipart ──────────────────────────────────────────►
+   con barra de progreso                         6. S3 aplica las
+                                                    condiciones firmadas
+        ◄──────────────────────────────────────────  204
+7. Al terminar, se registra SOLO (no espera al botón de guardar)
+   PUT /articles-data?asset=true ──►
+                                 8. Comprueba que la clave sea
+                                    de ese artículo; INSERT;
+                                    devuelve la lista completa
+```
+
+Al reabrir la ficha, `read-data-images` devuelve el arreglo `assets` junto a las
+imágenes, y la bandeja se llena sola.
+
+### Decisiones que dan forma a esto
+
+- **Se valida dos veces.** En el navegador para no hacer esperar por un archivo
+  que se va a rechazar; en el servidor porque el front se puede saltar y quien
+  firma decide qué entra al bucket. La del servidor es la que manda.
+- **El archivo nunca toca un Lambda.** Por API Gateway no cabe —10 MB y 29
+  segundos— y convertirlo a base64 en el navegador tumba la pestaña con un .psd
+  grande.
+- **S3 aplica los límites, no el navegador.** Por eso es un POST multipart
+  firmado con `createPresignedPost` y no un PUT: solo el POST admite condiciones
+  que S3 verifica al recibir (tamaño, Content-Type, clave).
+- **El tipo se decide por EXTENSIÓN, no por mime.** El navegador no sabe qué es
+  un .psd —manda mime vacío— y a un .ai le pone `application/pdf`. Por lo mismo
+  el `accept` del dropzone lleva extensiones además de mimes: con solo mimes,
+  react-dropzone descartaría esos archivos antes de que la validación llegue a
+  verlos, y al soltarlos no pasaría nada.
+- **Sube al soltar y se registra solo al terminar.** Con la barra llena nadie
+  supone que falta un paso. El precio es que un archivo subido y luego quitado
+  antes de registrarse deja un huérfano en S3.
+- **Solo mp4, webm y ogg cuentan como reproducibles.** Un .mov se acepta, se
+  guarda y se descarga, pero se muestra con icono y avisa al soltarlo: Chrome y
+  Firefox no decodifican QuickTime.
+- **Agregar es inmediato; borrar espera al guardar.** Registrar completa algo que
+  ya pasó —el archivo está en S3—; borrar es destructivo y conviene poder
+  deshacerlo cerrando sin guardar.
+
+---
+
+## 2. Decisiones del manager (2026-09-22)
+
+| # | Pregunta | Respuesta |
+|---|---|---|
+| 0 | ¿Renombrar la pestaña? | **Se queda como "Imágenes"** |
+| 1 | ¿Qué tipos entran? | 360 (mp4/gif), video, gif, pdf, hojas de cálculo y archivos editables de diseño |
+| 2 | ¿Del producto o de una cadena? | **General**, con `id_retailer = null`. La columna queda preparada |
+| 3 | ¿ZIP del exportable o solo URL? | **Solo URL** |
+| 4 | ¿Cuentan para el % y para aprobar/rechazar? | **No** |
+| 5 | ¿Quién sube y borra? | Los mismos que suben imágenes |
+| 6 | ¿Versionado? | **No hay versión.** Un activo general es el mismo para todas |
+| 7 | Peso y cantidad máxima | **SIN RESPONDER** — provisionales en `assetTypes.js` |
+| 8 | Duración de video | Sin responder; se conserva 10 s – 10 min |
+| 9 | ¿URLs permanentes o firmadas? | **Permanentes, indefinidas** |
+| 10 | ¿Se autoriza `rel_article_asset`? | **Sí** |
+
+### Lo que sigue abierto
+
+**Pesos y cantidad (pregunta 7).** Provisionales, en un solo archivo por lado:
+`assetTypes.js` (front) y `asset-types.js` (back). **Deben moverse juntos.**
+
+| Tipo | Tope | Máximo por producto |
+|---|---|---|
+| 360 / video | 200 MB | **20 activos** |
+| GIF | 20 MB | |
+| Documento (pdf, doc, docx) | 50 MB | |
+| Hoja de cálculo (xlsx, xls, csv) | 20 MB | |
+| Editable (psd, ai, indd, aep…) | 500 MB | |
+| Comprimido (zip, rar, 7z) | 500 MB | |
+
+**Confirmar la lista de extensiones editables** que se propuso para el "etc":
+`psd psb ai eps indd idml aep prproj sketch fig xd afphoto afdesign svg`.
+
+---
+
+## 3. Qué está hecho y dónde
+
+### Front — `components-library`, rama `feature/digital-assets`
+
+**Seis commits, SIN empujar** (la rama no tiene remoto todavía). Sale de
+`feature/multiple-retailer-category`, que aún no está en master.
+
+```
+65523ae  feat: avisar cuántos cambios quedan sin guardar
+b607eea  feat: poder abrir un activo, y avisar cuando no se podrá ver
+82e1a7d  feat: registrar el activo en cuanto termina de subir
+26986f1  feat: subida directa a S3 con URL prefirmada
+16bc7da  fix(ficha): evitar que la edición reviente o se quede cargando
+003c80a  feat: bandeja de 360, video, gif, documentos y editables
+```
+
+| Archivo | Qué es |
+|---|---|
+| `global-files/digital-assets/assetTypes.js` | Catálogo de 7 tipos y 27 formatos, límites, validaciones y avisos |
+| `global-files/digital-assets/assets.adapter.js` | Traducción backend ↔ interfaz. **Único archivo que conoce los nombres de campo del backend** |
+| `global-files/digital-assets/assets.actions.js` | Vocabulario compartido entre el reducer y el hook |
+| `global-files/digital-assets/assets.reducer.js` | Reducer + selectores `selectAssetsToSave`, `hasUnsavedAssets`, `countUnsavedAssets` |
+| `global-files/digital-assets/useDigitalAssets.js` | Validación, duración, ciclo de vida de la subida y orquestación |
+| `global-files/digital-assets/uploadAssets.js` | Presign + POST multipart a S3 con progreso |
+| `global-files/digital-assets/assets.mock.js` | Activos con la forma cruda del backend |
+| `atoms/AssetPreview/` | Previsualización: video, imagen o icono |
+| `molecules/GalleryAssetElement/` | Fila de activo (aparte de `GalleryElement` a propósito) |
+| `molecules/GalleryTrayTabs/` | Toggle `Imágenes (n) │ Activos digitales (n)` |
+| `organisms/DigitalAssetsTray/` | Bandeja: dropzone propio, avisos, aviso de cambios sin guardar |
+
+Modificados: `global-files/data.js`, `atoms/ProductImage`, `atoms/IconFile`,
+`molecules/GalleryElement`, `molecules/GalleryHeader`, `ImageSelector`,
+`EditionActiveImage`, `ImagePreviewer`, `ProductImageModal`,
+`RetailerProductEdition/index.js`, su contexto y su reducer raíz, `src/index.js`
+y los tres `.env`.
+
+**El flag `enableDigitalAssets` está apagado por omisión.** La historia
+`ImageEditor` lo enciende para poder ver la bandeja en Storybook.
+
+### Backend — `content-management-backend`, rama `feature/digital-assets`
+
+**Seis commits, empujados.** Sin PR: no se mergea todavía.
+
+```
+0aafcdec  fix: que el borrado en S3 sea posible y visible
+ab38d16e  fix: declarar el charset de rel_article_asset
+a543ba30  fix: devolver el ref del cliente en el presign
+080d2481  feat: lectura y escritura de activos
+9c7b8176  feat: endpoint para firmar la subida de activos
+2c1d5f1f  feat: tabla rel_article_asset
+```
+
+| Archivo | Qué es |
+|---|---|
+| `docs/create-rel-article-asset.sql` | DDL. Sin `id_version`; `asset_type` es VARCHAR y no ENUM; charset utf8mb4 explícito |
+| `CRUD/articles/articles-assets/asset-types.js` | Allowlist del servidor. Los editables se sirven como `octet-stream`, el .svg incluido |
+| `CRUD/articles/articles-assets/presign-asset-upload.js` | `POST /articles-assets/presign` |
+| `CRUD/articles/articles-data/utils/assets-actions.js` | Altas, cambios, bajas y lectura |
+| `read-data-images.js`, `update-articles-data.js` | Devuelven/aceptan activos |
+| `serverless.yml` | La función nueva y los permisos de S3 |
+
+### Estado del despliegue (dev)
+
+| Pieza | Estado |
+|---|---|
+| Tabla `rel_article_asset` | Creada. **Necesita el `ALTER` de charset** (ver el .sql) |
+| `presign-asset-upload` | Desplegada |
+| `read-data-images` con `assets` | Desplegada |
+| `update-articles-data?asset=true` | Desplegada |
+| `ref` en la respuesta del presign (`a543ba30`) | Desplegado (deploy completo, 2026-09-23) |
+| `s3:DeleteObject` en el rol (`0aafcdec`) | Desplegado y comprobado: al borrar un activo desaparece del bucket |
+| Activos en el exportable (servicio `exports`) | **Sin commitear ni desplegar** |
+
+Nada desplegado en test ni en prod.
+
+---
+
+## 4. Lo que falta
+
+1. **Commitear y desplegar el exportable.** El servicio es `exports`, no
+   `functions`. Hay que desplegar el orquestador (Lambda) y además
+   reconstruir la imagen de Docker del procesador (Fargate).
+2. **El póster con ffmpeg** tras la subida, para que los videos tengan miniatura
+   sin que el navegador la genere.
+3. **Huérfanos en S3**: un archivo subido que se quita antes de registrarse no se
+   borra nunca. O una regla de ciclo de vida sobre `assets/`, o un endpoint de
+   borrado por clave para ese caso.
+4. **El front no lee `orphaned`**: si S3 rechaza un borrado, la bandeja dice
+   "guardados con éxito" igual.
+
+### El exportable
+
+Los activos salen como filas de *"Archivo Urls.xlsx"*, el mismo archivo que se
+genera con el servicio `urls`. Se agrega una columna `Tipo`, que en las imágenes
+dice `Imagen` y en los activos `Video`, `Editable`, etc.
+
+| Archivo (`exports/nuevo-exportable/`) | Qué hace |
+|---|---|
+| `asset-urls.js` | `attachArticleAssets()` lee `rel_article_asset` + `article.upc`; `collectAssetUrlRows()` arma las filas |
+| `handler-orchestrator.js` | Llama a `attachArticleAssets` junto a las demás cargas |
+| `handler-processor.js` | Suma las filas de activos a las de imágenes cuando se pide `urls` |
+| `xlsx-url-writer.js` | Columna `Tipo`; los activos van después de las imágenes de su producto |
+| `asset-urls.test.js` | 9 pruebas. `node --test exports/nuevo-exportable/` |
+
+Decisiones:
+- **No se copian al bucket público**, a diferencia de lo que planteaba el plan
+  original. Las imágenes se copian porque cada cadena las recibe transformadas y
+  renombradas. Un activo se entrega tal cual, y ya está en S3 con
+  `public-read` y su Content-Type real. Se usa su URL de siempre: es permanente
+  (decisión 9) y es la misma que usa la ficha. Copiarlo duplicaría archivos de
+  hasta 500 MB en cada exportación, y ya no hace falta tocar `getContentType`.
+- **Renombre = `<UPC>_<nombre original sin extensión>`**, y si no hay UPC, el
+  id del artículo. El UPC sale de `article.upc`.
+- **Aparece aunque no se pidan imágenes**: basta con el servicio `urls`.
+- **Un activo sale una vez por cadena**, aunque el producto venga en varias
+  categorías o versiones.
+- **Si la tabla no existe** (`ER_NO_SUCH_TABLE`), el exportable sale sin
+  activos en vez de fallar. Así se puede desplegar antes de crear la tabla en
+  prod.
+
+Limitación conocida: si una cadena nombra sus imágenes con otro atributo (SKU,
+por ejemplo), sus activos no quedan junto a esas imágenes en el Excel, porque
+van por UPC.
+
+---
+
+## 5. Hallazgos ajenos a este trabajo
+
+- **El rol `general-dev-us-east-1-lambdaRole` no tiene permisos de S3 sobre las
+  imágenes de producto**, solo sobre el prefijo `assets/`. Pero `images-actions.js`
+  hace `copyObject` al bucket de respaldo al guardar y `deleteObject` en los dos
+  buckets al eliminar. Los errores mueren dentro de un `Promise.all` con try/catch
+  arriba. Si es lo que parece: el respaldo de imágenes no se está haciendo y las
+  imágenes borradas siguen ocupando el bucket. **Comprobar el bucket
+  `content-management-raw-images`**; si está congelado en una fecha vieja, lleva
+  tiempo roto.
+- **La política del rol es en línea y la genera Serverless** (`general-dev-lambda`).
+  No tiene políticas administradas adjuntas: cualquier permiso agregado a mano se
+  borra en el siguiente despliegue.
+- **`AddGroup.stories.js` está roto** (`bags is not defined`) y ensucia la consola
+  de Storybook.
+- **`version-manager` y `articles-observations/read-observation` no permiten CORS**
+  desde `localhost:6006`. No impiden que la ficha cargue.
+
+---
+
+## 6. Trampas del repo que conviene recordar
+
+- **No correr prettier sobre archivos existentes** de `components-library`. No hay
+  `.prettierrc` y la versión instalada es la 2.3.0, pero el código está formateado
+  con estilo de la 3. Formatear un archivo existente genera ~100 líneas de ruido.
+- **Hay directorios versionados que solo difieren en mayúsculas**:
+  `editionActiveImage`/`EditionActiveImage`, `imageSelector`/`ImageSelector`,
+  `productImage`/`ProductImage`. En macOS son el mismo directorio, así que
+  aparecen siempre como modificados y `git add -A` falla. Se preparan a mano las
+  rutas en mayúscula; las otras son fantasmas que nadie importa.
+- **`functions/CRUD/database-structure.txt` está desactualizado** para
+  `rel_article_image`: dice `article_id`/`image_id` pero los lambdas usan
+  `id_article`/`id_image`.
+- **El stage `dev` apunta al bucket de imágenes de PRODUCCIÓN**
+  (`content-management-images-prod`). Cualquier archivo de prueba queda ahí.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.49",
+  "version": "21.6.50",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/AssetPreview/AssetPreview.stories.js

@@ -0,0 +1,78 @@
+import { AssetPreview } from "./index";
+import { fromBackendList } from "../../../global-files/digital-assets/assets.adapter";
+import { backendAssetsMock } from "../../../global-files/digital-assets/assets.mock";
+
+/*
+  Los activos del mock apuntan a claves de S3 que no existen todavía. Para poder
+  ver el componente antes de que haya backend, se sustituyen las URLs por
+  archivos públicos de ejemplo; el resto del objeto (tipo, nombre, peso,
+  duración) es el que devolvería el adaptador.
+*/
+const 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",
+};
+
+const [giro360, gif360, video, pdf] = fromBackendList(backendAssetsMock).map(
+  (asset) => ({
+    ...asset,
+    url:
+      asset.ext === "mp4"
+        ? SAMPLES.mp4
+        : asset.ext === "gif"
+        ? SAMPLES.gif
+        : "",
+    poster: "",
+  })
+);
+
+export default {
+  title: "Components/atoms/AssetPreview",
+  component: AssetPreview,
+  argTypes: {
+    size: {
+      options: [
+        "catalogue-image-small-size",
+        "catalogue-image-big-size",
+        "carousel-image",
+        "catalogue-modal-image",
+        "main-image",
+      ],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <AssetPreview {...args} />;
+
+export const Video360 = Template.bind({});
+Video360.args = { asset: giro360, size: "catalogue-image-big-size" };
+
+export const Gif360 = Template.bind({});
+Gif360.args = { asset: gif360, size: "catalogue-image-big-size" };
+
+export const VideoConControles = Template.bind({});
+VideoConControles.args = { asset: video, size: "main-image", controls: true };
+
+export const Pdf = Template.bind({});
+Pdf.args = { asset: pdf, size: "catalogue-image-big-size" };
+
+/** Un activo sin URL todavía —recién soltado en la bandeja— no debe romper. */
+export const SinFuente = Template.bind({});
+SinFuente.args = {
+  asset: { name: "manual_sin_subir.pdf", ext: "pdf", assetType: "pdf" },
+  size: "catalogue-image-big-size",
+};
+
+/** Cómo se ve la bandeja completa, que es el uso real. */
+export const Bandeja = () => (
+  <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+    {[giro360, gif360, video, pdf].map((asset) => (
+      <AssetPreview
+        key={asset.id}
+        asset={asset}
+        size="catalogue-image-big-size"
+      />
+    ))}
+  </div>
+);

package/src/components/atoms/AssetPreview/index.js

@@ -0,0 +1,119 @@
+import ReactImageFallback from "react-image-fallback";
+
+import { Container } from "./styles";
+import { IconFile } from "../IconFile";
+import {
+  ASSET_PREVIEW,
+  formatDuration,
+  getAssetType,
+  getExtension,
+  resolvePreviewKind,
+} from "../../../global-files/digital-assets/assetTypes";
+import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
+
+const PlayBadge = () => (
+  <span className="play-badge" aria-hidden="true">
+    <svg viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="11" />
+      <polygon points="9.5,7.5 17,12 9.5,16.5" />
+    </svg>
+  </span>
+);
+
+/**
+ * Previsualización de un activo digital o de una imagen de producto.
+ *
+ * Acepta el modelo de `assets.adapter` y también un objeto suelto
+ * (`{ url, mime, ext, name }`), para poder usarse donde todavía no hay activos
+ * adaptados.
+ *
+ * `controls` distingue los dos usos: en la bandeja se quieren miniaturas
+ * quietas; en el visor grande, un reproductor.
+ */
+export const AssetPreview = ({
+  asset = {},
+  size = "catalogue-image-small-size",
+  controls = false,
+  showBadge = true,
+  showDuration = true,
+  onClick,
+  className = "",
+}) => {
+  const { url, src, poster, mime, ext, name, assetType, duration } = asset;
+
+  const source = url || src || "";
+  const kind = resolvePreviewKind({ mime, ext, name });
+  const extension = (ext || getExtension(name) || "").toLowerCase();
+  const label = assetType
+    ? getAssetType(assetType).label
+    : extension.toUpperCase();
+
+  const badge =
+    showBadge && label ? <span className="asset-badge">{label}</span> : null;
+  const durationTag =
+    showDuration && duration ? (
+      <span className="asset-duration">{formatDuration(duration)}</span>
+    ) : null;
+
+  const body = () => {
+    if (!source) {
+      return (
+        <div className="asset-fallback">
+          <IconFile ext={extension} size="34" />
+          <p title={name}>{name}</p>
+        </div>
+      );
+    }
+
+    if (kind === ASSET_PREVIEW.VIDEO) {
+      return (
+        <>
+          <video
+            // `#t=0.5` pide al navegador el fotograma del medio segundo en vez
+            // de una pantalla negra. Resuelve la miniatura sin descargar el
+            // archivo entero ni convertirlo a base64, que es lo que hacía el
+            // parche que este componente reemplaza.
+            src={poster ? source : `${source}#t=0.5`}
+            poster={poster || undefined}
+            controls={controls}
+            muted={!controls}
+            playsInline
+            preload="metadata"
+          />
+          {/* Sin controles, nada indica que el recuadro es reproducible. */}
+          {!controls && <PlayBadge />}
+        </>
+      );
+    }
+
+    if (kind === ASSET_PREVIEW.IMAGE) {
+      return (
+        <ReactImageFallback
+          src={source}
+          fallbackImage={defaultProductImage}
+          alt={name}
+          onClick={onClick}
+        />
+      );
+    }
+
+    return (
+      <div className="asset-fallback" onClick={onClick}>
+        <IconFile ext={extension} size="34" />
+        <p title={name}>{name}</p>
+      </div>
+    );
+  };
+
+  return (
+    <Container
+      className={`${size} ${className}`.trim()}
+      onClick={controls ? undefined : onClick}
+      $clickable={Boolean(onClick) && !controls}
+    >
+      {body()}
+      {badge}
+      {durationTag}
+    </Container>
+  );
+};

package/src/components/atoms/AssetPreview/styles.js

@@ -0,0 +1,190 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+/*
+  Los tamaños replican los de `ProductImage` con los mismos nombres de clase,
+  para que el componente entre donde ya había una imagen sin tocar el layout
+  de la bandeja.
+*/
+export const Container = styled.div`
+  position: relative;
+  width: fit-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: ${({ $clickable }) => ($clickable ? "pointer" : "default")};
+
+  img,
+  video {
+    object-fit: contain;
+    background: ${GlobalColors.gray_light};
+  }
+
+  .asset-fallback {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    background: ${GlobalColors.gray_light};
+    border-radius: 6px;
+
+    p {
+      margin: 0;
+      font-family: ${FontFamily.Raleway};
+      font-size: 10px;
+      color: ${GlobalColors.gray};
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+    }
+  }
+
+  /* Solo aparece cuando el video se muestra sin controles. */
+  .play-badge {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 32px;
+    height: 32px;
+    pointer-events: none;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    circle {
+      fill: rgba(0, 0, 0, 0.55);
+    }
+
+    polygon {
+      fill: ${GlobalColors.white};
+    }
+  }
+
+  &:hover .play-badge circle {
+    fill: rgba(0, 0, 0, 0.75);
+  }
+
+  .asset-badge {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    padding: 1px 6px;
+    border-radius: 10px;
+    background: ${GlobalColors.color_purple};
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 9px;
+    line-height: 14px;
+    letter-spacing: 0.02em;
+    pointer-events: none;
+  }
+
+  .asset-duration {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    padding: 1px 5px;
+    border-radius: 4px;
+    background: rgba(38, 38, 38, 0.75);
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway};
+    font-size: 9px;
+    line-height: 14px;
+    pointer-events: none;
+  }
+
+  &.carousel-image {
+    .play-badge {
+      width: 22px;
+      height: 22px;
+    }
+
+    img,
+    video,
+    .asset-fallback {
+      width: 85px;
+      height: 55px;
+      cursor: pointer;
+    }
+
+    & + * {
+      margin-left: 1px;
+    }
+  }
+
+  &.main-image {
+    img,
+    video,
+    .asset-fallback {
+      width: 340px;
+      height: 295px;
+    }
+  }
+
+  &.catalogue-image-big-size {
+    img,
+    video,
+    .asset-fallback {
+      width: 179px;
+      height: 179px;
+    }
+  }
+
+  &.catalogue-image-small-size {
+    img,
+    video,
+    .asset-fallback {
+      width: 60px;
+      height: 60px;
+    }
+
+    .asset-badge {
+      font-size: 8px;
+      padding: 0 4px;
+    }
+
+    /* En 60px un badge de 32 tapa el fotograma completo. */
+    .play-badge {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.catalogue-modal-image {
+    flex: 1 0 50%;
+    cursor: pointer;
+
+    img,
+    video,
+    .asset-fallback {
+      width: 168px;
+      height: 108px;
+    }
+  }
+
+  &.expanded-modal-image {
+    width: 710px;
+    height: 710px;
+
+    img,
+    video,
+    .asset-fallback {
+      width: 710px;
+      height: 710px;
+    }
+  }
+`;