Updating from BBC repo

.eslintrc

@@ -10,7 +10,8 @@
   ],
   "env": {
     "browser": true,
-    "jest": true
+    "jest": true,
+    "node": true,
   },
   "rules": {
     "prefer-const": 1,
@@ -43,7 +44,7 @@
     "no-param-reassign": [ 1 ],
     "no-shadow": [ 1 ],
     "camelcase": [ 1 ],
-    "no-underscore-dangle" : [0, "always"],
+    "no-underscore-dangle": [0, "always"],
     "keyword-spacing": ["error", { "before": true, "after": true }],
     "key-spacing": ["error", { "afterColon": true }],
     "newline-before-return": "error",

.storybook/config.js

@@ -17,7 +17,8 @@ addDecorator(withA11y);
 
 addParameters({
   options: {
-    panelPosition: 'right',
+    // showPanel: false,
+    panelPosition: 'bottom',
     sidebarAnimations: true
   },
 });

.storybook/styles/main.scss

@@ -1,4 +1,13 @@
-body * {
+body {
   font-family: ReithSerif, Fallback, sans-serif;
-  // font-family: ReithSans, Helvetica, sans-serif !important;
+
+}
+
+p, span {
+  font-family: ReithSans, Helvetica, sans-serif;
+
+}
+
+h1, h2, h3, h4, h5, h6, label * {
+  font-family: ReithSerif;
 }

.storybook/webpack.config.js

@@ -6,36 +6,28 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.module.css$/,
+        test: /\.module.(sa|sc|c)ss$/,
         use: [
+          "style-loader",
           {
-            loader: "style-loader"
+            loader: "css-loader",
+            options: { modules: true }
           },
           {
-            loader: "css-loader",
-            options: {
-              modules: true
-            }
+            loader: "sass-loader",
+            options: { sourcemap: true }
           }
         ]
       },
       {
-        test: /\.scss$/,
+        test: /\.s(a|c)ss$/,
+        exclude: /\.module.(s(a|c)ss)$/,
         use: [
-          {
-            loader: "style-loader"
-          },
-          {
-            loader: "css-loader",
-            options: {
-              sourceMap: true
-            }
-          },
+          "style-loader",
+          "css-loader",
           {
             loader: "sass-loader",
-            options: {
-              sourcemap: true
-            }
+            options: { sourcemap: true }
           }
         ]
       }

README.md

@@ -12,7 +12,7 @@ _--> Work in progress <--_
 
 <!-- _Screenshot of UI - optional_ -->
 
-- [You can see a demo by clicking here ](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default) (and then click the `load demo` button)
+- [You can see a demo by clicking here](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default) (and then click the `load demo` button)
 - [And you can see a list of features here](./docs/features-list.md).
 
 ## Development env
@@ -56,35 +56,33 @@ npm install @bbc/react-transcript-editor
 ```
 
 ```js
-import  TranscriptEditor  from '@bbc/react-transcript-editor';
+import TranscriptEditor from "@bbc/react-transcript-editor";
 ```
 
 ```js
-  <TranscriptEditor
-     transcriptData={ someJsonFile }
-     mediaUrl={'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'}
-     isEditable={true}
-     spellCheck={false}
-     sttJsonType={ 'bbckaldi' } 
-     handleAnalyticsEvents={ this.handleAnalyticsEvents } 
-     fileName={'ted-talk.mp4'}
-     title={'Ted Talk'}
-     ref={ this.transcriptEditorRef }
-   />
+<TranscriptEditor
+  transcriptData={someJsonFile}
+  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
+  isEditable={true}
+  spellCheck={false}
+  sttJsonType={"bbckaldi"}
+  handleAnalyticsEvents={this.handleAnalyticsEvents}
+  fileName={"ted-talk.mp4"}
+  title={"Ted Talk"}
+  ref={this.transcriptEditorRef}
+/>
 ```
 
-
-| Attributes       | Description     | required     | type     |
-| :------------- | :---------- | :-----------: | :-----------: |
-|  transcriptData | Transcript json  | yes    | Json    |
-| mediaUrl  | string url to media file - audio or video | yes | String    |
-| isEditable   | set to true if you want to be able to edit the text |  no | Boolean    |
-|spellCheck  | set to true if you want the browser to spell check this transcript | no  | Boolean  |
-| handleAnalyticsEvents  | if you want to collect analytics events. | no | Function   |
-| fileName  |used for saving and retrieving local storage blob files | no | String   |
-| title  | defaults to empty string | no | String    |
-| ref  | if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db.| no | React ref    |
-
+| Attributes            | Description                                                                                                             | required |   type    |
+| :-------------------- | :---------------------------------------------------------------------------------------------------------------------- | :------: | :-------: |
+| transcriptData        | Transcript json                                                                                                         |   yes    |   Json    |
+| mediaUrl              | string url to media file - audio or video                                                                               |   yes    |  String   |
+| isEditable            | set to true if you want to be able to edit the text                                                                     |    no    |  Boolean  |
+| spellCheck            | set to true if you want the browser to spell check this transcript                                                      |    no    |  Boolean  |
+| handleAnalyticsEvents | if you want to collect analytics events.                                                                                |    no    | Function  |
+| fileName              | used for saving and retrieving local storage blob files                                                                 |    no    |  String   |
+| title                 | defaults to empty string                                                                                                |    no    |  String   |
+| ref                   | if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db. |    no    | React ref |
 
 See [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.
 
@@ -119,10 +117,11 @@ You can also import some of the underlying React components directly.
 To import the components you can do as follows
 
 ```js
-import TimedTextEditor from '@bbc/react-transcript-editor/TimedTextEditor';
+import TimedTextEditor from "@bbc/react-transcript-editor/TimedTextEditor";
 ```
+
 ```js
-import { TimedTextEditor } from '@bbc/react-transcript-editor';
+import { TimedTextEditor } from "@bbc/react-transcript-editor";
 ```
 
 However if you are not using `TranscriptEditor` it is recommended to follow the second option and import individual components like: `@bbc/react-transcript-editor/TimedTextEditor` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client. (Similarly to how [`react-bootstrap`](https://react-bootstrap.github.io/getting-started/introduction) works)
@@ -132,23 +131,31 @@ See [the storybook](https://bbc.github.io/react-transcript-editor) for each comp
 You can also use this node modules as standalone
 
 ```js
-import exportAdapter from '@bbc/react-transcript-editor/exportAdapter'
+import exportAdapter from "@bbc/react-transcript-editor/exportAdapter";
 ```
+
 Converts from draftJs json format to other formats
 
 ```js
-import  sttJsonAdapter from '@bbc/react-transcript-editor/sttJsonAdapter'
+import sttJsonAdapter from "@bbc/react-transcript-editor/sttJsonAdapter";
 ```
+
 Converts various stt json formats to draftJs
 
 ```js
-import { secondsToTimecode, timecodeToSeconds, shortTimecode} from '@bbc/react-transcript-editor/timecodeConverter'
+import {
+  secondsToTimecode,
+  timecodeToSeconds,
+  shortTimecode
+} from "@bbc/react-transcript-editor/timecodeConverter";
 ```
+
 some modules to convert to and from timecodes
 
 ## System Architecture
 
 <!-- _High level overview of system architecture_ -->
+
 - uses [`storybook`](https://storybook.js.org) with the setup as [explained in their docs](https://storybook.js.org/docs/guides/guide-react/) to develop this React.
 - This uses [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
 - [`.storybook/webpack.config.js](./.storybook/webpack.config.js) enanches the storybook webpack config to add support for css modules.
@@ -187,14 +194,13 @@ npm run build:component
 
 - **Demo** can be viewed at [https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default)
 
-
 http://localhost:6006
 
-
 <!-- https://github.com/gitname/react-gh-pages
 -->
 
 ## Build - storybook
+
 To build the storybook as a static site
 
 ```
@@ -226,17 +232,18 @@ npm run build:storybook:serve
 ```
 
 ## Tests
+
 <!-- _How to carry out tests_ -->
 
 Test coverage using [`jest`](https://jestjs.io/), to run tests
 
-```
+```sh
 npm run test
 ```
 
 During development you can use
 
-```
+```sh
 npm run test:watch
 ```
 
@@ -263,7 +270,9 @@ This runs `npm run build:component` and `npm publish --access public` under the
 See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.
 
 ## Licence
+
 <!-- mention MIT Licence -->
+
 See [LICENCE](./LICENCE.md)
 
 ## Legal Disclaimer

demo/app.js

@@ -6,11 +6,11 @@ import ExportFormatSelect from './select-export-format';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
-import demoTranscript from './sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json';
-const demoMediaUrl = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4';
-const demoTitle = 'Ted Talk - Kate Darling';
+import DEMO_TRANSCRIPT from './sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json';
+const DEMO_MEDIA_URL = 'https://download.ted.com/talks/KateDarling_2018S-950k.mp4';
+const DEMO_TITLE = 'TED Talk | Kate Darling - Why we have an emotional connection to robots';
 
-import style from './index.module.css';
+import style from './index.module.scss';
 
 class App extends React.Component {
   constructor(props) {
@@ -32,9 +32,9 @@ class App extends React.Component {
 
   loadDemo = () => {
     this.setState({
-      transcriptData: demoTranscript,
-      mediaUrl: demoMediaUrl,
-      title: demoTitle,
+      transcriptData: DEMO_TRANSCRIPT,
+      mediaUrl: DEMO_MEDIA_URL,
+      title: DEMO_TITLE,
       sttType: 'bbckaldi'
     });
   }
@@ -48,7 +48,7 @@ class App extends React.Component {
     if (canPlay) {
       const fileURL = URL.createObjectURL(file);
       this.setState({
-        // transcriptData: demoTranscript,
+        // transcriptData: DEMO_TRANSCRIPT,
         mediaUrl: fileURL,
         fileName: file.name
       });
@@ -61,7 +61,7 @@ class App extends React.Component {
     const fileURL = prompt("Paste the URL you'd like to use here:");
 
     this.setState({
-      // transcriptData: demoTranscript,
+      // transcriptData: DEMO_TRANSCRIPT,
       mediaUrl: fileURL
     });
   }
@@ -116,7 +116,9 @@ class App extends React.Component {
     if (ext === 'json') {
       tmpData = JSON.stringify(data, null, 2);
     }
-    this.download(tmpData, `${ this.state.mediaUrl }.${ ext }`);
+    if (ext !== 'docx') {
+      this.download(tmpData, `${ this.state.mediaUrl }.${ ext }`);
+    }
   };
 
   // https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file
@@ -172,19 +174,19 @@ class App extends React.Component {
           </section>
 
           <section className={ style.demoNavItem }>
-            <label className={ style.sectionLabel }>Custom Media</label>
-            <button onClick={ () => this.handleLoadMediaUrl() }>Load from URL</button>
+            <label className={ style.sectionLabel }>Load Media</label>
+            <button onClick={ () => this.handleLoadMediaUrl() }> From URL</button>
             <input
               type={ 'file' }
               id={ 'mediaFile' }
               onChange={ e => this.handleLoadMedia(e.target.files) }
             />
-            <label htmlFor="mediaFile" >Load local media</label>
+            <label htmlFor="mediaFile" >From Computer</label>
             {this.state.fileName !== '' ? <label className={ style.fileNameLabel }>{this.state.fileName}</label> : null}
           </section>
 
           <section className={ style.demoNavItem }>
-            <label className={ style.sectionLabel }>Import Transcript</label>
+            <label className={ style.sectionLabel }>Load Transcript</label>
             <SttTypeSelect
               className={ style.dropdown }
               name={ 'sttType' }
@@ -197,7 +199,7 @@ class App extends React.Component {
               id={ 'transcriptFile' }
               onChange={ e => this.handleLoadTranscriptJson(e.target.files) }
             />
-            <label htmlFor="transcriptFile" >Load Transcript</label>
+            <label htmlFor="transcriptFile" >From Computer</label>
             {this.state.transcriptData !== null ? <label className={ style.fileNameLabel }>Transcript loaded.</label> : null}
 
           </section>
@@ -248,7 +250,11 @@ class App extends React.Component {
               />
             </div>
 
-            <button className={ style.warningButton } onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
+            <button
+              className={ style.warningButton }
+              onClick={ () => this.clearLocalStorage() }>
+              Clear Local Storage
+            </button>
           </section>
         </div>
 
@@ -275,6 +281,4 @@ class App extends React.Component {
   }
 }
 
-// render(<App />, document.getElementById('root'));
-
 export default App;