2020-06-19 20:55:37 +02:00
|
|
|
/* eslint-disable */
|
2020-06-19 22:50:21 +02:00
|
|
|
import React, { useEffect } from 'react';
|
2020-06-18 21:29:46 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2020-06-18 20:49:31 +02:00
|
|
|
import { Link } from 'react-router';
|
2020-06-19 02:08:53 +02:00
|
|
|
import { bindActionCreators } from 'redux';
|
2020-06-18 21:29:46 +02:00
|
|
|
import { connect } from 'react-redux';
|
2020-06-18 20:49:31 +02:00
|
|
|
import styled from 'styled-components';
|
2020-06-18 20:39:55 +02:00
|
|
|
import Header from '../../components/mobile/Header';
|
2020-06-18 21:29:46 +02:00
|
|
|
import PreviewFrame from '../IDE/components/PreviewFrame';
|
2020-06-18 20:39:55 +02:00
|
|
|
import Screen from '../../components/mobile/MobileScreen';
|
2020-06-19 02:08:53 +02:00
|
|
|
import * as ProjectActions from '../IDE/actions/project';
|
2020-06-19 03:00:24 +02:00
|
|
|
import * as IDEActions from '../IDE/actions/ide';
|
2020-06-19 03:52:25 +02:00
|
|
|
import * as PreferencesActions from '../IDE/actions/preferences';
|
|
|
|
import * as ConsoleActions from '../IDE/actions/console';
|
|
|
|
import * as FilesActions from '../IDE/actions/files';
|
2020-06-19 03:00:24 +02:00
|
|
|
|
2020-06-19 03:52:25 +02:00
|
|
|
import { getHTMLFile } from '../IDE/reducers/files';
|
2020-06-18 21:01:13 +02:00
|
|
|
|
2020-06-19 02:08:53 +02:00
|
|
|
|
2020-06-19 03:52:25 +02:00
|
|
|
import { ExitIcon } from '../../common/icons';
|
2020-06-18 21:01:13 +02:00
|
|
|
import { remSize } from '../../theme';
|
|
|
|
|
|
|
|
|
|
|
|
const Content = styled.div`
|
|
|
|
z-index: 0;
|
2020-06-19 20:55:37 +02:00
|
|
|
margin-top: ${remSize(68)};
|
2020-06-18 21:01:13 +02:00
|
|
|
`;
|
2020-06-18 20:49:31 +02:00
|
|
|
|
|
|
|
const IconLinkWrapper = styled(Link)`
|
|
|
|
width: 2rem;
|
|
|
|
margin-right: 1.25rem;
|
|
|
|
margin-left: none;
|
|
|
|
`;
|
2020-06-18 20:39:55 +02:00
|
|
|
|
|
|
|
const MobileSketchView = (props) => {
|
2020-06-18 21:29:46 +02:00
|
|
|
// TODO: useSelector requires react-redux ^7.1.0
|
|
|
|
// const htmlFile = useSelector(state => getHTMLFile(state.files));
|
|
|
|
// const jsFiles = useSelector(state => getJSFiles(state.files));
|
|
|
|
// const cssFiles = useSelector(state => getCSSFiles(state.files));
|
|
|
|
// const files = useSelector(state => state.files);
|
|
|
|
|
|
|
|
const {
|
2020-06-19 20:55:37 +02:00
|
|
|
htmlFile, files, selectedFile, projectName
|
2020-06-18 21:29:46 +02:00
|
|
|
} = props;
|
|
|
|
|
2020-06-19 03:00:24 +02:00
|
|
|
// Actions
|
2020-06-19 03:52:25 +02:00
|
|
|
const {
|
|
|
|
setTextOutput, setGridOutput, setSoundOutput,
|
|
|
|
endSketchRefresh, stopSketch,
|
|
|
|
dispatchConsoleEvent, expandConsole, clearConsole,
|
|
|
|
setBlobUrl,
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const { preferences, ide } = props;
|
2020-06-19 03:00:24 +02:00
|
|
|
|
2020-06-19 22:50:21 +02:00
|
|
|
useEffect(() => {
|
2020-06-19 03:00:24 +02:00
|
|
|
// console.log(params);
|
|
|
|
// getProject(params.project_id, params.username);
|
2020-06-19 22:50:21 +02:00
|
|
|
});
|
2020-06-19 02:08:53 +02:00
|
|
|
|
2020-06-18 20:39:55 +02:00
|
|
|
return (
|
2020-06-23 20:54:09 +02:00
|
|
|
<Screen fullscreen>
|
2020-06-18 20:39:55 +02:00
|
|
|
<Header>
|
2020-06-18 20:49:31 +02:00
|
|
|
<IconLinkWrapper to="/mobile" aria-label="Return to original editor">
|
|
|
|
<ExitIcon viewBox="0 0 16 16" />
|
|
|
|
</IconLinkWrapper>
|
2020-06-18 20:39:55 +02:00
|
|
|
<div>
|
2020-06-19 20:55:37 +02:00
|
|
|
<h2>{projectName}</h2>
|
2020-06-19 03:00:24 +02:00
|
|
|
<h3><br /></h3>
|
2020-06-18 20:39:55 +02:00
|
|
|
</div>
|
|
|
|
</Header>
|
2020-06-18 21:01:13 +02:00
|
|
|
<Content>
|
2020-06-19 20:55:37 +02:00
|
|
|
<PreviewFrame
|
|
|
|
htmlFile={htmlFile}
|
|
|
|
files={files}
|
|
|
|
head={<link type="text/css" rel="stylesheet" href="/preview-styles.css" />}
|
|
|
|
|
|
|
|
content={selectedFile.content}
|
|
|
|
|
|
|
|
isPlaying
|
2020-06-19 22:50:21 +02:00
|
|
|
forceFullWidth
|
2020-06-19 20:55:37 +02:00
|
|
|
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
|
|
|
|
previewIsRefreshing={ide.previewIsRefreshing}
|
|
|
|
|
|
|
|
textOutput={preferences.textOutput}
|
|
|
|
gridOutput={preferences.gridOutput}
|
|
|
|
soundOutput={preferences.soundOutput}
|
|
|
|
autorefresh={preferences.autorefresh}
|
|
|
|
|
|
|
|
setTextOutput={setTextOutput}
|
|
|
|
setGridOutput={setGridOutput}
|
|
|
|
setSoundOutput={setSoundOutput}
|
|
|
|
dispatchConsoleEvent={dispatchConsoleEvent}
|
|
|
|
endSketchRefresh={endSketchRefresh}
|
|
|
|
stopSketch={stopSketch}
|
|
|
|
setBlobUrl={setBlobUrl}
|
|
|
|
expandConsole={expandConsole}
|
|
|
|
clearConsole={clearConsole}
|
|
|
|
/>
|
2020-06-18 21:01:13 +02:00
|
|
|
</Content>
|
2020-06-18 20:39:55 +02:00
|
|
|
</Screen>);
|
|
|
|
};
|
2020-06-18 21:01:13 +02:00
|
|
|
|
2020-06-18 21:29:46 +02:00
|
|
|
MobileSketchView.propTypes = {
|
2020-06-19 02:08:53 +02:00
|
|
|
params: PropTypes.shape({
|
|
|
|
project_id: PropTypes.string,
|
|
|
|
username: PropTypes.string
|
|
|
|
}).isRequired,
|
2020-06-19 03:52:25 +02:00
|
|
|
|
2020-06-18 21:29:46 +02:00
|
|
|
htmlFile: PropTypes.shape({
|
|
|
|
id: PropTypes.string.isRequired,
|
|
|
|
content: PropTypes.string.isRequired,
|
|
|
|
name: PropTypes.string.isRequired
|
|
|
|
}).isRequired,
|
2020-06-19 03:52:25 +02:00
|
|
|
files: PropTypes.arrayOf(PropTypes.shape({
|
2020-06-18 21:29:46 +02:00
|
|
|
id: PropTypes.string.isRequired,
|
|
|
|
content: PropTypes.string.isRequired,
|
|
|
|
name: PropTypes.string.isRequired
|
|
|
|
})).isRequired,
|
2020-06-19 03:52:25 +02:00
|
|
|
|
|
|
|
selectedFile: PropTypes.shape({
|
2020-06-18 21:29:46 +02:00
|
|
|
id: PropTypes.string.isRequired,
|
|
|
|
content: PropTypes.string.isRequired,
|
|
|
|
name: PropTypes.string.isRequired
|
2020-06-19 03:52:25 +02:00
|
|
|
}).isRequired,
|
|
|
|
|
|
|
|
preferences: PropTypes.shape({
|
|
|
|
fontSize: PropTypes.number.isRequired,
|
|
|
|
autosave: PropTypes.bool.isRequired,
|
|
|
|
linewrap: PropTypes.bool.isRequired,
|
|
|
|
lineNumbers: PropTypes.bool.isRequired,
|
|
|
|
lintWarning: PropTypes.bool.isRequired,
|
|
|
|
textOutput: PropTypes.bool.isRequired,
|
|
|
|
gridOutput: PropTypes.bool.isRequired,
|
|
|
|
soundOutput: PropTypes.bool.isRequired,
|
|
|
|
theme: PropTypes.string.isRequired,
|
|
|
|
autorefresh: PropTypes.bool.isRequired
|
|
|
|
}).isRequired,
|
|
|
|
|
|
|
|
ide: PropTypes.shape({
|
|
|
|
isPlaying: PropTypes.bool.isRequired,
|
|
|
|
isAccessibleOutputPlaying: PropTypes.bool.isRequired,
|
|
|
|
consoleEvent: PropTypes.array,
|
|
|
|
modalIsVisible: PropTypes.bool.isRequired,
|
|
|
|
sidebarIsExpanded: PropTypes.bool.isRequired,
|
|
|
|
consoleIsExpanded: PropTypes.bool.isRequired,
|
|
|
|
preferencesIsVisible: PropTypes.bool.isRequired,
|
|
|
|
projectOptionsVisible: PropTypes.bool.isRequired,
|
|
|
|
newFolderModalVisible: PropTypes.bool.isRequired,
|
|
|
|
shareModalVisible: PropTypes.bool.isRequired,
|
|
|
|
shareModalProjectId: PropTypes.string.isRequired,
|
|
|
|
shareModalProjectName: PropTypes.string.isRequired,
|
|
|
|
shareModalProjectUsername: PropTypes.string.isRequired,
|
|
|
|
editorOptionsVisible: PropTypes.bool.isRequired,
|
|
|
|
keyboardShortcutVisible: PropTypes.bool.isRequired,
|
|
|
|
unsavedChanges: PropTypes.bool.isRequired,
|
|
|
|
infiniteLoop: PropTypes.bool.isRequired,
|
|
|
|
previewIsRefreshing: PropTypes.bool.isRequired,
|
|
|
|
infiniteLoopMessage: PropTypes.string.isRequired,
|
|
|
|
projectSavedTime: PropTypes.string,
|
|
|
|
previousPath: PropTypes.string.isRequired,
|
|
|
|
justOpenedProject: PropTypes.bool.isRequired,
|
|
|
|
errorType: PropTypes.string,
|
|
|
|
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
|
|
|
|
uploadFileModalVisible: PropTypes.bool.isRequired
|
|
|
|
}).isRequired,
|
|
|
|
|
2020-06-19 21:30:39 +02:00
|
|
|
projectName: PropTypes.string.isRequired,
|
2020-06-19 20:55:37 +02:00
|
|
|
|
2020-06-19 03:52:25 +02:00
|
|
|
setTextOutput: PropTypes.func.isRequired,
|
|
|
|
setGridOutput: PropTypes.func.isRequired,
|
|
|
|
setSoundOutput: PropTypes.func.isRequired,
|
|
|
|
dispatchConsoleEvent: PropTypes.func.isRequired,
|
|
|
|
endSketchRefresh: PropTypes.func.isRequired,
|
|
|
|
stopSketch: PropTypes.func.isRequired,
|
|
|
|
setBlobUrl: PropTypes.func.isRequired,
|
|
|
|
expandConsole: PropTypes.func.isRequired,
|
|
|
|
clearConsole: PropTypes.func.isRequired,
|
2020-06-18 21:29:46 +02:00
|
|
|
};
|
2020-06-18 21:01:13 +02:00
|
|
|
|
2020-06-18 21:29:46 +02:00
|
|
|
function mapStateToProps(state) {
|
|
|
|
return {
|
|
|
|
htmlFile: getHTMLFile(state.files),
|
2020-06-19 20:55:37 +02:00
|
|
|
projectName: state.project.name,
|
2020-06-19 03:52:25 +02:00
|
|
|
files: state.files,
|
|
|
|
ide: state.ide,
|
|
|
|
preferences: state.preferences,
|
|
|
|
selectedFile: state.files.find(file => file.isSelectedFile) ||
|
|
|
|
state.files.find(file => file.name === 'sketch.js') ||
|
|
|
|
state.files.find(file => file.name !== 'root'),
|
2020-06-18 21:29:46 +02:00
|
|
|
};
|
|
|
|
}
|
2020-06-18 21:01:13 +02:00
|
|
|
|
2020-06-19 02:08:53 +02:00
|
|
|
function mapDispatchToProps(dispatch) {
|
2020-06-19 03:52:25 +02:00
|
|
|
return bindActionCreators({
|
|
|
|
...ProjectActions, ...IDEActions, ...PreferencesActions, ...ConsoleActions, ...FilesActions
|
|
|
|
}, dispatch);
|
2020-06-19 02:08:53 +02:00
|
|
|
}
|
2020-06-18 21:01:13 +02:00
|
|
|
|
2020-06-19 02:08:53 +02:00
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(MobileSketchView);
|