From 5ae6c64d065d295780f2b008a88c0e0ea59a70e5 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 7 Jul 2023 12:02:40 +0200
Subject: [PATCH] :children_crossing: (video) Improve video autoplay behavior

Autoplay video only when displayed entirely and fix weird Safari autoplay issues when scrolling
---
 .../public/templates/product-recommendation.json       |  1 -
 packages/embeds/js/package.json                        |  2 +-
 .../blocks/bubbles/video/components/VideoBubble.tsx    | 10 ++++++++--
 packages/embeds/react/package.json                     |  2 +-
 packages/schemas/features/typebot/theme/schemas.ts     |  3 +++
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/builder/public/templates/product-recommendation.json b/apps/builder/public/templates/product-recommendation.json
index 628fd1c15..faaaaccc1 100644
--- a/apps/builder/public/templates/product-recommendation.json
+++ b/apps/builder/public/templates/product-recommendation.json
@@ -1509,7 +1509,6 @@
       "buttons": { "color": "#010000", "backgroundColor": "#FFEF02" },
       "roundness": "medium",
       "hostAvatar": {
-        "url": "http://localhost:9000/typebot/public/typebots/cli8tguel00011anqcst3166d/hostAvatar?v=1685368734687",
         "isEnabled": true
       },
       "hostBubbles": { "color": "#ffffff", "backgroundColor": "#1B1A1A" },
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 675ff54d2..963876bf1 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "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/video/components/VideoBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
index 6a32a3b63..10cea1626 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
@@ -17,6 +17,14 @@ export const VideoBubble = (props: Props) => {
   const [isTyping, setIsTyping] = createSignal(true)
 
   const onTypingEnd = () => {
+    const videoElement = ref?.querySelector('video')
+    if (videoElement) {
+      try {
+        videoElement.play()
+      } catch (e) {
+        console.warn('Could not autoplay the video:', e)
+      }
+    }
     if (!isTyping()) return
     setIsTyping(false)
     setTimeout(() => {
@@ -74,9 +82,7 @@ const VideoContent = (props: VideoContentProps) => {
           }
           style={{
             height: props.isTyping ? '32px' : 'auto',
-            'max-height': window.navigator.vendor.match(/apple/i) ? '40vh' : '',
           }}
-          autoplay
         >
           <source src={props.content.url} type="video/mp4" />
           Sorry, your browser doesn&apos;t support embedded videos.
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 78273a376..0790d2fc9 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/schemas/features/typebot/theme/schemas.ts b/packages/schemas/features/typebot/theme/schemas.ts
index dbdf34012..7ed47ec76 100644
--- a/packages/schemas/features/typebot/theme/schemas.ts
+++ b/packages/schemas/features/typebot/theme/schemas.ts
@@ -63,6 +63,9 @@ export const defaultTheme: Theme = {
       color: '#303235',
       placeholderColor: '#9095A0',
     },
+    hostAvatar: {
+      isEnabled: true,
+    },
   },
   general: {
     font: 'Open Sans',