TTS Autoplay bug fix

apps/script/generateSharedConstants.rb

@@ -104,6 +104,7 @@ def main
   )
 
   generate_shared_js_file(shared_content, "#{REPO_DIR}/apps/src/util/sharedConstants.js")
+  generate_shared_js_file(generate_constants('VOICES'), "#{REPO_DIR}/apps/src/util/sharedVoices.js")
   generate_shared_js_file(generate_constants('APPLAB_BLOCKS'), "#{REPO_DIR}/apps/src/applab/sharedApplabBlocks.js")
   generate_shared_js_file(generate_constants('APPLAB_GOAL_BLOCKS'), "#{REPO_DIR}/apps/src/applab/sharedApplabGoalBlocks.js")
   generate_shared_js_file(generate_constants('GAMELAB_BLOCKS'), "#{REPO_DIR}/apps/src/p5lab/gamelab/sharedGamelabBlocks.js")

apps/src/templates/instructions/AudioQueue.tsx

@@ -0,0 +1,65 @@
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  ReactNode,
+} from 'react';
+
+interface InlineAudio {
+  playAudio: () => void;
+}
+
+interface AudioQueueContextProps {
+  addToQueue: (inlineAudio: InlineAudio) => void;
+  playNextAudio: () => void;
+  clearQueue: () => void;
+  isPlaying: React.MutableRefObject<boolean>;
+}
+
+export const AudioQueueContext = createContext<AudioQueueContextProps>({
+  addToQueue: () => {},
+  playNextAudio: () => {},
+  clearQueue: () => {},
+  isPlaying: {current: false},
+});
+
+interface AudioQueueProps {
+  children: ReactNode;
+}
+
+export const AudioQueue: React.FC<AudioQueueProps> = ({children}) => {
+  const [audioQueue, setAudioQueue] = useState<InlineAudio[]>([]);
+  const isPlaying = useRef<boolean>(false);
+
+  const playNextAudio = useCallback(() => {
+    if (audioQueue.length > 0) {
+      const inlineAudio = audioQueue.shift();
+      isPlaying.current = true;
+      inlineAudio?.playAudio();
+    }
+  }, [audioQueue]);
+
+  const addToQueue = useCallback((inlineAudio: InlineAudio) => {
+    setAudioQueue(prevQueue => [...prevQueue, inlineAudio]);
+  }, []);
+
+  const clearQueue = useCallback(() => {
+    setAudioQueue([]);
+  }, []);
+
+  useEffect(() => {
+    if (!isPlaying.current) {
+      playNextAudio();
+    }
+  }, [audioQueue, playNextAudio]);
+
+  return (
+    <AudioQueueContext.Provider
+      value={{addToQueue, playNextAudio, clearQueue, isPlaying}}
+    >
+      {children}
+    </AudioQueueContext.Provider>
+  );
+};

apps/src/templates/instructions/InlineAudio.jsx

@@ -1,45 +1,17 @@
 import classNames from 'classnames';
 import md5 from 'md5';
 import PropTypes from 'prop-types';
-import Radium from 'radium'; // eslint-disable-line no-restricted-imports
 import React from 'react';
 import {connect} from 'react-redux';
 
 import firehoseClient from '@cdo/apps/lib/util/firehose';
-import i18n from '@cdo/locale';
+import {Voices} from '@cdo/apps/util/sharedVoices';
 
 import trackEvent from '../../util/trackEvent';
 
-import moduleStyles from './inline-audio.module.scss';
+import {AudioQueueContext} from './AudioQueue';
 
-// TODO (elijah): have these constants shared w/dashboard
-const VOICES = {
-  en_us: {
-    VOICE: 'sharon22k',
-    SPEED: 180,
-    SHAPE: 100,
-  },
-  es_es: {
-    VOICE: 'ines22k',
-    SPEED: 180,
-    SHAPE: 100,
-  },
-  es_mx: {
-    VOICE: 'rosa22k',
-    SPEED: 180,
-    SHAPE: 100,
-  },
-  it_it: {
-    VOICE: 'vittorio22k',
-    SPEED: 180,
-    SHAPE: 100,
-  },
-  pt_br: {
-    VOICE: 'marcia22k',
-    SPEED: 180,
-    SHAPE: 100,
-  },
-};
+import moduleStyles from './inline-audio.module.scss';
 
 const TTS_URL = 'https://tts.code.org';
 
@@ -105,10 +77,31 @@ class InlineAudio extends React.Component {
         ? document.getElementById(autoplayTriggerElementId)
         : document;
 
-      this.playAudio();
+      const {addToQueue} = this.context;
+      addToQueue(this);
     }
   }
 
+  componentWillUnmount() {
+    // remove reference to existing Audio object when a hint is unmounted before the audio finishes.
+    const audio = this.state.audio;
+    if (audio) {
+      audio.pause();
+      audio.removeAttribute('src');
+      audio.load();
+    }
+    this.setState({
+      audio: undefined,
+      playing: false,
+      error: false,
+    });
+    audio.removeEventListener('ended', this.audioEndedListener);
+
+    const {clearQueue, isPlaying} = this.context;
+    clearQueue();
+    if (this.state.playing) isPlaying.current = false;
+  }
+
   UNSAFE_componentWillUpdate(nextProps) {
     const audioTargetWillChange =
       this.props.src !== nextProps.src ||
@@ -154,35 +147,33 @@ class InlineAudio extends React.Component {
         playing: false,
         autoplayed: this.props.ttsAutoplayEnabled,
       });
+      if (this.props.ttsAutoplayEnabled) {
+        const {playNextAudio, isPlaying} = this.context;
+        isPlaying.current = this.state.playing;
+        playNextAudio();
+      }
     });
 
-    audio.addEventListener('error', e => {
-      // e is an instance of a MediaError object
-      trackEvent('InlineAudio', 'error', e.target.error.code);
-      this.setState({
-        playing: false,
-        error: true,
-      });
-    });
+    audio.addEventListener('error', this.audioEndedListener);
 
     this.setState({audio});
     trackEvent('InlineAudio', 'getAudioElement', src);
     return audio;
   }
 
   isLocaleSupported() {
-    return Object.prototype.hasOwnProperty.call(VOICES, this.props.locale);
+    return Object.prototype.hasOwnProperty.call(Voices, this.props.locale);
   }
 
   getAudioSrc() {
     if (this.props.src) {
       return this.props.src;
-    } else if (this.props.message && VOICES[this.props.locale]) {
-      const voice = VOICES[this.props.locale];
+    } else if (this.props.message && Voices[this.props.locale]) {
+      const voice = Voices[this.props.locale];
       const voicePath = `${voice.VOICE}/${voice.SPEED}/${voice.SHAPE}`;
 
       const message = this.props.message.replace('"???"', 'the question marks');
-      const hash = md5(message);
+      const hash = md5(message).toString();
       const contentPath = `${hash}/${encodeURIComponent(message)}.mp3`;
 
       return `${TTS_URL}/${voicePath}/${contentPath}`;
@@ -254,8 +245,23 @@ class InlineAudio extends React.Component {
   pauseAudio() {
     this.getAudioElement().pause();
     this.setState({playing: false});
+    if (this.props.ttsAutoplayEnabled) {
+      const {clearQueue} = this.context;
+      clearQueue();
+    }
   }
 
+  audioEndedListener = e => {
+    // e is an instance of a MediaError object
+    trackEvent('InlineAudio', 'error', e.target.error.code);
+    this.setState({
+      playing: false,
+      error: true,
+    });
+    const {isPlaying} = this.context;
+    isPlaying.current = this.state.playing;
+  };
+
   render() {
     const {isRoundedVolumeIcon, isLegacyStyles} = this.props;
 
@@ -275,11 +281,14 @@ class InlineAudio extends React.Component {
           )}
           style={this.props.style && this.props.style.wrapper}
           onClick={this.toggleAudio}
-          aria-label={i18n.textToSpeech()}
           type="button"
         >
           <div
-            style={[this.props.style && this.props.style.button]}
+            style={
+              this.props.style && this.props.style.button
+                ? this.props.style.button
+                : {}
+            }
             className={classNames(
               moduleStyles.iconWrapper,
               isRoundedVolumeIcon
@@ -294,7 +303,11 @@ class InlineAudio extends React.Component {
                 moduleStyles.buttonImg,
                 moduleStyles.buttonImgVolume
               )}
-              style={[this.props.style && this.props.style.buttonImg]}
+              style={
+                this.props.style && this.props.style.buttonImg
+                  ? this.props.style.buttonImg
+                  : {}
+              }
             />
           </div>
           <div
@@ -303,14 +316,22 @@ class InlineAudio extends React.Component {
               moduleStyles.iconWrapper,
               moduleStyles.iconWrapperPlayPause
             )}
-            style={[this.props.style && this.props.style.button]}
+            style={
+              this.props.style && this.props.style.button
+                ? this.props.style.button
+                : {}
+            }
           >
             <i
               className={classNames(
                 this.state.playing ? 'fa fa-pause' : 'fa fa-play',
                 moduleStyles.buttonImg
               )}
-              style={[this.props.style && this.props.style.buttonImg]}
+              style={
+                this.props.style && this.props.style.buttonImg
+                  ? this.props.style.buttonImg
+                  : {}
+              }
             />
           </div>
         </button>
@@ -323,8 +344,10 @@ class InlineAudio extends React.Component {
 InlineAudio.defaultProps = {
   ttsAutoplayEnabled: false,
 };
+InlineAudio.contextType = AudioQueueContext;
+
+export const UnconnectedInlineAudio = InlineAudio;
 
-export const StatelessInlineAudio = Radium(InlineAudio);
 export default connect(function propsFromStore(state) {
   return {
     assetUrl: state.pageConstants.assetUrl,
@@ -336,4 +359,4 @@ export default connect(function propsFromStore(state) {
     isOnCSFPuzzle: !state.instructions.noInstructionsWhenCollapsed,
     ttsAutoplayEnabled: state.instructions.ttsAutoplayEnabledForLevel,
   };
-})(StatelessInlineAudio);
+})(InlineAudio);