FIX: adding size properties to children

packages/components/PreviewCanvas/index.js

@@ -7,12 +7,20 @@ const PreviewCanvas = (props) => {
 
   return (
     <VideoContextPreview
+      width={ props.width }
+      height={ props.height }
       canvasRef={ canvasRef }
       playlist={ props.playlist }
     />
   );
 };
 
+PreviewCanvas.propTypes = {
+  height: PropTypes.any,
+  playlist: PropTypes.array,
+  width: PropTypes.any
+};
+
 PreviewCanvas.defaultProps = {
   playlist: []
 };

packages/components/ProgrammeScriptEditor/index.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import Col from 'react-bootstrap/Col';
+import Row from 'react-bootstrap/Row';
+import Card from 'react-bootstrap/Card';
+import Container from 'react-bootstrap/Container';
+import Button from 'react-bootstrap/Button';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faSync,
+} from '@fortawesome/free-solid-svg-icons';
+import ProgrammeScriptContainer from '../ProgrammeScriptContainer';
+import PreviewCanvas from '../PreviewCanvas';
+
+class ProgramScript extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      resetPreview: false,
+      playlist: props.playlist
+    };
+  }
+
+  // information around progressbar in the playlist object
+  render() {
+    return (
+      <>
+        <Container>
+          <Row>
+
+            <Col>
+            </Col>
+            <Col>
+              <h2
+                className={ [ 'text-truncate', 'text-muted' ].join(' ') }
+                title={ `Programme Script Title: ${ this.state.programmeScript ? this.state.programmeScript.title : '' }` }>
+                {this.state.programmeScript ? this.state.programmeScript.title : ''}
+              </h2>
+              <Card>
+                <Card.Header>
+                  { !this.state.resetPreview ?
+                    <PreviewCanvas width="100%" height="100%" playlist={ this.state.playlist } />
+                    : null }
+                </Card.Header>
+
+                <Card.Header>
+                  <Row noGutters>
+                    <Col sm={ 12 } md={ 3 } >
+                      <Button variant="outline-secondary"
+                        onClick={ this.handleUpdatePreview }
+                        title="update preview"
+                      >
+                        <FontAwesomeIcon icon={ faSync } /> Preview
+                      </Button>
+                    </Col>
+                  </Row>
+                </Card.Header>
+
+                <Card.Body>
+                  <article
+                    style={ { height: '60vh', overflow: 'scroll' } }
+                  >
+                    <ProgrammeScriptContainer
+                      items={ this.props.items }
+                      handleReorder={ this.props.handleReorder }
+                      handleDelete={ this.props.handleDelete }
+                      handleEdit={ this.props.handleEdit }
+                    />
+
+                  </article>
+                </Card.Body>
+              </Card>
+            </Col>
+          </Row>
+        </Container>
+      </>
+    );
+  }
+}
+
+export default ProgramScript;

packages/components/ProgrammeScriptEditor/stories/index.stories.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import ProgrammeScriptEditor from '../index.js';
+import PreviewCanvas from '../../PreviewCanvas';
+
+export const handleReorderActions = action('Handle reorder');
+export const handleDeleteActions = action('Handle delete');
+export const handleEditActions = action('Handle edit');
+
+const items = [
+  {
+    type: 'title',
+    text: 'An immense Achievement'
+  },
+  {
+    type: 'paper-cut',
+    id: 1,
+    speaker: 'Mr Loud',
+    words: [ { text:'Greatest day of my life was when I wrote this text.', start: 0, end: 1 } ]
+  },
+  {
+    type: 'note',
+    text: 'Maybe a little bit obnoxious'
+  },
+  {
+    type: 'insert',
+    text: 'Insert New Selection here'
+  },
+  {
+    type: 'paper-cut',
+    id: 2,
+    speaker: 'Mrs Loud',
+    words: [ { text:'Greatest day of my life was when I spoke this text.', start: 0, end: 1 } ]
+  },
+  {
+    type: 'voice-over',
+    text: 'link: wonderful times of the Loud family'
+  },
+];
+
+const playlist = [
+  { type:'video', start:0, sourceStart: 30, duration:10, src:'https://download.ted.com/talks/MorganVague_2018X.mp4' },
+  { type:'video', start:10, sourceStart: 40, duration:10, src:'https://download.ted.com/talks/IvanPoupyrev_2019.mp4' },
+  { type:'video', start:20, sourceStart: 50, duration:10, src:'https://download.ted.com/talks/KateDarling_2018S-950k.mp4' },
+
+];
+
+storiesOf('ProgrammeScriptEditor (not published)', module)
+  .add('Default', () =>
+    <ProgrammeScriptEditor
+      playlist={ playlist }
+      items={ items }
+      handleDelete={ handleDeleteActions }
+      handleEdit={ handleEditActions }
+      handleReorder={ handleReorderActions }
+    />
+  );