Merge branch 'master' into layout-change

Author: pietrop

.eslintrc

@@ -43,6 +43,7 @@
     "newline-before-return": "error",
     "space-before-blocks": "error",
     "no-unused-vars": "error",
+    "no-multi-spaces": "warn",
     "comma-spacing": ["error", { "before": false, "after": true }],
     "prefer-destructuring": ["error", {
       "VariableDeclarator": {

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@bbc/react-transcript-editor",
   "description": "A React component to make transcribing audio and video easier and faster.",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "keywords": [
     "transcript",
     "transcriptions",
@@ -82,6 +82,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-keyboard-shortcuts": "^1.1.3"
+    "react-keyboard-shortcuts": "^1.1.3",
+    "react-simple-tooltip": "^2.3.3"
   }
 }

package.json

@@ -19,7 +19,7 @@ class RollBack extends React.Component {
           onChange={ this.props.handleChangeReplayRollbackValue }
         />
         <br/>
-        <button type="button" onClick={ this.props.rollBack  }>↺</button>
+        <button type="button" onClick={ this.props.rollBack }>↺</button>
 
       </div>
     );

src/lib/TranscriptEditor/MediaPlayer/RollBack.js

@@ -2,13 +2,13 @@ function returnHotKeys(self) {
   return {
     'alt+space': {
       priority: 1,
-      handler: () => { 
-        self.togglePlayMedia(); 
-        
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'alt+space', 
-          name: 'togglePlayMedia', 
+      handler: () => {
+        self.togglePlayMedia();
+
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'alt+space',
+          name: 'togglePlayMedia',
           value: 'na'
         });
 
@@ -18,12 +18,12 @@ function returnHotKeys(self) {
     'shift+right': {
       priority: 1,
       handler: () => {
-        self.skipForward(); 
+        self.skipForward();
 
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'alt+right', 
-          name: 'skipForward', 
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'alt+right',
+          name: 'skipForward',
           value: 'na'
         });
 
@@ -32,13 +32,13 @@ function returnHotKeys(self) {
     },
     'shift+left': {
       priority: 1,
-      handler: () => { 
-        self.skipBackward(); 
+      handler: () => {
+        self.skipBackward();
 
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'alt+left', 
-          name: 'skipBackward', 
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'alt+left',
+          name: 'skipBackward',
           value: 'na'
         });
 
@@ -47,13 +47,13 @@ function returnHotKeys(self) {
     },
     'shift+down': {
       priority: 1,
-      handler: () => { 
-        self.decreasePlaybackRate(); 
+      handler: () => {
+        self.decreasePlaybackRate();
 
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'command+down', 
-          name: 'decreasePlaybackRate', 
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'command+down',
+          name: 'decreasePlaybackRate',
           value: 'na'
         });
 
@@ -62,13 +62,13 @@ function returnHotKeys(self) {
     },
     'shift+up': {
       priority: 1,
-      handler: () => { 
-        self.increasePlaybackRate(); 
+      handler: () => {
+        self.increasePlaybackRate();
 
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'command+up', 
-          name: 'increasePlaybackRate', 
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'command+up',
+          name: 'increasePlaybackRate',
           value: 'na'
         });
 
@@ -77,13 +77,13 @@ function returnHotKeys(self) {
     },
     'alt+shift+left': {
       priority: 1,
-      handler: () => { 
-        self.rollBack(); 
-        
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'command+left', 
-          name: 'rollBack', 
+      handler: () => {
+        self.rollBack();
+
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'command+left',
+          name: 'rollBack',
           value: 'na'
         });
 
@@ -92,13 +92,13 @@ function returnHotKeys(self) {
     },
     'alt+k': {
       priority: 1,
-      handler: () => { 
+      handler: () => {
         self.promptSetCurrentTime();
-        
-        self.props.handleAnalyticsEvents({ 
-          category: 'defaultHotKeys', 
-          action: 'alt+k', 
-          name: 'promptSetCurrentTime', 
+
+        self.props.handleAnalyticsEvents({
+          category: 'defaultHotKeys',
+          action: 'alt+k',
+          name: 'promptSetCurrentTime',
           value: 'na'
         });
 

src/lib/TranscriptEditor/MediaPlayer/defaultHotKeys.js

@@ -41,7 +41,7 @@
 
 .shortcut {
   display: inline-block;
-  min-width: 4em;
+  width:  7em;
   background: color-labs-red;
   font-weight: lighter;
   color: white;

src/lib/TranscriptEditor/Settings/Shortcuts.module.css

@@ -23,10 +23,10 @@ class TimecodeOffset extends React.Component {
   resetTimecodeOffset = () => {
     const resetTimecodeOffsetValue = 0;
 
-    this.props.handleAnalyticsEvents({ 
-      category: 'TimecodeOffset', 
-      action: 'resetTimecodeOffset', 
-      name: 'resetTimecodeOffset', 
+    this.props.handleAnalyticsEvents({
+      category: 'TimecodeOffset',
+      action: 'resetTimecodeOffset',
+      name: 'resetTimecodeOffset',
       value: 0
     });
 
@@ -38,10 +38,10 @@ class TimecodeOffset extends React.Component {
   }
 
   setTimecodeOffset = () => {
-    this.props.handleAnalyticsEvents({ 
-      category: 'TimecodeOffset', 
-      action: 'setTimecodeOffset', 
-      name: 'setTimecodeOffset', 
+    this.props.handleAnalyticsEvents({
+      category: 'TimecodeOffset',
+      action: 'setTimecodeOffset',
+      name: 'setTimecodeOffset',
       value: this.state.timecodeOffset
     });
 

src/lib/TranscriptEditor/Settings/TimecodeOffset/index.js

@@ -16,4 +16,5 @@
 .button {
   font-weight: lighter;
   font-size: 0.8em;
+  cursor: pointer;
 }

src/lib/TranscriptEditor/Settings/TimecodeOffset/index.module.css

@@ -5,7 +5,7 @@ class Word extends PureComponent {
   generateConfidence = (data) => {
     // handling edge case where confidence score not present
     if (data.confidence) {
-      return  data.confidence > 0.6 ? 'high' : 'low';
+      return data.confidence > 0.6 ? 'high' : 'low';
     }
 
     return 'high';