diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index 40475e810..e728708b4 100644 --- a/packages/embeds/js/package.json +++ b/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", 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 c780ea6ff..03d050f6d 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 @@ -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(() => { 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 index b3f3d1a68..faa629458 100644 --- a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx +++ b/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(() => { diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index e3dd35050..86b15dd48 100644 --- a/packages/embeds/react/package.json +++ b/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",