contentoh-components-library 21.6.55 → 21.6.57

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

@@ -0,0 +1,535 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDigitalAssets = exports.readVideoDuration = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = require("react");
+
+var _assets = require("./assets.actions");
+
+var _uploadAssets = require("./uploadAssets");
+
+var _assetTypes = require("./assetTypes");
+
+var _assets2 = require("./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.
+ */
+var readVideoDuration = function readVideoDuration(objectUrl) {
+  return new Promise(function (resolve) {
+    var video = document.createElement("video");
+    video.preload = "metadata";
+
+    video.onloadedmetadata = function () {
+      return resolve(video.duration);
+    };
+
+    video.onerror = function () {
+      return 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.
+ */
+
+
+exports.readVideoDuration = readVideoDuration;
+
+var useDigitalAssets = function useDigitalAssets() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$assets = _ref.assets,
+      assets = _ref$assets === void 0 ? [] : _ref$assets,
+      dispatch = _ref.dispatch,
+      _ref$notices = _ref.notices,
+      notices = _ref$notices === void 0 ? [] : _ref$notices,
+      _ref$setNotices = _ref.setNotices,
+      setNotices = _ref$setNotices === void 0 ? function () {} : _ref$setNotices,
+      _ref$articleId = _ref.articleId,
+      articleId = _ref$articleId === void 0 ? null : _ref$articleId,
+      _ref$token = _ref.token,
+      token = _ref$token === void 0 ? null : _ref$token,
+      _ref$onUploaded = _ref.onUploaded,
+      onUploaded = _ref$onUploaded === void 0 ? null : _ref$onUploaded;
+
+  /*
+    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.
+  */
+  var countRef = (0, _react.useRef)(assets.length);
+  (0, _react.useEffect)(function () {
+    countRef.current = assets.length;
+  }, [assets.length]);
+  var assetsRef = (0, _react.useRef)(assets);
+  (0, _react.useEffect)(function () {
+    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.
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      return assetsRef.current.forEach(_assets2.revokeAssetUrl);
+    };
+  }, []);
+  var replaceAll = (0, _react.useCallback)(function (rows) {
+    var list = (0, _assets2.fromBackendList)(rows);
+    countRef.current = list.length;
+    dispatch({
+      type: _assets.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.
+  */
+
+  var patch = (0, _react.useCallback)(function (key, changes) {
+    return dispatch({
+      type: _assets.ASSET_ACTIONS.PATCH_ASSET,
+      payload: {
+        key: key,
+        changes: changes
+      }
+    });
+  }, [dispatch]);
+  var startUpload = (0, _react.useCallback)(function (key) {
+    return patch(key, {
+      status: _assets2.ASSET_STATUS.UPLOADING,
+      progress: 0,
+      error: null
+    });
+  }, [patch]);
+  var setProgress = (0, _react.useCallback)(function (key, progress) {
+    return patch(key, {
+      progress: progress
+    });
+  }, [patch]);
+  var completeUpload = (0, _react.useCallback)(function (key) {
+    var changes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return patch(key, (0, _objectSpread2.default)({
+      status: _assets2.ASSET_STATUS.SAVED,
+      progress: 100,
+      error: null
+    }, changes));
+  }, [patch]);
+  var failUpload = (0, _react.useCallback)(function (key, message) {
+    return patch(key, {
+      status: _assets2.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.
+   */
+
+  var uploadAssets = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(pendingAssets) {
+      var presigned, sinEmparejar, emparejar, subidos, completados;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(!articleId || !token || pendingAssets.length === 0)) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 2:
+              _context2.prev = 2;
+              _context2.next = 5;
+              return (0, _uploadAssets.requestPresign)({
+                articleId: articleId,
+                assets: pendingAssets,
+                token: token
+              });
+
+            case 5:
+              presigned = _context2.sent;
+              _context2.next = 12;
+              break;
+
+            case 8:
+              _context2.prev = 8;
+              _context2.t0 = _context2["catch"](2);
+              // Si la firma falla, ninguno se puede subir: se marcan todos, porque
+              // dejarlos en "pendiente" haría creer que siguen en camino.
+              pendingAssets.forEach(function (asset) {
+                return failUpload((0, _assets2.assetKey)(asset), _context2.t0.message);
+              });
+              return _context2.abrupt("return");
+
+            case 12:
+              /*
+                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—.
+              */
+              sinEmparejar = (0, _toConsumableArray2.default)(pendingAssets);
+
+              emparejar = function emparejar(item) {
+                var index = sinEmparejar.findIndex(function (asset) {
+                  return 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(function (item) {
+                var target = emparejar(item);
+                if (target) failUpload((0, _assets2.assetKey)(target), item.reason);
+              });
+              _context2.next = 17;
+              return Promise.all(presigned.uploads.map( /*#__PURE__*/function () {
+                var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(upload) {
+                  var asset, key;
+                  return _regenerator.default.wrap(function _callee$(_context) {
+                    while (1) {
+                      switch (_context.prev = _context.next) {
+                        case 0:
+                          asset = emparejar(upload);
+
+                          if (asset !== null && asset !== void 0 && asset.file) {
+                            _context.next = 3;
+                            break;
+                          }
+
+                          return _context.abrupt("return", null);
+
+                        case 3:
+                          key = (0, _assets2.assetKey)(asset);
+                          startUpload(key);
+                          _context.prev = 5;
+                          _context.next = 8;
+                          return (0, _uploadAssets.uploadToS3)({
+                            upload: upload,
+                            file: asset.file,
+                            onProgress: function onProgress(percent) {
+                              return setProgress(key, percent);
+                            }
+                          });
+
+                        case 8:
+                          // `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 _context.abrupt("return", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, asset), {}, {
+                            src: upload.key
+                          }));
+
+                        case 12:
+                          _context.prev = 12;
+                          _context.t0 = _context["catch"](5);
+                          failUpload(key, _context.t0.message);
+                          return _context.abrupt("return", null);
+
+                        case 16:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }
+                  }, _callee, null, [[5, 12]]);
+                }));
+
+                return function (_x2) {
+                  return _ref3.apply(this, arguments);
+                };
+              }()));
+
+            case 17:
+              subidos = _context2.sent;
+
+              /*
+                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.
+              */
+              completados = subidos.filter(Boolean);
+
+              if (!(completados.length > 0)) {
+                _context2.next = 22;
+                break;
+              }
+
+              _context2.next = 22;
+              return onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded(completados);
+
+            case 22:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2, 8]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [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.
+   */
+
+  var addFiles = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    var files,
+        accepted,
+        avisos,
+        count,
+        _i,
+        _Array$from,
+        file,
+        check,
+        warning,
+        objectUrl,
+        asset,
+        isVideoFile,
+        duration,
+        durationCheck,
+        _warning,
+        _args3 = arguments;
+
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            files = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : [];
+            accepted = [];
+            avisos = [];
+            count = countRef.current;
+            _i = 0, _Array$from = Array.from(files);
+
+          case 5:
+            if (!(_i < _Array$from.length)) {
+              _context3.next = 31;
+              break;
+            }
+
+            file = _Array$from[_i];
+            check = (0, _assetTypes.validateAssetFile)(file, {
+              currentCount: count
+            });
+
+            if (check.valid) {
+              _context3.next = 11;
+              break;
+            }
+
+            avisos.push({
+              level: "error",
+              name: file.name,
+              code: check.code,
+              message: check.message
+            });
+            return _context3.abrupt("continue", 28);
+
+          case 11:
+            // 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.
+            warning = check.warning;
+            objectUrl = URL.createObjectURL(file);
+            asset = (0, _assets2.fromFile)(file, {
+              assetType: check.assetType,
+              objectUrl: 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.
+
+            isVideoFile = (0, _assetTypes.getExtension)(file.name) !== "gif";
+
+            if (!((check.assetType === "video" || check.assetType === "360") && isVideoFile)) {
+              _context3.next = 25;
+              break;
+            }
+
+            _context3.next = 18;
+            return readVideoDuration(objectUrl);
+
+          case 18:
+            duration = _context3.sent;
+            durationCheck = (0, _assetTypes.validateAssetDuration)(duration, check.assetType, file.name);
+
+            if (durationCheck.valid) {
+              _context3.next = 24;
+              break;
+            }
+
+            URL.revokeObjectURL(objectUrl);
+            avisos.push({
+              level: "error",
+              name: file.name,
+              code: durationCheck.code,
+              message: durationCheck.message
+            });
+            return _context3.abrupt("continue", 28);
+
+          case 24:
+            if (duration === null) {
+              warning = (_warning = warning) !== null && _warning !== void 0 ? _warning : (0, _assetTypes.warnUnreadableVideo)(file.name);
+            } else {
+              asset.duration = duration;
+            }
+
+          case 25:
+            if (warning) {
+              avisos.push({
+                level: "warning",
+                name: file.name,
+                message: warning
+              });
+            }
+
+            accepted.push(asset);
+            count += 1;
+
+          case 28:
+            _i++;
+            _context3.next = 5;
+            break;
+
+          case 31:
+            if (accepted.length) {
+              countRef.current = count;
+              dispatch({
+                type: _assets.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 _context3.abrupt("return", {
+              accepted: accepted,
+              notices: avisos
+            });
+
+          case 34:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })), [dispatch, setNotices, uploadAssets]);
+  var removeAsset = (0, _react.useCallback)(function (asset) {
+    // El reducer es puro, así que el object URL se libera aquí.
+    (0, _assets2.revokeAssetUrl)(asset);
+    countRef.current = Math.max(0, countRef.current - 1);
+    dispatch({
+      type: _assets.ASSET_ACTIONS.REMOVE_ASSET,
+      payload: {
+        key: (0, _assets2.assetKey)(asset)
+      }
+    });
+  }, [dispatch]);
+  var changeAssetType = (0, _react.useCallback)(function (index, assetType) {
+    var target = assetsRef.current[index];
+    if (!target) return;
+    dispatch({
+      type: _assets.ASSET_ACTIONS.UPDATE_ASSET,
+      payload: {
+        key: (0, _assets2.assetKey)(target),
+        changes: {
+          assetType: assetType
+        }
+      }
+    });
+  }, [dispatch]);
+  var clearNotices = (0, _react.useCallback)(function () {
+    return setNotices([]);
+  }, [setNotices]);
+  return {
+    assets: assets,
+    notices: notices,
+    remaining: Math.max(0, _assetTypes.MAX_ASSETS_PER_PRODUCT - assets.length),
+    pending: assets.filter(function (asset) {
+      return asset.status === _assets2.ASSET_STATUS.PENDING;
+    }),
+    addFiles: addFiles,
+    removeAsset: removeAsset,
+    changeAssetType: changeAssetType,
+    replaceAll: replaceAll,
+    startUpload: startUpload,
+    setProgress: setProgress,
+    completeUpload: completeUpload,
+    failUpload: failUpload,
+    clearNotices: clearNotices
+  };
+};
+
+exports.useDigitalAssets = useDigitalAssets;