diff --git a/.eslintrc b/.eslintrc
index 8e1d97d3..fc128474 100644
--- a/.eslintrc
+++ b/.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" ],
diff --git a/README.md b/README.md
index 9ce746f2..7ab27559 100644
--- a/README.md
+++ b/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)_
 
diff --git a/package-lock.json b/package-lock.json
index 6af22584..52fd4ac2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/react-transcript-editor",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9199,7 +9199,8 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
     },
     "lodash.escape": {
       "version": "4.0.1",
diff --git a/src/index.js b/src/index.js
index 616d6638..681db3b2 100644
--- a/src/index.js
+++ b/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/>
diff --git a/src/index.module.css b/src/index.module.css
index a2383559..030473a5 100644
--- a/src/index.module.css
+++ b/src/index.module.css
@@ -1,3 +1,7 @@
+body {
+  margin: 0px;
+}
+
 .container {
   height: 100vh;
   font-family: ReithSerif, Fallback, sans-serif;
diff --git a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js
index abdff384..061550ed 100644
--- a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js
+++ b/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;
diff --git a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css
index c151a5ca..8f1b1af1 100644
--- a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css
+++ b/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,6 +49,8 @@
   outline: none;
   width: auto;
   width: 100%;
+  color:white;
+  background-color: color-darkest-grey;
 }
 
 .timeBox {
@@ -54,6 +58,7 @@
   text-align: center;
   line-height: 48px;
   padding: 0 1em;
+  background-color: color-darkest-grey;
 }
 
 .currentTime {
diff --git a/src/lib/TranscriptEditor/MediaPlayer/Select.module.css b/src/lib/TranscriptEditor/MediaPlayer/Select.module.css
index 049660c6..fb57f9fc 100644
--- a/src/lib/TranscriptEditor/MediaPlayer/Select.module.css
+++ b/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;
diff --git a/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js b/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js
index 53680d58..e7fe4e19 100644
--- a/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js
+++ b/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.js
@@ -1,8 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styles from './VideoPlayer.module.css';
 
 class VideoPlayer extends React.Component {
+
+  handlePlayMedia = () => {
+    if (this.props.videoRef.current !== null) {
+      return this.props.videoRef.current.paused ? this.props.videoRef.current.play() : this.props.videoRef.current.pause();
+    }
+  };
   render() {
+    const isDisplayed = this.props.previewIsDisplayed ? 'inline' : 'none';
+
     return (
       <video
         id="video"
@@ -11,9 +20,13 @@ class VideoPlayer extends React.Component {
         onTimeUpdate={ this.props.onTimeUpdate }
         type="video/mp4"
         data-testid="media-player-id"
-        onClick={ this.props.onClick }
+        onClick={ this.handlePlayMedia }
         onLoadedData={ this.props.onLoadedDataGetDuration }
         ref={ this.props.videoRef }
+        className={ styles.videoEl }
+        style={ {
+          display: isDisplayed
+        } }
       />
     );
   }
@@ -24,7 +37,9 @@ VideoPlayer.propTypes = {
   onTimeUpdate: PropTypes.func,
   onClick: PropTypes.func,
   videoRef: PropTypes.object,
-  onLoadedDataGetDuration: PropTypes.func
+  onLoadedDataGetDuration: PropTypes.func,
+  previewIsDisplayed: PropTypes.bool,
+  previewViewWidth: PropTypes.string
 };
 
 export default VideoPlayer;
diff --git a/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.module.css b/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.module.css
new file mode 100644
index 00000000..43bc90d1
--- /dev/null
+++ b/src/lib/TranscriptEditor/MediaPlayer/VideoPlayer.module.css
@@ -0,0 +1,16 @@
+.videoEl{
+    cursor: pointer;
+}
+/* Desktop size */
+@media (min-width: 768px) {
+    .videoEl{
+        max-width:  33vw;
+    }
+}
+
+/* Mobile devices - excluding ipad*/
+@media (max-width: 767px) {
+    .videoEl{
+        max-width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/TranscriptEditor/MediaPlayer/VolumeControl.js b/src/lib/TranscriptEditor/MediaPlayer/VolumeControl.js
deleted file mode 100644
index 9e7e6b21..00000000
--- a/src/lib/TranscriptEditor/MediaPlayer/VolumeControl.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './VolumeControl.module.css';
-class VolumeControl extends React.Component {
-
-  render() {
-    return (
-      <div className={ styles.switchContainer }>
-        <label className={ styles.switch }>
-          <input type="checkbox"
-            defaultChecked="true"
-            onChange={ this.props.handleMuteVolume }
-          />
-          <span className={ styles.slider }></span>
-        </label>
-        <label className={ styles.label }>Volume</label>
-      </div>
-    );
-  }
-}
-
-VolumeControl.propTypes = {
-  handleMuteVolume: PropTypes.func
-};
-
-export default VolumeControl;
diff --git a/src/lib/TranscriptEditor/MediaPlayer/VolumeControl.module.css b/src/lib/TranscriptEditor/MediaPlayer/VolumeControl.module.css
deleted file mode 100644
index 1310919b..00000000
--- a/src/lib/TranscriptEditor/MediaPlayer/VolumeControl.module.css
+++ /dev/null
@@ -1,70 +0,0 @@
-@value color-labs-red from '../colours.module.css';
-
-.switchContainer {
-  display: inline-block;
-  position: relative;
-  height: 48px;
-  width: 48px;
-  display:inline-block;
-  vertical-align:middle;
-}
-
-.label {
-  display: block;
-  margin: 0.2em 0;
-  font-weight: light;
-  color: white;
-  text-align: center;
-  font-size: 0.8em;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 28px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 20px;
-  width: 20px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: color-labs-red;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px color-labs-red;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(20px);
-  -ms-transform: translateX(20px);
-  transform: translateX(20px);
-}
diff --git a/src/lib/TranscriptEditor/MediaPlayer/index.js b/src/lib/TranscriptEditor/MediaPlayer/index.js
index 5f76ba46..8bbd4bbb 100644
--- a/src/lib/TranscriptEditor/MediaPlayer/index.js
+++ b/src/lib/TranscriptEditor/MediaPlayer/index.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hotkeys } from 'react-keyboard-shortcuts';
-
-import VideoPlayer from './VideoPlayer';
 import PlayerControls from './PlayerControls';
 import ProgressBar from './ProgressBar';
 
@@ -10,7 +8,6 @@ import returnHotKeys from './defaultHotKeys';
 import styles from './index.module.css';
 
 import { secondsToTimecode, timecodeToSeconds } from '../../Util/timecode-converter/index';
-import { timingSafeEqual } from 'crypto';
 
 const PLAYBACK_RATES = [
   { value: 0.2, label: '0.2' },
@@ -30,7 +27,6 @@ const PLAYBACK_RATES = [
 class MediaPlayer extends React.Component {
   constructor(props) {
     super(props);
-    this.videoRef = React.createRef();
 
     this.state = {
       playbackRate: 1,
@@ -39,7 +35,7 @@ class MediaPlayer extends React.Component {
       hotKeys: returnHotKeys(this),
       isPlaying: false,
       playbackRateOptions: PLAYBACK_RATES,
-      mediaDuration: '00:00:00:00'
+      previewIsDisplayed: true
     };
   }
   /*eslint-disable camelcase */
@@ -48,7 +44,7 @@ class MediaPlayer extends React.Component {
   static getDerivedStateFromProps(nextProps) {
     if (nextProps.timecodeOffset !== null) {
       let newCurrentTimeInSeconds = nextProps.timecodeOffset ;
-      if (typeof newCurrentTimeInSeconds ==='string'
+      if (typeof newCurrentTimeInSeconds === 'string'
         && newCurrentTimeInSeconds.includes(':')
         && !newCurrentTimeInSeconds.includes('NaN')) {
         newCurrentTimeInSeconds = timecodeToSeconds(nextProps.timecodeOffset );
@@ -73,8 +69,8 @@ class MediaPlayer extends React.Component {
     if (newCurrentTime !== '' && newCurrentTime !== null) {
     // hh:mm:ss:ff - mm:ss - m:ss - ss - seconds number or string and hh:mm:ss
       const newCurrentTimeInSeconds = timecodeToSeconds(newCurrentTime);
-      if (this.videoRef.current !== null) {
-        const videoRef = this.videoRef.current;
+      if (this.props.videoRef.current !== null) {
+        const videoRef = this.props.videoRef.current;
 
         if (videoRef.readyState === 4) {
           videoRef.currentTime = newCurrentTimeInSeconds;
@@ -137,7 +133,7 @@ class MediaPlayer extends React.Component {
   }
 
   rollBack = () => {
-    if (this.videoRef.current !== null) {
+    if (this.props.videoRef.current !== null) {
 
       if (this.props.handleAnalyticsEvents !== undefined) {
         this.props.handleAnalyticsEvents({
@@ -148,7 +144,7 @@ class MediaPlayer extends React.Component {
         });
       }
       // get video duration
-      const videoElem = this.videoRef.current;
+      const videoElem = this.props.videoRef.current;
       const tmpDesiredCurrentTime = videoElem.currentTime - this.state.rollBackValueInSeconds;
       // > 0 < duration of video
       this.setCurrentTime(tmpDesiredCurrentTime);
@@ -156,10 +152,6 @@ class MediaPlayer extends React.Component {
     }
   }
 
-  handleTimeUpdate = (e) => {
-    this.props.hookOnTimeUpdate(e.target.currentTime);
-  }
-
   handlePlayBackRateChange = (e) => {
     this.setPlayBackRate(parseFloat(e.target.value));
   }
@@ -168,12 +160,12 @@ class MediaPlayer extends React.Component {
    * @param {float} input - playback rate value as a float
    */
   setPlayBackRate = (input) => {
-    if (this.videoRef.current !== null) {
+    if (this.props.videoRef.current !== null) {
       if (input >= 0.2 && input <= 3.5) {
         this.setState({
           playbackRate: input,
         }, () => {
-          this.videoRef.current.playbackRate = input;
+          this.props.videoRef.current.playbackRate = input;
 
           if (this.props.handleAnalyticsEvents !== undefined) {
             this.props.handleAnalyticsEvents({
@@ -210,7 +202,7 @@ class MediaPlayer extends React.Component {
   }
 
   handleChangeReplayRollbackValue = (e) => {
-    if (this.videoRef.current !== null) {
+    if (this.props.videoRef.current !== null) {
       this.setState({
         rollBackValueInSeconds: e.target.value,
       });
@@ -218,11 +210,11 @@ class MediaPlayer extends React.Component {
   }
 
   handleMuteVolume = () => {
-    if (this.videoRef.current !== null) {
-      if (this.videoRef.current.volume > 0) {
-        this.videoRef.current.volume = 0;
+    if (this.props.videoRef.current !== null) {
+      if (this.props.videoRef.current.volume > 0) {
+        this.props.videoRef.current.volume = 0;
       } else {
-        this.videoRef.current.volume = 1;
+        this.props.videoRef.current.volume = 1;
       }
     }
   }
@@ -230,35 +222,35 @@ class MediaPlayer extends React.Component {
   // TEMP: keeping this in for now. Might be replaced by state
   // The pauseWhileTyping logic (in TimedTextEditor) currently uses this
   isPlaying = () => {
-    if (this.videoRef.current !== null) {
-      if (this.videoRef.current.paused) return false;
+    if (this.props.videoRef.current !== null) {
+      if (this.props.videoRef.current.paused) return false;
 
       return true;
     }
   }
 
   pauseMedia = () => {
-    this.setState({ isPlaying: false }, () => this.videoRef.current.pause());
+    this.setState({ isPlaying: false }, () => this.props.videoRef.current.pause());
 
     if (this.props.handleAnalyticsEvents !== undefined) {
       this.props.handleAnalyticsEvents({
         category: 'MediaPlayer',
         action: 'pauseMedia',
         name: 'pauseMedia',
-        value: secondsToTimecode(this.videoRef.current.currentTime)
+        value: secondsToTimecode(this.props.videoRef.current.currentTime)
       });
     }
   }
 
   playMedia = () => {
-    this.setState({ isPlaying: true }, () => this.videoRef.current.play());
+    this.setState({ isPlaying: true }, () => this.props.videoRef.current.play());
 
     if (this.props.handleAnalyticsEvents !== undefined) {
       this.props.handleAnalyticsEvents({
         category: 'MediaPlayer',
         action: 'playMedia',
         name: 'playMedia',
-        value: secondsToTimecode(this.videoRef.current.currentTime)
+        value: secondsToTimecode(this.props.videoRef.current.currentTime)
       });
     }
 
@@ -267,7 +259,7 @@ class MediaPlayer extends React.Component {
   // Sets isPlaying state and toggles modes on the video player
   // TODO: modularise these / enable specific play / pause action
   togglePlayMedia = () => {
-    if (this.videoRef.current !== null) {
+    if (this.props.videoRef.current !== null) {
       if (this.state.isPlaying) {
         this.pauseMedia();
       }
@@ -278,9 +270,9 @@ class MediaPlayer extends React.Component {
   }
 
   skipForward = () => {
-    if (this.videoRef.current !== null) {
+    if (this.props.videoRef.current !== null) {
       // TODO track this?
-      const currentTime = this.videoRef.current.currentTime;
+      const currentTime = this.props.videoRef.current.currentTime;
       const newCurrentTimeIncreased = currentTime + 10;
       const newCurrentTime = Number((newCurrentTimeIncreased).toFixed(1));
       this.setCurrentTime(newCurrentTime);
@@ -289,8 +281,8 @@ class MediaPlayer extends React.Component {
 
   skipBackward = () => {
     // TODO track this?
-    if (this.videoRef.current !== null) {
-      const currentTime = this.videoRef.current.currentTime;
+    if (this.props.videoRef.current !== null) {
+      const currentTime = this.props.videoRef.current.currentTime;
       const newCurrentTimeIncreased = currentTime - 10;
       const newCurrentTime = Number((newCurrentTimeIncreased).toFixed(1));
       this.setCurrentTime(newCurrentTime);
@@ -312,45 +304,16 @@ class MediaPlayer extends React.Component {
   }
 
   getMediaCurrentTime = () => {
-    if (this.videoRef.current !== null) {
-      return secondsToTimecode(this.videoRef.current.currentTime + this.state.timecodeOffset);
+    if (this.props.videoRef.current !== null) {
+      return secondsToTimecode(this.props.videoRef.current.currentTime + this.state.timecodeOffset);
     }
 
     return '00:00:00:00';
   }
-  handleMediaDurationChange =(e) => {
-    if (this.props.handleAnalyticsEvents !== undefined) {
-      this.props.handleAnalyticsEvents({
-        category: 'MediaPlayer',
-        action: 'mediaDuration',
-        name: secondsToTimecode(e.target.duration),
-        value: e.target.duration
-      });
-    }
-  }
-
-  onLoadedDataGetDuration = (e) => {
-    const currentDuration = e.target.duration;
-    const currentDurationWithOffset = currentDuration+ this.state.timecodeOffset;
-    const durationInSeconds = secondsToTimecode( currentDuration+ currentDurationWithOffset);
-
-    this.setState({
-      mediaDuration: durationInSeconds
-    });
-
-    if (this.props.handleAnalyticsEvents !== undefined) {
-      this.props.handleAnalyticsEvents({
-        category: 'MediaPlayer',
-        action: 'onLoadedDataGetDuration',
-        name: 'durationInSeconds-WithoutOffset',
-        value: secondsToTimecode( currentDuration)
-      });
-    }
-
-  }
 
   handlePictureInPicture = () => {
-    if (this.videoRef.current !== null) {
+    // console.log('this.props.videoRef', this.props.videoRef, this.props.videoRef.current );
+    if (this.props.videoRef.current !== undefined) {
       if (document.pictureInPictureElement !== undefined) {
       // from https://developers.google.com/web/updates/2017/09/picture-in-picture
         if (!document.pictureInPictureElement) {
@@ -361,7 +324,7 @@ class MediaPlayer extends React.Component {
             name: 'turning-picture-in-picture-on'
           });
 
-          this.videoRef.current.requestPictureInPicture()
+          this.props.videoRef.current.requestPictureInPicture()
             .catch(error => {
               // Video failed to enter Picture-in-Picture mode.
               console.error('Video failed to enter Picture-in-Picture mode', error);
@@ -406,18 +369,11 @@ class MediaPlayer extends React.Component {
   }
 
   render() {
-    const player = <VideoPlayer
-      mediaUrl={ this.props.mediaUrl }
-      onTimeUpdate= { this.handleTimeUpdate }
-      onClick= { this.togglePlayMedia.bind(this) }
-      videoRef={ this.videoRef }
-      onLoadedDataGetDuration={ this.onLoadedDataGetDuration }
-    />;
 
     const playerControlsSection = (
       <div className={ styles.controlsSection }>
-        <div className={ styles.titleBox }>
-          <h1 className={ styles.title }>{ this.props.fileName? this.props.fileName : this.props.mediaUrl }</h1>
+        <div className={ styles.title }>
+          {this.props.title}
         </div>
         <PlayerControls
           playMedia={ this.togglePlayMedia.bind(this) }
@@ -427,7 +383,7 @@ class MediaPlayer extends React.Component {
           skipForward={ this.skipForward.bind(this) }
           rollback={ this.rollBack }
           currentTime={ this.getMediaCurrentTime() }
-          duration={ this.state.mediaDuration }
+          duration={ this.props.mediaDuration }
           onSetCurrentTime={ '' }
           onSetTimecodeOffset={ '' }
           promptSetCurrentTime={ this.promptSetCurrentTime.bind(this) }
@@ -443,32 +399,35 @@ class MediaPlayer extends React.Component {
     );
 
     const progressBar = <ProgressBar
-      max={ this.videoRef.current !== null ? parseInt(this.videoRef.current.duration).toString() : '100' }
-      value={ this.videoRef.current !== null ? parseInt(this.videoRef.current.currentTime) : 0 }
+      max={ this.props.videoRef.current !== null ? parseInt(this.props.videoRef.current.duration).toString() : '100' }
+      value={ this.props.videoRef.current !== null ? parseInt(this.props.videoRef.current.currentTime) : 0 }
       buttonClick={ this.handleProgressBarClick.bind(this) }
     />;
 
     return (
       <section className={ styles.topSection }>
         <div className={ styles.playerSection }>
-          { this.props.mediaUrl !== null ? player : null }
-          { this.props.mediaUrl !== null ? playerControlsSection : null }
+          { this.props.mediaUrl === null ? null : playerControlsSection }
         </div>
-        { this.props.mediaUrl !== null ? progressBar : null }
+        { this.props.mediaUrl === null ? null : progressBar }
       </section>
     );
   }
 }
 
 MediaPlayer.propTypes = {
-  fileName: PropTypes.string,
+  videoRef: PropTypes.object,
+  title: PropTypes.string,
   hookSeek: PropTypes.func,
   hookPlayMedia: PropTypes.func,
   hookIsPlaying: PropTypes.func,
   mediaUrl: PropTypes.string,
   hookOnTimeUpdate: PropTypes.func,
   rollBackValueInSeconds: PropTypes.number,
-  timecodeOffset: PropTypes.number
+  timecodeOffset: PropTypes.number,
+  handleAnalyticsEvents: PropTypes.func,
+  mediaDuration: PropTypes.string,
+  handleSaveTranscript: PropTypes.func
 };
 
 export default hotkeys(MediaPlayer);
diff --git a/src/lib/TranscriptEditor/MediaPlayer/index.module.css b/src/lib/TranscriptEditor/MediaPlayer/index.module.css
index 2418c6ef..b56dadbd 100644
--- a/src/lib/TranscriptEditor/MediaPlayer/index.module.css
+++ b/src/lib/TranscriptEditor/MediaPlayer/index.module.css
@@ -10,16 +10,10 @@
   width: 100%;
 }
 
-video {
-  width: 30%;
-  max-height: 160px;
-  cursor: pointer;
-}
-
 .controlsSection {
-  width: 64%;
-  display: flex;
-  flex-direction: column;
+  /* width: 98%; */
+  /* display: flex; */
+  /* flex-direction: column; */
 }
 
 .titleBox {
@@ -28,11 +22,13 @@ video {
 }
 
 .title {
-  margin: 1em;
+  margin-left: 1em;
   color: white;
   height: 1.3em;
+  width: 97vw;
   font-size: 16px;
   overflow: hidden;
+  display: inline-block;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -43,12 +39,8 @@ video {
 }
 
 /* Mobile devices */
-@media (max-width: 768px) {
+@media (max-width: 769px) {
   .hideInMobile {
     display: none;
   }
-
-  video {
-    /* min-width: 50%; */
-  }
 }
diff --git a/src/lib/TranscriptEditor/Settings/Shortcuts.js b/src/lib/TranscriptEditor/Settings/Shortcuts.js
index 7fcb1f1b..50576fd7 100644
--- a/src/lib/TranscriptEditor/Settings/Shortcuts.js
+++ b/src/lib/TranscriptEditor/Settings/Shortcuts.js
@@ -11,10 +11,10 @@ import style from './Shortcuts.module.css';
 class Shortcuts extends React.Component {
   render() {
     const hotKeys = returnHotKeys(this);
-    const hotKeysCheatsheet = Object.keys(hotKeys).map((key, i) => {
+    const hotKeysCheatsheet = Object.keys(hotKeys).map((key) => {
     	const shortcut = hotKeys[key];
 
-      return <li key={ i } className={ style.listItem }>
+      return <li key={ key } className={ style.listItem }>
         <div className={ style.shortcut }>{shortcut.displayKeyCombination}</div>
         <div className={ style.shortcutLabel }>{shortcut.label}</div>
       </li>;
diff --git a/src/lib/TranscriptEditor/Settings/TimecodeOffset/index.js b/src/lib/TranscriptEditor/Settings/TimecodeOffset/index.js
index ca8ef67f..3a257625 100644
--- a/src/lib/TranscriptEditor/Settings/TimecodeOffset/index.js
+++ b/src/lib/TranscriptEditor/Settings/TimecodeOffset/index.js
@@ -46,7 +46,7 @@ class TimecodeOffset extends React.Component {
     });
 
     let newCurrentTimeInSeconds = this.state.timecodeOffset;
-    if (typeof newCurrentTimeInSeconds ==='string'
+    if (typeof newCurrentTimeInSeconds === 'string'
     && newCurrentTimeInSeconds.includes(':')
     && !newCurrentTimeInSeconds.includes('NaN')) {
       newCurrentTimeInSeconds = timecodeToSeconds(newCurrentTimeInSeconds );
@@ -74,7 +74,8 @@ class TimecodeOffset extends React.Component {
 TimecodeOffset.propTypes = {
   handleSetTimecodeOffset: PropTypes.func,
   onChange: PropTypes.func,
-  timecodeOffset: PropTypes.number
+  timecodeOffset: PropTypes.number,
+  handleAnalyticsEvents: PropTypes.func
 };
 
 export default TimecodeOffset;
diff --git a/src/lib/TranscriptEditor/Settings/index.js b/src/lib/TranscriptEditor/Settings/index.js
index 5e214663..a8091694 100644
--- a/src/lib/TranscriptEditor/Settings/index.js
+++ b/src/lib/TranscriptEditor/Settings/index.js
@@ -42,7 +42,10 @@ class Settings extends React.Component {
             <div className={ style.label }>Rollback Interval (sec)</div>
             <input
               className={ style.rollbackValue }
-              type="text"
+              type="number"
+              step="1"
+              max="60"
+              min="1"
               value={ this.props.defaultRollBackValueInSeconds }
               onChange={ this.props.handleRollBackValueInSeconds }
               name="lname"/>
@@ -66,6 +69,28 @@ class Settings extends React.Component {
             />
           </section>
 
+          <section className={ style.settingElement }>
+            <div className={ style.label }>Display Preview</div>
+            <Toggle
+              defaultValue={ this.props.previewIsDisplayed }
+              label={ 'Display Preview' }
+              handleToggle={ this.props.handlePreviewIsDisplayed }
+            />
+          </section>
+          {/*
+          <section className={ style.settingElement }>
+            <div className={ style.label }>Video Preview width</div>
+            <input
+              className={ style.rollbackValue }
+              type="number"
+              step="1"
+              max="40"
+              min="15"
+              value={ this.props.previewViewWidth }
+              onChange={ this.props.handleChangePreviewViewWidth }
+              name="lname"/>
+          </section> */}
+
           <section className={ style.settingElement }>
             <div className={ style.timecodeLabel }>Timecode Offset ℹ</div>
             <TimecodeOffset
@@ -93,7 +118,12 @@ Settings.propTypes = {
   handleRollBackValueInSeconds: PropTypes.func,
   defaultValueScrollSync: PropTypes.bool,
   defaultValuePauseWhileTyping: PropTypes.bool,
-  defaultRollBackValueInSeconds: PropTypes.number
+  defaultRollBackValueInSeconds: PropTypes.number,
+  previewIsDisplayed: PropTypes.bool,
+  handlePreviewIsDisplayed: PropTypes.func,
+  // previewViewWidth: PropTypes.string,
+  handleChangePreviewViewWidth: PropTypes.func,
+  handleAnalyticsEvents: PropTypes.func
 };
 
 export default Settings;
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/SpeakerLabel.js b/src/lib/TranscriptEditor/TimedTextEditor/SpeakerLabel.js
index 1294171b..bb71b0e8 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/SpeakerLabel.js
+++ b/src/lib/TranscriptEditor/TimedTextEditor/SpeakerLabel.js
@@ -9,10 +9,9 @@ import style from './WrapperBlock.module.css';
 class SpeakerLabel extends PureComponent {
   render() {
     return (
-      <span className={ style.speaker }>
-        <span
-          className={ style.EditLabel }
-          onClick={ this.props.handleOnClickEdit }>
+      <span className={ style.speaker }
+        onClick={ this.props.handleOnClickEdit }>
+        <span className={ style.EditLabel }>
           <FontAwesomeIcon icon={ faUserEdit } />
         </span>
         {this.props.name}
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.js b/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.js
index 35c49bc3..2fbfd1f2 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.js
+++ b/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.js
@@ -99,6 +99,7 @@ class WrapperBlock extends React.Component {
       <div className={ style.WrapperBlock }>
         <div className={ style.markers }>
           {this.props.blockProps.showSpeakers ? speakerElement : ''}
+
           {this.props.blockProps.showTimecodes ? timecodeElement : ''}
         </div>
         <div className={ style.text }>
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css b/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css
index aa0a0fa8..b9cf2bc5 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css
+++ b/src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css
@@ -1,44 +1,92 @@
 @value color-labs-red, color-light-grey, color-mid-grey, color-dark-grey from '../colours.module.css';
 
-.WrapperBlock {
-  height: 100%;
-  width: 100%;
-  margin-bottom: 2em;
-  line-height: 1.2em;
-  overflow: hidden;
-}
+/* Desktop size */
+@media (min-width: 768px) {
 
-.markers {
-  width: 25%;
-  font-size: 0.8em;
-  line-height: 1.2em;
-  float: left;
-}
+  .markers {
+    width: 25%;
+    font-size: 0.8em;
+    line-height: 1.2em;
+    float: left;
+  }
+
+  .WrapperBlock {
+    height: 100%;
+    width: 100%;
+    margin-bottom: 2em;
+    line-height: 1.2em;
+    overflow: hidden;
+  }
+
+  .speaker {
+    display: inline-block;
+    width: 50%;
+    padding-right: 2em;
+    vertical-align: middle;
+    color: color-mid-grey;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-align: right;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .text {
+    width: 75%;
+    font-size: 1em;
+    float: right;
+    clear: right;
+  }
 
-.text {
-  width: 75%;
-  font-size: 1em;
-  float: right;
-  clear: right;
 }
 
-.speaker {
-  display: inline-block;
-  width: 50%;
-  padding-right: 2em;
-  vertical-align: middle;
-  color: color-mid-grey;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-align: right;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+/* Mobile devices */
+@media (max-width: 768px) {
+
+  .markers {
+    width: 100%;
+    font-size: 0.8em;
+    line-height: 1.2em;
+    float: left;
+    margin-bottom: 0.5em;
+  }
+  .WrapperBlock {
+    width: 100%;
+    margin-bottom: 1em;
+    line-height: 1.2em;
+    overflow: hidden;
+  }
+  
+  .speaker {
+    display: inline-block;
+    width: 60%;
+    padding-right: 2em;
+    vertical-align: middle;
+    color: color-mid-grey;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-align: right;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  .text {
+    width: 100%;
+    font-size: 1em;
+    float: left;
+    /* clear: right; */
+  }
+
 }
 
+
+
 .time {
   display: inline-block;
-  width: 30%;
+  /* width: 30%; */
   font-weight: lighter;
   vertical-align: middle;
   cursor: pointer;
@@ -47,7 +95,14 @@
   margin-right: 0.5em;
 }
 
-.EditLabel {
+.time:hover{
+  text-decoration: underline;
+   /* color: blue; */
+}
+.speaker {
   cursor: pointer;
+}
+
+.EditLabel {
   margin-right: 0.5em;
 }
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/index.js b/src/lib/TranscriptEditor/TimedTextEditor/index.js
index 913e5ea8..cfa1a948 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/index.js
+++ b/src/lib/TranscriptEditor/TimedTextEditor/index.js
@@ -1,9 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Tooltip from 'react-simple-tooltip';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestionCircle, faMousePointer, faICursor, faUserEdit, faKeyboard, faSave } from '@fortawesome/free-solid-svg-icons';
 
 import {
   Editor,
@@ -12,8 +8,7 @@ import {
   convertFromRaw,
   convertToRaw,
   getDefaultKeyBinding,
-  Modifier,
-  KeyBindingUtil
+  Modifier
 } from 'draft-js';
 
 import Word from './Word';
@@ -23,8 +18,6 @@ import sttJsonAdapter from '../../Util/adapters/index.js';
 import exportAdapter from '../../Util/export-adapters/index.js';
 import style from './index.module.css';
 
-const { hasCommandModifier } = KeyBindingUtil;
-
 class TimedTextEditor extends React.Component {
   constructor(props) {
     super(props);
@@ -64,7 +57,7 @@ class TimedTextEditor extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     if (
       (prevState.transcriptData !== this.state.transcriptData)
-      && ( this.props.mediaUrl!== null && !this.isPresentInLocalStorage(this.props.mediaUrl) )
+      && ( this.props.mediaUrl !== null && !this.isPresentInLocalStorage(this.props.mediaUrl) )
     ) {
       this.loadData();
     }
@@ -109,12 +102,12 @@ class TimedTextEditor extends React.Component {
         editorState
       }), () => {
         // saving when user has stopped typing for more then five seconds
-        if (this.saveTimer!== undefined) {
+        if (this.saveTimer !== undefined) {
           clearTimeout(this.saveTimer);
         }
         this.saveTimer = setTimeout(() => {
           this.localSave(this.props.mediaUrl);
-        }, 5000);
+        }, 1000);
       });
     }
   }
@@ -149,7 +142,6 @@ class TimedTextEditor extends React.Component {
   }
 
   localSave = () => {
-    console.log('localSave');
     clearTimeout(this.saveTimer);
     let mediaUrlName = this.props.mediaUrl;
     // if using local media instead of using random blob name
@@ -268,7 +260,7 @@ class TimedTextEditor extends React.Component {
    */
   customKeyBindingFn = (e) => {
     const enterKey = 13;
-    const spaceKey =32;
+    const spaceKey = 32;
     const kKey = 75;
     const lKey = 76;
     const jKey = 74;
@@ -406,9 +398,9 @@ class TimedTextEditor extends React.Component {
     // if it's the last char in the paragraph - get previous entity
     if (remainingCharNumber === 0 ) {
       isEndOfParagraph = true;
-      for (let j = lengthPlainTextForTheBlock; j >0 ; j--) {
+      for (let j = lengthPlainTextForTheBlock; j > 0 ; j--) {
         entityKey = originalBlock.getEntityAt(j);
-        if (entityKey!== null) {
+        if (entityKey !== null) {
           // if it finds it then return
           return { entityKey, isEndOfParagraph };
         }
@@ -416,10 +408,9 @@ class TimedTextEditor extends React.Component {
     }
     // if it's first char or another within the block - get next entity
     else {
-      console.log('Main part of paragraph');
       let initialSelectionOffset = currentSelection.getStartOffset();
       for (let i = 0; i < remainingCharNumber ; i++) {
-        initialSelectionOffset +=i;
+        initialSelectionOffset += i;
         entityKey = originalBlock.getEntityAt(initialSelectionOffset);
         // if it finds it then return
         if (entityKey !== null) {
@@ -482,25 +473,6 @@ class TimedTextEditor extends React.Component {
   }
 
   render() {
-    const helpMessage = <div className={ style.helpMessage }>
-      <span><FontAwesomeIcon className={ style.icon } icon={ faMousePointer } />Double click on a word or timestamp to jump to that point in the video.</span>
-      <span><FontAwesomeIcon className={ style.icon } icon={ faICursor } />Start typing to edit text.</span>
-      <span><FontAwesomeIcon className={ style.icon } icon={ faUserEdit } />You can add and change names of speakers in your transcript.</span>
-      <span><FontAwesomeIcon className={ style.icon } icon={ faKeyboard } />Use keyboard shortcuts for quick control.</span>
-      <span><FontAwesomeIcon className={ style.icon } icon={ faSave } />Save & export to get a copy to your desktop.</span>
-    </div>;
-
-    const tooltip = <Tooltip
-      className={ style.help }
-      content={ helpMessage }
-      fadeDuration={ 250 }
-      fadeEasing={ 'ease-in' }
-      placement={ 'bottom' }
-      radius={ 5 }>
-      <FontAwesomeIcon className={ style.icon } icon={ faQuestionCircle } />
-      How does this work?
-    </Tooltip>;
-
     const currentWord = this.getCurrentWord();
     const highlightColour = '#69e3c2';
     const unplayedColor = '#767676';
@@ -512,8 +484,12 @@ class TimedTextEditor extends React.Component {
     const editor = (
       <section
         className={ style.editor }
-        onDoubleClick={ event => this.handleDoubleClick(event) }>
-
+        onDoubleClick={ event => this.handleDoubleClick(event) }
+        // TODO: decide if on mobile want to have a way to "click" on words
+        // to play corresponding media
+        // a double tap would be the ideal solution
+        // onTouchStart={ event => this.handleDoubleClick(event) }
+      >
         <style scoped>
           {`span.Word[data-start="${ currentWord.start }"] { background-color: ${ highlightColour }; text-shadow: 0 0 0.01px black }`}
           {`span.Word[data-start="${ currentWord.start }"]+span { background-color: ${ highlightColour } }`}
@@ -535,7 +511,6 @@ class TimedTextEditor extends React.Component {
 
     return (
       <section>
-        { tooltip }
         { this.props.transcriptData !== null ? editor : null }
       </section>
     );
@@ -576,7 +551,10 @@ TimedTextEditor.propTypes = {
   isScrollIntoViewOn: PropTypes.bool,
   isPauseWhileTypingOn: PropTypes.bool,
   timecodeOffset: PropTypes.number,
-  handleAnalyticsEvents: PropTypes.func
+  handleAnalyticsEvents: PropTypes.func,
+  showSpeakers: PropTypes.bool,
+  showTimecodes: PropTypes.bool,
+  fileName: PropTypes.string
 };
 
 export default TimedTextEditor;
diff --git a/src/lib/TranscriptEditor/TimedTextEditor/index.module.css b/src/lib/TranscriptEditor/TimedTextEditor/index.module.css
index 170c81a4..3ff4ecbe 100644
--- a/src/lib/TranscriptEditor/TimedTextEditor/index.module.css
+++ b/src/lib/TranscriptEditor/TimedTextEditor/index.module.css
@@ -12,34 +12,20 @@ https://github.com/facebook/draft-js/issues/528
   max-height: 75vh;
   overflow: auto;
   background-color: white;
-  padding: 20px;
-  width: 80%;
-  margin: 0 auto;
 }
 
-@media (max-width: 768px) {
-  .editor {
-    width: 100%;
+/* Desktop size */
+@media (min-width: 768px) {
+  .editor :global(.public-DraftEditor-content) {
+    padding: 20px;
+    width: 80%;
     margin: 0 auto;
   }
 }
-
-.help {
-  cursor: pointer;
-  float: right;
-  padding-right: 0.5em;
-  padding-left: 11em;
-  margin: 0.5em 0;
-}
-
-.icon {
-  color: color-labs-red;
-  margin-right: 0.5em;
+/* Mobile devices */
+@media (max-width: 768px) {
+  .editor :global(.public-DraftEditor-content){
+    margin: 0 auto;
+  }
 }
 
-.helpMessage span {
-  display: block;
-  font-size: 0.8em;
-  font-weight: lighter;
-  margin-top: 1em;
-}
diff --git a/src/lib/TranscriptEditor/index.js b/src/lib/TranscriptEditor/index.js
index 6aa04cee..c6394ebc 100644
--- a/src/lib/TranscriptEditor/index.js
+++ b/src/lib/TranscriptEditor/index.js
@@ -2,10 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCog, faKeyboard } from '@fortawesome/free-solid-svg-icons';
+import { faCog, faKeyboard, faQuestionCircle, faMousePointer, faICursor, faUserEdit, faSave } from '@fortawesome/free-solid-svg-icons';
+
+import Tooltip from 'react-simple-tooltip';
 
 import TimedTextEditor from './TimedTextEditor';
 import MediaPlayer from './MediaPlayer';
+import VideoPlayer from './MediaPlayer/VideoPlayer';
 import Settings from './Settings';
 import Shortcuts from './Settings/Shortcuts';
 import { secondsToTimecode } from '../Util/timecode-converter/index';
@@ -15,6 +18,7 @@ import style from './index.module.css';
 class TranscriptEditor extends React.Component {
   constructor(props) {
     super(props);
+    this.videoRef = React.createRef();
 
     this.state = {
       currentTime: 0,
@@ -27,7 +31,10 @@ class TranscriptEditor extends React.Component {
       rollBackValueInSeconds: 15,
       timecodeOffset: 0,
       showTimecodes: true,
-      showSpeakers: true
+      showSpeakers: true,
+      previewIsDisplayed: true,
+      mediaDuration: '00:00:00:00'
+      // previewViewWidth: '25'
     };
     this.timedTextEditorRef = React.createRef();
   }
@@ -70,7 +77,7 @@ class TranscriptEditor extends React.Component {
   }
 
   ifPresentRetrieveTranscriptFromLocalStorage = () => {
-    if (this.timedTextEditorRef.current!== undefined) {
+    if (this.timedTextEditorRef.current !== undefined) {
       if (this.timedTextEditorRef.current.isPresentInLocalStorage(this.props.mediaUrl)) {
         console.info('was already present in local storage');
         this.timedTextEditorRef.current.loadLocalSavedData(this.props.mediaUrl);
@@ -95,7 +102,8 @@ class TranscriptEditor extends React.Component {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  handleTimeUpdate = (currentTime) => {
+  handleTimeUpdate = (e) => {
+    const currentTime = e.target.currentTime;
     this.setState({
       currentTime,
     });
@@ -222,22 +230,69 @@ class TranscriptEditor extends React.Component {
     return this.timedTextEditorRef.current.getEditorContent(exportFormat);
   }
 
+  handlePreviewIsDisplayed = () => {
+    this.setState({
+      previewIsDisplayed: !this.state.previewIsDisplayed
+    });
+  }
+
+  onLoadedDataGetDuration = (e) => {
+    const currentDuration = e.target.duration;
+    const currentDurationWithOffset = currentDuration + this.state.timecodeOffset;
+    const durationInSeconds = secondsToTimecode( currentDuration + currentDurationWithOffset);
+
+    this.setState({
+      mediaDuration: durationInSeconds
+    });
+
+    if (this.props.handleAnalyticsEvents !== undefined) {
+      this.props.handleAnalyticsEvents({
+        category: 'TranscriptEditor',
+        action: 'onLoadedDataGetDuration',
+        name: 'durationInSeconds-WithoutOffset',
+        value: secondsToTimecode( currentDuration)
+      });
+    }
+
+  }
+
+  handleChangePreviewViewWidth = (e) => {
+    const newPreviewViewWidth = e.target.value;
+    this.setState({
+      previewViewWidth: newPreviewViewWidth
+    });
+  }
+
   handleSaveTranscript = () => {
+    alert('The changes to this transcript have been saved in your browser');
+
     return this.timedTextEditorRef.current.localSave(this.props.mediaUrl);
   }
 
   render() {
-    const mediaPlayer = <MediaPlayer
-      fileName={ this.props.fileName }
+    const videoPlayer = <VideoPlayer
+      mediaUrl={ this.props.mediaUrl }
+      onTimeUpdate= { this.handleTimeUpdate }
+      onClick= { this.props.onClick }
+      videoRef={ this.videoRef }
+      previewIsDisplayed={ this.state.previewIsDisplayed }
+      onLoadedDataGetDuration={ this.onLoadedDataGetDuration }
+      // viewWith={ this.state.previewViewWidth }
+    />;
+
+    const mediaControls = <MediaPlayer
+      title={ this.props.title ? this.props.title : '' }
+      mediaDuration={ this.state.mediaDuration }
       hookSeek={ foo => this.setCurrentTime = foo }
       hookPlayMedia={ foo => this.playMedia = foo }
       hookIsPlaying={ foo => this.isPlaying = foo }
       rollBackValueInSeconds={ this.state.rollBackValueInSeconds }
       timecodeOffset={ this.state.timecodeOffset }
-      hookOnTimeUpdate={ this.handleTimeUpdate }
+      // hookOnTimeUpdate={ this.handleTimeUpdate }
       mediaUrl={ this.props.mediaUrl }
       // ref={ 'MediaPlayer' }
       handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
+      videoRef={ this.videoRef }
       handleSaveTranscript={ this.handleSaveTranscript }
     />;
 
@@ -256,6 +311,10 @@ class TranscriptEditor extends React.Component {
       handleShowTimecodes={ this.handleShowTimecodes }
       handleShowSpeakers={ this.handleShowSpeakers }
       handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
+      previewIsDisplayed={ this.state.previewIsDisplayed }
+      handlePreviewIsDisplayed={ this.handlePreviewIsDisplayed }
+      // previewViewWidth={ this.state.previewViewWidth }
+      handleChangePreviewViewWidth={ this.handleChangePreviewViewWidth }
     />;
 
     const shortcuts = <Shortcuts
@@ -281,14 +340,38 @@ class TranscriptEditor extends React.Component {
       handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
     />;
 
+    const helpMessage = <div className={ style.helpMessage }>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faMousePointer } />Double click on a word or timestamp to jump to that point in the video.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faICursor } />Start typing to edit text.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faUserEdit } />You can add and change names of speakers in your transcript.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faKeyboard } />Use keyboard shortcuts for quick control.</span>
+      <span><FontAwesomeIcon className={ style.icon } icon={ faSave } />Save & export to get a copy to your desktop.</span>
+    </div>;
+
+    const tooltip = <Tooltip
+      className={ style.help }
+      content={ helpMessage }
+      fadeDuration={ 250 }
+      fadeEasing={ 'ease-in' }
+      placement={ 'bottom' }
+      radius={ 5 }
+      border={ '#ffffff' }
+      background={ '#f2f2f2' }
+      color={ '#000000' }
+    >
+      <FontAwesomeIcon className={ style.icon } icon={ faQuestionCircle } />
+    How does this work?
+    </Tooltip>;
+
     return (
       <div className={ style.container }>
         <header className={ style.header }>
           { this.state.showSettings ? settings : null }
           { this.state.showShortcuts ? shortcuts : null }
+          {tooltip}
         </header>
 
-        <aside className={ style.aside }>{ this.props.mediaUrl ? mediaPlayer : null }</aside>
+        <nav className={ style.nav }>{ this.props.mediaUrl === null ? null : mediaControls }</nav>
 
         <div className={ style.settingsContainer }>
           <button className={ style.settingsButton } onClick={ this.handleSettingsToggle }>
@@ -299,15 +382,25 @@ class TranscriptEditor extends React.Component {
           </button>
         </div>
 
-        <main className={ style.main }>
-          {this.props.mediaUrl === null? null : timedTextEditor}
-        </main>
+        {/*  */}
+
+        <section className={ style.row }>
+          <aside className={ style.aside }>
+            {this.props.mediaUrl === null ? null : videoPlayer}
+          </aside>
+          <main className={ style.main }>
+            {this.props.mediaUrl === null ? null : timedTextEditor}
+          </main>
+        </section>
+
       </div>
     );
   }
 }
 
 TranscriptEditor.propTypes = {
+  onClick: PropTypes.func,
+  title: PropTypes.string,
   mediaUrl: PropTypes.string,
   isEditable: PropTypes.bool,
   sttJsonType: PropTypes.string,
diff --git a/src/lib/TranscriptEditor/index.module.css b/src/lib/TranscriptEditor/index.module.css
index 8f08e6fc..95bed551 100644
--- a/src/lib/TranscriptEditor/index.module.css
+++ b/src/lib/TranscriptEditor/index.module.css
@@ -1,13 +1,40 @@
 @value color-subt-green, color-darkest-grey, color-labs-red from './colours.module.css';
 
+::selection {
+  background: color-subt-green;
+}
+
+::moz-selection {
+  background: color-subt-green;
+}
+
+.help {
+  text-align: center;
+  cursor: pointer;
+  float: right;
+  padding-right: 0.5em;
+  margin: 0.5em 0;
+  color: white;
+  display: block;
+  font-weight: lighter;
+  margin-top: 0.5em;
+  margin-right: 6em;
+}
+
+.icon {
+  color: color-labs-red;
+  margin-right: 0.5em;
+}
+
+.helpMessage span {
+  display: block;
+  font-weight: lighter;
+  margin-top: 1em; 
+}
+
 /* Desktop size */
 @media (min-width: 768px) {
   .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-    flex-wrap: nowrap;
-    /* min-height: 100vh; */
     background-color: #f9f9f9;
     position: relative;
   }
@@ -15,18 +42,28 @@
   .header {
     background-color: black;
     width: 100%;
-    height: 2em;
   }
 
-  .main {
+  .nav {
     width: 100%;
-    margin: 0 auto;
   }
 
-  .aside {
-    width: 100%;
+  .row {
+    display: flex;
+    margin-top: 1em;
+  }
+
+  .aside{
+    margin-left: auto;
   }
 
+  .main {
+    width: 60%;
+    margin: auto;
+  }
+
+
+
   .settingsContainer {
     position: absolute;
     top: 0;
@@ -49,24 +86,71 @@
   }
 }
 
-/* Mobile devices */
-@media (max-width: 768px) {
+/* Ipad */
+@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
+  .row {
+    display: flex;
+    margin-top: 1em;
+  }
+
+  .aside{
+    margin-left: auto;
+  }
+
+  .main {
+    margin-top:0em;
+    margin-right: auto;
+  }
+
+}
+
+/* Mobile devices - excluding ipad*/
+@media (max-width: 767px) {
+
   .container {
-    flex-wrap: wrap;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    flex-wrap: nowrap;
+    background-color: #f9f9f9;
     position: relative;
   }
-  .main {
+
+  .header {
+    background-color: black;
     width: 100%;
   }
-  .aside {
+
+  .nav {
     width: 100%;
   }
-}
 
-::selection {
-  background: color-subt-green;
-}
+  .main {
+    width: 100%;
+    margin: 0 auto;
+    margin-top: 1em;
+  }
 
-::moz-selection {
-  background: color-subt-green;
+  .settingsContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0em;
+  }
+
+  .settingsButton {
+    line-height: 1em;
+    margin-left: 0.5em;
+    background: color-darkest-grey;
+    display: inline-block;
+    border: 0;
+    color: white;
+    font-size: 1em;
+    cursor: pointer;
+    text-align: center;
+    width: 2em;
+    height: 2em;
+  }
 }
+
+
diff --git a/src/lib/Util/adapters/speechmatics/index.js b/src/lib/Util/adapters/speechmatics/index.js
index 56335129..b0a3738c 100644
--- a/src/lib/Util/adapters/speechmatics/index.js
+++ b/src/lib/Util/adapters/speechmatics/index.js
@@ -58,8 +58,8 @@ const curatePunctuation = (words) => {
   const curatedWords = [];
   words.forEach((word) => {
     if (/[.?!]/.test(word.name)) {
-      curatedWords[curatedWords.length-1].name = curatedWords[curatedWords.length-1].name + word.name;
-      curatedWords[curatedWords.length-1].duration = (parseFloat(curatedWords[curatedWords.length-1].duration) + parseFloat(word.duration)).toString();
+      curatedWords[curatedWords.length - 1].name = curatedWords[curatedWords.length - 1].name + word.name;
+      curatedWords[curatedWords.length - 1].duration = (parseFloat(curatedWords[curatedWords.length - 1].duration) + parseFloat(word.duration)).toString();
     } else {
       curatedWords.push(word);
     }