💄 (embed) Improve avatar alignment and audio auto load

2023-07-31 18:22:50 +02:00
parent e34b939786
commit 14c3d95b8a
9 changed files with 101 additions and 78 deletions
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@typebot.io/js",
-  "version": "0.1.12",
+  "version": "0.1.13",
  "description": "Javascript library to display typebots on your website",
  "type": "module",
  "main": "dist/index.js",
--- a/packages/embeds/js/src/assets/index.css
+++ b/packages/embeds/js/src/assets/index.css
@@ -76,10 +76,10 @@

@keyframes chatBubbles {
  0% {
-    transform: translateY(0);
+    transform: translateY(2.5);
  }
  50% {
-    transform: translateY(-5px);
+    transform: translateY(-2.5px);
  }
  100% {
    transform: translateY(0);
--- a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -1,4 +1,5 @@
 import { TypingBubble } from '@/components'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { AudioBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'

@@ -8,7 +9,7 @@ type Props = {
 }

 const showAnimationDuration = 400
-const typingDuration = 500
+const typingDuration = 100

 let typingTimeout: NodeJS.Timeout

@@ -18,29 +19,16 @@ export const AudioBubble = (props: Props) => {
  let audioElement: HTMLAudioElement | undefined
  const [isTyping, setIsTyping] = createSignal(true)

-  const endTyping = () => {
-    if (isPlayed) return
-    isPlayed = true
-    setIsTyping(false)
-    setTimeout(
-      () => props.onTransitionEnd(ref?.offsetTop),
-      showAnimationDuration
-    )
-  }
-
  onMount(() => {
-    typingTimeout = setTimeout(endTyping, typingDuration)
-    audioElement?.addEventListener(
-      'canplay',
-      () => {
-        clearTimeout(typingTimeout)
-        audioElement
-          ?.play()
-          .catch((e) => console.warn("Couldn't autoplay audio", e))
-        endTyping()
-      },
-      { once: true }
-    )
+    typingTimeout = setTimeout(() => {
+      if (isPlayed) return
+      isPlayed = true
+      setIsTyping(false)
+      setTimeout(
+        () => props.onTransitionEnd(ref?.offsetTop),
+        showAnimationDuration
+      )
+    }, typingDuration)
  })

  onCleanup(() => {
@@ -63,11 +51,14 @@ export const AudioBubble = (props: Props) => {
          <audio
            ref={audioElement}
            src={props.url}
+            autoplay
            class={
-              'z-10 text-fade-in m-2 ' +
-              (isTyping() ? 'opacity-0' : 'opacity-100')
+              'z-10 text-fade-in ' +
+              (isTyping() ? 'opacity-0' : 'opacity-100 m-2')
            }
-            style={{ height: isTyping() ? '32px' : 'revert' }}
+            style={{
+              height: isTyping() ? (isMobile() ? '32px' : '36px') : 'revert',
+            }}
            controls
          />
        </div>
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -1,6 +1,8 @@
 import { TypingBubble } from '@/components'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { EmbedBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
+import { clsx } from 'clsx'

 type Props = {
  content: EmbedBubbleContent
@@ -43,17 +45,25 @@ export const EmbedBubble = (props: Props) => {
          >
            {isTyping() && <TypingBubble />}
          </div>
-          <iframe
-            id="embed-bubble-content"
-            src={props.content.url}
-            class={
-              'w-full z-20 p-4 text-fade-in ' +
-              (isTyping() ? 'opacity-0' : 'opacity-100')
-            }
+          <div
+            class={clsx(
+              'p-4 z-20 text-fade-in w-full',
+              isTyping() ? 'opacity-0' : 'opacity-100 p-4'
+            )}
            style={{
-              height: isTyping() ? '32px' : `${props.content.height}px`,
+              height: isTyping()
+                ? isMobile()
+                  ? '32px'
+                  : '36px'
+                : `${props.content.height}px`,
            }}
-          />
+          >
+            <iframe
+              id="embed-bubble-content"
+              src={props.content.url}
+              class={'w-full h-full '}
+            />
+          </div>
        </div>
      </div>
    </div>
--- a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -1,6 +1,8 @@
 import { TypingBubble } from '@/components'
 import type { ImageBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
+import { clsx } from 'clsx'
+import { isMobile } from '@/utils/isMobileSignal'

 type Props = {
  content: ImageBubbleContent
@@ -73,12 +75,20 @@ export const ImageBubble = (props: Props) => {
            <a
              href={props.content.clickLink.url}
              target="_blank"
-              class="p-4 z-10"
+              class={clsx('z-10', isTyping() ? 'h-8' : 'p-4')}
            >
              {Image}
            </a>
          ) : (
-            <figure class="p-4 z-10">{Image}</figure>
+            <figure
+              class={clsx(
+                'z-10',
+                !isTyping() && 'p-4',
+                isTyping() ? (isMobile() ? 'h-8' : 'h-9') : ''
+              )}
+            >
+              {Image}
+            </figure>
          )}
        </div>
      </div>
--- a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
@@ -4,6 +4,8 @@ import { For, createSignal, onCleanup, onMount } from 'solid-js'
 import { computeTypingDuration } from '../helpers/computeTypingDuration'
 import { PlateBlock } from './plate/PlateBlock'
 import { computePlainText } from '../helpers/convertRichTextToPlainText'
+import { clsx } from 'clsx'
+import { isMobile } from '@/utils/isMobileSignal'

 type Props = {
  content: TextBubbleContent
@@ -65,10 +67,13 @@ export const TextBubble = (props: Props) => {
            {isTyping() && <TypingBubble />}
          </div>
          <div
-            class={
-              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis ' +
-              (isTyping() ? 'opacity-0 h-6' : 'opacity-100 h-full')
-            }
+            class={clsx(
+              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis',
+              isTyping() ? 'opacity-0' : 'opacity-100'
+            )}
+            style={{
+              height: isTyping() ? (isMobile() ? '16px' : '20px') : '100%',
+            }}
          >
            <For each={props.content.richText}>
              {(element) => <PlateBlock element={element} />}
--- a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -1,7 +1,9 @@
 import { TypingBubble } from '@/components'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { VideoBubbleContent } from '@typebot.io/schemas'
 import { VideoBubbleContentType } from '@typebot.io/schemas/features/blocks/bubbles/video/enums'
 import { createSignal, Match, onCleanup, onMount, Switch } from 'solid-js'
+import { clsx } from 'clsx'

 type Props = {
  content: VideoBubbleContent
@@ -13,24 +15,23 @@ let typingTimeout: NodeJS.Timeout

 export const VideoBubble = (props: Props) => {
  let ref: HTMLDivElement | undefined
-  let videoElement: HTMLVideoElement | undefined
  const [isTyping, setIsTyping] = createSignal(true)

-  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(() => {
-    typingTimeout = setTimeout(onTypingEnd, 2000)
+    const typingDuration =
+      props.content?.type &&
+      [VideoBubbleContentType.VIMEO, VideoBubbleContentType.YOUTUBE].includes(
+        props.content?.type
+      )
+        ? 2000
+        : 100
+    typingTimeout = setTimeout(() => {
+      if (!isTyping()) return
+      setIsTyping(false)
+      setTimeout(() => {
+        props.onTransitionEnd(ref?.offsetTop)
+      }, showAnimationDuration)
+    }, typingDuration)
  })

  onCleanup(() => {
@@ -40,7 +41,7 @@ export const VideoBubble = (props: Props) => {
  return (
    <div class="flex flex-col animate-fade-in" ref={ref}>
      <div class="flex w-full items-center">
-        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden">
          <div
            class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
            style={{
@@ -58,7 +59,7 @@ export const VideoBubble = (props: Props) => {
              }
            >
              <video
-                ref={videoElement}
+                autoplay
                src={props.content.url}
                controls
                class={
@@ -66,7 +67,7 @@ export const VideoBubble = (props: Props) => {
                  (isTyping() ? 'opacity-0' : 'opacity-100')
                }
                style={{
-                  height: isTyping() ? '32px' : 'auto',
+                  height: isTyping() ? (isMobile() ? '32px' : '36px') : 'auto',
                }}
              />
            </Match>
@@ -79,20 +80,26 @@ export const VideoBubble = (props: Props) => {
                ].includes(props.content.type)
              }
            >
-              <iframe
-                src={`${
-                  props.content.type === VideoBubbleContentType.VIMEO
-                    ? 'https://player.vimeo.com/video'
-                    : 'https://www.youtube.com/embed'
-                }/${props.content.id}`}
-                class={
-                  'w-full p-4 text-fade-in z-10 ' +
-                  (isTyping() ? 'opacity-0' : 'opacity-100')
-                }
-                height={isTyping() ? '32px' : '200px'}
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-              />
+              <div
+                class={clsx(
+                  'p-4 z-10 text-fade-in w-full',
+                  isTyping() ? 'opacity-0' : 'opacity-100 p-4'
+                )}
+                style={{
+                  height: isTyping() ? (isMobile() ? '32px' : '36px') : '200px',
+                }}
+              >
+                <iframe
+                  src={`${
+                    props.content.type === VideoBubbleContentType.VIMEO
+                      ? 'https://player.vimeo.com/video'
+                      : 'https://www.youtube.com/embed'
+                  }/${props.content.id}`}
+                  class={'w-full h-full'}
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen
+                />
+              </div>
            </Match>
          </Switch>
        </div>