Multiple layout/CSS fixes

+ Added Toggle sound

Author: Ivan Jimenez

src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import Select from './Select';
 
 import style from './PlayerControls.module.css';
@@ -13,7 +14,9 @@ import {
   faPause,
   faBackward,
   faForward,
-  faUndo
+  faUndo,
+  faVolumeUp,
+  faVolumeOff
 } from '@fortawesome/free-solid-svg-icons';
 
 class PlayerControls extends React.Component {
@@ -114,11 +117,18 @@ class PlayerControls extends React.Component {
           <button
             value="Picture-in-picture"
             title="Picture-in-picture"
-            className={ style.playerButton }
+            className={ style.playerButton + " " + style.pip }
             onClick={ this.props.pictureInPicture }>
             <FontAwesomeIcon icon={ faTv } />
           </button>
 
+          <button
+            value="Toggle Sound"
+            title="Toggle Sound"
+            className={ style.playerButton }
+            onClick={ this.props.handleMuteVolume }>
+            { this.props.isMute ? <FontAwesomeIcon icon={ faVolumeOff } /> : <FontAwesomeIcon icon={ faVolumeUp } /> }
+          </button>
         </div>
       </div>
     );
@@ -135,6 +145,7 @@ PlayerControls.propTypes = {
   handleMuteVolume: PropTypes.func,
   duration: PropTypes.string,
   isPlaying: PropTypes.bool,
+  isMute: PropTypes.bool,
   skipBackward: PropTypes.func,
   skipForward: PropTypes.func,
   playbackRate: PropTypes.number,

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

@@ -153,4 +153,8 @@
     float:right;
     line-height: 1em;
   }
+
+  .pip {
+    display:none;
+  }
 }

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

@@ -1,7 +1,7 @@
 @value color-light-grey, color-labs-red from '../colours.module.css';
 
 .progress {
-  margin-bottom:0.5em;
+  margin-bottom:1em;
 }
 
 input[type=range] {
@@ -48,7 +48,7 @@ input[type=range]::-moz-range-thumb {
   height: 22px;
   width: 22px;
   border-radius: 22px;;
-  background: rgb(255, 0, 0);
+  background:rgb(255, 255, 255);
 }
 
 /*hide the outline behind the border*/
@@ -84,7 +84,7 @@ input[type=range]::-ms-thumb {
   height: 16px;
   width: 16px;
   border-radius: 50%;
-  background: goldenrod;
+  background:rgb(255, 255, 255);
   margin-top: 0px;
 }
 input[type=range]:focus::-ms-fill-lower {

src/lib/TranscriptEditor/MediaPlayer/index.js

@@ -35,7 +35,9 @@ class MediaPlayer extends React.Component {
       hotKeys: returnHotKeys(this),
       isPlaying: false,
       playbackRateOptions: PLAYBACK_RATES,
-      previewIsDisplayed: true
+      previewIsDisplayed: true,
+      isMute: false
+
     };
   }
   /*eslint-disable camelcase */
@@ -213,8 +215,10 @@ class MediaPlayer extends React.Component {
     if (this.props.videoRef.current !== null) {
       if (this.props.videoRef.current.volume > 0) {
         this.props.videoRef.current.volume = 0;
+        this.setState({ isMute: true });
       } else {
         this.props.videoRef.current.volume = 1;
+        this.setState({ isMute: false });
       }
     }
   }
@@ -385,6 +389,7 @@ class MediaPlayer extends React.Component {
         <PlayerControls
           playMedia={ this.togglePlayMedia.bind(this) }
           isPlaying={ this.state.isPlaying }
+          isMute={ this.state.isMute }
           playbackRate={ this.state.playbackRate }
           skipBackward={ this.skipBackward.bind(this) }
           skipForward={ this.skipForward.bind(this) }

src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.module.css

@@ -5,7 +5,7 @@
 
   .markers {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 2fr 1fr;
   }
 
   .WrapperBlock {
@@ -22,11 +22,12 @@
     color: color-mid-grey;
     font-weight: bold;
     text-transform: uppercase;
-    text-align: right;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     justify-self: start;
+    max-width: 100px;
+    text-align: left;
   }
 
   .text {

src/lib/TranscriptEditor/index.module.css

@@ -8,6 +8,10 @@
   background: color-subt-green;
 }
 
+.container {
+  position:relative;
+}
+
 .help {
   text-align: center;
   cursor: pointer;
@@ -21,6 +25,11 @@
   margin-right: 6em;
 }
 
+.helpMessage {
+  min-width: 240px;
+  text-align: left;
+}
+
 @media (max-width: 760px) {
   .help {
     display:none;
@@ -48,7 +57,7 @@
   .header {
     background-color: black;
     width: 100%;
-    overflow: hidden;
+    display:block;
   }
 
   .nav {