react-filerobot-video-editor/lib/components/buttons/SaveButton/index.js

React component version of filerobot video editor (FVE).

import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["onSave","defaultName","saveLabel","modalProps"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{useEffect,useRef,useState}from"react";import{Image2,Video2}from"@scaleflex/icons";import{useStore,useTransformedImgData}from"../../../hooks";import getFileFullName from"../../../utils/getFileFullName";import getDefaultSaveQuality from"../../../utils/getDefaultSaveQuality";import{CLOSING_REASONS,ELLIPSE_CROP,SUPPORTED_IMAGE_TYPES,DEFAULT_SAVE_QUALITY,SUPPORTED_VIDEO_TYPES}from"../../../utils/constants";import{SET_FEEDBACK,SET_SAVING}from"../../../actions";import restrictNumber from"../../../utils/restrictNumber";import ButtonWithMenu from"../../common/ButtonWithMenu";import isImage from"../../../utils/isImage";import getSupportedExtensions from"../../../utils/getSupportedExtensions";import ExportModal from"../../common/ExportModal";import useProcessedVideoData from"../../../hooks/useProcessedVideoData";import SaveModal from"./SaveModal";var saveButtonWrapperStyle={minWidth:67,width:"fit-content"},saveButtonMenuStyle={marginLeft:12},isFieSaveMounted=!0,SaveButton=function(a){var b=a.onSave,c=a.defaultName,d=a.saveLabel,e=a.modalProps,f=void 0===e?{}:e,g=_objectWithoutProperties(a,_excluded),h=useStore(),i=h.dispatch,j=h.originalSource,k=h.resize,l=h.isLoadingGlobally,m=h.haveNotSavedChanges,n=h.feedback,o=h.hasUndo,p=h.t,q=h.sourceType,r=h.theme,s=h.adjustments,t=void 0===s?{}:s,u=t.crop,v=h.config,w=v.onClose,x=v.closeAfterSave,y=v.onBeforeSave,z=v.onSave,A=v.forceToPngInEllipticalCrop,B=v.defaultSavedImageName,C=v.defaultSavedImageType,D=v.defaultSavedImageQuality,E=void 0===D?DEFAULT_SAVE_QUALITY:D,F=v.useCloudimage,G=v.moreSaveOptions,H=v.disableSaveIfNoChanges,I=v.removeSaveButton,J=useState(!1),K=_slicedToArray(J,2),L=K[0],M=K[1],N=useState(!1),O=_slicedToArray(N,2),P=O[0],Q=O[1],R=useState(null),S=_slicedToArray(R,2),T=S[0],U=S[1],V=useState({quality:getDefaultSaveQuality(E)}),W=_slicedToArray(V,2),X=W[0],Y=W[1],Z=useState(0),$=_slicedToArray(Z,2),_=$[0],aa=$[1],ba=useTransformedImgData(),ca=useProcessedVideoData(),da=ca.processVideo,ea=ca.processVideoByBackend,fa=ca.checkVideoStatus,ga=ca.getFinalVideoData,ha=ca.abortVideoProcessing,ia=useRef(),ja=useRef(!1),ka=0===n.duration,la=isImage(q),ma=function a(){i({type:SET_SAVING,payload:{isSaving:!1,isLoadingGlobally:!1}})},na=function c(a){var d=ia.current||b||z,e=d(a.data,a.designState);ma(),e instanceof Promise?e["finally"](ma):ma(),ia.current=null,x&&w&&w(CLOSING_REASONS.AFTER_SAVE,m)},oa=function b(a){U(a.message||a),i({type:SET_FEEDBACK,payload:{feedback:{message:a.message||a}}})},pa=function b(a){aa(a)},qa=function a(){if(ja.current){var c=ia.current||b||z;return c({mediaFile:X,processVideo:ea,checkVideoStatus:fa,getFinalVideoData:ga}),void(ja.current=!1)}var d=la?ba(X,!1,!0):da(X,pa);d instanceof Promise?d.then(na)["catch"](function(a){"AbortError"!==a.name&&(oa(a),ma())}):na(d)},ra=function a(){i({type:SET_SAVING,payload:{isSaving:!0,isLoadingGlobally:la}}),la||ja.current||Q(!0),M(!1),setTimeout(qa,3)},sa=function a(){var c=ia.current||b||z;return"function"==typeof c?X.name&&X.extension?void ra():void i({type:SET_FEEDBACK,payload:{feedback:{message:p("nameIsRequired")}}}):void console.error("Please provide onSave function handler.")},ta=function a(){if(!H||o){if(F){var c=ba(X),d=ia.current||b||z;return void d(c.imageData,c.designState)}return ia.current||"function"!=typeof y||!1!==y(X)?void M(!0):void sa()}},ua=function d(a,b,c){"function"==typeof a?(ia.current=a,ja.current=c,b()):console.error("onSave function callback is required as an argument to the passed function.")},va=function a(){var b=getSupportedExtensions(q),d=b.supportedTypes,e=getFileFullName(B||j.name||c,A&&u.ratio===ELLIPSE_CROP?"png":d.includes(null===C||void 0===C?void 0:C.toLowerCase())&&C,q),f=e.name,g=e.extension;Y(_objectSpread(_objectSpread({},X),{},{name:f,extension:g}))};if(useEffect(function(){j&&va()},[j]),useEffect(function(){!j||X.name&&X.extension||va()},[L]),useEffect(function(){Y(_objectSpread(_objectSpread({},X),{},{size:{width:k.width,height:k.height}}))},[k]),useEffect(function(){return isFieSaveMounted=!0,function(){isFieSaveMounted=!1}},[]),I)return null;var wa=Array.isArray(G)&&0<G.length?G.map(function(a,b){return _objectSpread(_objectSpread({},a),{},{key:"".concat(a.label||b,"-option-key"),onClick:"function"==typeof a.onClick?function(){return a.onClick(function(a){return ua(a,ta)},function(a){return ua(a,ra)})}:void 0,onSaveVideoCb:"function"==typeof a.onSaveVideoCb?function(){return a.onSaveVideoCb(function(a){return ua(a,ta,!0)},function(a){return ua(a,ra,!0)})}:void 0})}):[],xa=["jpeg","jpg","webp"].includes(X.extension),ya={modalProps:f,open:L,fileInfo:X,onCancel:function a(){isFieSaveMounted&&L&&(ia.current=null,M(!1))},onFileNameChange:function b(a){var c=a.target.value;Y(_objectSpread(_objectSpread({},X),{},{name:c}))},onSelectFileExtension:function b(a){Y(_objectSpread(_objectSpread({},X),{},{extension:a}))},onQualityChange:function b(a){Y(_objectSpread(_objectSpread({},X),{},{quality:restrictNumber(a/100,.01,1)}))},onResize:function b(a){Y(_objectSpread(_objectSpread({},X),{},{size:_objectSpread(_objectSpread({},X.size),a)}))},onDone:sa};return React.createElement(React.Fragment,null,React.createElement(ButtonWithMenu,_extends({"data-testid":"FIE-save-button",className:"FIE_buttons-save-btn",color:"primary",onClick:ta,menuPosition:"bottom",menuFromBtn:!0,label:d||p("save"),menuItems:wa,menuStyle:saveButtonMenuStyle,wrapperStyle:saveButtonWrapperStyle,disabled:l||H&&!o||ka,noMargin:!0},g)),L&&(la?React.createElement(SaveModal,_extends({icon:function b(a){return React.createElement(Image2,_extends({color:r.palette["accent-primary"]},a))},isQualityAcceptable:xa,supportedTypes:SUPPORTED_IMAGE_TYPES},ya)):React.createElement(SaveModal,_extends({icon:function b(a){return React.createElement(Video2,_extends({color:r.palette["accent-primary"]},a))},supportedTypes:SUPPORTED_VIDEO_TYPES},ya))),P&&!la&&React.createElement(ExportModal,{open:P,progress:_,onCancel:function a(){Q(!1),aa(0),U(null),ha()},error:T}))};export default SaveButton;