Merge pull request #427 from BIDMCDigitalPsychiatry/funny-memory

Speech recording updates
BIDMCDigitalPsychiatry · Dec 3, 2024 · 4634cd1 · 4634cd1
2 parents 397e999 + 55a85e8
commit 4634cd1
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 18 deletions.
diff --git a/SpeechRecording/src/components/speech_recording/Recorder.tsx b/SpeechRecording/src/components/speech_recording/Recorder.tsx
@@ -1,7 +1,10 @@
 import React, { Component } from "react";
-import stopIcon from './images/stop.png';
-import closeIcons from './images/close.png';
-import microphone from './images/microphone.png';
+// import stopIcon from './images/stop.png';
+import Stop from "./images/stop";
+// import closeIcons from './images/close.png';
+import Close from "./images/close";
+// import microphone from './images/microphone.png';
+import Microphone from "./images/microphone";
 import './speech_recording_new.css';
 import Alert from '@material-ui/lab/Alert';
 import i18n from "./../../i18n";
@@ -379,12 +382,13 @@ class Recorder extends Component<AppProps, AppState> {
                 <h2 className="h2">{title}</h2>
                 <span className="close_icons">
                   {
-                    <img
-                      src={closeIcons}
-                      width={20}
-                      height={20}
-                      alt="Close icons"
-                    />
+                    <Close />
+                    // <img
+                    //   src={closeIcons}
+                    //   width={20}
+                    //   height={20}
+                    //   alt="Close icons"
+                    // />
                   }
                 </span>
               </div>
@@ -451,7 +455,11 @@ class Recorder extends Component<AppProps, AppState> {
                 ) : (                    
                    this.state.clickStop  ? (
                     <div className="record_controller">
-                  <a className="mic_icon_disabled"><img src={microphone} width={30} height={30} alt="Microphone icons" /></a>
+                  <a className="mic_icon_disabled">
+                    <Microphone />
+
+                    {/* <img src={microphone} width={30} height={30} alt="Microphone icons" /> */}
+                    </a>
                   </div>
                   ) : (
                     <div className="record_controller">
@@ -461,12 +469,13 @@ class Recorder extends Component<AppProps, AppState> {
                         className="icons stop"
                       >
                         {
-                          <img
-                            src={stopIcon}
-                            width={20}
-                            height={20}
-                            alt="Stop icons"
-                          />
+                          <Stop />
+                          // <img
+                          //   src={stopIcon}
+                          //   width={20}
+                          //   height={20}
+                          //   alt="Stop icons"
+                          // />
                         }
                       </a>
                       <a

diff --git a/SpeechRecording/src/components/speech_recording/SpeechRecording.tsx b/SpeechRecording/src/components/speech_recording/SpeechRecording.tsx
@@ -103,7 +103,7 @@ class SpeechRecording extends React.Component<AppProps, AppState> {
   }
 
   storeRecordedData = async (data, qn_duration, question) => {
-    if (data) {  
+    if (data && question) {  
       // eslint-disable-next-line no-restricted-globals
       const audioBase64URL = "data:audio/mpeg;base64," + data;
       const temporalSlices = [ 
@@ -127,7 +127,6 @@ class SpeechRecording extends React.Component<AppProps, AppState> {
         }),
         "*"
       ); 
-      console.log(temporalSlices)
     }
   };
 

diff --git a/SpeechRecording/src/components/speech_recording/images/close.tsx b/SpeechRecording/src/components/speech_recording/images/close.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Close = () => {
+	return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="225" height="225" viewBox="0 0 225 225">
+      <path id="close" d="M218.636,223.908,112.5,117.772,6.364,223.908a3.728,3.728,0,0,1-5.272-5.272L107.228,112.5,1.092,6.364A3.728,3.728,0,0,1,6.364,1.092L112.5,107.228,218.636,1.092a3.728,3.728,0,0,1,5.272,5.272L117.772,112.5,223.908,218.636a3.728,3.728,0,0,1-5.272,5.272Z" fill="#fff"/>
+    </svg>
+  )
+}
+
+export default Close
diff --git a/SpeechRecording/src/components/speech_recording/images/microphone.tsx b/SpeechRecording/src/components/speech_recording/images/microphone.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Microphone = () => {
+	return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="164.121" height="248.77" viewBox="0 0 164.121 248.77">
+      <path id="microphone" d="M49.376,248.77a5.216,5.216,0,1,1,0-10.432H76.259v-27.9c-22-1.144-39.683-8.9-52.628-23.092C-3.983,157.071.133,108.668.321,106.621a5.216,5.216,0,0,1,10.389.955c-.04.456-3.85,45.948,20.663,72.78,12,13.139,29.056,19.8,50.688,19.8,21.65,0,38.716-6.674,50.721-19.839,24.545-26.913,20.67-72.284,20.629-72.74a5.216,5.216,0,0,1,10.389-.959c.188,2.047,4.3,50.45-23.31,80.728-13.173,14.446-31.256,22.22-53.8,23.147v27.842h27.686a5.216,5.216,0,0,1,0,10.432ZM32.028,127.521V49.479a49.5,49.5,0,0,1,99,0v78.042a49.5,49.5,0,0,1-99,0Zm49.5,39.02a39.1,39.1,0,0,0,38.115-30.573H43.412A39.1,39.1,0,0,0,81.528,166.541ZM42.492,49.479v76.03h78.073V49.479a39.037,39.037,0,0,0-78.073,0Z" fill="#fff"/>
+    </svg>
+  )
+}
+
+export default Microphone
diff --git a/SpeechRecording/src/components/speech_recording/images/pause.tsx b/SpeechRecording/src/components/speech_recording/images/pause.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Pause = () => {
+	return (
+
+<svg xmlns="http://www.w3.org/2000/svg" width="111" height="129" viewBox="0 0 111 129">
+  <g id="pause" transform="translate(-847 -332)">
+    <rect id="Rectangle_2" data-name="Rectangle 2" width="47" height="129" rx="7" transform="translate(847 332)" fill="#fff"/>
+    <rect id="Rectangle_4" data-name="Rectangle 4" width="47" height="129" rx="7" transform="translate(911 332)" fill="#fff"/>
+  </g>
+</svg>
+  )
+}
+
+export default Pause
diff --git a/SpeechRecording/src/components/speech_recording/images/play-button.tsx b/SpeechRecording/src/components/speech_recording/images/play-button.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Play = () => {
+	return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="183.615" height="176.623" viewBox="0 0 183.615 176.623">
+      <path id="play-button" d="M101.319,34.96a5.021,5.021,0,0,1,8.606,0l70.884,111a5.021,5.021,0,0,1-4.3,7.608L45.083,143.241a5.021,5.021,0,0,1-4.3-7.608Z" transform="translate(-51.085 65.617) rotate(-31)" fill="#fff"/>
+    </svg>
+  )
+}
+
+export default Play
diff --git a/SpeechRecording/src/components/speech_recording/images/stop.tsx b/SpeechRecording/src/components/speech_recording/images/stop.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Stop = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="173" height="173" viewBox="0 0 173 173">
+      <path id="stop" d="M22,13a9.01,9.01,0,0,0-9,9V151a9.01,9.01,0,0,0,9,9H151a9.01,9.01,0,0,0,9-9V22a9.01,9.01,0,0,0-9-9H22M22,0H151a22,22,0,0,1,22,22V151a22,22,0,0,1-22,22H22A22,22,0,0,1,0,151V22A22,22,0,0,1,22,0Z" fill="#fff"/>
+    </svg>
+  )
+}
+
+export default Stop
diff --git a/SpeechRecording/src/index.tsx b/SpeechRecording/src/index.tsx
@@ -32,3 +32,5 @@ eventer(
     false
   );
 
+
+