Adding some css to player control

bbc · Feb 2, 2019 · 89a06ad · 89a06ad
1 parent eb53feb
commit 89a06ad
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 49 deletions.
diff --git a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js
@@ -43,41 +43,6 @@ class PlayerControls extends React.Component {
   render() {
     return (
       <div className={ style.playerControls }>
-        <button
-          className={ style.playerButton }
-          onClick={ this.props.rollback }>
-          <FontAwesomeIcon icon={ faUndo } />
-        </button>
-
-        <button
-          className={ style.playerButton }
-          onMouseDown={ this.setIntervalHelperBackward }
-          onMouseUp={ this.clearIntervalHelper }
-          onClick={ () => {this.props.skipBackward(); } }>
-          <FontAwesomeIcon icon={ faBackward } />
-        </button>
-
-        <button
-          className={ style.playerButton }
-          onClick={ this.props.playMedia }>
-          {this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
-        </button>
-
-        <button
-          className={ style.playerButton }
-          onMouseDown={ this.setIntervalHelperForward }
-          onMouseUp={ this.clearIntervalHelper }
-          onClick={ () => {this.props.skipForward(); } }>
-          <FontAwesomeIcon icon={ faForward } />
-        </button>
-
-        <span className={ style.playBackRate }>
-          <Select
-            options={ this.props.playbackRateOptions }
-            currentValue={ this.props.playbackRate.toString() }
-            name={ 'playbackRate' }
-            handleChange={ this.props.setPlayBackRate } />
-        </span>
 
         <div className={ style.timeBox }>
           <span className={ style.currentTime }
@@ -87,18 +52,58 @@ class PlayerControls extends React.Component {
           <span className={ style.duration }>{this.props.duration}</span>
         </div>
 
-        <button
-          className={ style.playerButton }
-          onClick={ this.props.handleSaveTranscript }>
-          <FontAwesomeIcon icon={ faSave } />
-        </button>
+        <div className={ style.btnsGroup }>
+          <button
+            className={ style.playerButton }
+            onClick={ this.props.rollback }>
+            <FontAwesomeIcon icon={ faUndo } />
+          </button>
+
+          <button
+            className={ style.playerButton }
+            onMouseDown={ this.setIntervalHelperBackward }
+            onMouseUp={ this.clearIntervalHelper }
+            onClick={ () => {this.props.skipBackward(); } }>
+            <FontAwesomeIcon icon={ faBackward } />
+          </button>
+
+          <button
+            className={ style.playerButton }
+            onClick={ this.props.playMedia }>
+            {this.props.isPlaying ? <FontAwesomeIcon icon={ faPause } /> : <FontAwesomeIcon icon={ faPlay } />}
+          </button>
+
+          <button
+            className={ style.playerButton }
+            onMouseDown={ this.setIntervalHelperForward }
+            onMouseUp={ this.clearIntervalHelper }
+            onClick={ () => {this.props.skipForward(); } }>
+            <FontAwesomeIcon icon={ faForward } />
+          </button>
+        </div>
 
-        <button
-          className={ style.playerButton }
-          onClick={ this.props.pictureInPicture }
-        >
-          <FontAwesomeIcon icon={ faTv } />
-        </button>
+        <div className={ style.btnsGroup }>
+          <span className={ style.playBackRate }>
+            <Select
+              options={ this.props.playbackRateOptions }
+              currentValue={ this.props.playbackRate.toString() }
+              name={ 'playbackRate' }
+              handleChange={ this.props.setPlayBackRate } />
+          </span>
+
+          <button
+            className={ style.playerButton }
+            onClick={ this.props.handleSaveTranscript }>
+            <FontAwesomeIcon icon={ faSave } />
+          </button>
+
+          <button
+            className={ style.playerButton }
+            onClick={ this.props.pictureInPicture }
+          >
+            <FontAwesomeIcon icon={ faTv } />
+          </button>
+        </div>
 
         <VolumeControl
           handleMuteVolume={ this.props.handleMuteVolume }
@@ -109,7 +114,7 @@ class PlayerControls extends React.Component {
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           overflow: 'hidden',
-          width: '40vw',
+          width: '20vw',
           display: 'inline-block',
           marginLeft: '1em'
         } }>

diff --git a/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css b/src/lib/TranscriptEditor/MediaPlayer/PlayerControls.module.css
@@ -6,6 +6,7 @@
   margin-left: 0.5em;
   margin: 1em;
   display: flex;
+  justify-content: flex-start;
 }
 
 .playerControls > * {
@@ -23,13 +24,18 @@
   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; */
 }
 
 .playBackRate{
   border: 0;
   color: white;
+  background: color-darkest-grey;
   font-size: 1em;
   cursor: pointer;
   position: relative;
@@ -39,7 +45,7 @@
 .playBackRate::before{
   content: '×';
   position: absolute;
-  bottom: 11px;
+  bottom: -2px;
   left: 12px;
 }
 
@@ -50,6 +56,8 @@
   outline: none;
   width: auto;
   width: 100%;
+  color:white;
+  background-color: color-darkest-grey;
 }
 
 .timeBox {

diff --git a/src/lib/TranscriptEditor/MediaPlayer/Select.module.css b/src/lib/TranscriptEditor/MediaPlayer/Select.module.css
@@ -4,7 +4,7 @@
     -moz-appearance: none;
     appearance: none;
     height: 20px;
-    width: 60px!important;
+    width: 70px!important;
     border-radius: 0;
     padding-left: 8px;
     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=);