From 56ae7055cb3079d2216ffc28ef5eb4f5f657aa2e Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Fri, 28 Feb 2020 13:15:00 +1100
Subject: [PATCH] Keyboard navigation

---
 stylesheets/_session_conversation.scss        |  7 +++
 .../conversation/SessionConversation.tsx      | 49 ++++++++++++++++---
 .../session/conversation/SessionRecording.tsx |  9 ++--
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index a37f64df6..b24a59e84 100644
--- a/stylesheets/_session_conversation.scss
+++ b/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;
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index 2ddf44012..0f9ccb499 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/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;
+    }
+
+
+
   }
 }
 
+
diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx
index e55b190aa..af69847e1 100644
--- a/ts/components/session/conversation/SessionRecording.tsx
+++ b/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() {