render sketch

This commit is contained in:
ghalestrilo 2020-06-19 15:24:09 -03:00
parent d00506a70e
commit a11bc44634
3 changed files with 16 additions and 4 deletions

View file

@ -29,10 +29,17 @@ class PreviewFrame extends React.Component {
}
componentDidMount() {
console.log(`componentDidMount: ${this.props.isPlaying}`);
window.addEventListener('message', this.handleConsoleEvent);
// TODO: maybe encapsulate this into a function (together with code from componentDidUpdate)
if (this.props.isPlaying && this.props.previewIsRefreshing) {
this.renderSketch();
}
}
componentDidUpdate(prevProps) {
console.log(`componentDidUpdate: ${this.props.isPlaying}`);
// if sketch starts or stops playing, want to rerender
if (this.props.isPlaying !== prevProps.isPlaying) {
this.renderSketch();

View file

@ -1,3 +1,4 @@
/* eslint-disable */
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@ -66,7 +67,7 @@ const IDEViewMobile = (props) => {
<Link
to="/mobile/preview"
onClick={() => {
alert('starting sketch');
// alert('starting sketch');
startSketch();
}}
>

View file

@ -13,6 +13,8 @@ import * as PreferencesActions from '../IDE/actions/preferences';
import * as ConsoleActions from '../IDE/actions/console';
import * as FilesActions from '../IDE/actions/files';
import FullView from '../IDE/pages/FullView';
import { getHTMLFile } from '../IDE/reducers/files';
@ -71,15 +73,17 @@ const MobileSketchView = (props) => {
<Content>
<h1>Hello</h1>
<section className="preview-frame-holder">
<PreviewFrame
htmlFile={htmlFile}
files={files}
fullView
head={
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
}
content={selectedFile.content}
isPlaying={ide.isPlaying}
fullView
isPlaying
isAccessibleOutputPlaying={ide.isAccessibleOutputPlaying}
previewIsRefreshing={ide.previewIsRefreshing}