From c7263a17eb973de2bb3c2e77c790a12bfa4339b4 Mon Sep 17 00:00:00 2001
From: Abhirup Basu <basu.abhirup27@gmail.com>
Date: Thu, 11 Jul 2024 16:02:47 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Option=20to=20disable=20co?=
 =?UTF-8?q?ntrols=20and=20autoplay=20on=20videos=20(#1631)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../video/components/VideoBubbleContent.tsx   |  2 +-
 .../video/components/VideoUploadContent.tsx   | 42 +++++++++++++++++++
 packages/embeds/js/package.json               |  2 +-
 .../bubbles/video/components/VideoBubble.tsx  | 12 +++++-
 packages/embeds/nextjs/package.json           |  2 +-
 packages/embeds/react/package.json            |  2 +-
 .../blocks/bubbles/video/constants.ts         |  2 +
 .../features/blocks/bubbles/video/schema.ts   |  2 +
 8 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
index 2aa72f885..9f6a0886c 100644
--- a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
+++ b/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%',
diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
index 6d43172f1..716c57742 100644
--- a/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
+++ b/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>
   )
 }
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index d5bc17c31..98e186c2d 100644
--- a/packages/embeds/js/package.json
+++ b/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",
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 db850f1d5..6e83b85de 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
@@ -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')
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index 42c9d6f61..a1dd7a8fc 100644
--- a/packages/embeds/nextjs/package.json
+++ b/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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index f4d6eb8ce..1bec4cc71 100644
--- a/packages/embeds/react/package.json
+++ b/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",
diff --git a/packages/schemas/features/blocks/bubbles/video/constants.ts b/packages/schemas/features/blocks/bubbles/video/constants.ts
index 2aa04df53..c084a3ff6 100644
--- a/packages/schemas/features/blocks/bubbles/video/constants.ts
+++ b/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 = {
diff --git a/packages/schemas/features/blocks/bubbles/video/schema.ts b/packages/schemas/features/blocks/bubbles/video/schema.ts
index e8f621e6e..e2732b5f4 100644
--- a/packages/schemas/features/blocks/bubbles/video/schema.ts
+++ b/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(