Scaffolding main components (bbc#2)

* first pass at scafolding main components

* added TimedTextEditor example

* testing css modules

* got css modules to work

turns out it needs to be ComponentName.module.css for the file name

* Added README info on css moduels

* added video to MediaPreview component

* added ADR for Timed text

* Added Kaldi Transcript to Timed ditor Component

first pass at making adapter to convert kaldi bbc transcript json to draft.js content block, + add support to diplay editable text in the component usind draftjs

* removed load button

removed load button in TimedTextEditor, using componentDidMount instead so that content of transcript passed as prop can be loaded without extra step

* testing if demo works on github pages

added build sstep for demo

* demo test

* demo

* test demo

* bug fix - editing text

accdidentally commented out on change editor state in timed text editor, and was not allowing to edit text anymore

* Adding CSS flex grid and basic styling

copyed some styling from oTranscribe

* Added fallback fonts for demo

* added overflow to text

* demo improvements

can now load local transcript json and local media for user testing

* bug fix - kaldi/octo

BBC Octo Labs API Response wraps Kaldi response around , while kaldi contains word attribute at root

* fixed transpiling

fixed transpaling for the component + added some notes in docs

* Added ADR for components communication strategy

* Feature/entities (bbc#1)

* node 10.x LTS

* reformat with prettier, some eslint fixes

* paragraph margins

* words as entities, onclick handler for transcript navigation

* Refactor -  generate entities function to separate module so that can be reused by other adapters for other STT services.

* Tests - and added unit tests for generate entities function for troubleshooting and making sure it worked as expected

.babelrc

@@ -1 +1,5 @@
-{ "presets": ["react-app"] }
+{
+	"presets": [
+		"@babel/preset-react"
+	]
+}

.eslintrc

@@ -1 +1,20 @@
-{ "extends": "react-app" }
+{
+  "extends": "react-app",
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "off",
+    "jsx-a11y/href-no-hash": 0,
+    "strict": ["error", "global"],
+    "curly": "warn",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+  }
+}

.gitignore

@@ -84,4 +84,4 @@ typings/
 .env
 
 # next.js build output
-.next
+.next

.nvmrc

@@ -0,0 +1 @@
+lts/dubnium

README.md

@@ -3,6 +3,8 @@
 <!-- _One liner_ -->
 A React component to make transcribing audio and video easier and faster.
 
+_--> Work in progress <--_ 
+
 <!-- _Screenshot of UI - optional_ -->
 
 ## Development env
@@ -45,33 +47,65 @@ npm start
 
 <!-- _High level overview of system architecture_ -->
 
-uses [`reate-component-lib`](https://www.npmjs.com/package/create-component-lib) as explaied in this [blog post](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b) to setup the environment to develop this React.
+uses [`create-component-lib`](https://www.npmjs.com/package/create-component-lib) as explaied in this [blog post](https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b) to setup the environment to develop this React.
 
+This uses [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) so we are using [CSS Modules](https://github.com/css-modules/css-modules) to contain the scope of the css for this component.
+<!-- 
+Uses CSS grid-layout https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df -->
 
 > Place everything you want to publish to npm inside `src/lib`. 
 
 > Outside `src/lib` (but inside src/), you can create example web pages to test or demonstrate the usage of your components.
 
+## Documentation 
+
+There's a [docs](./docs) folder in this repository. 
+
+[docs/notes](./docs/notes) contains dev notes on various aspects of the project.
+
+[docs/adr](./docs/adr) contains [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture_decision_record).
+
+> An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.
+
+We are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)
+
+
 ## Build
 
 <!-- _How to run build_ -->
 
 > To transpile `src/lib` and create a build in the dist folder, run:
 
 ```
-npm run build
+npm run build:component
 ```
 
+## Demo 
+
+Demo can be viewed at [https://bbc.github.io/react-transcript-editor](https://bbc.github.io/react-transcript-editor)
+
+<!-- https://github.com/gitname/react-gh-pages 
+-->
+
+
 ## build - demo 
 
-This github repository uses [github pages](https://pages.github.com/) to host a demo of the component.
+This github repository uses [github pages](https://pages.github.com/) to host a demo of the component, in [docs/demo](./docs/demo)
 
 ```
-npm run build:demo
+npm run deploy:ghpages
 ```
 
 add to git, and push to origin master to update
 
+<!-- https://help.github.com/articles/user-organization-and-project-pages/#project-pages-sites -->
+
+Alternatively If you simply want to build the demo locally in the `build` folder then just
+
+```
+npm run build:example
+```
+
 ## Tests
 
 <!-- _How to carry out tests_ -->
@@ -103,3 +137,8 @@ npm publish
 ## Licence
 
 <!-- mention MIT Licence -->
+
+
+<!-- ## Legal Disclaimer
+
+Despite using React and Draftjs, the BBC is not promoting any FB product or other commercial interest. -->

dist/TranscriptEditor/MediaController/MediaController.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ProgressBar from "./ProgressBar/ProgressBar";
+import PlayerControls from "./PlayerControls/PlayerControls";
+
+class MediaController extends React.Component {
+  render() {
+    return React.createElement("div", null, React.createElement("h2", null, "MediaController"), React.createElement(ProgressBar, null), React.createElement(PlayerControls, null));
+  }
+
+}
+
+export default MediaController;

dist/TranscriptEditor/MediaController/PlayerControls/PlayerControls.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+class PlayerControls extends React.Component {
+  render() {
+    return React.createElement("h3", null, "PlayerControls");
+  }
+
+}
+
+export default PlayerControls;

dist/TranscriptEditor/MediaController/ProgressBar/ProgressBar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+class ProgressBar extends React.Component {
+  render() {
+    return React.createElement("h3", null, "ProgressBar");
+  }
+
+}
+
+export default ProgressBar;

dist/TranscriptEditor/MediaPreview/MediaPreview.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './MediaPreview.module.css'; // inspired by https://github.com/bbc/nm2/blob/master/src/components/chapter/video/Video.jsx
+
+class MediaPreview extends React.Component {
+  constructor(props) {
+    super(props);
+    this.videoRef = React.createRef();
+  }
+
+  render() {
+    // conditional, if media player not defined then don't show
+    let mediaPlayer;
+
+    if (this.props.mediaUrl !== "") {
+      mediaPlayer = React.createElement("video", {
+        id: "video",
+        playsInline: true // autoPlay
+        ,
+        controls: true,
+        src: this.props.mediaUrl,
+        type: "video/mp4",
+        "data-testid": "media-player-id",
+        ref: this.videoRef
+      });
+    }
+
+    return React.createElement("section", {
+      className: styles.videoSection
+    }, mediaPlayer);
+  }
+
+}
+
+export default MediaPreview;

dist/TranscriptEditor/MediaPreview/MediaPreview.module.css

@@ -0,0 +1,33 @@
+.videoSection {
+    height: 100%;
+    width: 100%;
+  }
+
+  video {
+    /* height: 90vh; */
+    width: 100%;
+    /* overflow: hidden; */
+    /* position:absolute; */
+    /* z-index:-1; */
+    /* object-fit: cover; */
+  }
+
+
+  /* .videoControls{
+    height: 10vh;
+    width: 100%;
+    background-color: black;
+    color:white;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+  }
+   */
+
+  /* .playPause{
+    color:white;
+    text-transform: uppercase;
+  } */
+
+

dist/TranscriptEditor/MediaPreview/MediaPreview.unit.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, cleanup } from 'react-testing-library';
+import { shallow } from 'enzyme';
+import MediaPreview from './MediaPreview';
+afterEach(cleanup);
+const fakeVideoUrl = 'https://storage.googleapis.com/coverr-main/mp4/Pigeon-Impossible.mp4';
+test('GIVEN a chapter title I expect that WHEN the Video component is rendered THEN the correct title is displayed', () => {
+  const {
+    container
+  } = render(React.createElement(MediaPreview, {
+    mediaUrl: fakeVideoUrl
+  }));
+  expect(container.innerHTML).toContain('videoSection');
+});
+test('GIVEN a video as a chapter with src video url THEN the video is rendered with it\'s source url', () => {
+  const {
+    getByTestId
+  } = render(React.createElement(MediaPreview, {
+    mediaUrl: fakeVideoUrl
+  }));
+  expect(getByTestId('media-player-id').attributes.src.value).toBe(fakeVideoUrl);
+});
+test('WHEN the Video component is rendered THEN a video element is displayed', () => {
+  const wrapper = shallow(React.createElement(MediaPreview, {
+    mediaUrl: fakeVideoUrl
+  }));
+  expect(wrapper.find('video').type()).toBe('video');
+});

dist/TranscriptEditor/SettingsPanel/SettingsPanel.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class SettingsPanel extends React.Component {
+  render() {
+    return React.createElement("h2", null, "SettingsPanel");
+  }
+
+}
+
+export default SettingsPanel;

dist/TranscriptEditor/TimedTextEditor/TimedTextEditor.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { // Draft,
+Editor, EditorState, // ContentState,
+convertFromRaw } from 'draft-js';
+import styles from './TimedTextEditor.module.css';
+import bbcKaldiToDraft from './adapters/bbc-kaldi/index.js';
+
+class TimedTextEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editorState: EditorState.createEmpty(),
+      transcriptData: this.props.transcriptData
+    };
+
+    this.onChange = editorState => this.setState({
+      editorState
+    });
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  componentWillReceiveProps(nexProps) {
+    this.setState({
+      transcriptData: nexProps.transcriptData
+    }, () => {
+      this.loadData();
+    });
+  }
+
+  loadData() {
+    if (this.props.transcriptData !== "") {
+      let blocks = bbcKaldiToDraft(this.props.transcriptData);
+      const entityMap = {};
+      const contentState = convertFromRaw({
+        blocks,
+        entityMap
+      });
+      const editorState = EditorState.createWithContent(contentState);
+      this.setState({
+        editorState
+      });
+    }
+  }
+
+  render() {
+    return React.createElement("section", {
+      className: styles.editor
+    }, React.createElement(Editor, {
+      editorState: this.state.editorState,
+      onChange: this.onChange
+    }));
+  }
+
+}
+
+export default TimedTextEditor;

dist/TranscriptEditor/TimedTextEditor/TimedTextEditor.module.css

@@ -0,0 +1,8 @@
+/*
+Giving the editor a oveflow 
+https://github.com/facebook/draft-js/issues/528 
+ */
+.editor :global(.public-DraftEditor-content) {
+    max-height: 70vh;
+    overflow: auto;
+  }

dist/TranscriptEditor/TimedTextEditor/adapters/README.md

@@ -0,0 +1,4 @@
+# Adaprters
+
+To convert STT json transcript into draft.js code block.
+Used by TimedTextEditor.

dist/TranscriptEditor/TimedTextEditor/adapters/bbc-kaldi/example-usage.js

@@ -0,0 +1,7 @@
+const bbcKaldiToDraft = require('./index.js'); // using require, because of testing outside of React app
+
+
+const kaldiTedTalkTranscript = require('../../../../../sample-data/KateDarling_2018S-bbc-kaldi.json');
+
+let result = bbcKaldiToDraft(kaldiTedTalkTranscript);
+console.log(result);