contentoh-components-library 21.6.50 → 21.6.52

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

@@ -1,329 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-
-import { ASSET_ACTIONS } from "./assets.actions";
-import { requestPresign, uploadToS3 } from "./uploadAssets";
-import {
-  MAX_ASSETS_PER_PRODUCT,
-  validateAssetDuration,
-  validateAssetFile,
-} 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 sobre este archivo.
-        if (check.warning) {
-          avisos.push({ level: "warning", name: file.name, message: 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ó.
-        if (check.assetType === "video" || check.assetType === "360") {
-          const duration = await readVideoDuration(objectUrl);
-          const durationCheck = validateAssetDuration(duration, check.assetType);
-          if (!durationCheck.valid) {
-            URL.revokeObjectURL(objectUrl);
-            avisos.push({
-              level: "error",
-              name: file.name,
-              code: durationCheck.code,
-              message: durationCheck.message,
-            });
-            continue;
-          }
-          asset.duration = duration;
-        }
-
-        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,
-  };
-};