import * as React from 'react' ; import { connect } from 'react-redux' ; import classnames from 'classnames' ; import { Process , AppProcessesState , setHeighestZIndex } from '../../../store/AppProcessesStore' ; import { Rnd } from 'react-rnd' ; import useMedia from '../../../services/hooks/useMedia' ; import AppTitleBar from './AppTitleBar' ; import resolveUrl from '../../../services/micro/resolveUrl' ; import AppTerminal from '../AppTerminal' ; import Explorer from '../../../apps/Explorer' ; const styles = require ( './AppWindow.module.scss' ) ; const titleBarStyles = require ( './AppTitleBar.module.scss' ) ; interface Props { process : Process ; appProcessesState : AppProcessesState ; dispatch : Function ; } function AppWindow ( props ) { const { process } = props ; const [ snapState ] = React . useState ( { half : false , full : false , } ) ; const isDesktop = useMedia ( '(min-width: 960px)' ) ; const [ windowZIndex , setWindowZIndex ] = React . useState ( 0 ) ; const [ isDragging , setIsDragging ] = React . useState ( false ) ; function handleDragStart ( ) { handleWindowClick ( ) ; setIsDragging ( true ) ; } function handleDragStop ( ) { setIsDragging ( false ) ; } function handleWindowClick ( ) { if ( windowZIndex < props . appProcessesState . heighestZIndex ) { const newHeighestZIndex = props . appProcessesState . heighestZIndex + 1 ; setWindowZIndex ( newHeighestZIndex ) ; props . dispatch ( setHeighestZIndex ( newHeighestZIndex ) ) ; } } const windowClassNames = classnames ( styles . window , { [ styles . halfSnapped ] : snapState . half , [ styles . fullSnapped ] : snapState . full , } ) ; const rndClassNames = classnames ( styles . rnd , { [ styles . rndMobile ] : ! isDesktop , } ) ; const appBodyClassNames = classnames ( styles . appBody , { [ styles . dragging ] : isDragging , } ) ; const mainUrl = resolveUrl ( props . process . app . manifest_url , props . process . app . start_url ) ; return ( < Rnd default = { { x : 0 , y : 50 , width : 900 , height : 600 , } } minWidth = { 300 } minHeight = { 300 } dragHandleClassName = { titleBarStyles . appBar } bounds = 'parent' className = { rndClassNames } style = { { zIndex : windowZIndex } } onDragStart = { handleDragStart } onDragStop = { handleDragStop } disableDragging = { ! isDesktop } enableResizing = { { bottom : isDesktop , bottomLeft : isDesktop , bottomRight : isDesktop , left : isDesktop , right : isDesktop , top : isDesktop , topLeft : isDesktop , topRight : isDesktop , } } > < div className = { windowClassNames } onClick = { handleWindowClick } style = { { backgroundColor : props . process . app . background_color } } > < AppTitleBar process = { props . process } /> < div className = { appBodyClassNames } > { process . app . id === 'FileExplorer' && < Explorer />} { process . app . playos && < > { process . app . playos . isWasm && process . app . playos . showTerminal && < > < AppTerminal /> < />} { ! process . app . playos . isWasm && < > < iframe title = { process . app . name } src = { mainUrl } className = { styles . iframe } onFocus = { ( ) => console . log ( 'Iframe' ) } > Content could not be loaded < /iframe> < />} < />} < /div> < /div> < /Rnd>); } const mapStateToProps = ( state ) => { return { appProcessesState : state . AppProcessesStore , } ; } ; export default connect ( mapStateToProps ) ( AppWindow ) ;