⚡️ 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>

apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx

@@ -29,7 +29,7 @@ export const VideoBubbleContent = ({ block }: Props) => {
           ) : (
             <video
               key={block.content.url}
-              controls
+              controls={block.content?.areControlsDisplayed}
               style={{
                 width: '100%',
                 height: '100%',

apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx

@@ -4,6 +4,7 @@ import { TextInput } from '@/components/inputs'
 import { useTranslate } from '@tolgee/react'
 import { parseVideoUrl } from '@typebot.io/schemas/features/blocks/bubbles/video/helpers'
 import { defaultVideoBubbleContent } from '@typebot.io/schemas/features/blocks/bubbles/video/constants'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 
 type Props = {
   content?: VideoBubbleBlock['content']
@@ -43,6 +44,22 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
     })
   }
 
+  const updateAutoPlay = (isAutoplayEnabled: boolean) => {
+    return onSubmit({ ...content, isAutoplayEnabled })
+  }
+
+  const updateControlsDisplay = (areControlsDisplayed: boolean) => {
+    if (areControlsDisplayed === false) {
+      // Make sure autoplay is enabled when video controls are disabled
+      return onSubmit({
+        ...content,
+        isAutoplayEnabled: true,
+        areControlsDisplayed,
+      })
+    }
+    return onSubmit({ ...content, areControlsDisplayed })
+  }
+
   return (
     <Stack p="2" spacing={4}>
       <Stack>
@@ -77,6 +94,31 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
           />
         </Stack>
       )}
+      {content?.url && content?.type === 'url' && (
+        <Stack>
+          <SwitchWithLabel
+            label={'Display controls'}
+            initialValue={
+              content?.areControlsDisplayed ??
+              defaultVideoBubbleContent.areControlsDisplayed
+            }
+            onCheckChange={updateControlsDisplay}
+          />
+          <SwitchWithLabel
+            label={t('editor.blocks.bubbles.audio.settings.autoplay.label')}
+            initialValue={
+              content?.isAutoplayEnabled ??
+              defaultVideoBubbleContent.isAutoplayEnabled
+            }
+            isChecked={
+              content?.isAutoplayEnabled ??
+              defaultVideoBubbleContent.isAutoplayEnabled
+            }
+            isDisabled={content?.areControlsDisplayed === false}
+            onCheckChange={() => updateAutoPlay(!content.isAutoplayEnabled)}
+          />
+        </Stack>
+      )}
     </Stack>
   )
 }

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(