Voice recording delete button

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -9,13 +9,15 @@ import { SessionRecording } from './SessionRecording';
 interface Props {
   placeholder?: string;
   sendMessage: any;
-  onStartedRecording: any;
+  
-  onStoppedRecording: any;
+  onLoadVoiceNoteView: any;
+  onExitVoiceNoteView: any;
 }
 
 interface State {
   message: string;
-  isRecording: boolean;
+  isRecordingView: boolean;
+
   mediaSetting: boolean | null;
   showEmojiPanel: boolean;
   attachments: Array<File>;
@@ -33,7 +35,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       message: '',
       attachments: [],
       voiceRecording: undefined,
-      isRecording: false,
+      isRecordingView: false,
       mediaSetting: null,
       showEmojiPanel: false,
     };
@@ -46,9 +48,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.renderRecordingView = this.renderRecordingView.bind(this);
     this.renderCompositionView = this.renderCompositionView.bind(this);
 
+    // Recording View render and unrender
+    this.onLoadVoiceNoteView = this.onLoadVoiceNoteView.bind(this);
+    this.onExitVoiceNoteView = this.onExitVoiceNoteView.bind(this);
+
     this.onKeyDown = this.onKeyDown.bind(this);
-    this.onStartedRecording = this.onStartedRecording.bind(this);
-    this.onStoppedRecording = this.onStoppedRecording.bind(this);
     this.onSendMessage = this.onSendMessage.bind(this);
     this.onChooseAttachment = this.onChooseAttachment.bind(this);
     
@@ -64,11 +68,11 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   render() {
-    const { isRecording } = this.state;
+    const { isRecordingView } = this.state;
 
     return (
       <div className="composition-container">
-        { isRecording ? (
+        { isRecordingView ? (
           <>{this.renderRecordingView()}</>
         ) : (
           <>{this.renderCompositionView()}</>
@@ -86,8 +90,8 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   private renderRecordingView() {
     return (
       <SessionRecording
-        onStartedRecording={this.onStartedRecording}
+        onLoadVoiceNoteView={this.onLoadVoiceNoteView}
-        onStoppedRecording={this.onStoppedRecording}
+        onExitVoiceNoteView={this.onExitVoiceNoteView}
       />
       );
   }
@@ -115,7 +119,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         <SessionIconButton
           iconType={SessionIconType.Microphone}
           iconSize={SessionIconSize.Huge}
-          onClick={this.onStartedRecording}
+          onClick={this.onLoadVoiceNoteView}
         />
 
         <div className="send-message-input">
@@ -180,13 +184,13 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     }
   }
 
-  private onStartedRecording(){
+  private onLoadVoiceNoteView(){
     // Do stuff for component, then run callback to SessionConversation
     const {mediaSetting} = this.state;
 
     if (mediaSetting){
-      this.setState({ isRecording: true });
+      this.setState({ isRecordingView: true });
-      this.props.onStartedRecording();
+      this.props.onLoadVoiceNoteView();
       return;
     }
 
@@ -199,10 +203,10 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     
   }
 
-  private onStoppedRecording() {
+  private onExitVoiceNoteView() {
     // Do stuff for component, then run callback to SessionConversation
-    this.setState({ isRecording: false });
+    this.setState({ isRecordingView: false });
-    this.props.onStoppedRecording();
+    this.props.onExitVoiceNoteView();
   }
 
 

ts/components/session/conversation/SessionConversation.tsx

@@ -23,7 +23,7 @@ interface State {
   doneInitialScroll: boolean;
   displayScrollToBottomButton: boolean;
   messageFetchTimestamp: number;
-  isRecording: boolean;
+  isRecordingView: boolean;
 }
 
 export class SessionConversation extends React.Component<any, State> {
@@ -47,7 +47,7 @@ export class SessionConversation extends React.Component<any, State> {
       doneInitialScroll: false,
       displayScrollToBottomButton: false,
       messageFetchTimestamp: 0,
-      isRecording: false,
+      isRecordingView: false,
     };
 
     this.handleScroll = this.handleScroll.bind(this);
@@ -58,9 +58,11 @@ export class SessionConversation extends React.Component<any, State> {
     this.renderTimerNotification = this.renderTimerNotification.bind(this);
     this.renderFriendRequest = this.renderFriendRequest.bind(this);
 
+    // Recording View render and unrender
+    this.onLoadVoiceNoteView = this.onLoadVoiceNoteView.bind(this);
+    this.onExitVoiceNoteView = this.onExitVoiceNoteView.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);
     this.resetSelection = this.resetSelection.bind(this);
 
@@ -70,7 +72,7 @@ export class SessionConversation extends React.Component<any, State> {
   public async componentWillMount() {
     await this.getMessages();
     
-    // Inside a setTimeout to simultate onready()
+    // Pause thread to wait for rendering to complete
     setTimeout(() => {
       this.scrollToUnread();
     }, 0);
@@ -101,7 +103,7 @@ export class SessionConversation extends React.Component<any, State> {
   render() {
     console.log(`[vince][info] Props`, this.props);
 
-    const { messages, conversationKey, doneInitialScroll, isRecording } = this.state;
+    const { messages, conversationKey, doneInitialScroll, isRecordingView } = this.state;
     const loading = !doneInitialScroll || messages.length === 0;
     const selectionMode = !!this.state.selectedMessages.length;
 
@@ -136,7 +138,7 @@ export class SessionConversation extends React.Component<any, State> {
           </div>
 
           <SessionScrollButton display={true} onClick={this.scrollToBottom}/>
-          { isRecording && (
+          { isRecordingView && (
             <div className="messages-wrapper--blocking-overlay"></div>
           )}
         </div>
@@ -144,8 +146,8 @@ export class SessionConversation extends React.Component<any, State> {
         { !isRss && (
           <SessionCompositionBox
             sendMessage={conversationModel.sendMessage}
-            onStartedRecording={this.onStartedRecording}
+            onLoadVoiceNoteView={this.onLoadVoiceNoteView}
-            onStoppedRecording={this.onStoppedRecording}
+            onExitVoiceNoteView={this.onExitVoiceNoteView}
           />
         )}
         
@@ -613,16 +615,16 @@ export class SessionConversation extends React.Component<any, State> {
     };
   };
 
-  private onStartedRecording() {
+  private onLoadVoiceNoteView() {
     this.setState({
-      isRecording: true,
+      isRecordingView: true,
       selectedMessages: [],
     })
   }
 
-  private onStoppedRecording() {
+  private onExitVoiceNoteView() {
     this.setState({
-      isRecording: false,
+      isRecordingView: false,
     });
     
     console.log(`[vince] Stopped recording entirely`);

ts/components/session/conversation/SessionRecording.tsx

@@ -5,8 +5,8 @@ import {  SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
 import { SessionButton, SessionButtonType, SessionButtonColor } from '../SessionButton';
 
 interface Props {
-  onStoppedRecording: any;
+  onLoadVoiceNoteView: any;
-  onStartedRecording: any;
+  onExitVoiceNoteView: any;
 }
 
 interface State {
@@ -248,10 +248,10 @@ export class SessionRecording extends React.Component<Props, State> {
             />
           ) : (
             <SessionButton
-                text={window.i18n('delete')}
+              text={window.i18n('delete')}
-                buttonType={SessionButtonType.Brand}
+              buttonType={SessionButtonType.Brand}
-                buttonColor={SessionButtonColor.DangerAlt}
+              buttonColor={SessionButtonColor.DangerAlt}
-                onClick={this.onDeleteVoiceMessage}
+              onClick={this.onDeleteVoiceMessage}
             />
           )}
           
@@ -402,13 +402,9 @@ export class SessionRecording extends React.Component<Props, State> {
   }
 
   private onDeleteVoiceMessage() {
+    this.pauseAudio();
     this.stopRecordingStream();
-
+    this.props.onExitVoiceNoteView();
-    this.setState({
-      isRecording: false,
-      isPaused: true,
-      isPlaying: false,
-    }, () => this.props.onStoppedRecording());
   }
 
   private onSendVoiceMessage() {
@@ -429,7 +425,7 @@ export class SessionRecording extends React.Component<Props, State> {
     }
     
     // Stop the stream
-    streamParams.media.stop();
+    if (streamParams.media.state !== 'inactive') streamParams.media.stop();
     streamParams.input.disconnect();
     streamParams.processor.disconnect();
     streamParams.stream.getTracks().forEach((track: any) => track.stop);
@@ -589,11 +585,9 @@ export class SessionRecording extends React.Component<Props, State> {
 
     const numBars = width / (barPadding + barWidth);
 
-    //FIXME VINCE
+    console.log(`[] Starting playback view`);
-    // update numbars with animation so that changing width of screen 
-    // accomodates
 
-    // Then scan through audio file getting average volume per bar
+    // Scan through audio file getting average volume per bar
     // to display amplitude over time as a static image
     const blob = this.state.mediaBlob.data;
     
@@ -626,14 +620,21 @@ export class SessionRecording extends React.Component<Props, State> {
 
       // CANVAS CONTEXT
       const drawPlaybackCanvas = () => {
-        const canvas = this.playbackCanvas.current;
+        console.log(`[canvas] Drawing`); 
-        if (!canvas) return;
 
+        const canvas = this.playbackCanvas.current;
+        if (!canvas) {
+          console.log(`[canvas] Couldnt get playback canvas`); 
+          return;
+        }
         canvas.height = height;
         canvas.width = width;
           
         const canvasContext = canvas.getContext(`2d`);
-        if (!canvasContext) return;
+        if (!canvasContext){
+          console.log(`[canvas] Couldnt get cointext canvas`); 
+          return;
+        } 
         
         for (let i = 0; i < barSizeArray.length; i++){
           const barHeight = Math.ceil(barSizeArray[i]);