🚸(frontend) inform user Blurring effects are experimental

Be transparent with users: this version lacks quality and is currently
limited to Chrome, which may lead to frustration.

In addition to providing information, we should implement a method to
collect user feedback and reactions.
This commit is contained in:
lebaudantoine
2024-09-19 23:06:20 +02:00
committed by aleb_the_flash
parent 9d0767ccfe
commit cd9e7c8a1f
4 changed files with 27 additions and 4 deletions

View File

@@ -3,7 +3,7 @@ import { useLocalParticipant } from '@livekit/components-react'
import { LocalVideoTrack } from 'livekit-client' import { LocalVideoTrack } from 'livekit-client'
import { Text, P, ToggleButton, Div, H } from '@/primitives' import { Text, P, ToggleButton, Div, H } from '@/primitives'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { HStack, VStack } from '@/styled-system/jsx' import { HStack, styled, VStack } from '@/styled-system/jsx'
import { import {
BackgroundBlur, BackgroundBlur,
BackgroundOptions, BackgroundOptions,
@@ -11,6 +11,16 @@ import {
BackgroundTransformer, BackgroundTransformer,
} from '@livekit/track-processors' } from '@livekit/track-processors'
const Information = styled('div', {
base: {
backgroundColor: 'orange.50',
borderRadius: '4px',
padding: '0.75rem 0.75rem',
marginTop: '0.8rem',
alignItems: 'start',
},
})
enum BlurRadius { enum BlurRadius {
NONE = 0, NONE = 0,
LIGHT = 5, LIGHT = 5,
@@ -165,6 +175,16 @@ export const Effects = () => {
) : ( ) : (
<Text variant="sm">{t('notAvailable')}</Text> <Text variant="sm">{t('notAvailable')}</Text>
)} )}
<Information>
<Text
variant="sm"
style={{
textWrap: 'balance',
}}
>
{t('experimental')}
</Text>
</Information>
</Div> </Div>
</VStack> </VStack>
) )

View File

@@ -82,7 +82,8 @@
"normal": "", "normal": "",
"apply": "", "apply": "",
"clear": "" "clear": ""
} },
"experimental": ""
}, },
"sidePanel": { "sidePanel": {
"heading": { "heading": {

View File

@@ -80,7 +80,8 @@
"normal": "Blur", "normal": "Blur",
"apply": "Enable blur", "apply": "Enable blur",
"clear": "Disable blur" "clear": "Disable blur"
} },
"experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
}, },
"sidePanel": { "sidePanel": {
"heading": { "heading": {

View File

@@ -80,7 +80,8 @@
"normal": "Flou", "normal": "Flou",
"apply": "Appliquer le flou", "apply": "Appliquer le flou",
"clear": "Désactiver le flou" "clear": "Désactiver le flou"
} },
"experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet sur tous les navigateurs et une meilleur qualité."
}, },
"sidePanel": { "sidePanel": {
"heading": { "heading": {