added push to talk (#199)

Shaunwei · Jul 29, 2023 · cf3292b · cf3292b
1 parent 41879a2
commit cf3292b
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 56 deletions.
diff --git a/client/web/src/App.css b/client/web/src/App.css
@@ -12,17 +12,6 @@
   align-items: center;
 }
 
-.main-screen {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
-  width: 100%;
-  height: 40vh;
-  padding: 20px;
-}
-
 .header {
   color: #cccccc;
   font-family: "Prompt", Helvetica;

diff --git a/client/web/src/App.jsx b/client/web/src/App.jsx
@@ -89,9 +89,10 @@ const App = () => {
       if (message === '[end]\n') {
         setTextAreaValue(prevState => prevState + "\n\n");
 
-      } else if (message.startsWith('[+]')) {
+      } else if (message.startsWith('[+]You said: ')) {
         // [+] indicates the transcription is done. stop playing audio
-        setTextAreaValue(prevState => prevState + `\nYou> ${message}\n`);
+        let msg = message.split("[+]You said: ");
+        setTextAreaValue(prevState => prevState + `\nYou> ${msg[1]}\n`);
         stopAudioPlayback();
       } else if (message.startsWith('[=]')) {
         // [=] indicates the response is done
@@ -128,7 +129,7 @@ const App = () => {
     // TODO: debug download video
 
     if (isConnected.current) {
-      if (!audioSent.current && callActive.current) {
+      if (!audioSent.current) {
         send(blob);
       }
       audioSent.current = false;
@@ -342,7 +343,7 @@ const App = () => {
 
           { isConnected.current && !characterConfirmed ? 
             ( <div className="actions">
-              <Button onClick={handleTalkClick} name="Talk" disabled={!selectedCharacter} />
+              <Button onClick={handleTalkClick} name="Call" disabled={!selectedCharacter} />
               <Button onClick={handleTextClick} name="Text" disabled={!selectedCharacter} />
             </div> ) : null
           }
@@ -376,6 +377,9 @@ const App = () => {
                 setIsCallView={setIsCallView}
                 useSearch={useSearch}
                 setUseSearch={setUseSearch}
+                callActive={callActive}
+                startRecording={startRecording}
+                stopRecording={stopRecording}
                 preferredLanguage={preferredLanguage}
                 setPreferredLanguage={setPreferredLanguage}
               />

diff --git a/client/web/src/components/CallView/index.jsx b/client/web/src/components/CallView/index.jsx
@@ -25,7 +25,7 @@ const CallView = ( {isRecording, isPlaying, audioPlayer, handleStopCall, handleC
     }, [isPlaying]);
 
     return (
-        <>
+        <div className='call-screen'>
           <div className='call-container'>
             <audio ref={audioPlayer} className="audio-player"><source src="" type="audio/mp3" /></audio>
             <div className={`sound-wave ${isRecording ? '' : 'stop-animation'}`}>
@@ -38,7 +38,7 @@ const CallView = ( {isRecording, isPlaying, audioPlayer, handleStopCall, handleC
               <IconButton Icon={TbPower} className="icon-red" onClick={handleDisconnect} />
               <IconButton Icon={TbMessageChatbot} className="icon-green" onClick={() => setIsCallView(false)} />
           </div>
-        </>
+        </div>
     )
 }
 

diff --git a/client/web/src/components/CallView/style.css b/client/web/src/components/CallView/style.css
@@ -88,4 +88,15 @@
   align-items: center;
   justify-content: space-between;
   flex-grow: 1;
+}
+
+.call-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+  width: 100%;
+  height: 30vh;
+  padding: 20px;
 }
diff --git a/client/web/src/components/Common/IconButton.js b/client/web/src/components/Common/IconButton.js
@@ -8,9 +8,10 @@
 import React from 'react';
 import './styles.css';
 
-const IconButton = ({ Icon, className, onClick, bgcolor="default"}) => {
+const IconButton = ({ Icon, className, onClick, bgcolor="default", disabled=false}) => {
   return (
-    <div className={`icon-button ${className} ${bgcolor}`} onClick={onClick}>
+    <div className={`icon-button ${className} ${bgcolor} ${disabled ? "disabled" : ""}`} 
+         onClick={disabled ? null : onClick}>
       <Icon className="icon-instance-node-small" />
     </div>
   );

diff --git a/client/web/src/components/Common/styles.css b/client/web/src/components/Common/styles.css
@@ -78,3 +78,8 @@
 .icon-button:hover .icon-instance-node-small {
   filter: brightness(2);
 }
+
+.icon-button.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
diff --git a/client/web/src/components/TextView/index.js b/client/web/src/components/TextView/index.js
@@ -5,13 +5,17 @@
  * created by Lynchee on 7/16/23
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState} from 'react';
 import './style.css';
-import { TbPower, TbMicrophone } from 'react-icons/tb';
+import { TbPower, TbPhoneCall, TbMicrophone, TbPlayerStopFilled, TbKeyboard } from 'react-icons/tb';
 import IconButton from '../Common/IconButton';
+import { MdVoiceChat } from 'react-icons/md';
+import Button from '../Common/Button';
 
-const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAreaValue, messageInput, setMessageInput, handleDisconnect, setIsCallView, useSearch, setUseSearch }) => {
+const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAreaValue, messageInput, setMessageInput, handleDisconnect, setIsCallView, useSearch, setUseSearch, callActive, startRecording, stopRecording }) => {
+    const [keyboard, SetKeyboard] = useState(true);
     const chatWindowRef = useRef(null);
+    const talking = useRef(false);
 
     // always show the latest chat log
     useEffect(() => {
@@ -51,27 +55,63 @@ const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAr
         setUseSearch(!useSearch);
     };
 
+    const handlePushTalk = () => {
+        if (!talking.current) {
+            startRecording();
+            talking.current = true;
+            if (isPlaying) {
+                stopAudioPlayback();
+            }
+        } else {
+            stopRecording();
+            talking.current = false;
+        }
+    }
+
+    const handleKeyboardClick = () => {
+        SetKeyboard(true);
+    }
+
+    const handleAudioClick = () => {
+        SetKeyboard(false);
+    }
+
     return (
-        <>
+        <div className='text-screen'>
             <textarea 
                 className="chat-window" 
                 readOnly 
                 draggable="false"
                 ref={chatWindowRef}
                 value={textAreaValue}
             ></textarea>
-            <div className="message-input-container">
-                <input
-                    className="message-input" 
-                    type="text" 
-                    placeholder="Type your message"
-                    value={messageInput} 
-                    onChange={handleInputChange}
-                    onKeyDown={handleKeyDown} 
-                />
-                <span className="focus-border"><i></i></span>
+            <div className='input-container'>
+                <div className="message-input-container">
+                    <input
+                        className="message-input" 
+                        type="text" 
+                        placeholder="Type your message"
+                        value={messageInput} 
+                        onChange={handleInputChange}
+                        onKeyDown={handleKeyDown} 
+                    />
+                    <span className="focus-border"><i></i></span>
+                </div>
+                { !callActive.current && (
+                    <div>
+                        {keyboard ? 
+                            <IconButton Icon={MdVoiceChat} className="icon-blue" onClick={handleAudioClick} /> : 
+                            <IconButton Icon={TbKeyboard} className="icon-blue" onClick={handleKeyboardClick} />
+                        }
+                    </div>
+                )}
             </div>
-            <button className="send-btn" onClick={handleSendClick}>Send Message</button>
+
+            { !callActive.current && !keyboard ?
+                <IconButton Icon={talking.current ? TbPlayerStopFilled : TbMicrophone} className={`${talking.current ? "recording-animation" : "icon-blue"}`} bgcolor={`${talking.current ? "red":"default"}`} onClick={handlePushTalk} /> : 
+                <Button onClick={handleSendClick} name="Send Message" />
+            }
+
             <label className='search-checkbox'>
                 <input
                 type="checkbox"
@@ -82,9 +122,9 @@ const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAr
             </label>
             <div className="options-container">
                 <IconButton Icon={TbPower} className="icon-red" onClick={handleDisconnect} />
-                <IconButton Icon={TbMicrophone} className="icon-blue" onClick={() => setIsCallView(true)} />
+                <IconButton Icon={TbPhoneCall} className="icon-blue" onClick={() => setIsCallView(true)} disabled={talking.current} />
             </div>
-        </>
+        </div>
     )
 }
 

diff --git a/client/web/src/components/TextView/style.css b/client/web/src/components/TextView/style.css
@@ -3,11 +3,26 @@
   color: white;
   font-size: 17px;
   width: 100%;
-  height: 100%;
+  height: 25vh;
   border: none;
   resize: none;
 }
 
+.input-container {
+  display: flex;
+  align-items: center;
+}
+
+.text-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+  width: 100%;
+  padding: 20px;
+}
+
 /* text input */
 input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: white; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
 :focus{outline: none;}
@@ -39,24 +54,6 @@ input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: white; widt
 .message-input:focus ~ .focus-border i:before,
 .message-input:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}
 
-.send-btn {
-    font-family: "Prompt", Helvetica;
-    font-size: 1rem;
-    border-color: #6785d3;
-    color: #fff;
-    box-shadow: 0 0 10px 0 #6785d3 inset, 0 0 10px 4px #6785d3;
-    transition: all 150ms ease-in-out;
-    cursor: pointer;
-    background-color: transparent;
-    padding: 0.6em 2em;
-    border-radius: 1.5em;
-}
-
-.send-btn:hover {
-    box-shadow: 0 0 40px 40px #6785d3 inset, 0 0 0 0 #6785d3;
-    outline: 0;
-}
-
 .options-container {
   display: flex;
   align-items: center;
@@ -67,6 +64,28 @@ input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: white; widt
 }
 
 .search-checkbox {
-  margin-top: 5px;
+  margin-top: 15px;
+  color: white;
+}
+
+.white {
+  color: white;
+}
+
+.talk-on {
+  color: red;
+}
+
+.talk-off {
   color: white;
 }
+
+.recording-animation {
+  animation: pulsate 1s infinite;
+}
+
+@keyframes pulsate {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}