⏪ Revert onCanPlay callback

Introduced too many issues in prod

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "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

@@ -8,8 +8,7 @@ type Props = {
 }
 
 const showAnimationDuration = 400
-const defaultTypingDuration = 5000
+const typingDuration = 500
-let isPlayed = false
 
 let typingTimeout: NodeJS.Timeout
 
@@ -18,29 +17,18 @@ export const AudioBubble = (props: Props) => {
   let audioElement: HTMLAudioElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
-  const autoPlay = async () => {
-    if (isPlayed) return
-    isPlayed = true
-    try {
-      if (audioElement) await audioElement.play()
-    } catch (e) {
-      console.warn('Could not autoplay the audio:', e)
-    }
-
-    props.onTransitionEnd(ref?.offsetTop)
-  }
-
   onMount(() => {
-    if (audioElement)
-      audioElement.oncanplay = () => {
-        clearTimeout(typingTimeout)
-        setIsTyping(false)
-        setTimeout(autoPlay, showAnimationDuration)
-      }
     typingTimeout = setTimeout(() => {
       setIsTyping(false)
-      setTimeout(autoPlay, showAnimationDuration)
+      setTimeout(() => {
-    }, defaultTypingDuration)
+        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)
   })
 
   onCleanup(() => {

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

@@ -9,9 +9,6 @@ type Props = {
 }
 
 export const showAnimationDuration = 400
-const defaultTypingDuration = 5000
-let isPlayed = false
-
 let typingTimeout: NodeJS.Timeout
 
 export const VideoBubble = (props: Props) => {
@@ -19,31 +16,21 @@ export const VideoBubble = (props: Props) => {
   let videoElement: HTMLVideoElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
-  const autoPlay = async () => {
+  const onTypingEnd = () => {
-    if (isPlayed) return
+    const videoElement = ref?.querySelector('video')
-    isPlayed = true
+    if (videoElement)
-    try {
+      videoElement
-      if (videoElement) await videoElement.play()
+        .play()
-    } catch (e) {
+        .catch((e) => console.warn('Could not autoplay the video:', e))
-      console.warn('Could not autoplay the video:', e)
+    if (!isTyping()) return
-    }
+    setIsTyping(false)
+    setTimeout(() => {
       props.onTransitionEnd(ref?.offsetTop)
+    }, showAnimationDuration)
   }
 
   onMount(() => {
-    if (videoElement)
+    typingTimeout = setTimeout(onTypingEnd, 2000)
-      videoElement.oncanplay = () => {
-        clearTimeout(typingTimeout)
-        setIsTyping(false)
-        setTimeout(autoPlay, showAnimationDuration)
-      }
-    typingTimeout = setTimeout(
-      () => {
-        setIsTyping(false)
-        setTimeout(autoPlay, showAnimationDuration)
-      },
-      videoElement ? defaultTypingDuration : 2000
-    )
   })
 
   onCleanup(() => {

packages/embeds/react/package.json

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