🐛 (bot) Improve canPlay issue fixin

baptisteArno · Jul 12, 2023 · 0b4b15c · 0b4b15c · vercel · Jul 12, 2023
1 parent 082084a
commit 0b4b15c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 16 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.77",
+  "version": "0.0.78",
   "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
@@ -18,25 +18,26 @@ export const AudioBubble = (props: Props) => {
   let audioElement: HTMLAudioElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
-  const autoPlay = () => {
+  const autoPlay = async () => {
+    if (isPlayed) return
     isPlayed = true
-    if (audioElement)
-      audioElement
-        .play()
-        .catch((e) => console.warn('Could not autoplay the audio:', e))
+    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 = () => {
-        if (isPlayed) return
         clearTimeout(typingTimeout)
         setIsTyping(false)
         setTimeout(autoPlay, showAnimationDuration)
       }
     typingTimeout = setTimeout(() => {
-      if (isPlayed) return
       setIsTyping(false)
       setTimeout(autoPlay, showAnimationDuration)
     }, defaultTypingDuration)

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
@@ -19,26 +19,26 @@ export const VideoBubble = (props: Props) => {
   let videoElement: HTMLVideoElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
-  const autoPlay = () => {
+  const autoPlay = async () => {
+    if (isPlayed) return
     isPlayed = true
-    if (videoElement)
-      videoElement
-        .play()
-        .catch((e) => console.warn('Could not autoplay the video:', e))
+    try {
+      if (videoElement) await videoElement.play()
+    } catch (e) {
+      console.warn('Could not autoplay the video:', e)
+    }
     props.onTransitionEnd(ref?.offsetTop)
   }
 
   onMount(() => {
     if (videoElement)
       videoElement.oncanplay = () => {
-        if (isPlayed) return
         clearTimeout(typingTimeout)
         setIsTyping(false)
         setTimeout(autoPlay, showAnimationDuration)
       }
     typingTimeout = setTimeout(
       () => {
-        if (isPlayed) return
         setIsTyping(false)
         setTimeout(autoPlay, showAnimationDuration)
       },

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.77",
+  "version": "0.0.78",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",