Fix #133 speaker not editable in read only mode (#207)

* fixes issue #133

* Working

if isEditable is true can edit speaker label, if false, cannot

* adjusted CSS accordingly

Author: Pietro

packages/components/timed-text-editor/SpeakerLabel.js

@@ -9,9 +9,9 @@ import style from './WrapperBlock.module.css';
 class SpeakerLabel extends PureComponent {
   render() {
     return (
-      <span className={ style.speaker }
+      <span className={ this.props.isEditable? [style.speaker, style.speakerEditable].join(' '):  [style.speaker, style.speakerNotEditable].join(' ')}
         title={ this.props.name }
-        onClick={ this.props.handleOnClickEdit }>
+        onClick={ this.props.isEditable? this.props.handleOnClickEdit: null } >
         <span className={ style.EditLabel }>
           <FontAwesomeIcon icon={ faUserEdit } />
         </span>

packages/components/timed-text-editor/WrapperBlock.js

@@ -55,6 +55,10 @@ class WrapperBlock extends React.Component {
       return true;
     }
 
+    if (nextProps.blockProps.isEditable !== this.props.blockProps.isEditable) {
+      return true;
+    }
+
     return false;
   };
 
@@ -125,6 +129,7 @@ class WrapperBlock extends React.Component {
       <SpeakerLabel
         name={ this.state.speaker }
         handleOnClickEdit={ this.handleOnClickEdit }
+        isEditable={this.props.blockProps.isEditable}
       />
     );
 

packages/components/timed-text-editor/WrapperBlock.module.css

@@ -54,6 +54,32 @@ to get text out of component with timecodes and speaker names in the interim */
   }
 }
 
+
+.time {
+  font-weight: lighter;
+  cursor: pointer;
+  justify-self: start;
+}
+
+.time:hover {
+  text-decoration: underline;
+
+  /* color: blue; */
+}
+
+.speakerEditable {
+  cursor: pointer;
+}
+
+.speakerNotEditable {
+  cursor: no-drop;
+}
+
+.EditLabel {
+  margin-right: 0.5em;
+}
+
+
 /* Mobile devices */
 @media (max-width: 768px) {
 
@@ -92,23 +118,3 @@ to get text out of component with timecodes and speaker names in the interim */
     /* clear: right; */
   }
 }
-
-.time {
-  font-weight: lighter;
-  cursor: pointer;
-  justify-self: start;
-}
-
-.time:hover {
-  text-decoration: underline;
-
-  /* color: blue; */
-}
-
-.speaker {
-  cursor: pointer;
-}
-
-.EditLabel {
-  margin-right: 0.5em;
-}

packages/components/timed-text-editor/index.js

@@ -43,7 +43,8 @@ class TimedTextEditor extends React.Component {
     if (
       prevProps.timecodeOffset !== this.props.timecodeOffset ||
       prevProps.showSpeakers !== this.props.showSpeakers ||
-      prevProps.showTimecodes !== this.props.showTimecodes
+      prevProps.showTimecodes !== this.props.showTimecodes ||
+      prevProps.isEditable !== this.props.isEditable
     ) {
       // forcing a re-render is an expensive operation and
       // there might be a way of optimising this at a later refactor (?)
@@ -531,6 +532,7 @@ class TimedTextEditor extends React.Component {
           setEditorNewContentState={this.setEditorNewContentState}
           onWordClick={this.onWordClick}
           handleAnalyticsEvents={this.props.handleAnalyticsEvents}
+          isEditable={this.props.isEditable}
         />
       </section>
     );
@@ -608,7 +610,8 @@ class CustomEditor extends React.Component {
         editorState: this.props.editorState,
         setEditorNewContentState: this.props.setEditorNewContentState,
         onWordClick: this.handleWordClick,
-        handleAnalyticsEvents: this.props.handleAnalyticsEvents
+        handleAnalyticsEvents: this.props.handleAnalyticsEvents,
+        isEditable: this.props.isEditable
       }
     };
   };
@@ -619,6 +622,10 @@ class CustomEditor extends React.Component {
       return true;
     }
 
+    if (nextProps.isEditable !== this.props.isEditable) {
+      return true;
+    }
+
     return false;
   }