96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
import React, { Component } from "react";
|
|
|
|
import Hardware from "./Hardware";
|
|
import Requirement from "./Requirement";
|
|
import BlocklyWindow from "../Blockly/BlocklyWindow";
|
|
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import ReactMarkdown from "react-markdown";
|
|
|
|
class Instruction extends Component {
|
|
render() {
|
|
var step = this.props.step;
|
|
var isHardware = step.hardware && step.hardware.length > 0;
|
|
var areRequirements = step.requirements && step.requirements.length > 0;
|
|
return (
|
|
<div>
|
|
{/* <Typography variant="h4" style={{ marginBottom: "5px" }}>
|
|
{step.headline}
|
|
</Typography> */}
|
|
<Typography style={isHardware ? {} : { marginBottom: "5px" }}>
|
|
<ReactMarkdown
|
|
className={"tutorial"}
|
|
linkTarget={"_blank"}
|
|
skipHtml={false}
|
|
>
|
|
{step.text}
|
|
</ReactMarkdown>
|
|
</Typography>
|
|
{isHardware ? <Hardware picture={step.hardware} /> : null}
|
|
{areRequirements > 0 ? (
|
|
<Requirement requirements={step.requirements} />
|
|
) : null}
|
|
{step.media ? (
|
|
step.media.picture ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
marginBottom: "5px",
|
|
}}
|
|
>
|
|
<img
|
|
src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
|
|
alt=""
|
|
style={{ maxHeight: "40vH", maxWidth: "100%" }}
|
|
/>
|
|
</div>
|
|
) : step.media.youtube ? (
|
|
/*16:9; width: 800px; height: width/16*9=450px*/
|
|
<div style={{ maxWidth: "800px", margin: "auto" }}>
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
height: 0,
|
|
paddingBottom: "calc(100% / 16 * 9)",
|
|
}}
|
|
>
|
|
<iframe
|
|
title={step.media.youtube}
|
|
style={{
|
|
position: "absolute",
|
|
top: "0",
|
|
left: "0",
|
|
width: "100%",
|
|
maxWidth: "800px",
|
|
height: "100%",
|
|
maxHeight: "450px",
|
|
}}
|
|
src={`https://www.youtube.com/embed/${step.media.youtube}`}
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null
|
|
) : null}
|
|
{step.xml ? (
|
|
<Grid container spacing={2} style={{ marginBottom: "5px" }}>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
style={{ display: "flex", justifyContent: "center" }}
|
|
>
|
|
<BlocklyWindow svg blockDisabled initialXml={step.xml} />
|
|
</Grid>
|
|
</Grid>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Instruction;
|