Make a recite fab button (#2)

* Make a recite fab button This change will add a recite fab button as the main action on the recite screen * Major context refactor * Fixing render errors * Remove console log
alexjpaz · Dec 31, 2019 · a44ce0b · a44ce0b
1 parent 36eedf5
commit a44ce0b
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 108 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,16 +5,22 @@ import './App.css';
 import data from './datasources/foo.json';
 
 import AppTheme from './AppTheme';
+
+import { DefaultReciteContextProvider } from './ReciteContext';
 import AppContext from './AppContext';
+
 import AppViewport from './components/layout/AppViewport';
 
 function App() {
-  const [ state ] = React.useState(data);
+  const [ state ] = React.useState(Object.assign({
+  }, data));
 
   return (
     <AppTheme>
       <AppContext.Provider value={state}>
-        <AppViewport />
+        <DefaultReciteContextProvider>
+          <AppViewport />
+        </DefaultReciteContextProvider>
       </AppContext.Provider>
     </AppTheme>
   );

diff --git a/src/AppContext.js b/src/AppContext.js
@@ -1,5 +1,10 @@
 import React from 'react';
 
-export const AppContext = React.createContext({});
+export const defaultValue = {
+  name: "unknown",
+  phrases: [],
+};
+
+export const AppContext = React.createContext(defaultValue);
 
 export default AppContext;
diff --git a/src/ReciteContext.js b/src/ReciteContext.js
@@ -0,0 +1,141 @@
+import React from 'react';
+export const defaultValue = {
+  state: null,
+  audioUrl: null,
+  recognition: null,
+  setRecordingState: () => {},
+  record: () => { console.log("Not implemented!"); },
+};
+
+export const ReciteContext = React.createContext(defaultValue);
+
+export class DefaultReciteContextProvider extends React.Component {
+  constructor(props) {
+    super(props);
+
+    let mediaRecorder;
+
+    const setRecordingState = (recordingState) => {;
+      this.setState({
+        ...this.state,
+        state: recordingState,
+      });
+    };
+
+    let setAudioUrl = (audioUrl) => {
+      this.setState({
+        ...this.state,
+        audioUrl,
+      });
+    };
+
+    let setRecognition = (recognition) => {
+      this.setState((state) => ({
+        ...this.state,
+        recognition
+      }));
+    };
+
+    const record = ({ targetLanguageCode }) => {
+      setRecognition("listening");
+
+
+      if(this.state.state !== "stopped") {
+        let { recognition } = this.state;
+
+        if(recognition) {
+          recognition.abort();
+        }
+
+        setRecordingState("stopped");
+        setRecognition(null);
+
+        if(mediaRecorder) {
+          mediaRecorder.stop();
+        }
+
+        return;
+      }
+
+      if(navigator.mediaDevices) {
+        let chunks = [];
+        navigator.mediaDevices.getUserMedia({ audio: true })
+          .then(function(stream) {
+
+            mediaRecorder = new MediaRecorder(stream);
+
+            mediaRecorder.start();
+
+            mediaRecorder.onstart = function(e) {
+            };
+
+            mediaRecorder.onstop = function(e) {
+              setRecordingState("stopped");
+
+              var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+              chunks = [];
+
+              var audioURL = URL.createObjectURL(blob);
+
+              var audio = new Audio();
+              audio.src = audioURL;
+              audio.play();
+
+              setAudioUrl(audioURL);
+            };
+
+            mediaRecorder.ondataavailable = function(e) {
+              chunks.push(e.data);
+            }
+          });
+      }
+
+      const recognition = new window.webkitSpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = false;
+      recognition.lang = targetLanguageCode;
+
+      recognition.addEventListener('audiostart', () => {
+        setRecordingState("listening");
+      });
+
+      recognition.addEventListener('soundstart', (e) => {
+        setRecordingState("recording");
+      });
+
+      recognition.addEventListener('soundend', (e) => {
+        recognition.stop();
+
+        if(mediaRecorder) {
+          mediaRecorder.stop();
+        }
+
+
+        setRecognition(null);
+      });
+
+      recognition.start();
+
+      setRecognition("listening");
+
+      setRecognition(recognition);
+
+    };
+
+    this.state = {
+      ...defaultValue,
+      state: "stopped",
+      record,
+    };
+  }
+
+  render() {
+    return (
+      <ReciteContext.Provider value={this.state}>
+          { this.props.children }
+      </ReciteContext.Provider>
+    );
+  }
+}
+
+export default ReciteContext;
diff --git a/src/components/MyBox/MyBox.js b/src/components/MyBox/MyBox.js
@@ -15,6 +15,7 @@ import Box from '@material-ui/core/Box';
 
 import PhraseCard from './PhraseCard'
 import RecitePhraseCard from './RecitePhraseCard'
+import ReciteFabButton from './ReciteFabButton';
 
 function MyBox() {
   const data = useContext(AppContext);
@@ -58,7 +59,7 @@ function MyBox() {
       <StickyFooterBox>
         <CenteredBox>
           <Box mb={2}>
-              {/*            <ReciteFabButton phrase={state.phrase.target } /> */}
+            <ReciteFabButton phrase={state.phrase} />
             </Box>
             <ButtonGroup aria-label="outlined navigation button group">
               <Button onClick={back}>Back</Button>

diff --git a/src/components/MyBox/ReciteFabButton.js b/src/components/MyBox/ReciteFabButton.js
@@ -4,26 +4,31 @@ import Fab from '@material-ui/core/Fab';
 import Mic from '@material-ui/icons/Mic';
 import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver';
 
-import AppContext from '../../AppContext';
+import ReciteContext from '../../ReciteContext';
 
 export default function ReciteFabButton(props) {
+
+  let appContext = React.useContext(ReciteContext);
+
   let icon = <Mic />;
   let text = "Recite";
 
-  if(props.state === "listening") {
+  if(appContext.state === "listening") {
     icon = <RecordVoiceOverIcon />
-    text = "Recording";
+    text = "Listening";
   }
 
-  if(props.state === "recording") {
+  if(appContext.state === "recording") {
     icon = <RecordVoiceOverIcon />
     text = "Recording";
   }
 
+  const record = () => appContext.record(props.phrase);
+
   return (
-    <Fab variant="extended" {...props}  color="secondary">
-      <Mic />
-      Recite
+    <Fab variant="extended" {...props}  color="secondary" onClick={record}>
+        { icon }
+        { text }
     </Fab>
   );
 }

diff --git a/src/components/MyBox/RecitePhraseCard.js b/src/components/MyBox/RecitePhraseCard.js
@@ -10,6 +10,8 @@ import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline';
 
 import ReciteButton from './ReciteButton';
 
+import ReciteContext from '../../ReciteContext';
+
 const useStyles = makeStyles({
   card: {
     minWidth: 275,
@@ -43,13 +45,13 @@ function RecognitionText({ defaultText, recognition }) {
       setText("< No Match >");
     });
 
-    recognition.onresult = (e) => {
+    recognition.addEventListener('result', (e) => {
       if(!e.results) return;
 
       let { transcript, } = e.results[0][0];
 
       setText(transcript)
-    }
+    });
 
     return () => {
       recognition.onresult = function() {};
@@ -62,9 +64,13 @@ function RecognitionText({ defaultText, recognition }) {
 export default function RecitePhraseCard(props) {
   const classes = useStyles();
 
-  const [ recognition, setRecognition ] = React.useState(null);
-  const [ recordingState, setRecordingState ] = React.useState("stopped");
-  const [ audioUrl, setAudioUrl ] = React.useState(null);
+  const reciteContext = React.useContext(ReciteContext);
+
+  const { audioUrl } = reciteContext;
+
+  const { recognition } = reciteContext;
+
+  const { state: recordingState } = reciteContext;
 
   const playAudioUrl = (e) => {
     e.preventDefault();
@@ -74,98 +80,7 @@ export default function RecitePhraseCard(props) {
     audio.play();
   };
 
-  let mediaRecorder = null;
-
-  // FIXME: goofy javascript errors :/
-  const isRecording = () => recordingState !== "stopped";
-
-  const stopRecording = () => {
-    if(recognition) {
-      recognition.abort();
-    }
-
-    setRecordingState("stopped");
-    setRecognition(null);
-
-    if(mediaRecorder) {
-      mediaRecorder.stop();
-    }
-
-    return;
-  };
-
-  const record = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if(isRecording()) {
-      return stopRecording();
-    }
-
-    setRecordingState("listening");
-
-    if(navigator.mediaDevices) {
-      let chunks = [];
-      navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(function(stream) {
-
-          mediaRecorder = new MediaRecorder(stream);
-
-          mediaRecorder.start();
-
-          mediaRecorder.onstart = function(e) {
-          };
-
-          mediaRecorder.onstop = function(e) {
-            setRecordingState("stopped");
-
-            var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
-            chunks = [];
-
-            var audioURL = URL.createObjectURL(blob);
-
-            var audio = new Audio();
-            audio.src = audioURL;
-            audio.play();
-
-            setAudioUrl(audioURL);
-          };
-
-          mediaRecorder.ondataavailable = function(e) {
-            chunks.push(e.data);
-          }
-        });
-    }
-
-    const recognition = new window.webkitSpeechRecognition();
-    recognition.continuous = false;
-    recognition.interimResults = false;
-    recognition.lang = props.phrase.targetLanguageCode; // TODO
-
-    recognition.onresult = (e) => {
-      console.log('soundresult', e);
-    }
-
-    recognition.onsoundstart = (e) => {
-      setRecordingState("recording");
-    };
-
-    recognition.onsoundend = (e) => {
-      recognition.stop();
-
-      if(mediaRecorder) {
-        mediaRecorder.stop();
-      }
-
-
-      setRecognition(null);
-    };
-
-    recognition.start();
-
-    setRecognition(recognition);
-  };
-
+  const record = () => reciteContext.record(props.phrase);
 
   const repeat = (e) => playAudioUrl(e);