🚸(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:
committed by
aleb_the_flash
parent
9d0767ccfe
commit
cd9e7c8a1f
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -82,7 +82,8 @@
|
|||||||
"normal": "",
|
"normal": "",
|
||||||
"apply": "",
|
"apply": "",
|
||||||
"clear": ""
|
"clear": ""
|
||||||
}
|
},
|
||||||
|
"experimental": ""
|
||||||
},
|
},
|
||||||
"sidePanel": {
|
"sidePanel": {
|
||||||
"heading": {
|
"heading": {
|
||||||
|
|||||||
@@ -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": {
|
||||||
|
|||||||
@@ -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": {
|
||||||
|
|||||||
Reference in New Issue
Block a user