From 3ca68631ad2a9186770f4398bd161374bf7750d2 Mon Sep 17 00:00:00 2001
From: Eimi Okuno <Eimi.Okuno@bbc.co.uk>
Date: Fri, 18 Oct 2019 17:28:47 +0100
Subject: [PATCH] Updated the canvas sizing method

---
 .../VideoContextPreview/index.js              |  9 +-
 packages/components/PreviewCanvas/index.js    |  2 -
 .../components/ProgrammeScriptEditor/index.js | 95 +++++++++----------
 .../stories/index.stories.js                  |  1 +
 4 files changed, 47 insertions(+), 60 deletions(-)

diff --git a/packages/components/PreviewCanvas/VideoContextPreview/index.js b/packages/components/PreviewCanvas/VideoContextPreview/index.js
index 1f63793..4be5f00 100644
--- a/packages/components/PreviewCanvas/VideoContextPreview/index.js
+++ b/packages/components/PreviewCanvas/VideoContextPreview/index.js
@@ -50,7 +50,7 @@ const VideoContextPreview = (props) => {
         <canvas
           ref={ props.canvasRef }
           width={ props.width }
-          height={ props.height }
+          height={ (9 / 16) * props.width }
         />
       </Row>
       <Row
@@ -75,16 +75,13 @@ const VideoContextPreview = (props) => {
 
 VideoContextPreview.propTypes = {
   canvasRef: PropTypes.any,
-  height: PropTypes.number,
   playlist: PropTypes.array,
   videoContext: PropTypes.any,
-  width: PropTypes.number
+  width: PropTypes.any
 };
 
 VideoContextPreview.defaultProps = {
-  playlist: [],
-  width : 640,
-  height : 360,
+  playlist: []
 };
 
 export default VideoContextPreview;
diff --git a/packages/components/PreviewCanvas/index.js b/packages/components/PreviewCanvas/index.js
index 95fb278..e44b62f 100644
--- a/packages/components/PreviewCanvas/index.js
+++ b/packages/components/PreviewCanvas/index.js
@@ -9,7 +9,6 @@ const PreviewCanvas = (props) => {
   return (
     <VideoContextPreview
       width={ props.width }
-      height={ props.height }
       canvasRef={ canvasRef }
       playlist={ props.playlist }
     />
@@ -17,7 +16,6 @@ const PreviewCanvas = (props) => {
 };
 
 PreviewCanvas.propTypes = {
-  height: PropTypes.any,
   playlist: PropTypes.array,
   width: PropTypes.any
 };
diff --git a/packages/components/ProgrammeScriptEditor/index.js b/packages/components/ProgrammeScriptEditor/index.js
index d19dc3c..cae3e8b 100644
--- a/packages/components/ProgrammeScriptEditor/index.js
+++ b/packages/components/ProgrammeScriptEditor/index.js
@@ -14,65 +14,56 @@ 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() {
+  Heading = () => {
     return (
-      <>
-        <Container>
-          <Row>
+      <h2
+        title={ `Programme Script Title: ${ this.props.title }` }>
+      </h2>);
+  }
 
-            <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>
+  ProgrammeCard = () => {
+    return (
+      <Card>
+        <Card.Header>
+          <PreviewCanvas width={ 300 } playlist={ this.props.playlist } />
+        </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 }
+            />
 
-                <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>);
+  }
 
-                  </article>
-                </Card.Body>
-              </Card>
-            </Col>
-          </Row>
-        </Container>
-      </>
+  // information around progressbar in the playlist object
+  render() {
+    const heading = this.Heading();
+    const card = this.ProgrammeCard();
+
+    return (
+      <Container>
+        <Row>
+          <Col>
+            {heading}
+            {card}
+          </Col>
+          <Col>
+            {heading}
+            {card}
+          </Col>
+        </Row>
+      </Container>
     );
   }
 }
diff --git a/packages/components/ProgrammeScriptEditor/stories/index.stories.js b/packages/components/ProgrammeScriptEditor/stories/index.stories.js
index 2b36d42..bc2c2c0 100644
--- a/packages/components/ProgrammeScriptEditor/stories/index.stories.js
+++ b/packages/components/ProgrammeScriptEditor/stories/index.stories.js
@@ -50,6 +50,7 @@ const playlist = [
 storiesOf('ProgrammeScriptEditor (not published)', module)
   .add('Default', () =>
     <ProgrammeScriptEditor
+      title={ 'title' }
       playlist={ playlist }
       items={ items }
       handleDelete={ handleDeleteActions }