react-filerobot-video-editor/lib/components/ImageInfo/index.js

React component version of filerobot video editor (FVE).

import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","showCompareButton"];import React from"react";import Compare from"@scaleflex/icons/compare";import{TOGGLE_ORIGINAL_IMAGE_DISPLAY}from"../../actions";import{usePhoneScreen,useStore}from"../../hooks";import getProperDimensions from"../../utils/getProperDimensions";import isImage from"../../utils/isImage";import{StyledSmallButton,StyledDimensionsLabel,StyledImageOptionsButtons,StyledDimensionsButtons}from"./ImageInfo.styled";var ImageInfo=function(a){var b=a.children,c=a.showCompareButton,d=_objectWithoutProperties(a,_excluded),e=usePhoneScreen(),f=useStore(),g=f.dispatch,h=f.isResetted,i=!(void 0!==h)||h,j=f.originalSource,k=f.sourceType,l=f.resize,m=void 0===l?{}:l,n=f.adjustments,o=n.crop,p=n.rotation,q=void 0===p?0:p,r=f.shownImageDimensions,s=f.config,u=s.showBackButton,v=s.disableResizeAfterRotation,w=f.t,t=function(){g({type:TOGGLE_ORIGINAL_IMAGE_DISPLAY,payload:{isShow:!1}}),document.removeEventListener("mouseup",t),document.removeEventListener("mouseleave",t),document.removeEventListener("touchcancel",t),document.removeEventListener("touchend",t)},x=function(){g({type:TOGGLE_ORIGINAL_IMAGE_DISPLAY,payload:{isShow:!0}}),document.addEventListener("mouseup",t),document.addEventListener("mouseleave",t),document.addEventListener("touchcancel",t),document.addEventListener("touchend",t)},y=j&&getProperDimensions({resize:m,crop:o,shownImageDimensions:r,disableResizeAfterRotation:v,originalSource:j,rotation:q}),z=(!(void 0!==c)||c)&&(null===j||void 0===j?void 0:j.src)&&isImage(k);return React.createElement(StyledImageOptionsButtons,_extends({className:"FIE_image_info","data-testid":"FIE-image-info-wrapper",isPhoneScreen:e},d),React.createElement(StyledDimensionsLabel,{"data-testid":"FIE-image-dimensions-label",title:w("imageDimensionsHoverTitle")},"".concat((null===y||void 0===y?void 0:y.width)||w("width")," \xD7 ").concat((null===y||void 0===y?void 0:y.height)||w("height")," ").concat(w("px"))),(b||z)&&React.createElement(StyledDimensionsButtons,{"data-testid":"FIE-image-dimensions-buttons"},z&&React.createElement(StyledSmallButton,{color:"basic","data-testid":"FIE-compare-button",onMouseDown:i?void 0:x,onTouchStart:i?void 0:x,disabled:i,showBackButton:u,title:w("showImageTitle")},React.createElement(Compare,null)),b))};export default ImageInfo;