react-filerobot-video-editor/lib/hooks/useLoadMainSource.js

React component version of filerobot video editor (FVE).

import _typeof from"@babel/runtime/helpers/typeof";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _regeneratorRuntime from"@babel/runtime/regenerator";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{useCallback,useEffect,useRef}from"react";import{HIDE_LOADER,RESET,SET_FEEDBACK,SET_ORIGINAL_SOURCE,SHOW_LOADER,UPDATE_STATE}from"../actions";import loadImage from"../utils/loadImage";import loadVideo from"../utils/loadVideo";import{useResizeObserver,useStore,useTransformedImgData,useUpdateEffect}from"./index";import{getBackendTranslations}from"../utils/translator";import finetunesStrsToClasses from"../utils/finetunesStrsToClasses";import filterStrToClass from"../utils/filterStrToClass";import isSameSource from"../utils/isSameSource";import cloudimageQueryToDesignState from"../utils/cloudimageQueryToDesignState";import{DEFAULT_ZOOM_FACTOR,SOURCE_TYPES}from"../utils/constants";import isImageExtension from"../utils/isImageExtension";import isVideoExtension from"../utils/isVideoExtension";import isBlobFile from"../utils/isBlobFile";var getSourceTypeByExtension=function(a){return isImageExtension(a)?SOURCE_TYPES.IMAGE:isVideoExtension(a)?SOURCE_TYPES.VIDEO:void 0},useLoadMainSource=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.sourceToLoad,c=a.onPluginRootResize,d=a.pluginRootRef,e=a.resetOnSourceChange,f=a.keepZoomOnSourceChange,g=useStore(),h=g.config,i=g.haveNotSavedChanges,j=g.dispatch,k=g.originalSource,l=g.shownImageDimensions,m=g.t,n=h.useCloudimage,o=h.cloudimage,p=h.loadableDesignState,q=h.source,r=h.avoidChangesNotSavedAlertOnLeave,s=h.useBackendTranslations,t=h.translations,u=h.language,v=h.defaultSavedImageName,w=h.observePluginContainerSize,x=h.getCurrentImgDataFnRef,y=h.updateStateFnRef,z=h.noCrossOrigin,A=h.resetOnSourceChange,B=h.keepZoomOnSourceChange,C=b||q,D=null!==e&&void 0!==e?e:A,E=null!==f&&void 0!==f?f:B,F=useResizeObserver(),G=_slicedToArray(F,2),H=G[0],I=G[1],J=useRef(!1),K=useRef(null),L=useRef(i),M=useTransformedImgData(),N=useCallback(function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.newSource,c=a.type;j({type:SET_ORIGINAL_SOURCE,payload:_objectSpread({originalSource:b||{},sourceType:c},!(D||E)&&{zoom:{factor:DEFAULT_ZOOM_FACTOR,x:null,y:null}})})},[D,E]),O=function(a){if(null!==a&&void 0!==a&&a.width&&a.height){var b=_objectSpread({},a);return delete b.src,N({newSource:b}),!0}return!1},P=useCallback(function(a){j({type:SET_FEEDBACK,payload:{feedback:{message:a.message||a,duration:0}}})},[]),Q=function(a){return isBlobFile(a)?URL.createObjectURL(a):(null===a||void 0===a?void 0:a.src)||a},R=function(){var a=_asyncToGenerator(_regeneratorRuntime.mark(function c(a,b){var d;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:if(!isBlobFile(a)){c.next=2;break}return c.abrupt("return",a.type);case 2:return c.next=4,fetch(b,{method:"HEAD"});case 4:if(d=c.sent,!d.ok){c.next=7;break}return c.abrupt("return",d.headers.get("content-type"));case 7:case"end":return c.stop()}},c)}));return function(){return a.apply(this,arguments)}}(),S=function(){var a=_asyncToGenerator(_regeneratorRuntime.mark(function b(a){var c,d;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return c="",b.prev=1,c=Q(a),b.next=5,R(a,c);case 5:if(d=b.sent,!d.startsWith("image/")){b.next=8;break}return b.abrupt("return",{sourceUrl:c,sourceType:SOURCE_TYPES.IMAGE});case 8:if(!d.startsWith("video/")){b.next=10;break}return b.abrupt("return",{sourceUrl:c,sourceType:SOURCE_TYPES.VIDEO});case 10:return b.abrupt("return",{sourceUrl:c,sourceType:getSourceTypeByExtension(c)});case 13:return b.prev=13,b.t0=b["catch"](1),P(b.t0),b.abrupt("return",{sourceUrl:c,sourceType:getSourceTypeByExtension(c)});case 17:case"end":return b.stop()}},b,null,[[1,13]])}));return function(){return a.apply(this,arguments)}}(),T=function(){var a=_asyncToGenerator(_regeneratorRuntime.mark(function b(a){var c,d,e,f;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return b.next=2,S(a);case 2:if(c=b.sent,d=c.sourceUrl,e=c.sourceType,f={name:(null===a||void 0===a?void 0:a.name)||v,noCrossOrigin:z,width:null===a||void 0===a?void 0:a.width,height:null===a||void 0===a?void 0:a.height,key:null===a||void 0===a?void 0:a.key},!(e===SOURCE_TYPES.IMAGE&&d)){b.next=8;break}return b.abrupt("return",loadImage(d,f));case 8:if(!(e===SOURCE_TYPES.VIDEO&&d)){b.next=10;break}return b.abrupt("return",loadVideo(d,f));case 10:return b.abrupt("return",Promise.reject(m("mediaSourceError")));case 11:case"end":return b.stop()}},b)}));return function(){return a.apply(this,arguments)}}(),U=function(a){return new Promise(function(b){var c=(null===a||void 0===a?void 0:a.src)||a;if(K.current===c||!c&&k||isSameSource(c,k))return void(K.current||b());var d=function(){K.current=null,b()};K.current=c,setTimeout(function(){if(a instanceof HTMLImageElement){if(!a.name&&v&&(a.name=v),!a.complete)return void a.addEventListener("load",function(){N({newSource:a}),d()});N({newSource:a}),d()}else a&&("string"==typeof a||a instanceof Blob||null!==a&&void 0!==a&&a.src)?T((null===a||void 0===a?void 0:a.src)||a,{name:v,noCrossOrigin:z,width:null===a||void 0===a?void 0:a.width,height:null===a||void 0===a?void 0:a.height,key:null===a||void 0===a?void 0:a.key}).then(N)["catch"](function(b){O(a)||P(b)})["finally"](d):O(a)?d():(P(m("invalidImageError")),d())},0)})},V=function(a){L.current&&(a.preventDefault(),a.returnValue="")},W=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:function(){return[]};return j({type:SHOW_LOADER}),Promise.all(a())["catch"](function(){})["finally"](function(){setTimeout(function(){return j({type:HIDE_LOADER})},0)})},X=function(){p&&0<Object.keys(p).length&&j({type:UPDATE_STATE,payload:_objectSpread(_objectSpread({},p),{},{finetunes:finetunesStrsToClasses(null===p||void 0===p?void 0:p.finetunes),filter:filterStrToClass(null===p||void 0===p?void 0:p.filter)})})};useUpdateEffect(function(){if(C&&!isSameSource(C,k)){J.current=!1;var a="undefined"==typeof(null===k||void 0===k?void 0:k.src)&&"undefined"==typeof(null===C||void 0===C?void 0:C.src)&&"string"!=typeof C||((null===C||void 0===C?void 0:C.src)||C)===(null===k||void 0===k?void 0:k.src);a?U(C):W(function(){return[U(C)]}),D&&j({type:RESET,payload:{config:h}})}},[C]),useUpdateEffect(function(){var a=null===p||void 0===p?void 0:p.imgSrc;a&&!isSameSource(a,k)?W(function(){return[U(a).then(X)]}):X()},[p]),useEffect(function(){return W(function(){return[U((null===p||void 0===p?void 0:p.imgSrc)||C)].concat(_toConsumableArray(s?[getBackendTranslations(t,u)]:[]))}),window&&!r&&window.addEventListener("beforeunload",V),function(){window&&!r&&window.removeEventListener("beforeunload",V)}},[]),useEffect(function(){y&&"object"===_typeof(y)&&(y.current=function(a){j({type:UPDATE_STATE,payload:a})})},[y,j]),useEffect(function(){x&&"object"===_typeof(x)&&(x.current=M)},[M]),useEffect(function(){L.current=i},[i]),useEffect(function(){0<Object.keys(l||{}).length&&!Object.keys(l).some(function(a){return!l[a]&&0!==l[a]})&&k&&n&&null!==o&&void 0!==o&&o.loadableQuery&&!J.current&&(j({type:UPDATE_STATE,payload:cloudimageQueryToDesignState(o.loadableQuery,l,k)}),J.current=!0)},[l,k,n,o]),useEffect(function(){var a=!1;return w&&d.current&&"function"===c?H(d.current.parentNode,function(a){var b=a.width,d=a.height;"function"==typeof c&&c(b,d)}):a&&"function"==typeof c&&c(void 0,void 0),function(){w&&d.current&&I(d.current),a=!0}},[w]),useEffect(function(){y&&"object"===_typeof(y)&&(y.current=function(a){j({type:UPDATE_STATE,payload:a})})},[y,j])};export default useLoadMainSource;