react-filerobot-video-editor/lib/components/Layers/LayersBackground.js

React component version of filerobot video editor (FVE).

import _extends from"@babel/runtime/helpers/extends";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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,{useMemo}from"react";import{Image,Rect}from"react-konva";import{useStore}from"../../hooks";var LayersBackground=function(a){var b,c=a.width,d=a.height,e=a.bgX,f=a.bgY,g=a.imageNodeRef,h=a.customFinetuneProps,i=a.customFilters,j=void 0===i?[]:i,k=a.originalSourceId,l=a.customSource,m=useStore(),n=m.originalSource,o=m.finetunes,p=void 0===o?[]:o,q=m.finetunesProps,r=void 0===q?{}:q,s=m.filter,t=void 0===s?null:s,u=m.adjustments,v=void 0===u?{}:u,w=v.isFlippedX,x=v.isFlippedY,y=m.isSaving,z=m.previewBgColor,A=m.previewBgImage,B=m.config,C=void 0===B?{}:B,D=C.previewBgColor,E=C.previewBgImage,F=l||n,G=z||D,H=A||E,I=useMemo(function(){return t?[].concat(_toConsumableArray(p),[t],_toConsumableArray(j)):[].concat(_toConsumableArray(p),_toConsumableArray(j))},[j,p,t]),J=e||c/2,K=f||d/2,L=_objectSpread(_objectSpread({},r),h);return React.createElement(React.Fragment,null,!y&&(G||H)&&React.createElement(Rect,_extends({x:w?c:0,y:x?d:0,fill:G,fillPatternImage:H,fillPatternRepeat:"repeat",width:c,height:d,listening:!1,scaleX:w?-1:1,scaleY:x?-1:1,filters:I,"data-testid":"FIE-layers-preview-background"},L)),F.bgColor&&React.createElement(Rect,_extends({width:c,height:d,offsetX:J,offsetY:K,x:J,y:K,opacity:null!==(b=F.opacity)&&void 0!==b?b:1,listening:!1,fill:F.bgColor,filters:I,"data-testid":"FIE-layers-background-color"},L)),F.src&&React.createElement(Image,_extends({id:k,image:F,width:c,height:d,offsetX:J,offsetY:K,x:J,y:K,listening:!1,filters:I,ref:g,scaleX:w?-1:1,scaleY:x?-1:1,"data-testid":"FIE-layers-image"},L)))};export default LayersBackground;