contentoh-components-library 21.6.49 → 21.6.50

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

@@ -11,6 +11,8 @@ import {
   faFileAudio as IconFileAudio,
   faFileLines as IconFileDefault,
   faFileVideo as IconFileVideo,
+  faSwatchbook as IconFileDesign,
+  faFilm as IconFileMotion,
 } from "@fortawesome/free-solid-svg-icons";
 import React, { useRef } from "react";
 import { CustomIcon } from "../CustomIcon";
@@ -41,8 +43,30 @@ export const IconFile = (props) => {
     // file csv
     csv: { icon: IconFileCsv, type: "csv" },
     // file image
-    svg: { icon: IconFileImg, type: "image" },
     gif: { icon: IconFileImg, type: "image" },
+    jpg: { icon: IconFileImg, type: "image" },
+    jpeg: { icon: IconFileImg, type: "image" },
+    png: { icon: IconFileImg, type: "image" },
+    webp: { icon: IconFileImg, 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: IconFileDesign, type: "design" },
+    psb: { icon: IconFileDesign, type: "design" },
+    ai: { icon: IconFileDesign, type: "design" },
+    eps: { icon: IconFileDesign, type: "design" },
+    indd: { icon: IconFileDesign, type: "design" },
+    idml: { icon: IconFileDesign, type: "design" },
+    sketch: { icon: IconFileDesign, type: "design" },
+    fig: { icon: IconFileDesign, type: "design" },
+    xd: { icon: IconFileDesign, type: "design" },
+    afphoto: { icon: IconFileDesign, type: "design" },
+    afdesign: { icon: IconFileDesign, type: "design" },
+    svg: { icon: IconFileDesign, type: "design" },
+
+    // proyectos de animación y edición de video
+    aep: { icon: IconFileMotion, type: "motion" },
+    prproj: { icon: IconFileMotion, type: "motion" },
     // file pdf
     pdf: { icon: IconFilePdf, type: "pdf" },
     // file power point
@@ -60,6 +84,7 @@ export const IconFile = (props) => {
     rar: { icon: IconFileZip, type: "zip" },
     zip: { icon: IconFileZip, type: "zip" },
     tar: { icon: IconFileZip, type: "zip" },
+    "7z": { icon: IconFileZip, type: "zip" },
 
     // file code
     xml: { icon: IconFileCode, type: "code" },
@@ -80,6 +105,8 @@ export const IconFile = (props) => {
     // file video
     avi: { icon: IconFileVideo, type: "video" },
     mp4: { icon: IconFileVideo, type: "video" },
+    mov: { icon: IconFileVideo, type: "video" },
+    webm: { icon: IconFileVideo, type: "video" },
     mpeg: { icon: IconFileVideo, type: "video" },
     mpg: { icon: IconFileVideo, type: "video" },
     wmv: { icon: IconFileVideo, type: "video" },

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

@@ -52,6 +52,14 @@ export const Container = styled.div`
     color: #1c778e;
     border-color: #1c778e;
   }
+  &.icon-design .icon {
+    color: #2a5cb8;
+    border-color: #2a5cb8;
+  }
+  &.icon-motion .icon {
+    color: #6d3fc0;
+    border-color: #6d3fc0;
+  }
   &.icon-video .icon {
     color: #a15bb1;
     border-color: #a15bb1;

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

@@ -26,3 +26,41 @@ 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.
+*/
+const VIDEO =
+  "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+
+const Escala = ({ imageType }) => (
+  <figure style={{ margin: 0 }}>
+    <ProductImage
+      img={VIDEO}
+      ext="mp4"
+      imageType={imageType}
+      altText="video de producto"
+      onClick={() => console.log("clic en", imageType)}
+    />
+    <figcaption style={{ fontFamily: "Lato", fontSize: 11, marginTop: 4 }}>
+      {imageType}
+    </figcaption>
+  </figure>
+);
+
+export const VideoMiniaturas = () => (
+  <div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
+    <Escala imageType="carousel-image" />
+    <Escala imageType="catalogue-image-small-size" />
+    <Escala imageType="catalogue-modal-image" />
+    <Escala imageType="catalogue-image-big-size" />
+  </div>
+);
+
+export const VideoReproductor = () => (
+  <div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
+    <Escala imageType="main-image" />
+  </div>
+);

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

@@ -1,29 +1,104 @@
-import { Container } from "./styles";
+import { useState } from "react";
 import ReactImageFallback from "react-image-fallback";
+
+import { Container } from "./styles";
+import {
+  ASSET_PREVIEW,
+  formatDuration,
+  resolvePreviewKind,
+} from "../../../global-files/digital-assets/assetTypes";
 import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
 
-export const ProductImage = ({ img, imageType, altText, onClick}) => {
-  // Expresión regular para validar que los últimos tres caracteres sean ".mp4"
-  const regex = /\.mp4$/;
-  if (regex.test(img)){
-    return (
-      <Container className={imageType}>
-        <video controls width="100%" height="auto">
-        <source src= {img} type="video/mp4" />
-        </video>
-      </Container>
-    );
-  }
-  else{
+/*
+  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.
+*/
+const THUMBNAIL_TYPES = [
+  "carousel-image",
+  "catalogue-image-small-size",
+  "catalogue-image-big-size",
+  "catalogue-modal-image",
+];
+
+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>
+);
+
+/**
+ * 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.
+ */
+export const ProductImage = ({ img, imageType, altText, onClick, ext, mime, 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.
+  const [duration, setDuration] = useState(null);
+
+  const kind =
+    ext || mime
+      ? resolvePreviewKind({ ext, mime })
+      : /\.mp4($|[?#])/i.test(img || "")
+        ? ASSET_PREVIEW.VIDEO
+        : ASSET_PREVIEW.IMAGE;
+
+  if (kind === ASSET_PREVIEW.VIDEO) {
+    const isThumbnail = THUMBNAIL_TYPES.includes(imageType);
+
     return (
-      <Container className={imageType}>
-         <ReactImageFallback
-          src={img}
-          fallbackImage={defaultProductImage}
-          alt={altText}
-          onClick={onClick}
+      <Container
+        className={`${imageType} ${isThumbnail ? "video-thumbnail" : "video-player"}`}
+        onClick={isThumbnail ? onClick : undefined}
+      >
+        <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 : `${img}#t=0.5`}
+          poster={poster || undefined}
+          controls={!isThumbnail}
+          muted={isThumbnail}
+          playsInline
+          preload="metadata"
+          onLoadedMetadata={(e) => setDuration(e.target.duration)}
         />
+        {isThumbnail && (
+          <>
+            <PlayBadge />
+            {duration ? (
+              <span className="video-duration">{formatDuration(duration)}</span>
+            ) : null}
+          </>
+        )}
       </Container>
     );
   }
+
+  return (
+    <Container className={imageType}>
+      <ReactImageFallback
+        src={img}
+        fallbackImage={defaultProductImage}
+        alt={altText}
+        onClick={onClick}
+      />
+    </Container>
+  );
 };

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

@@ -1,14 +1,92 @@
 import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   width: fit-content;
 
-  img {
+  img,
+  video {
     object-fit: contain;
   }
 
+  /*
+    Miniatura de video: fotograma quieto, con su duración y un botón de play.
+    El clic lo recibe el contenedor, no el <video>, para que lleve al visor
+    grande en vez de quedarse peleando con los controles.
+  */
+  &.video-thumbnail {
+    position: relative;
+    cursor: pointer;
+
+    video {
+      pointer-events: none;
+      background: #000;
+    }
+
+    .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: #ffffff;
+      }
+    }
+
+    &:hover .play-badge circle {
+      fill: rgba(0, 0, 0, 0.75);
+    }
+
+    .video-duration {
+      position: absolute;
+      right: 4px;
+      bottom: 4px;
+      padding: 0 4px;
+      border-radius: 3px;
+      background: rgba(0, 0, 0, 0.75);
+      color: #ffffff;
+      font-family: ${FontFamily.Lato};
+      font-size: 10px;
+      line-height: 15px;
+      pointer-events: none;
+    }
+  }
+
+  /* En 60px un badge de 32 tapa el fotograma completo. */
+  &.catalogue-image-small-size.video-thumbnail .play-badge {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.carousel-image.video-thumbnail {
+    .play-badge {
+      width: 22px;
+      height: 22px;
+    }
+
+    .video-duration {
+      font-size: 9px;
+      line-height: 13px;
+    }
+  }
+
   &.carousel-image {
-    img {
+    img,
+    video {
       width: 85px;
       height: 55px;
       cursor: pointer;
@@ -20,7 +98,8 @@ export const Container = styled.div`
   }
 
   &.main-image {
-    img {
+    img,
+    video {
       width: 340px;
       height: 295px;
     }
@@ -30,14 +109,16 @@ export const Container = styled.div`
     display: flex; 
     justify-content: center; 
     align-items: center; 
-    img {
+    img,
+    video {
       width: 179px;
       height: 179px;
     }
   }
 
   &.catalogue-image-small-size {
-    img {
+    img,
+    video {
       width: 60px;
       height: 60px;
     }
@@ -47,7 +128,9 @@ export const Container = styled.div`
     flex: 1 0 50%;
     cursor: pointer;
 
-    img {
+    img,
+
+    video {
       width: 168px;
       height: 108px;
     }
@@ -60,7 +143,9 @@ export const Container = styled.div`
     justify-content: center; 
     align-items: center; 
 
-    img {
+    img,
+
+    video {
       width: 710px;
       height: 710px;
     }

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

@@ -2,10 +2,10 @@ import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
 import { Button } from "../../atoms/GeneralButton/index";
 
-export const EditionActiveImage = ({ img, altText, setShowModal }) => {
+export const EditionActiveImage = ({ img, altText, setShowModal, ext }) => {
   return (
     <Container>
-      <ProductImage img={img} imageType="main-image" altText={altText} />
+      <ProductImage img={img} imageType="main-image" altText={altText} ext={ext} />
       <Button
         buttonType="open-modal-button"
         onClick={() => setShowModal(true)}

package/src/components/molecules/GalleryAssetElement/GalleryAssetElement.stories.js

@@ -0,0 +1,102 @@
+import { useState } from "react";
+
+import { GalleryAssetElement } from "./index";
+import { GalleryHeader } from "../GalleryHeader";
+import {
+  fromBackendList,
+  ASSET_STATUS,
+} from "../../../global-files/digital-assets/assets.adapter";
+import { backendAssetsMock } from "../../../global-files/digital-assets/assets.mock";
+
+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",
+};
+
+/* Las claves del mock apuntan a S3, que todavía no tiene nada: se sustituyen
+   por archivos públicos para poder ver el componente. */
+const assets = fromBackendList(backendAssetsMock).map((asset) => ({
+  ...asset,
+  url:
+    asset.ext === "mp4" ? SAMPLES.mp4 : asset.ext === "gif" ? SAMPLES.gif : "",
+  poster: "",
+}));
+
+export default {
+  title: "Components/molecules/GalleryAssetElement",
+  component: GalleryAssetElement,
+};
+
+const Template = (args) => <GalleryAssetElement {...args} />;
+
+export const Fila = Template.bind({});
+Fila.args = { asset: assets[0], index: 0 };
+
+export const Cuadricula = Template.bind({});
+Cuadricula.args = { asset: assets[0], index: 0, gridLayout: true };
+
+export const Subiendo = Template.bind({});
+Subiendo.args = {
+  asset: { ...assets[2], status: ASSET_STATUS.UPLOADING, progress: 42 },
+  index: 0,
+};
+
+export const ConError = Template.bind({});
+ConError.args = {
+  asset: {
+    ...assets[3],
+    status: 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. */
+export const BandejaCompleta = () => {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <div style={{ width: 900 }}>
+      <GalleryHeader
+        variant="asset"
+        checkAllId="check-all-assets"
+        itemSelector="[id^='gallery-asset-']"
+        setCheckAll={() => {}}
+        setSelectedImages={setSelected}
+      />
+      {assets.map((asset, index) => (
+        <GalleryAssetElement
+          key={asset.id}
+          asset={asset}
+          index={index}
+          selectedAssets={selected}
+          setSelectedAssets={setSelected}
+          setCheckAll={() => {}}
+          changeAsset={({ value }) => console.log("nuevo tipo:", value)}
+          onRemove={(item) => console.log("quitar:", item.name)}
+        />
+      ))}
+      <p style={{ fontFamily: "Lato", fontSize: 12, marginTop: 12 }}>
+        Seleccionados: {selected.length}
+      </p>
+    </div>
+  );
+};
+
+/** Comparación de los dos encabezados, para verificar que no se movió el de imágenes. */
+export const EncabezadosComparados = () => (
+  <div style={{ width: 900 }}>
+    <GalleryHeader
+      variant="image"
+      setCheckAll={() => {}}
+      setSelectedImages={() => {}}
+    />
+    <GalleryHeader
+      variant="asset"
+      checkAllId="check-all-assets-demo"
+      itemSelector="[id^='gallery-asset-demo-']"
+      setCheckAll={() => {}}
+      setSelectedImages={() => {}}
+    />
+  </div>
+);

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

@@ -0,0 +1,162 @@
+import { Container } from "./styles";
+import { AssetPreview } from "../../atoms/AssetPreview";
+import { CheckBox } from "../../atoms/CheckBox";
+import Select from "../../atoms/Select";
+import {
+  ASSET_PREVIEW,
+  assetTypeOptions,
+  formatBytes,
+  resolvePreviewKind,
+} from "../../../global-files/digital-assets/assetTypes";
+import {
+  ASSET_STATUS,
+  assetKey,
+} from "../../../global-files/digital-assets/assets.adapter";
+
+/*
+  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.
+*/
+export const GalleryAssetElement = ({
+  asset = {},
+  index = 0,
+  gridLayout = false,
+  id,
+  label,
+  selectedAssets = [],
+  setSelectedAssets,
+  setCheckAll,
+  changeAsset,
+  onRemove,
+  readOnly = false,
+  checkAllId = "check-all-assets",
+  itemSelector = "[id^='gallery-asset-']",
+}) => {
+  const elementId = id || `gallery-asset-${index}`;
+  const key = assetKey(asset);
+  const isUploading = asset.status === ASSET_STATUS.UPLOADING;
+  const hasError = asset.status === ASSET_STATUS.ERROR;
+
+  const checkOnChange = (e) => {
+    const chkGlobal = document.getElementById(checkAllId);
+    const checkboxList = document.querySelectorAll(itemSelector);
+    let 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
+      ? [...temp, asset]
+      : temp.filter((item) => assetKey(item) !== key);
+
+    let counter = 0;
+    checkboxList?.forEach((chk) => chk.checked && counter++);
+    if (chkGlobal) chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll?.(checkboxList.length === counter);
+    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.
+  */
+  const abrir = () => {
+    if (!asset.id || !asset.url) return;
+    window.open(asset.url, "_blank", "noopener,noreferrer");
+  };
+
+  const onChangeType = (e) => {
+    changeAsset?.({
+      action: "changeAssetInfo",
+      attribute: "assetType",
+      value: e.target.value,
+      index,
+    });
+  };
+
+  return (
+    <Container
+      className={`${gridLayout ? "grid-gallery" : "row-gallery"} ${
+        hasError ? "asset-error" : ""
+      }`.trim()}
+    >
+      <div className="buttons-container">
+        <CheckBox id={elementId} label={label} onChange={checkOnChange} />
+      </div>
+      <div className="asset-container">
+        <AssetPreview
+          asset={asset}
+          size={`catalogue-image-${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 && resolvePreviewKind(asset) === ASSET_PREVIEW.VIDEO}
+          onClick={abrir}
+        />
+        <div className="information-container">
+          <p
+            className={asset.id ? "asset-name asset-link" : "asset-name"}
+            title={asset.id ? `Abrir ${asset.name}` : asset.name}
+            onClick={abrir}
+          >
+            {asset.name}
+          </p>
+          {!gridLayout && (
+            <>
+              <p className="asset-weight">{formatBytes(asset.sizeBytes)}</p>
+              <p className="asset-format">{(asset.ext || "").toUpperCase()}</p>
+              <Select
+                width="100%"
+                placeholder="Tipo de activo"
+                options={assetTypeOptions()}
+                valueSelected={asset.assetType}
+                onChange={onChangeType}
+                className={readOnly ? "disabled" : ""}
+              />
+            </>
+          )}
+        </div>
+      </div>
+
+      {isUploading && (
+        <div className="asset-progress" aria-label="Subiendo activo">
+          <div
+            className="asset-progress-fill"
+            style={{
+              width: `${Math.min(100, Math.max(0, asset.progress ?? 0))}%`,
+            }}
+          />
+        </div>
+      )}
+
+      {hasError && <p className="asset-error-message">{asset.error}</p>}
+
+      {onRemove && !readOnly && (
+        <button
+          type="button"
+          className="asset-remove"
+          onClick={() => onRemove(asset)}
+          title="Quitar activo"
+        >
+          ×
+        </button>
+      )}
+    </Container>
+  );
+};