🐛 (bot) Fix setTimeout onCanPlay concurrency issues

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx

@@ -9,6 +9,7 @@ type Props = {
 
 const showAnimationDuration = 400
 const defaultTypingDuration = 5000
+let isPlayed = false
 
 let typingTimeout: NodeJS.Timeout
 
@@ -18,6 +19,7 @@ export const AudioBubble = (props: Props) => {
   const [isTyping, setIsTyping] = createSignal(true)
 
   const autoPlay = () => {
+    isPlayed = true
     if (audioElement)
       audioElement
         .play()
@@ -25,19 +27,19 @@ export const AudioBubble = (props: Props) => {
     props.onTransitionEnd(ref?.offsetTop)
   }
 
-  const onCanPlay = () => {
-    clearTimeout(typingTimeout)
-    setIsTyping(false)
-    setTimeout(autoPlay, showAnimationDuration)
-  }
-
   onMount(() => {
+    if (audioElement)
+      audioElement.oncanplay = () => {
+        if (isPlayed) return
+        clearTimeout(typingTimeout)
+        setIsTyping(false)
+        setTimeout(autoPlay, showAnimationDuration)
+      }
     typingTimeout = setTimeout(() => {
-      if (audioElement) audioElement.removeEventListener('canplay', onCanPlay)
+      if (isPlayed) return
       setIsTyping(false)
       setTimeout(autoPlay, showAnimationDuration)
     }, defaultTypingDuration)
-    if (audioElement) audioElement.addEventListener('canplay', onCanPlay)
   })
 
   onCleanup(() => {

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -10,6 +10,7 @@ type Props = {
 
 export const showAnimationDuration = 400
 const defaultTypingDuration = 5000
+let isPlayed = false
 
 let typingTimeout: NodeJS.Timeout
 
@@ -19,7 +20,7 @@ export const VideoBubble = (props: Props) => {
   const [isTyping, setIsTyping] = createSignal(true)
 
   const autoPlay = () => {
-    console.log(videoElement)
+    isPlayed = true
     if (videoElement)
       videoElement
         .play()
@@ -27,23 +28,22 @@ export const VideoBubble = (props: Props) => {
     props.onTransitionEnd(ref?.offsetTop)
   }
 
-  const onCanPlay = () => {
-    clearTimeout(typingTimeout)
-    setIsTyping(false)
-    setTimeout(autoPlay, showAnimationDuration)
-  }
-
   onMount(() => {
-    console.log(videoElement)
+    if (videoElement)
+      videoElement.oncanplay = () => {
+        if (isPlayed) return
+        clearTimeout(typingTimeout)
+        setIsTyping(false)
+        setTimeout(autoPlay, showAnimationDuration)
+      }
     typingTimeout = setTimeout(
       () => {
-        if (videoElement) videoElement.removeEventListener('canplay', onCanPlay)
+        if (isPlayed) return
         setIsTyping(false)
         setTimeout(autoPlay, showAnimationDuration)
       },
       videoElement ? defaultTypingDuration : 2000
     )
-    if (videoElement) videoElement.addEventListener('canplay', onCanPlay)
   })
 
   onCleanup(() => {

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",