contentoh-components-library 21.6.55 → 21.6.57

package/src/global-files/digital-assets/useDigitalAssets.js

@@ -0,0 +1,340 @@
+import { useCallback, useEffect, useRef } from "react";
+
+import { ASSET_ACTIONS } from "./assets.actions";
+import { requestPresign, uploadToS3 } from "./uploadAssets";
+import {
+  MAX_ASSETS_PER_PRODUCT,
+  getExtension,
+  validateAssetDuration,
+  validateAssetFile,
+  warnUnreadableVideo,
+} from "./assetTypes";
+import {
+  ASSET_STATUS,
+  assetKey,
+  fromBackendList,
+  fromFile,
+  revokeAssetUrl,
+} from "./assets.adapter";
+
+/**
+ * Duración de un video sin leerlo a base64.
+ *
+ * `URL.createObjectURL` le da al navegador una referencia al archivo del disco;
+ * `preload="metadata"` hace que solo baje la cabecera. La alternativa que usa
+ * hoy la ficha —`FileReader.readAsDataURL`— carga el archivo entero en memoria
+ * y lo infla un tercio, que es justo lo que impide subir videos largos.
+ */
+export const readVideoDuration = (objectUrl) => new Promise((resolve) => {
+  const video = document.createElement("video");
+  video.preload = "metadata";
+  video.onloadedmetadata = () => resolve(video.duration);
+  video.onerror = () => resolve(null);
+  video.src = objectUrl;
+});
+
+/**
+ * La bandeja de activos digitales, sobre el reducer de la ficha.
+ *
+ * El hook NO guarda la lista: la fuente de verdad es `state.assets_values`, para
+ * que el guardado del contexto pueda leerla igual que lee `images_values`. Aquí
+ * vive lo que un reducer no puede tener: la validación, la lectura asíncrona de
+ * la duración, y la liberación de los object URL (efectos, no estado).
+ *
+ * La subida arranca sola al soltar los archivos, no al guardar. Un .psd de 300
+ * MB tarda; hacerlo al guardar dejaría al usuario mirando un botón bloqueado
+ * durante minutos, mientras que así sube en segundo plano con su barra de
+ * progreso y guardar es instantáneo. El precio es que un archivo que se sube y
+ * luego se quita deja un objeto huérfano en S3, que recoge una regla de ciclo
+ * de vida.
+ *
+ * Sin `articleId` o sin `token` no se sube nada: es lo que permite usar la
+ * bandeja en Storybook, donde no hay sesión ni producto.
+ *
+ * `onUploaded` recibe los activos que terminaron de subir, para registrarlos en
+ * la base sin esperar al botón de guardar. Al ver la barra llegar al final
+ * cualquiera da por hecho que el activo ya quedó ligado al producto; si no lo
+ * estuviera y cerrara la ficha, el archivo se quedaría en S3 sin fila.
+ *
+ * `notices` es lo único que sí vive aquí: mensajes efímeros sobre los archivos
+ * que se acaban de soltar —uno rechazado, otro aceptado pero que el navegador no
+ * podrá reproducir—. No son parte del producto y no tienen por qué ensuciar el
+ * estado de la ficha. Cada uno lleva su `level` para que la bandeja distinga lo
+ * que no entró de lo que entró con advertencia.
+ */
+export const useDigitalAssets = ({
+  assets = [],
+  dispatch,
+  notices = [],
+  setNotices = () => {},
+  articleId = null,
+  token = null,
+  onUploaded = null,
+} = {}) => {
+  /*
+    Copia sincrónica de la lista, solo para contar el cupo.
+
+    `assets` viene del render y `addFiles` es asíncrono: si el usuario suelta una
+    segunda tanda mientras la primera todavía está midiendo la duración de un
+    video, esa segunda llamada vería el conteo viejo y dejaría pasar de más.
+    Escribir la ref al despachar la mantiene exacta.
+  */
+  const countRef = useRef(assets.length);
+  useEffect(() => {
+    countRef.current = assets.length;
+  }, [assets.length]);
+
+  const assetsRef = useRef(assets);
+  useEffect(() => {
+    assetsRef.current = assets;
+  }, [assets]);
+
+  // Los object URL se liberan al desmontar. Sin esto, cada archivo que el
+  // usuario mira se queda en memoria hasta que recargue la pestaña.
+  useEffect(() => () => assetsRef.current.forEach(revokeAssetUrl), []);
+
+  const replaceAll = useCallback(
+    (rows) => {
+      const list = fromBackendList(rows);
+      countRef.current = list.length;
+      dispatch({ type: ASSET_ACTIONS.SET_ASSETS_VALUES, payload: list });
+      setNotices([]);
+    },
+    [dispatch, setNotices],
+  );
+
+  /*
+    Ciclo de vida de una subida. Va antes de `uploadAssets` y de `addFiles`
+    porque los dos lo usan: leer el archivo de arriba abajo cuenta la historia
+    en orden —qué puede pasarle a un activo, quién lo provoca— en vez de
+    obligar a saltar al final para entender la mitad de arriba.
+  */
+  const patch = useCallback(
+    (key, changes) => dispatch({ type: ASSET_ACTIONS.PATCH_ASSET, payload: { key, changes } }),
+    [dispatch],
+  );
+
+  const startUpload = useCallback(
+    (key) => patch(key, { status: ASSET_STATUS.UPLOADING, progress: 0, error: null }),
+    [patch],
+  );
+
+  const setProgress = useCallback((key, progress) => patch(key, { progress }), [patch]);
+
+  const completeUpload = useCallback(
+    (key, changes = {}) => patch(key, {
+      status: ASSET_STATUS.SAVED,
+      progress: 100,
+      error: null,
+      ...changes,
+    }),
+    [patch],
+  );
+
+  const failUpload = useCallback(
+    (key, message) => patch(key, { status: ASSET_STATUS.ERROR, error: message }),
+    [patch],
+  );
+
+  /**
+   * Firma y sube los archivos recién aceptados, en segundo plano.
+   *
+   * Las subidas van en paralelo a propósito: son transferencias a S3, no
+   * consultas a una base, y el cuello de botella es el ancho de banda del
+   * usuario. Ponerlas en fila haría que el último archivo de diez empezara
+   * cuando los otros nueve ya terminaron.
+   *
+   * Un fallo se marca en SU activo y no tumba a los demás: si un archivo se
+   * corta, los otros nueve siguen y el usuario reintenta solo ese.
+   */
+  const uploadAssets = useCallback(
+    async (pendingAssets) => {
+      if (!articleId || !token || pendingAssets.length === 0) return;
+
+      let presigned;
+      try {
+        presigned = await requestPresign({ articleId, assets: pendingAssets, token });
+      } catch (error) {
+        // Si la firma falla, ninguno se puede subir: se marcan todos, porque
+        // dejarlos en "pendiente" haría creer que siguen en camino.
+        pendingAssets.forEach((asset) => failUpload(assetKey(asset), error.message));
+        return;
+      }
+
+      /*
+        Emparejar cada resultado con su activo.
+
+        Por `ref` cuando el servidor lo devuelve, que es lo fiable. Mientras no
+        se despliegue esa versión, `ref` llega vacío y se cae al nombre —con la
+        lista de candidatos menguando, para que dos archivos que se llamen igual
+        no acaben los dos apuntando al mismo—.
+      */
+      const sinEmparejar = [...pendingAssets];
+      const emparejar = (item) => {
+        const index = sinEmparejar.findIndex((asset) => (
+          item.ref ? asset.tempId === item.ref : asset.name === item.name
+        ));
+        if (index === -1) return null;
+        return sinEmparejar.splice(index, 1)[0];
+      };
+
+      // El servidor valida por su cuenta: lo que rechace se marca con su motivo.
+      presigned.rejected.forEach((item) => {
+        const target = emparejar(item);
+        if (target) failUpload(assetKey(target), item.reason);
+      });
+
+      const subidos = await Promise.all(
+        presigned.uploads.map(async (upload) => {
+          const asset = emparejar(upload);
+          if (!asset?.file) return null;
+
+          const key = assetKey(asset);
+          startUpload(key);
+
+          try {
+            await uploadToS3({
+              upload,
+              file: asset.file,
+              onProgress: (percent) => setProgress(key, percent),
+            });
+            // `src` es lo que convierte un activo local en guardable: el
+            // guardado se niega a registrar un activo sin clave en S3.
+            completeUpload(key, { src: upload.key });
+            return { ...asset, src: upload.key };
+          } catch (error) {
+            failUpload(key, error.message);
+            return null;
+          }
+        }),
+      );
+
+      /*
+        Se avisa una sola vez, con todo lo que llegó completo, en lugar de una
+        llamada por archivo: soltar diez archivos haría diez escrituras a la
+        base para el mismo producto.
+
+        Solo lo que subió bien. Registrar un activo cuyo archivo no llegó a S3
+        crearía una fila apuntando a nada.
+      */
+      const completados = subidos.filter(Boolean);
+      if (completados.length > 0) await onUploaded?.(completados);
+    },
+    [articleId, token, onUploaded, startUpload, setProgress, completeUpload, failUpload],
+  );
+
+  /**
+   * Valida y agrega archivos. Devuelve lo aceptado y lo rechazado para que quien
+   * llama decida cómo avisar.
+   *
+   * El cupo se cuenta contra lo que ya hay MÁS lo aceptado en esta misma tanda:
+   * si no, soltar quince archivos de golpe los dejaría pasar todos, porque cada
+   * uno vería el mismo conteo inicial.
+   */
+  const addFiles = useCallback(
+    async (files = []) => {
+      const accepted = [];
+      const avisos = [];
+      let count = countRef.current;
+
+      for (const file of Array.from(files)) {
+        const check = validateAssetFile(file, { currentCount: count });
+        if (!check.valid) {
+          avisos.push({
+            level: "error", name: file.name, code: check.code, message: check.message,
+          });
+          continue;
+        }
+        // Se acepta, pero hay algo que decirle al usuario. Se junta aquí y se
+        // publica solo si el archivo termina agregándose: si luego lo rechaza la
+        // duración, un "se agregaron" junto al error sería contradictorio.
+        let warning = check.warning;
+
+        const objectUrl = URL.createObjectURL(file);
+        const asset = fromFile(file, { assetType: check.assetType, objectUrl });
+
+        // La duración solo se mide en lo que la valida, y después del peso: no
+        // tiene sentido abrir un archivo que ya se rechazó. Un 360 en gif no es
+        // un video: <video> no lo abre y no hay duración que medir.
+        const isVideoFile = getExtension(file.name) !== "gif";
+        if ((check.assetType === "video" || check.assetType === "360") && isVideoFile) {
+          const duration = await readVideoDuration(objectUrl);
+          const durationCheck = validateAssetDuration(duration, check.assetType, file.name);
+          if (!durationCheck.valid) {
+            URL.revokeObjectURL(objectUrl);
+            avisos.push({
+              level: "error",
+              name: file.name,
+              code: durationCheck.code,
+              message: durationCheck.message,
+            });
+            continue;
+          }
+          if (duration === null) {
+            warning = warning ?? warnUnreadableVideo(file.name);
+          } else {
+            asset.duration = duration;
+          }
+        }
+
+        if (warning) {
+          avisos.push({ level: "warning", name: file.name, message: warning });
+        }
+        accepted.push(asset);
+        count += 1;
+      }
+
+      if (accepted.length) {
+        countRef.current = count;
+        dispatch({ type: ASSET_ACTIONS.ADD_ASSETS, payload: accepted });
+        // Sin `await`: la subida corre en segundo plano y la bandeja ya muestra
+        // los archivos con su barra de progreso.
+        uploadAssets(accepted);
+      }
+      setNotices(avisos);
+
+      return { accepted, notices: avisos };
+    },
+    [dispatch, setNotices, uploadAssets],
+  );
+
+  const removeAsset = useCallback(
+    (asset) => {
+      // El reducer es puro, así que el object URL se libera aquí.
+      revokeAssetUrl(asset);
+      countRef.current = Math.max(0, countRef.current - 1);
+      dispatch({ type: ASSET_ACTIONS.REMOVE_ASSET, payload: { key: assetKey(asset) } });
+    },
+    [dispatch],
+  );
+
+  const changeAssetType = useCallback(
+    (index, assetType) => {
+      const target = assetsRef.current[index];
+      if (!target) return;
+      dispatch({
+        type: ASSET_ACTIONS.UPDATE_ASSET,
+        payload: { key: assetKey(target), changes: { assetType } },
+      });
+    },
+    [dispatch],
+  );
+
+  const clearNotices = useCallback(() => setNotices([]), [setNotices]);
+
+  return {
+    assets,
+    notices,
+    remaining: Math.max(0, MAX_ASSETS_PER_PRODUCT - assets.length),
+    pending: assets.filter((asset) => asset.status === ASSET_STATUS.PENDING),
+    addFiles,
+    removeAsset,
+    changeAssetType,
+    replaceAll,
+    startUpload,
+    setProgress,
+    completeUpload,
+    failUpload,
+    clearNotices,
+  };
+};

package/src/index.js

@@ -15,6 +15,7 @@ export * from "./components/atoms/InheritanceTag/index";
 export * from "./components/atoms/Loading/index";
 export * from "./components/atoms/LogoImage/index";
 export * from "./components/atoms/PriorityFlag/index";
+export * from "./components/atoms/AssetPreview/index";
 export * from "./components/atoms/ProductImage/index";
 export * from "./components/atoms/ProgressBar/index";
 export * from "./components/atoms/ScreenHeader/index";
@@ -48,6 +49,8 @@ export * from "./components/molecules/CarouselImagesLogin";
 export * from "./components/molecules/EditionActiveImage/index";
 export * from "./components/molecules/EmailResetPasswordLogin/index";
 export * from "./components/molecules/FeaturesBar/index";
+export * from "./components/molecules/GalleryTrayTabs/index";
+export * from "./components/molecules/GalleryAssetElement/index";
 export * from "./components/molecules/GalleryElement/index";
 export * from "./components/molecules/HeaderTop/index";
 export * from "./components/molecules/ImageSelector/index";
@@ -79,6 +82,7 @@ export * from "./components/molecules/HeaderItem/index";
 export * from "./components/molecules/RowItem/index";
 
 //organisms
+export * from "./components/organisms/DigitalAssetsTray/index";
 export * from "./components/organisms/ChangePassword/index";
 export * from "./components/organisms/Fullplan/index";
 export * from "./components/organisms/FullProductNameHeader/index";