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