Fix 91 unnecessary resizing (#92)

* 1.0.8-alpha.3

* had to change name of repo

* swap order of env checks around so that can use the local server API for development

rather then just electron

* updated dependencies

* set the programme script size

for preview canvas so that it resizes if it is smaller then 350 in width and otherwise stays at fixed size

* adjusted resizing of audio and video preview for transcript

fixed the height, so that the view stays responsive, seems to be proportionate to preview canvas as well

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@bbc/aes31-adl-composer": "^1.0.1",
-    "@bbc/digital-paper-edit-react-components": "^1.2.13",
+    "@bbc/digital-paper-edit-react-components": "^1.3.2",
     "@bbc/fcpx-xml-composer": "^1.0.0",
     "@bbc/react-transcript-editor": "^1.4.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
@@ -21,16 +21,15 @@
     "express": "^4.17.1",
     "node-sass": "^4.13.0",
     "randomcolor": "^0.5.4",
-    "react": "^16.10.2",
     "react-bootstrap": "^1.0.0-beta.14",
     "react-color": "^2.17.1",
     "react-dom": "^16.10.2",
     "react-fetch-progressbar": "^1.0.0",
     "react-router-bootstrap": "^0.24.4",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.0.1",
+    "react-scripts": "^3.3.0",
     "react-select": "^2.4.3",
     "react-sortable-hoc": "^1.9.1",
+    "react-transcript-editor": "^1.3.1-alpha.3",
     "videocontext": "^0.53.1"
   },
   "author": "Pietro Passarelli CC0 BBC 2019",
@@ -77,6 +76,8 @@
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^2.1.2",
     "gh-pages": "^2.0.1",
+    "react": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "speculate": "^2.0.0"
   },
   "spec": {

src/Components/PaperEditor/ProgrammeScript/index.js

@@ -54,8 +54,11 @@ class ProgrammeScript extends Component {
   }
 
   updateVideoContextWidth = () => {
+    const maxScreenSizeForResponsivness = 350;
+    const newOffset = this.card.offsetWidth - 10;
+    const newOffsetAdjustedForLargeScreen = newOffset >= maxScreenSizeForResponsivness? maxScreenSizeForResponsivness : newOffset;
     this.setState({
-      width: this.card.offsetWidth - 10
+      width:newOffsetAdjustedForLargeScreen
     });
   }
 

src/Components/PaperEditor/Transcripts/Paragraphs/Paragraph.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import { shortTimecode } from '@bbc/react-transcript-editor/timecodeConverter';
+import { shortTimecode } from 'react-transcript-editor/timecodeConverter';
 import styles from './index.module.css';
 
 /**

src/Components/PaperEditor/Transcripts/Paragraphs/group-words-by-speakers.js

@@ -1,5 +1,5 @@
 /**
- * TODO: remove this and export from @bbc/react-transcript-editor digital-paper-edit STT import draftJs converter
+ * TODO: remove this and export from react-transcript-editor digital-paper-edit STT import draftJs converter
 
  edge cases
 - more segments then words - not an issue if you start by matching words with segment

src/Components/PaperEditor/Transcripts/Transcript.js

@@ -334,6 +334,7 @@ class Transcript extends Component {
             onTimeUpdate={ (e) => {this.setState({ currentTime: e.target.currentTime });} }
             style={ {
               width: '100%',
+              height: '200px',
               backgroundColor: 'black'
             } }
             controls/>
@@ -347,7 +348,9 @@ class Transcript extends Component {
             ref={ this.videoRef }
             onTimeUpdate={ (e) => {this.setState({ currentTime: e.target.currentTime });} }
             style={ {
+              marginTop: '0',
               width: '100%',
+              height: '200px',
               backgroundColor: 'black'
             } }
             controls/>

src/Components/Workspace/Transcripts/TranscriptEditor.js

@@ -52,9 +52,9 @@ class TranscriptEditor extends Component {
     alert('save to server');
 
     // TODO: decide how to deal with transcript corrections
-    // exporting digitalpaperedit in @bbc/react-transcript-editor@latest doesn't give you
+    // exporting digitalpaperedit in react-transcript-editor@latest doesn't give you
     // corrected text with timecodes, only "original" uncorrected text even if transcript might
-    // have been corrected, because of outstandin PR in bbc/react-transcript-editor
+    // have been corrected, because of outstandin PR in react-transcript-editor
     // https://github.com/bbc/react-transcript-editor/pull/144
     // which should be addressed after https://github.com/bbc/react-transcript-editor/pull/160
     //

src/Util/which-js-env/index.js

@@ -3,9 +3,6 @@
  * @returns - 'browser', 'electron', 'cep'. where cep stands for adobe CEP panel
  */
 function whichJsEnv() {
-  if (window.process.versions.electron !== undefined) {
-    return 'electron';
-  }
   // Is browser Eg client side app or locally testing (Node)
   if (
     window.process === undefined ||
@@ -18,6 +15,10 @@ function whichJsEnv() {
     return 'browser';
   }
 
+  if (window.process.versions.electron !== undefined) {
+    return 'electron';
+  }
+
   if (window.process.versions.cep !== undefined) {
     //   console.debug('In Adobe CEP Environment');
     //   console.info('In Chromium v: ', window.process.versions.chromium);