From 0a85f33694300fe62a48bd5925ab6f66060796e4 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 12 Jul 2023 15:37:31 +0200
Subject: [PATCH] :zap: (audio) Implement more robust auto play

---
 packages/embeds/js/package.json               |  2 +-
 .../bubbles/audio/components/AudioBubble.tsx  | 34 +++++++++++++------
 packages/embeds/react/package.json            |  2 +-
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 59517ceaa7..330b9a1934 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
index 77ee5e5b7c..e1fd72a45f 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -13,22 +13,34 @@ const typingDuration = 500
 let typingTimeout: NodeJS.Timeout
 
 export const AudioBubble = (props: Props) => {
+  let isPlayed = false
   let ref: HTMLDivElement | undefined
   let audioElement: HTMLAudioElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
+  const endTyping = () => {
+    if (isPlayed) return
+    isPlayed = true
+    setIsTyping(false)
+    setTimeout(
+      () => props.onTransitionEnd(ref?.offsetTop),
+      showAnimationDuration
+    )
+  }
+
   onMount(() => {
-    typingTimeout = setTimeout(() => {
-      setIsTyping(false)
-      setTimeout(() => {
-        const audioElement = ref?.querySelector('audio')
-        if (audioElement)
-          audioElement
-            .play()
-            .catch((e) => console.warn('Could not autoplay the audio:', e))
-        props.onTransitionEnd(ref?.offsetTop)
-      }, showAnimationDuration)
-    }, typingDuration)
+    typingTimeout = setTimeout(endTyping, typingDuration)
+    audioElement?.addEventListener(
+      'canplay',
+      () => {
+        clearTimeout(typingTimeout)
+        audioElement
+          ?.play()
+          .catch((e) => console.warn("Couldn't autoplay audio", e))
+        endTyping()
+      },
+      { once: true }
+    )
   })
 
   onCleanup(() => {
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 37b4e38af9..e03b36d15a 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",