UI Tweaks

Author: Pietro Passarelli - News Labs

src/index.js

@@ -19,8 +19,7 @@ class App extends React.Component {
       isTextEditable: true,
       sttType: 'bbckaldi',
       analyticsEvents: [],
-      title: 'Ted Talk Kate Kate Darling',
-      fileName: 'Kate Darling Ted Talk'
+      title: 'Ted Talk Kate Darling'
     };
   }
 
@@ -198,13 +197,6 @@ class App extends React.Component {
            onChange={ e => this.handleChangeTranscriptTitle(e.target.value) }
          />
          <br />
-         <label>Transcript Name</label>
-         <input
-           type="text"
-           onChange={ e => this.handleChangeTranscriptName(e.target.value) }
-           value={ this.state.fileName }
-         />
-         <br />
          <button onClick={ () => this.clearLocalStorage() }>Clear Local Storage</button>
          <hr/>
 

src/lib/TranscriptEditor/MediaPlayer/PlayerControls.js

@@ -110,18 +110,6 @@ class PlayerControls extends React.Component {
           handleMuteVolume={ this.props.handleMuteVolume }
         />
 
-        <div style={ {
-          color: 'white',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          width: '20vw',
-          display: 'inline-block',
-          marginLeft: '1em'
-        } }>
-          {this.props.title}
-        </div>
-
       </div>
     );
   }

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

@@ -2,9 +2,9 @@
 
 .playerControls {
   /* margin: 1em; */
-  margin-top: 0.5em;
+  margin-top: 0.25em;
   margin-left: 0.5em;
-  margin: 1em;
+  /* margin: 1em; */
   /* display: flex; */
   /* justify-content: flex-start; */
 
@@ -28,11 +28,8 @@
   background: color-darkest-grey;
   font-size: 1em;
   cursor: pointer;
-  /* border-color: black;
-  border-width: 0.1rem;
-  border-style: solid; */
-
   margin-right: 0.3rem;
+  margin-bottom: 0.3rem;
 }
 
 .playBackRate{
@@ -72,6 +69,7 @@
   line-height: 48px;
   padding: 0 1em;
   background-color: color-darkest-grey;
+  margin-bottom: 0.3rem;
 }
 
 .currentTime {

src/lib/TranscriptEditor/MediaPlayer/index.js

@@ -373,11 +373,11 @@ class MediaPlayer extends React.Component {
 
     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> */}
+        <div className={ styles.title }>
+          {this.props.title? this.props.title: ''}
+        </div>
         <PlayerControls
-          title={ this.props.title? this.props.title: '' }
+          // title={ this.props.title? this.props.title: '' }
           playMedia={ this.togglePlayMedia.bind(this) }
           isPlaying={ this.state.isPlaying }
           playbackRate={ this.state.playbackRate }

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

@@ -4,33 +4,27 @@
   background: black;
 }
 
+.title{
+    color: white;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 97vw;
+    display: inline-block;
+    margin-left: 0.5em;
+}
+
 .playerSection {
   display: inline-flex;
   align-items: flex-start;
   width: 100%;
 }
 
-.controlsSection {
-  /* width: 98%; */
-  /* display: flex; */
-  /* flex-direction: column; */
-}
-
 .titleBox {
   border-bottom: 0.02em solid color-light-grey;
   margin-bottom: 1em;
 }
 
-.title {
-  margin: 1em;
-  color: white;
-  height: 1.3em;
-  font-size: 16px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .helpText {
   margin-top: 0px;
   margin-bottom: 0.1em;
@@ -41,8 +35,4 @@
   .hideInMobile {
     display: none;
   }
-
-  video {
-    /* min-width: 50%; */
-  }
 }

src/lib/TranscriptEditor/index.js

@@ -392,6 +392,7 @@ class TranscriptEditor extends React.Component {
         </section>
 
       </div>
+
     );
   }
 }

src/lib/TranscriptEditor/index.module.css

@@ -16,15 +16,16 @@
     flex-direction: column;
     justify-content: space-evenly;
     flex-wrap: nowrap;
-    /* min-height: 100vh; */
     background-color: #f9f9f9;
     position: relative;
   }
 
   .header {
     background-color: black;
     width: 100%;
-    /* height: 2em; */
+  }
+  .aside{
+    margin-left:0.5em;
   }
 
   .nav {
@@ -74,7 +75,6 @@
   .header {
     background-color: black;
     width: 100%;
-    /* height: 2em; */
   }
 
   .nav {
@@ -87,7 +87,6 @@
   }
 
   .row {
-    /* display: flex; */
     margin-top: 1em;
   }
 
@@ -124,18 +123,16 @@
   .cog {
     font-weight: lighter;
   }
-
 }
 
 .help {
   cursor: pointer;
   float: right;
   padding-right: 0.5em;
-  padding-left: 11em;
+  /* padding-left: 11em; */
   margin: 0.5em 0;
   color: white;
   display: block;
-  /* font-size: 0.8em; */
   font-weight: lighter;
   margin-top: 0.5em;
   margin-right: 6em;
@@ -148,7 +145,6 @@
 
 .helpMessage span {
   display: block;
-  /* font-size: 0.8em; */
   font-weight: lighter;
   margin-top: 1em; 
 }