@scaleflex/widget-preupload-processors 0.0.1

package/lib/components/VideoProcessor.js

@@ -0,0 +1,95 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useDispatch, useSelector } from 'react-redux';
+import ProcessSelect from './ProcessSelect';
+import Styled from './PreProcessor.styled';
+import { preUpProcessorsCommonStateUpdated, selectPreUpProcessorsCommonState } from '../common.slice';
+import ProcessorToggle from './ProcessorToggle';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var VideoProcessor = function VideoProcessor(_ref) {
+  var i18n = _ref.i18n,
+    pluginOpts = _ref.pluginOpts;
+  var dispatch = useDispatch();
+  var isVideoProcessActive = useSelector(function (state) {
+    return selectPreUpProcessorsCommonState(state).isVideoProcessActive;
+  });
+  var videoTranscoding = useSelector(function (state) {
+    return selectPreUpProcessorsCommonState(state).videoTranscoding;
+  });
+  var videoTranscodingOptions = pluginOpts.videoTranscodingOptions;
+  var toggleVideoProcessor = function toggleVideoProcessor(e) {
+    dispatch(preUpProcessorsCommonStateUpdated({
+      isVideoProcessActive: e.target.checked
+    }));
+  };
+  var updateVideoTranscoding = function updateVideoTranscoding(newState) {
+    dispatch(preUpProcessorsCommonStateUpdated({
+      videoTranscoding: _objectSpread(_objectSpread({}, videoTranscoding), newState)
+    }));
+  };
+  var renderVideoProtocols = function renderVideoProtocols() {
+    var protocols = videoTranscodingOptions.protocols;
+    var updateProtocol = function updateProtocol(protocol) {
+      updateVideoTranscoding({
+        protocol: protocol
+      });
+    };
+    return /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Styled.UploadOptionLabel, {
+        disabled: !isVideoProcessActive,
+        children: i18n('preuploadProtocolsText')
+      }), /*#__PURE__*/_jsx(Styled.Protocols, {
+        children: protocols.map(function (protocol) {
+          return /*#__PURE__*/_jsx(Styled.ProtocolWrapper, {
+            children: /*#__PURE__*/_jsx(Styled.ProtocolsRadio, {
+              size: "md",
+              disabled: !isVideoProcessActive,
+              checked: videoTranscoding.protocol.toLowerCase() === protocol.value.toLowerCase(),
+              label: protocol.label,
+              onChange: function onChange() {
+                return updateProtocol(protocol.value);
+              },
+              labelStyle: {
+                marginBottom: 2,
+                fontSize: 16,
+                lineHeight: '18px'
+              }
+            })
+          }, protocol.value);
+        })
+      })]
+    });
+  };
+  var renderVideoResolution = function renderVideoResolution() {
+    var resolutionSelectProps = {
+      title: i18n('preuploadVideoResolutionTitle'),
+      options: videoTranscodingOptions.resolutions,
+      value: videoTranscoding.resolution,
+      onChange: function onChange(resolution) {
+        return updateVideoTranscoding({
+          resolution: resolution
+        });
+      },
+      description: i18n('preuploadVideoResolutionText'),
+      disabled: !isVideoProcessActive
+    };
+    return /*#__PURE__*/_jsx(ProcessSelect, _objectSpread({}, resolutionSelectProps));
+  };
+  return /*#__PURE__*/_jsxs(Styled.SettingsContainer, {
+    children: [/*#__PURE__*/_jsx(Styled.UploadProcessorTitle, {
+      children: i18n('preuploadOptimizeVideoTitle')
+    }), /*#__PURE__*/_jsx(ProcessorToggle, {
+      toggleText: i18n('preuploadOptimizeVideoSubTitle'),
+      tooltipText: i18n('preuploadQuickUploadModeHint'),
+      isProcessActive: isVideoProcessActive,
+      toggleProcessor: toggleVideoProcessor
+    }), /*#__PURE__*/_jsxs(Styled.OperationsContainer, {
+      children: [renderVideoResolution(), renderVideoProtocols()]
+    })]
+  });
+};
+export default VideoProcessor;

package/lib/defaultLocale.js

@@ -0,0 +1,27 @@
+export default {
+  preuploadUploadSettingsLabel: 'Upload Settings',
+  preuploadQuickUploadModeLabel: 'Quick upload mode',
+  preuploadQuickUploadModeHint: 'In quick mode, the file is send, but the file is still in being processed and will not be visible in the Filerobot infra before its finished. Its useful for uploading big files to not have freezing behaviour',
+  preuploadOptimizeImagesLabel: 'Optimize image(s)',
+  preuploadImageOperationLabel: 'Operation',
+  preuploadImageOperationText: 'Operation that is being applied automatically before passing the image to uploading stage',
+  preuploadTranscodeLabel: 'Transcode video(s)',
+  preuploadVideoResolutionTitle: 'Resolution',
+  preuploadVideoResolutionText: 'The resolution of video transcoding',
+  preuploadProtocolsText: 'Protocols',
+  preuploadMaxWidth: 'Max Width',
+  preuploadMaxHeight: 'Max Height',
+  preuploadOptimizeImagesTitle: 'Image settings',
+  preuploadOptimizeImagesSubTitle: 'Resize Images',
+  preuploadOptimizeVideoTitle: 'Video settings',
+  preuploadOptimizeVideoSubTitle: 'Transcode video',
+  preuploadResumableUploadTitle: 'Resumable upload',
+  preuploadAssetsTransformationsLabel: 'Transformations',
+  preuploadAssetsTransformationsHint: 'Transformations are dynamically created variants based on image presets.',
+  preuploadAssetsTransformationsPresetsLabel: 'Presets',
+  preuploadAssetsTransformationsPresetPlaceholder: 'Select preset',
+  preuploadAssetsTransformationsPresetShowMore: 'more',
+  preuploadResumableUploadInfo: '(experimental feature) Resumable file transfer protocol designed to ensure smooth and efficient file uploads. Adds the functionality to pause and resume upload, optimizing data delivery for a seamless experience.',
+  preuploadResumableUploadBetaTitle: 'Beta',
+  preuploadResumableUploadBetaMsg: 'This functionality is in Beta and may not work in all cases until official release'
+};

package/lib/index.js

@@ -0,0 +1,175 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createElement } from 'react';
+import { Plugin } from '@scaleflex/widget-core';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import defaultLocale from './defaultLocale';
+import DEFAULT_VIDEO_TRANSCODING from './DEFAULT_VIDEO_TRANSCODING';
+import ProcessorsUI from './components/ProcessorsUI';
+import preUploadProcessorsReducer, { preUpProcessorsCommonStateUpdated, selectPreUpProcessorsCommonState } from './common.slice';
+var PreUploadProcessors = /*#__PURE__*/function (_Plugin) {
+  function PreUploadProcessors(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, PreUploadProcessors);
+    _this = _callSuper(this, PreUploadProcessors, [filerobot, opts]);
+    _defineProperty(_this, "_pluginObject", void 0);
+    _defineProperty(_this, "triggerImageProcessor", function (filesIds) {
+      var _selectPreUpProcessor = selectPreUpProcessorsCommonState(_this.getGlobalState()),
+        imageOperation = _selectPreUpProcessor.imageOperation,
+        isImageProcessActive = _selectPreUpProcessor.isImageProcessActive,
+        isUserAllowedToOptimize = _selectPreUpProcessor.isUserAllowedToOptimize;
+      _this.filerobot.setCoreCommonState({
+        imageProcessor: _objectSpread(_objectSpread({}, imageOperation), {}, {
+          isImageProcessActive: isImageProcessActive,
+          isUserAllowedToOptimize: isUserAllowedToOptimize,
+          filesIds: filesIds
+        })
+      });
+    });
+    _defineProperty(_this, "triggerVideoProcessor", function (filesIds) {
+      var _selectPreUpProcessor2 = selectPreUpProcessorsCommonState(_this.getGlobalState()),
+        videoTranscoding = _selectPreUpProcessor2.videoTranscoding,
+        isUserAllowedToOptimize = _selectPreUpProcessor2.isUserAllowedToOptimize,
+        isVideoProcessActive = _selectPreUpProcessor2.isVideoProcessActive;
+      _this.filerobot.setCoreCommonState({
+        videoTranscoding: _objectSpread(_objectSpread({}, videoTranscoding), {}, {
+          isUserAllowedToOptimize: isUserAllowedToOptimize,
+          isVideoProcessActive: isVideoProcessActive,
+          filesIds: filesIds
+        })
+      });
+    });
+    _defineProperty(_this, "resetState", function () {
+      _this.dispatch(preUpProcessorsCommonStateUpdated(_this.defaultPluginState));
+    });
+    _this.id = PLUGINS_IDS.PREUPLOAD_PROCESSORS;
+    _this.type = 'modifier';
+    _this.invisible = false;
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+    var defaultOptions = {
+      imageProcessorByDefault: false,
+      videoProcessorByDefault: false,
+      imageOperations: null,
+      videoTranscodingOptions: DEFAULT_VIDEO_TRANSCODING
+    };
+    _this.getPluginObject = _this.getPluginObject.bind(_this);
+    _this.areThereOperations = _this.areThereOperations.bind(_this);
+    _this.render = _this.render.bind(_this);
+    _this.i18nInit();
+    _this.opts = _extends({}, defaultOptions, opts);
+    _this.handleProcess = _this.handleProcess.bind(_this);
+    return _this;
+  }
+  _inherits(PreUploadProcessors, _Plugin);
+  return _createClass(PreUploadProcessors, [{
+    key: "i18nInit",
+    value: function i18nInit() {
+      this.translator = new Translator([this.defaultLocale, this.filerobot.locale, this.opts.locale]);
+      this.i18n = this.translator.translate.bind(this.translator);
+    }
+  }, {
+    key: "handleProcess",
+    value: function handleProcess(filesIds) {
+      filesIds = filesIds.filter(function (file) {
+        return !file.error;
+      });
+      this.triggerImageProcessor(filesIds);
+      this.triggerVideoProcessor(filesIds);
+    }
+  }, {
+    key: "areThereOperations",
+    value: function areThereOperations() {
+      return this.opts.imageOperations && Object.keys(this.opts.imageOperations).length > 0;
+    }
+  }, {
+    key: "getPluginObject",
+    value: function getPluginObject() {
+      if (!this._pluginObject) {
+        this._pluginObject = {
+          render: this.render,
+          process: this.handleProcess
+        };
+      }
+      return this._pluginObject;
+    }
+  }, {
+    key: "getOperationOptionsFirstValues",
+    value: function getOperationOptionsFirstValues(operation) {
+      var optionValues = {};
+      Object.keys(operation).forEach(function (optionKey) {
+        optionValues[optionKey] = operation[optionKey];
+      });
+      return optionValues;
+    }
+  }, {
+    key: "install",
+    value: function install() {
+      if (this.areThereOperations()) {
+        this.filerobot.addPreProcessor(this.getPluginObject());
+        var firstOperationKey = Object.keys(this.opts.imageOperations)[0];
+        this.defaultPluginState = {
+          imageOperation: {
+            name: firstOperationKey,
+            values: this.getOperationOptionsFirstValues(this.opts.imageOperations[firstOperationKey]),
+            isRatioLocked: true
+          },
+          videoTranscoding: {
+            resolution: this.opts.videoTranscodingOptions.defaultResolution,
+            protocol: this.opts.videoTranscodingOptions.defaultProtocol
+          },
+          isImageProcessActive: this.opts.imageProcessorByDefault,
+          isUserAllowedToOptimize: this.opts.imageProcessorUserAllowance,
+          isVideoProcessActive: this.opts.videoProcessorByDefault
+        };
+        this.resetState();
+        this.filerobot.on('cancel-uploads', this.resetState);
+      }
+    }
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      this.filerobot.removePreProcessor(this.getPluginObject());
+      this.filerobot.off('cancel-uploads', this.resetState);
+    }
+  }, {
+    key: "getPluginReducer",
+    value: function getPluginReducer() {
+      return preUploadProcessorsReducer;
+    }
+  }, {
+    key: "render",
+    value: function render(_state) {
+      if (_state.autoProceed) {
+        return null;
+      }
+      if (this.areThereOperations()) {
+        // we're using createElement here as ProcessorsUI contains react's hooks and we need this to be considered as react component
+
+        return /*#__PURE__*/createElement(ProcessorsUI, {
+          i18n: this.i18n,
+          pluginOpts: this.opts
+        });
+      }
+    }
+  }]);
+}(Plugin);
+export default PreUploadProcessors;

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@scaleflex/widget-preupload-processors",
+  "version": "0.0.1",
+  "description": "Scaleflex preupload-processors module.",
+  "main": "lib/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "/dist",
+    "/lib",
+    "/types"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@scaleflex/icons": "^3.0.0-beta.11",
+    "@scaleflex/ui": "^3.0.0-beta.11",
+    "@scaleflex/widget-common": "^0.0.1",
+    "@scaleflex/widget-icons": "^0.0.1",
+    "@scaleflex/widget-tus": "^0.0.1",
+    "@scaleflex/widget-utils": "^0.0.1"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "@scaleflex/widget-core": "^0.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "license": "MIT",
+  "gitHead": "64ea82e745b7deda36d6794863350e6671e9010d"
+}