Keyboard navigation

stylesheets/_session_conversation.scss

@@ -256,6 +256,13 @@ $composition-container-height: 60px;
     }
   }
 
+  &--visualisation {
+    margin-top: -900px;
+    z-index: 1000;
+    height: 400px;
+    width: 100%;
+  }
+
   &--delete {
     display: flex;
     justify-content: center;

ts/components/session/conversation/SessionConversation.tsx

@@ -56,7 +56,7 @@ export class SessionConversation extends React.Component<any, State> {
     this.renderTimerNotification = this.renderTimerNotification.bind(this);
     this.renderFriendRequest = this.renderFriendRequest.bind(this);
 
-    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
     this.onStartedRecording = this.onStartedRecording.bind(this);
     this.onStoppedRecording = this.onStoppedRecording.bind(this);
     this.selectMessage = this.selectMessage.bind(this);
@@ -111,7 +111,7 @@ export class SessionConversation extends React.Component<any, State> {
       <div
         className={classNames('conversation-item', selectionMode && 'selection-mode')}
         tabIndex={0}
-        onKeyUp={this.onKeyUp}  
+        onKeyDown={this.onKeyDown}  
       >
         <div className="conversation-header">
           {this.renderHeader()}
@@ -614,26 +614,61 @@ export class SessionConversation extends React.Component<any, State> {
   private onStartedRecording() {
     this.setState({
       isRecording: true,
+      selectedMessages: [],
     })
   }
 
   private onStoppedRecording() {
     this.setState({
       isRecording: false,
-    })
+    });
+
+    console.log(`[vince] Stopped recording entirely`);
   }
 
-  private onKeyUp(event: any) {
+  private onKeyDown(event: any) {
     const selectionMode = !!this.state.selectedMessages.length;
+    
+    const messageContainer = document.getElementsByClassName('messages-container')[0];
+    const pageHeight = messageContainer.clientHeight;
+    const arrowScrollPx = 50;
+    const pageScrollPx = 0.80 * pageHeight;
+    
     console.log(`[vince][key] event: `, event);
 
     console.log(`[vince][key] key: `, event.key);
     console.log(`[vince][key] key: `, event.keyCode);
     if (event.key === 'Escape') {
-      if (selectionMode){
-        this.resetSelection();
-      }
+      
     }
+
+    switch(event.key){
+      case 'Escape':
+        if (selectionMode){
+          this.resetSelection();
+        }
+        break;
+
+      // Scrolling
+      case 'ArrowUp':
+        messageContainer.scrollBy(0, -arrowScrollPx);
+        break;
+      case 'ArrowDown':
+        messageContainer.scrollBy(0, arrowScrollPx);
+        break;
+      case 'PageUp':
+        messageContainer.scrollBy(0, -pageScrollPx);
+        break;
+      case 'PageDown':
+        messageContainer.scrollBy(0, pageScrollPx);
+        break;
+      default:
+        break;
+    }
+
+
+
   }
 }
 
+

ts/components/session/conversation/SessionRecording.tsx

@@ -81,14 +81,14 @@ export class SessionRecording extends React.Component<Props, State> {
             )}
         </div>
 
-        {/* <ReactMic
+        <ReactMic
             record={this.state.isRecording}
-            visualSetting={'frequencyBars'}
             className='session-recording--visualisation'
             onStop={() => null}
             onData= {(data: any) => console.log(`[vince][mic] Data:`, data)}
             strokeColor={'#00F480'}
-        /> */}
+            backgroundColor={'blue'}
+        />
 
 
         <div className="send-message-button">
@@ -149,7 +149,8 @@ export class SessionRecording extends React.Component<Props, State> {
   }
 
   private onDeleteVoiceMessage() {
-      console.log(`[vince][mic] Deleting voice message`)
+    this.onStopRecording();
+    this.props.onStoppedRecording();
   }
 
   private onSendVoiceMessage() {