gistfile1.txt

        <Flex w="full" h="full" alignItems="center" justifyContent={'center'} direction="column" gap={5}>
            <Flex
                padding={isMonitorDisplaySurface(recorder$.screenPreviewStream.get()) ? 0 : 5}
                h="55%"
                aspectRatio={16 / 9}
                maxH="800px"
                position="relative"
                overflow="clip"
                rounded="md"
                shadow="md"
                alignItems="center"
                justifyContent="center"
            >
                <RecordingIndicator />

                {/* Screen */}
                <Flex
                    borderRadius="md"
                    overflow="hidden"
                    shadow={["screenReady", "ready", "recording", "processing"].includes(recorderState) ? 'lg' : 'none'}
                    alignItems="center"
                    justifyContent="center"
                    aspectRatio={recorder$.screenAspectRatio.get()}
                    h="full"
                >
                    <AspectRatio ratio={recorder$.screenAspectRatio.get()} w="full">
                        <VideoPreview previewRef={screenPreviewRef} type="screen" />
                    </AspectRatio>
                </Flex>

                {/* Webcam */}
                <Box
                    width="30%"
                    height="auto"
                    rounded="4xl"
                    overflow="hidden"
                    position="absolute"
                    bottom="2.5"
                    right="2.5"
                    shadow="xs"
                >
                    <AspectRatio ratio={recorder$.webcamAspectRatio.get()} w="full">
                        <VideoPreview previewRef={webcamPreviewRef} type="webcam" />
                    </AspectRatio>
                </Box>
            </Flex>

            {(['processing', 'recording'].includes(recorder$.state.name.get())) && (
                <StopButton />
            )}
        </Flex>