diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json index e251e6e45..59517ceaa 100644 --- a/packages/embeds/js/package.json +++ b/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", 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 bd88d9c39..77ee5e5b7 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 @@ -8,8 +8,7 @@ type Props = { } const showAnimationDuration = 400 -const defaultTypingDuration = 5000 -let isPlayed = false +const typingDuration = 500 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) - }, defaultTypingDuration) + setTimeout(() => { + 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(() => { 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 24e645bff..709904941 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 @@ -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 () => { - if (isPlayed) return - isPlayed = true - try { - if (videoElement) await videoElement.play() - } catch (e) { - console.warn('Could not autoplay the video:', e) - } - props.onTransitionEnd(ref?.offsetTop) + const onTypingEnd = () => { + const videoElement = ref?.querySelector('video') + if (videoElement) + videoElement + .play() + .catch((e) => console.warn('Could not autoplay the video:', e)) + if (!isTyping()) return + setIsTyping(false) + setTimeout(() => { + props.onTransitionEnd(ref?.offsetTop) + }, showAnimationDuration) } onMount(() => { - if (videoElement) - videoElement.oncanplay = () => { - clearTimeout(typingTimeout) - setIsTyping(false) - setTimeout(autoPlay, showAnimationDuration) - } - typingTimeout = setTimeout( - () => { - setIsTyping(false) - setTimeout(autoPlay, showAnimationDuration) - }, - videoElement ? defaultTypingDuration : 2000 - ) + typingTimeout = setTimeout(onTypingEnd, 2000) }) onCleanup(() => { diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json index 2b98faf57..37b4e38af 100644 --- a/packages/embeds/react/package.json +++ b/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",