⚡ (audio) Add autoplay switch in settings

apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx

@@ -3,21 +3,25 @@ import { AudioBubbleContent } from '@typebot.io/schemas'
 import { TextInput } from '@/components/inputs'
 import { useState } from 'react'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 
 type Props = {
   fileUploadPath: string
   content: AudioBubbleContent
-  onSubmit: (content: AudioBubbleContent) => void
+  onContentChange: (content: AudioBubbleContent) => void
 }
 
 export const AudioBubbleForm = ({
   fileUploadPath,
   content,
-  onSubmit,
+  onContentChange,
 }: Props) => {
   const [currentTab, setCurrentTab] = useState<'link' | 'upload'>('link')
 
-  const submit = (url: string) => onSubmit({ url })
+  const updateUrl = (url: string) => onContentChange({ ...content, url })
+
+  const updateAutoPlay = (isAutoplayEnabled: boolean) =>
+    onContentChange({ ...content, isAutoplayEnabled })
 
   return (
     <Stack>
@@ -37,31 +41,38 @@ export const AudioBubbleForm = ({
           Embed link
         </Button>
       </HStack>
-      <Stack p="2">
-        {currentTab === 'upload' && (
-          <Flex justify="center" py="2">
-            <UploadButton
-              fileType="audio"
-              filePath={fileUploadPath}
-              onFileUploaded={submit}
-              colorScheme="blue"
-            >
-              Choose a file
-            </UploadButton>
-          </Flex>
-        )}
-        {currentTab === 'link' && (
-          <>
-            <TextInput
-              placeholder="Paste the audio file link..."
-              defaultValue={content.url ?? ''}
-              onChange={submit}
-            />
-            <Text fontSize="sm" color="gray.400" textAlign="center">
-              Works with .MP3s and .WAVs
-            </Text>
-          </>
-        )}
+      <Stack p="2" spacing={4}>
+        <Stack>
+          {currentTab === 'upload' && (
+            <Flex justify="center" py="2">
+              <UploadButton
+                fileType="audio"
+                filePath={fileUploadPath}
+                onFileUploaded={updateUrl}
+                colorScheme="blue"
+              >
+                Choose a file
+              </UploadButton>
+            </Flex>
+          )}
+          {currentTab === 'link' && (
+            <>
+              <TextInput
+                placeholder="Paste the audio file link..."
+                defaultValue={content.url ?? ''}
+                onChange={updateUrl}
+              />
+              <Text fontSize="sm" color="gray.400" textAlign="center">
+                Works with .MP3s and .WAVs
+              </Text>
+            </>
+          )}
+        </Stack>
+        <SwitchWithLabel
+          label={'Enable autoplay'}
+          initialValue={content.isAutoplayEnabled ?? true}
+          onCheckChange={updateAutoPlay}
+        />
       </Stack>
     </Stack>
   )

apps/builder/src/features/graph/components/nodes/block/MediaBubblePopoverContent.tsx

@@ -77,7 +77,7 @@ export const MediaBubbleContent = ({
         <AudioBubbleForm
           content={block.content}
           fileUploadPath={`typebots/${typebotId}/blocks/${block.id}`}
-          onSubmit={onContentChange}
+          onContentChange={onContentChange}
         />
       )
     }