react-filerobot-video-editor/lib/components/tools/Watermark/Watermark.js

React component version of filerobot video editor (FVE).

import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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,useMemo,useRef,useState}from"react";import Text from"@scaleflex/icons/text";import UploadOutline from"@scaleflex/icons/upload-outline";import{SELECT_ANNOTATION,SET_FEEDBACK,CLEAR_ANNOTATIONS_SELECTIONS}from"../../../actions";import ButtonWithMenu from"../../common/ButtonWithMenu";import TextControls from"../Text/TextOptions/TextControls";import ImageControls from"../Image/ImageControls";import{usePhoneScreen,useSetAnnotation,useStore}from"../../../hooks";import{FEEDBACK_STATUSES,TOOLS_IDS}from"../../../utils/constants";import HiddenUploadInput from"../../common/HiddenUploadInput";import{StyledControlsWrapper,StyledWatermarkWrapper}from"./Watermark.styled";import WatermarksGallery from"./WatermarksGallery";import WatermarkPadding from"./WatermarkPadding";var WATERMARK_IMG_RATIO_FROM_ORIGINAL=.33,WATERMARK_ANNOTATION_ID="watermark",Watermark=function(){var a=useSetAnnotation(),b=useStore(),c=b.annotations,d=b.originalSource,e=b.shownImageDimensions,f=b.selectionsIds,g=b.config,h=b.dispatch,i=b.t,j=b.adjustments.crop,k=void 0===j?{}:j,l=usePhoneScreen(),m=useState(!1),n=_slicedToArray(m,2),o=n[0],p=n[1],q=useRef(),r=g[TOOLS_IDS.WATERMARK],s=useMemo(function(){return c[WATERMARK_ANNOTATION_ID]},[c[WATERMARK_ANNOTATION_ID]]),t=k.width/e.originalSourceInitialScale||d.width,u=k.height/e.originalSourceInitialScale||d.height,v=k.x/e.originalSourceInitialScale||0,w=k.y/e.originalSourceInitialScale||0,x=r.textScalingRatio||WATERMARK_IMG_RATIO_FROM_ORIGINAL,y=r.imageScalingRatio||WATERMARK_IMG_RATIO_FROM_ORIGINAL,z=function(b){var c=b.naturalWidth||b.width,d=b.naturalHeight||b.height,e=u>t?u*y/d:t*y/c,f=_objectSpread(_objectSpread(_objectSpread({},g.annotationsCommon),g[TOOLS_IDS.IMAGE]),{},{scaleX:e,scaleY:e,padding:1,image:b,width:c,height:d,x:v+t/2-c*e/2,y:w+u/2-d*e/2,id:WATERMARK_ANNOTATION_ID,name:TOOLS_IDS.IMAGE,replaceCurrent:!0});a(f)},A=function(b){a(_objectSpread(_objectSpread({},"function"==typeof b?b(s):b),{},{id:WATERMARK_ANNOTATION_ID}))},B=function(a){h({type:SET_FEEDBACK,payload:{feedback:{message:a,status:FEEDBACK_STATUSES.WARNING}}})},C=function(a,b){if(a){p(!0);var c=new Image;c.onload=function(){z(c),b&&URL.revokeObjectURL(a),p(!1)},c.onerror=function(){B(i("mutualizedFailedToLoadImg")),b&&URL.revokeObjectURL(a),p(!1)},c.src=a}};useEffect(function(){s&&(h({type:CLEAR_ANNOTATIONS_SELECTIONS}),h({type:SELECT_ANNOTATION,payload:{annotationId:"watermark"}}))},[s]),useEffect(function(){s&&(0===f.length||f[0].id!==WATERMARK_ANNOTATION_ID)&&h({type:SELECT_ANNOTATION,payload:{annotationId:"watermark"}})},[f]);var D=[(!g.useCloudimage||"function"==typeof r.onUploadWatermarkImgClick)&&{key:"upload-watermark",label:i("uploadWatermark"),icon:UploadOutline,onClick:function(){if("function"==typeof r.onUploadWatermarkImgClick){var a=r.onUploadWatermarkImgClick(C);return void(a instanceof Promise&&a.then(function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},b=a.url,c=a.revokeObjectUrl;return C(b,void 0!==c&&c)}))}q.current&&q.current.click()}},!r.hideTextWatermark&&{key:"add-text-watermark",label:i("addWatermarkAsText"),icon:Text,onClick:function(){var b={height:u*x,width:t*x},c=_objectSpread(_objectSpread(_objectSpread(_objectSpread({},g.annotationsCommon),g[TOOLS_IDS.TEXT]),b),{},{padding:1,x:v+t/2-b.width/2,y:w+u/2-b.height/2,fill:"#000000",id:WATERMARK_ANNOTATION_ID,name:TOOLS_IDS.TEXT,replaceCurrent:!0});a(c)}}],E=function(){return React.createElement(WatermarkPadding,{watermark:s,saveWatermark:A,t:i})};return React.createElement("div",{className:"FIE_watermark-tool-wrapper"},(null===s||void 0===s?void 0:s.name)===TOOLS_IDS.TEXT&&React.createElement(StyledControlsWrapper,{className:"FIE_watermark-options-wrapper"},React.createElement(TextControls,{text:s,saveText:A,t:i},E())),(null===s||void 0===s?void 0:s.name)===TOOLS_IDS.IMAGE&&React.createElement(StyledControlsWrapper,{className:"FIE_watermark-options-wrapper"},React.createElement(ImageControls,{image:s,saveImage:A,t:i},E())),React.createElement(StyledWatermarkWrapper,{className:"FIE_watermark-add-wrapper",noWrap:!0},React.createElement(ButtonWithMenu,{className:"FIE_watermark-add",color:"secondary",label:function(){return l?i("plus"):D[0]?i("addWatermark"):i("addTextWatermark")}(),title:i("addWatermarkTitle"),menuPosition:"top",menuItems:D,menuFromBtn:!0,noMargin:!0}),React.createElement(WatermarksGallery,{loadAndSetWatermarkImg:C,addImgWatermark:z,style:l&&!(!(null!==s&&void 0!==s)||!s.name)?{width:"55%"}:void 0}),React.createElement(HiddenUploadInput,{onChange:o?void 0:function(a){if(a.target.files){var b=a.target.files[0];b.type.startsWith("image/")&&C(URL.createObjectURL(b),!0)}a.target.value=""},disabled:o,ref:q})))};export default Watermark;