fix: stop delegating resume/play to controller. (#28)

__tests__/component.tsx

@@ -23,6 +23,7 @@ describe('TextToSpeech', () => {
     act(() => {
       fireEvent.click(getByRole('button', { name: 'Play' }))
     })
+    expect(global.speechSynthesis.cancel).toHaveBeenCalled()
     expect(global.speechSynthesis.speak).toHaveBeenCalled()
     expect(getByRole('button', { name: 'Pause' })).toBeInTheDocument()
 
@@ -39,8 +40,8 @@ describe('TextToSpeech', () => {
       fireEvent.click(getByRole('button', { name: 'Mute' }))
     })
     expect(onMuteToggled).toHaveBeenCalledWith(false)
-    // Because we are currently paused (so no reset)
-    expect(global.speechSynthesis.cancel).not.toHaveBeenCalled()
+    // Cancel only called once thus far as we are currently paused (so no reset)
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(1)
     expect(global.speechSynthesis.resume).not.toHaveBeenCalled()
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(1)
   })

__tests__/controller.ts

@@ -68,6 +68,8 @@ describe('Controller', () => {
     expect(controller.preservesPitch).toBe(false)
     expect(controller.paused).toBe(false)
     controller.play()
+    // Cancel before play to clear any utterances in the queue
+    expect(global.speechSynthesis.cancel).toHaveBeenCalled()
     expect(global.speechSynthesis.speak).toHaveBeenCalledWith(
       expect.objectContaining({ text: SpeechSynthesisMock.textForTest })
     )
@@ -76,21 +78,22 @@ describe('Controller', () => {
     controller.resume()
     expect(global.speechSynthesis.resume).toHaveBeenCalled()
     controller.clear()
-    expect(global.speechSynthesis.cancel).toHaveBeenCalled()
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(2)
     controller.play()
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(2)
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(3)
     controller.mute()
     expect(global.speechSynthesis.resume).toHaveBeenCalledTimes(2)
-    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(2)
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(4)
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(3)
     controller.unmute(0.5)
     expect(controller.volume).toBe(0.5)
     expect(global.speechSynthesis.resume).toHaveBeenCalledTimes(3)
-    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(3)
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(5)
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(4)
     controller.reset()
     expect(global.speechSynthesis.resume).toHaveBeenCalledTimes(4)
-    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(4)
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(6)
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(5)
   })
 
@@ -131,8 +134,10 @@ describe('Controller', () => {
     controller.reset()
     expect(global.HTMLMediaElement.prototype.load).toHaveBeenCalled()
     expect(global.HTMLMediaElement.prototype.play).toHaveBeenCalledTimes(3)
+    // Play request a clear() which for HTMLAudioElement calls pause
+    expect(global.HTMLAudioElement.prototype.pause).toHaveBeenCalledTimes(2)
     controller.clear()
-    expect(global.HTMLMediaElement.prototype.pause).toHaveBeenCalledTimes(2)
+    expect(global.HTMLMediaElement.prototype.pause).toHaveBeenCalledTimes(3)
     expect(synth.currentTime).toBe(0)
 
     // Check that the rate getter/setter abstracts playbackRate

__tests__/hook.tsx

@@ -153,6 +153,7 @@ describe('useTts', () => {
     act(() => {
       result.current.onPlay()
     })
+    expect(global.speechSynthesis.cancel).toHaveBeenCalled()
     expect(result.current.state.isPlaying).toBe(true)
 
     // Now mute while playing against a SpeechSynthesis instance of the backing controller
@@ -169,7 +170,7 @@ describe('useTts', () => {
      * This is effectively an onReset().
      */
     expect(global.speechSynthesis.resume).toHaveBeenCalled()
-    expect(global.speechSynthesis.cancel).toHaveBeenCalled()
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(2)
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(2)
     expect(result.current.state.isPlaying).toBe(true)
 
@@ -186,7 +187,7 @@ describe('useTts', () => {
     })
     expect(result.current.state.isPaused).toBe(false)
     expect(global.speechSynthesis.resume).toHaveBeenCalledTimes(2)
-    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(2)
+    expect(global.speechSynthesis.cancel).toHaveBeenCalledTimes(3)
     expect(global.speechSynthesis.speak).toHaveBeenCalledTimes(3)
     expect(result.current.state.isPlaying).toBe(true)
   })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tts-react",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "React component to convert text to speech.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/controller.ts

@@ -391,9 +391,9 @@ class Controller extends EventTarget {
   }
 
   async play(): Promise<void> {
-    if (this.paused) {
-      await this.resume()
-    } else if (this.synthesizer instanceof HTMLAudioElement) {
+    this.clear()
+
+    if (this.synthesizer instanceof HTMLAudioElement) {
       await this.playHtmlAudio()
     } else {
       this.synthesizer.speak(this.target as SpeechSynthesisUtterance)

src/hook.tsx

@@ -271,9 +271,14 @@ const useTts = ({
     [lang, voice, fetchAudioData, markTextAsSpoken]
   )
   const onPlay = useCallback(() => {
-    controller.play()
+    if (state.isPaused) {
+      controller.resume()
+    } else {
+      controller.play()
+    }
+
     dispatch({ type: 'play' })
-  }, [controller])
+  }, [controller, state.isPaused])
   const onPause = useCallback(() => {
     controller.pause()
     dispatch({ type: 'pause' })