adjusted Select

Author: Pietro Passarelli - News Labs

src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js

@@ -14,7 +14,8 @@ import {
   faPause,
   faBackward,
   faForward,
-  faUndo
+  faUndo,
+  faStepBackward
 } from '@fortawesome/free-solid-svg-icons';
 
 class PlayerControls extends React.Component {

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

@@ -5,8 +5,9 @@
   margin-top: 0.5em;
   margin-left: 0.5em;
   margin: 1em;
-  display: flex;
-  justify-content: flex-start;
+  /* display: flex; */
+  /* justify-content: flex-start; */
+  
 }
 
 .playerControls > * {
@@ -15,7 +16,7 @@
 
 .playerControls > *:not(:last-child) {
   margin-right: 0.5em;
-  background: color-darkest-grey;
+  /* background: color-darkest-grey; */
 }
 
 .playerButton {
@@ -30,23 +31,28 @@
   /* border-color: black;
   border-width: 0.1rem;
   border-style: solid; */
+
+  margin-right: 0.3rem;
 }
 
 .playBackRate{
+  height: 48px;
+  width: 70px;
   border: 0;
   color: white;
-  background: color-darkest-grey;
+  /* background: color-darkest-grey; */
   font-size: 1em;
   cursor: pointer;
   position: relative;
   padding-left: 0.8em;
+  margin-right: 0.3rem;
 }
 
 .playBackRate::before{
   content: '×';
   position: absolute;
   bottom: -2px;
-  left: 12px;
+  left: 30px;/*<--  */
 }
 
 .playBackRate > select {
@@ -65,6 +71,7 @@
   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: 70px!important;
+    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;

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

@@ -11,9 +11,9 @@
 }
 
 .controlsSection {
-  width: 98%;
-  display: flex;
-  flex-direction: column;
+  /* width: 98%; */
+  /* display: flex; */
+  /* flex-direction: column; */
 }
 
 .titleBox {

src/lib/TranscriptEditor/TimedTextEditor/WrapperBlock.js

@@ -99,7 +99,8 @@ class WrapperBlock extends React.Component {
       <div className={ style.WrapperBlock }>
         <div className={ style.markers }>
           {this.props.blockProps.showSpeakers ? speakerElement : ''}
-          {this.props.blockProps.showTimecodes ? timecodeElement : ''}
+
+          {this.props.blockProps.showTimecodes ? timecodeElement: ''}
         </div>
         <div className={ style.text }>
           <EditorBlock { ...this.props } />

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

@@ -47,6 +47,11 @@
   margin-right: 0.5em;
 }
 
+.time:hover{
+  text-decoration: underline;
+   /* color: blue; */
+}
+
 .EditLabel {
   cursor: pointer;
   margin-right: 0.5em;