Layout change

src/index.js

@@ -19,6 +19,7 @@ class App extends React.Component {
       isTextEditable: true,
       sttType: 'bbckaldi',
       analyticsEvents: [],
+      title: 'Ted Talk Kate Kate Darling',
       fileName: 'Kate Darling Ted Talk'
     };
 
@@ -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,87 @@ 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 }
+          <span
+            title="Current time"
+            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"
+            className={ style.playerButton }
+            onClick={ this.props.rollback }>
+            <FontAwesomeIcon icon={ faUndo } />
+          </button>
+
+          <button
+            title="seek backward"
+            className={ style.playerButton }
+            onMouseDown={ this.setIntervalHelperBackward }
+            onMouseUp={ this.clearIntervalHelper }
+            onClick={ () => {this.props.skipBackward(); } }>
+            <FontAwesomeIcon icon={ faBackward } />
+          </button>
+
+          <button
+            title="Play/Pause"
+            className={ style.playerButton }
+            onClick={ this.props.playMedia }>
+            {this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
+          </button>
+
+          <button
+            title="seek forward"
+            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"
+          >
+            <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,

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

@@ -1,8 +1,12 @@
 @value color-darkest-grey, color-light-grey, color-labs-red from '../colours.module.css';
 
 .playerControls {
-  margin: 1em;
-  display: flex;
+  /* margin: 1em; */
+  /* margin-top: 0.5em; */
+  margin-left: 1em;
+  /* display: flex; */
+  /* justify-content: flex-start; */
+
 }
 
 .playerControls > * {
@@ -11,7 +15,7 @@
 
 .playerControls > *:not(:last-child) {
   margin-right: 0.5em;
-  background: color-darkest-grey;
+  /* background: color-darkest-grey; */
 }
 
 .playerButton {
@@ -20,24 +24,35 @@
   padding: 0.5em;
   border: 0;
   color: white;
+  background: color-darkest-grey;
   font-size: 1em;
   cursor: pointer;
+  /* border-color: black;
+  border-width: 0.1rem;
+  border-style: solid; */
+
+  margin-right: 0.3rem;
+  margin-top: 0.3rem;
 }
 
 .playBackRate{
+  height: 48px;
+  width: 70px;
   border: 0;
   color: white;
+  /* background: color-darkest-grey; */
   font-size: 1em;
   cursor: pointer;
   position: relative;
-  padding-left: 0.8em;
+  /* 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 +62,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.js

@@ -3,6 +3,12 @@ import PropTypes from 'prop-types';
 
 import style from './Select.module.css';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {
+  faCaretDown
+} from '@fortawesome/free-solid-svg-icons';
+
 class Select extends React.Component {
 
   render() {

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;