⚡️ Option to disable controls and autoplay on videos (#1631)

Extends the implementation of #1503 as per the suggestions provided in
the code review to resolve #1485



https://github.com/baptisteArno/typebot.io/assets/69730155/87481d64-57f5-4f7e-8a28-4a464f12cc31

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -77,9 +77,17 @@ export const VideoBubble = (props: Props) => {
               }
             >
               <video
-                autoplay={props.onTransitionEnd ? false : true}
+                autoplay={
+                  props.onTransitionEnd
+                    ? props.content?.isAutoplayEnabled ??
+                      defaultVideoBubbleContent.isAutoplayEnabled
+                    : false
+                }
                 src={props.content?.url}
-                controls
+                controls={
+                  props.content?.areControlsDisplayed ??
+                  defaultVideoBubbleContent.areControlsDisplayed
+                }
                 class={
                   'p-4 focus:outline-none w-full z-10 text-fade-in rounded-md ' +
                   (isTyping() ? 'opacity-0' : 'opacity-100')

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/blocks/bubbles/video/constants.ts

@@ -17,6 +17,8 @@ export const defaultVideoBubbleContent = {
   height: 400,
   aspectRatio: '16/9',
   maxWidth: '100%',
+  areControlsDisplayed: true,
+  isAutoplayEnabled: true,
 } as const
 
 export const horizontalVideoSuggestionSize = {

packages/schemas/features/blocks/bubbles/video/schema.ts

@@ -12,6 +12,8 @@ export const videoBubbleContentSchema = z.object({
   aspectRatio: z.string().optional(),
   maxWidth: z.string().optional(),
   queryParamsStr: z.string().optional(),
+  areControlsDisplayed: z.boolean().optional(),
+  isAutoplayEnabled: z.boolean().optional(),
 })
 
 export const videoBubbleBlockSchema = blockBaseSchema.merge(