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

React component version of filerobot video editor (FVE).

import _extends from"@babel/runtime/helpers/extends";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{memo,useState,useRef}from"react";import MainCanvas from"../MainCanvas";import{ROOT_CONTAINER_CLASS_NAME}from"../../utils/constants";import Topbar from"../Topbar";import ToolsBar from"../ToolsBar";import{usePhoneScreen,useStore,useTabletScreen}from"../../hooks";import{TabsDrawer,TabsNavbar}from"../Tabs";import{StyledAppWrapper,StyledMainContent,StyledCanvasAndTools}from"./App.styled";var canvasStyle={padding:16,height:"calc(100% - 112px - 16px)",flexGrow:1},App=function(a){var b=useStore(),c=b.config,d=b.feedback,e=c.showCanvasOnly,f=useState({width:void 0,height:void 0}),g=_slicedToArray(f,2),h=g[0],i=g[1],j=usePhoneScreen(),k=useTabletScreen(),l=useRef(null),m=0===d.duration;return React.createElement(StyledAppWrapper,{className:ROOT_CONTAINER_CLASS_NAME,"data-phone":j,showTabsDrawer:k,ref:l,$size:h,"data-testid":"FIE-root"},!e&&React.createElement(React.Fragment,null,k&&!m&&React.createElement(TabsDrawer,null),React.createElement(Topbar,null)),React.createElement(StyledMainContent,{className:"FIE_main-container"},!e&&!k&&!m&&React.createElement(TabsNavbar,null),React.createElement(StyledCanvasAndTools,{className:"FIE_editor-content",showTabsDrawer:k},React.createElement(MainCanvas,_extends({onPluginRootResize:i,pluginRootRef:l,style:canvasStyle},a)),null===a||void 0===a?void 0:a.children,!e&&!m&&React.createElement(ToolsBar,null))))};export default memo(App);