Layout change

.eslintrc

@@ -11,7 +11,10 @@
     "jest": true
   },
   "rules": {
+    "no-unused-expressions": "error",
     "no-trailing-spaces": "error",
+    "no-nested-ternary": "error",
+    "space-infix-ops": "error",
     "indent": ["warn", 2],
     "arrow-spacing": ["error", { "before": true, "after": true }],
     "space-in-parens": [ 0, "never" ],

README.md

@@ -61,14 +61,18 @@ npm install @bbc/react-transcript-editor
 ```js
 import { TranscriptEditor } from '@bbc/react-transcript-editor';
 
-<TranscriptEditor
-    transcriptData=// Transcript json
-    mediaUrl=// string url to media file - audio or video 
-    isEditable={true}// se to true if you want to be able to edit the text
-    sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
-    fileName={ this.state.fileName }// optional*
-/>
+  <TranscriptEditor
+           transcriptData=// Transcript json
+           mediaUrl=// string url to media file - audio or video 
+           isEditable={true}// se to true if you want to be able to edit the text
+           sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
+           handleAnalyticsEvents={ this.handleAnalyticsEvents } // optional - if you want to collect analytics events.
+           fileName=// optional - used for saving and retrieving local storage blob files 
+           title=// optional - defaults to ''
+           ref= // optional - if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db.
+         />
 ```
+See [`./src/index.js` demo](./src/index.js) as a more detailed example usage of the component.
 
 _Note: `fileName` it is optional but it's needed if working with user uploaded local media in the browser, to be able to save and retrieve from local storage. For instance if you are passing a blob url to `mediaUrl` using `createObjectURL` this url is randomly re-generated on every page refresh so you wouldn't be able to restore a session, as `mediaUrl` is used as the local storage key. See demo app for more detail example of this[`./src/index.js`](./src/index.js)_
 

src/index.js

@@ -19,7 +19,8 @@ class App extends React.Component {
       isTextEditable: true,
       sttType: 'bbckaldi',
       analyticsEvents: [],
-      fileName: 'Kate Darling Ted Talk'
+      title: 'Ted Talk Kate Kate Darling',
+      fileName: ''
     };
 
     this.transcriptEditorRef = React.createRef();
@@ -67,7 +68,7 @@ class App extends React.Component {
   handleChangeLoadTranscriptJson(files) {
     const file = files[0];
 
-    if (file.type ==='application/json') {
+    if (file.type === 'application/json') {
       const fr = new FileReader();
 
       fr.onload = (evt) => {
@@ -125,11 +126,18 @@ class App extends React.Component {
      this.setState({ analyticsEvents: [ ...this.state.analyticsEvents, event ] });
    }
 
+   handleChangeTranscriptTitle = (newTitle) => {
+     this.setState({
+       title: newTitle
+     });
+   }
+
    handleChangeTranscriptName = (value) => {
      this.setState({ fileName: value });
    }
 
    render() {
+
      return (
        <div className={ style.container }>
          <span className={ style.title }>
@@ -184,13 +192,14 @@ class App extends React.Component {
            />
            <span className={ style.slider }></span>
          </label>
-         <br />
-         <label>Transcript Name</label>
+         <br/>
+         <label>Optional Transcript Name</label>
          <input
            type="text"
-           onChange={ e => this.handleChangeTranscriptName(e.target.value) }
-           value={ this.state.fileName }
+           value={ this.state.title }
+           onChange={ e => this.handleChangeTranscriptTitle(e.target.value) }
          />
+
          <br />
          <button onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
          <hr/>
@@ -202,6 +211,7 @@ class App extends React.Component {
            isEditable={ this.state.isTextEditable }
            sttJsonType={ this.state.sttType }
            handleAnalyticsEvents={ this.handleAnalyticsEvents }
+           title={ this.state.title }
            ref={ this.transcriptEditorRef }
          />
          <hr/>

src/index.module.css

@@ -1,3 +1,7 @@
+body {
+  margin: 0px;
+}
+
 .container {
   height: 100vh;
   font-family: ReithSerif, Fallback, sans-serif;

src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import VolumeControl from './VolumeControl';
 import Select from './Select';
 
 import style from './PlayerControls.module.css';
@@ -23,14 +22,14 @@ class PlayerControls extends React.Component {
   // backward or forward function
   // on mouseUp the interval is cleared
   setIntervalHelperBackward = () => {
-    this.props.skipBackward();
+    // this.props.skipBackward();
     this.interval = setInterval(() => {
       this.props.skipBackward();
     }, 300);
   }
 
   setIntervalHelperForward = () => {
-    this.props.skipForward();
+    // this.props.skipForward();
     this.interval = setInterval(() => {
       this.props.skipForward();
     }, 300);
@@ -43,78 +42,85 @@ class PlayerControls extends React.Component {
   render() {
     return (
       <div className={ style.playerControls }>
-        <button
-          title="Rollback"
-          className={ style.playerButton }
-          onClick={ this.props.rollback }>
-          <FontAwesomeIcon icon={ faUndo } />
-        </button>
-
-        <button
-          title="Rewind"
-          className={ style.playerButton }
-          onMouseDown={ this.setIntervalHelperBackward }
-          onMouseUp={ this.clearIntervalHelper }>
-          <FontAwesomeIcon icon={ faBackward } />
-
-        </button>
-
-        <button
-          title="Play"
-          className={ style.playerButton }
-          onClick={ this.props.playMedia }>
-          {this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
-        </button>
-
-        <button
-          title="Forward"
-          className={ style.playerButton }
-          onMouseDown={ this.setIntervalHelperForward }
-          onMouseUp={ this.clearIntervalHelper }>
-          <FontAwesomeIcon icon={ faForward } />
-        </button>
-
-        <span className={ style.playBackRate }>
-          <Select
-            title="Playback rate"
-            options={ this.props.playbackRateOptions }
-            currentValue={ this.props.playbackRate.toString() }
-            name={ 'playbackRate' }
-            handleChange={ this.props.setPlayBackRate } />
-        </span>
-
         <div className={ style.timeBox }>
-          <span title="Current time" className={ style.currentTime }
-            onClick={ this.props.promptSetCurrentTime }
-          >{ this.props.currentTime }</span>
+          <span
+            title="Current time: alt t"
+            className={ style.currentTime }
+            onClick={ this.props.promptSetCurrentTime }>
+            { this.props.currentTime }</span>
           <span className={ style.separator }>|</span>
-          <span title="Clip duration" className={ style.duration }>{this.props.duration}</span>
+          <span
+            title="Clip duration"
+            className={ style.duration }>
+            {this.props.duration}</span>
+        </div>
+
+        <div className={ style.btnsGroup }>
+          <button
+            title="seek backward by a set interval: alt r"
+            className={ style.playerButton }
+            onClick={ this.props.rollback }>
+            <FontAwesomeIcon icon={ faUndo } />
+          </button>
+
+          <button
+            title="seek backward: alt j"
+            className={ style.playerButton }
+            onMouseDown={ this.setIntervalHelperBackward }
+            onMouseUp={ this.clearIntervalHelper }
+            onClick={ () => {this.props.skipBackward(); } }>
+            <FontAwesomeIcon icon={ faBackward } />
+          </button>
+
+          <button
+            title="Play/Pause: alt k"
+            className={ style.playerButton }
+            onClick={ this.props.playMedia }>
+            {this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
+          </button>
+
+          <button
+            title="seek forward: alt l"
+            className={ style.playerButton }
+            onMouseDown={ this.setIntervalHelperForward }
+            onMouseUp={ this.clearIntervalHelper }
+            onClick={ () => {this.props.skipForward(); } }>
+            <FontAwesomeIcon icon={ faForward } />
+          </button>
         </div>
 
-        <button
-          title="Save"
-          className={ style.playerButton }
-          onClick={ this.props.handleSaveTranscript }>
-          <FontAwesomeIcon icon={ faSave } />
-        </button>
-
-        <button
-          title="Picture-in-picture"
-          className={ style.playerButton }
-          onClick={ this.props.pictureInPicture }
-        >
-          <FontAwesomeIcon icon={ faTv } />
-        </button>
-
-        <VolumeControl
-          handleMuteVolume={ this.props.handleMuteVolume }
-        />
+        <div className={ style.btnsGroup }>
+          <span className={ style.playBackRate }
+            title="Playback rate: alt - & alt + ">
+            <Select
+              options={ this.props.playbackRateOptions }
+              currentValue={ this.props.playbackRate.toString() }
+              name={ 'playbackRate' }
+              handleChange={ this.props.setPlayBackRate } />
+          </span>
+
+          <button
+            title="Save"
+            className={ style.playerButton }
+            onClick={ this.props.handleSaveTranscript }>
+            <FontAwesomeIcon icon={ faSave } />
+          </button>
+
+          <button
+            title="Picture-in-picture"
+            className={ style.playerButton }
+            onClick={ this.props.pictureInPicture }>
+            <FontAwesomeIcon icon={ faTv } />
+          </button>
+
+        </div>
       </div>
     );
   }
 }
 
 PlayerControls.propTypes = {
+
   playMedia: PropTypes.func,
   currentTime: PropTypes.string,
   timecodeOffset: PropTypes.string,
@@ -128,7 +134,8 @@ PlayerControls.propTypes = {
   playbackRate: PropTypes.number,
   playbackRateOptions: PropTypes.array,
   setPlayBackRate: PropTypes.func,
-  pictureInPicture: PropTypes.func
+  pictureInPicture: PropTypes.func,
+  handleSaveTranscript: PropTypes.func
 };
 
 export default PlayerControls;

src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css

@@ -1,8 +1,7 @@
 @value color-darkest-grey, color-light-grey, color-labs-red from '../colours.module.css';
 
 .playerControls {
-  margin: 1em;
-  display: flex;
+  margin-left: 1em;
 }
 
 .playerControls > * {
@@ -11,7 +10,6 @@
 
 .playerControls > *:not(:last-child) {
   margin-right: 0.5em;
-  background: color-darkest-grey;
 }
 
 .playerButton {
@@ -20,24 +18,28 @@
   padding: 0.5em;
   border: 0;
   color: white;
+  background: color-darkest-grey;
   font-size: 1em;
   cursor: pointer;
+  margin-right: 0.3rem;
+  margin-top: 0.3rem;
 }
 
 .playBackRate{
+  width: 70px;
   border: 0;
   color: white;
   font-size: 1em;
   cursor: pointer;
   position: relative;
-  padding-left: 0.8em;
+  margin-right: 0.3rem;
 }
 
 .playBackRate::before{
   content: '×';
   position: absolute;
-  bottom: 11px;
-  left: 12px;
+  bottom: -2px;
+  left: 21px;
 }
 
 .playBackRate > select {
@@ -47,13 +49,16 @@
   outline: none;
   width: auto;
   width: 100%;
+  color:white;
+  background-color: color-darkest-grey;
 }
 
 .timeBox {
   display: inline-block;
   text-align: center;
   line-height: 48px;
   padding: 0 1em;
+  background-color: color-darkest-grey;
 }
 
 .currentTime {

src/lib/TranscriptEditor/MediaPlayer/Select.module.css

@@ -3,10 +3,10 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    height: 20px;
-    width: 60px;
+    height: 48px!important;
+    width: 97px!important;
     border-radius: 0;
-    padding-left: 8px;
+    padding: 32px;/*<--  */
     background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEyNS4zMDQgMTI1LjMwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTI1LjMwNCAxMjUuMzA0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPGc+CgkJPHBvbHlnb24gcG9pbnRzPSI2Mi42NTIsMTAzLjg5NSAwLDIxLjQwOSAxMjUuMzA0LDIxLjQwOSAgICIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
     background-repeat: no-repeat;
     background-position: 85% center;