🐛 (bot) Fix double callback on video and audio bubble

baptisteArno · Jul 12, 2023 · abb363b · abb363b · vercel · Jul 12, 2023
1 parent 6565fcc
commit abb363b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "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
@@ -25,17 +25,19 @@ export const AudioBubble = (props: Props) => {
     props.onTransitionEnd(ref?.offsetTop)
   }
 
+  const onCanPlay = () => {
+    clearTimeout(typingTimeout)
+    setIsTyping(false)
+    setTimeout(autoPlay, showAnimationDuration)
+  }
+
   onMount(() => {
     typingTimeout = setTimeout(() => {
+      if (audioElement) audioElement.removeEventListener('canplay', onCanPlay)
       setIsTyping(false)
       setTimeout(autoPlay, showAnimationDuration)
     }, defaultTypingDuration)
-    if (audioElement)
-      audioElement.oncanplay = () => {
-        clearTimeout(typingTimeout)
-        setIsTyping(false)
-        setTimeout(autoPlay, showAnimationDuration)
-      }
+    if (audioElement) audioElement.addEventListener('canplay', onCanPlay)
   })
 
   onCleanup(() => {

diff --git a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -27,21 +27,23 @@ export const VideoBubble = (props: Props) => {
     props.onTransitionEnd(ref?.offsetTop)
   }
 
+  const onCanPlay = () => {
+    clearTimeout(typingTimeout)
+    setIsTyping(false)
+    setTimeout(autoPlay, showAnimationDuration)
+  }
+
   onMount(() => {
     console.log(videoElement)
     typingTimeout = setTimeout(
       () => {
+        if (videoElement) videoElement.removeEventListener('canplay', onCanPlay)
         setIsTyping(false)
         setTimeout(autoPlay, showAnimationDuration)
       },
       videoElement ? defaultTypingDuration : 2000
     )
-    if (videoElement)
-      videoElement.oncanplay = () => {
-        clearTimeout(typingTimeout)
-        setIsTyping(false)
-        setTimeout(autoPlay, showAnimationDuration)
-      }
+    if (videoElement) videoElement.addEventListener('canplay', onCanPlay)
   })
 
   onCleanup(() => {

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",