studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(frontend) remove redundant React fragments

Browse Source 
Remove unnecessary React fragments that contain only one child or are direct
children of HTML elements. Simplifies JSX structure by eliminating redundant
wrapper elements that don't add functional value.
This commit is contained in:
lebaudantoine
2025-06-30 18:03:20 +02:00
committed by aleb_the_flash
parent b058e6add9
commit 4a6b84ed50
4 changed files with 213 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
View File

@@ -7,18 +7,16 @@ export const OptionsButton = () => {
const { t } = useTranslation('rooms') const { t } = useTranslation('rooms')
return ( return (
<> <Menu variant="dark">
<Menu variant="dark"> <Button
<Button square
square variant="primaryDark"
variant="primaryDark" aria-label={t('options.buttonLabel')}
aria-label={t('options.buttonLabel')} tooltip={t('options.buttonLabel')}
tooltip={t('options.buttonLabel')} >
> <RiMoreFill />
<RiMoreFill /> </Button>
</Button> <OptionsMenuItems />
<OptionsMenuItems /> </Menu>
</Menu>
</>
) )
} }

218
src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
View File

@@ -247,9 +247,81 @@ export const EffectsConfiguration = ({
/> />
)} )}
{isSupported ? ( {isSupported ? (
<> <div>
<div> <div>
<div> <H
lvl={3}
style={{
marginBottom: '1rem',
}}
variant="bodyXsBold"
>
{t('blur.title')}
</H>
<div
className={css({
display: 'flex',
gap: '1.25rem',
})}
>
<ToggleButton
variant="bigSquare"
onPress={async () => {
await clearEffect()
}}
isSelected={!getProcessor()}
isDisabled={processorPendingReveal}
>
<RiProhibited2Line />
</ToggleButton>
<ToggleButton
variant="bigSquare"
aria-label={tooltipLabel(ProcessorType.BLUR, {
blurRadius: BlurRadius.LIGHT,
})}
tooltip={tooltipLabel(ProcessorType.BLUR, {
blurRadius: BlurRadius.LIGHT,
})}
isDisabled={processorPendingReveal}
onChange={async () =>
await toggleEffect(ProcessorType.BLUR, {
blurRadius: BlurRadius.LIGHT,
})
}
isSelected={isSelected(ProcessorType.BLUR, {
blurRadius: BlurRadius.LIGHT,
})}
data-attr="toggle-blur-light"
>
<BlurOn />
</ToggleButton>
<ToggleButton
variant="bigSquare"
aria-label={tooltipLabel(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})}
tooltip={tooltipLabel(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})}
isDisabled={processorPendingReveal}
onChange={async () =>
await toggleEffect(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})
}
isSelected={isSelected(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})}
data-attr="toggle-blur-normal"
>
<BlurOnStrong />
</ToggleButton>
</div>
<div
className={css({
marginTop: '1.5rem',
})}
>
<H <H
lvl={3} lvl={3}
style={{ style={{
@@ -257,125 +329,51 @@ export const EffectsConfiguration = ({
}} }}
variant="bodyXsBold" variant="bodyXsBold"
> >
{t('blur.title')} {t('virtual.title')}
</H> </H>
<div <div
className={css({ className={css({
display: 'flex', display: 'flex',
gap: '1.25rem', gap: '1.25rem',
flexWrap: 'wrap',
})} })}
> >
<ToggleButton {[...Array(8).keys()].map((i) => {
variant="bigSquare" const imagePath = `/assets/backgrounds/${i + 1}.jpg`
onPress={async () => { const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
await clearEffect() return (
}} <ToggleButton
isSelected={!getProcessor()} key={i}
isDisabled={processorPendingReveal} variant="bigSquare"
> aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
<RiProhibited2Line /> imagePath,
</ToggleButton> })}
<ToggleButton tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
variant="bigSquare" imagePath,
aria-label={tooltipLabel(ProcessorType.BLUR, { })}
blurRadius: BlurRadius.LIGHT, isDisabled={processorPendingReveal}
})} onChange={async () =>
tooltip={tooltipLabel(ProcessorType.BLUR, { await toggleEffect(ProcessorType.VIRTUAL, {
blurRadius: BlurRadius.LIGHT, imagePath,
})} })
isDisabled={processorPendingReveal} }
onChange={async () => isSelected={isSelected(ProcessorType.VIRTUAL, {
await toggleEffect(ProcessorType.BLUR, { imagePath,
blurRadius: BlurRadius.LIGHT, })}
}) className={css({
} bgSize: 'cover',
isSelected={isSelected(ProcessorType.BLUR, { })}
blurRadius: BlurRadius.LIGHT, style={{
})} backgroundImage: `url(${thumbnailPath})`,
data-attr="toggle-blur-light" }}
> data-attr={`toggle-virtual-${i}`}
<BlurOn /> />
</ToggleButton> )
<ToggleButton
variant="bigSquare"
aria-label={tooltipLabel(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})}
tooltip={tooltipLabel(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})}
isDisabled={processorPendingReveal}
onChange={async () =>
await toggleEffect(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})
}
isSelected={isSelected(ProcessorType.BLUR, {
blurRadius: BlurRadius.NORMAL,
})}
data-attr="toggle-blur-normal"
>
<BlurOnStrong />
</ToggleButton>
</div>
<div
className={css({
marginTop: '1.5rem',
})} })}
>
<H
lvl={3}
style={{
marginBottom: '1rem',
}}
variant="bodyXsBold"
>
{t('virtual.title')}
</H>
<div
className={css({
display: 'flex',
gap: '1.25rem',
flexWrap: 'wrap',
})}
>
{[...Array(8).keys()].map((i) => {
const imagePath = `/assets/backgrounds/${i + 1}.jpg`
const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
return (
<ToggleButton
key={i}
variant="bigSquare"
aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
imagePath,
})}
tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
imagePath,
})}
isDisabled={processorPendingReveal}
onChange={async () =>
await toggleEffect(ProcessorType.VIRTUAL, {
imagePath,
})
}
isSelected={isSelected(ProcessorType.VIRTUAL, {
imagePath,
})}
className={css({
bgSize: 'cover',
})}
style={{
backgroundImage: `url(${thumbnailPath})`,
}}
data-attr={`toggle-virtual-${i}`}
/>
)
})}
</div>
</div> </div>
</div> </div>
</div> </div>
</> </div>
) : ( ) : (
<Information> <Information>
<Text variant="sm">{t('notAvailable')}</Text> <Text variant="sm">{t('notAvailable')}</Text>

118
src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
View File

@@ -22,75 +22,73 @@ export function DesktopControlBar({
const browserSupportsScreenSharing = supportsScreenSharing() const browserSupportsScreenSharing = supportsScreenSharing()
const desktopControlBarEl = useRef<HTMLDivElement>(null) const desktopControlBarEl = useRef<HTMLDivElement>(null)
return ( return (
<> <div
ref={desktopControlBarEl}
className={css({
width: '100vw',
display: 'flex',
position: 'absolute',
padding: '1.125rem',
bottom: 0,
left: 0,
right: 0,
})}
>
<div <div
ref={desktopControlBarEl}
className={css({ className={css({
width: '100vw',
display: 'flex', display: 'flex',
position: 'absolute', justifyContent: 'flex-start',
padding: '1.125rem', flex: '1 1 33%',
bottom: 0, alignItems: 'center',
left: 0, gap: '0.5rem',
right: 0, marginLeft: '0.5rem',
})}
/>
<div
className={css({
flex: '1 1 33%',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
gap: '0.65rem',
})} })}
> >
<div <SelectToggleDevice
className={css({ source={Track.Source.Microphone}
display: 'flex', onChange={microphoneOnChange}
justifyContent: 'flex-start', onDeviceError={(error) =>
flex: '1 1 33%', onDeviceError?.({ source: Track.Source.Microphone, error })
alignItems: 'center', }
gap: '0.5rem', onActiveDeviceChange={(deviceId) =>
marginLeft: '0.5rem', saveAudioInputDeviceId(deviceId ?? '')
})} }
menuVariant="dark"
/> />
<div <SelectToggleDevice
className={css({ source={Track.Source.Camera}
flex: '1 1 33%', onChange={cameraOnChange}
alignItems: 'center', onDeviceError={(error) =>
justifyContent: 'center', onDeviceError?.({ source: Track.Source.Camera, error })
display: 'flex', }
gap: '0.65rem', onActiveDeviceChange={(deviceId) =>
})} saveVideoInputDeviceId(deviceId ?? '')
> }
<SelectToggleDevice menuVariant="dark"
source={Track.Source.Microphone} />
onChange={microphoneOnChange} <ReactionsToggle />
{browserSupportsScreenSharing && (
<ScreenShareToggle
onDeviceError={(error) => onDeviceError={(error) =>
onDeviceError?.({ source: Track.Source.Microphone, error }) onDeviceError?.({ source: Track.Source.ScreenShare, error })
} }
onActiveDeviceChange={(deviceId) =>
saveAudioInputDeviceId(deviceId ?? '')
}
menuVariant="dark"
/> />
<SelectToggleDevice )}
source={Track.Source.Camera} <HandToggle />
onChange={cameraOnChange} <OptionsButton />
onDeviceError={(error) => <LeaveButton />
onDeviceError?.({ source: Track.Source.Camera, error }) <StartMediaButton />
}
onActiveDeviceChange={(deviceId) =>
saveVideoInputDeviceId(deviceId ?? '')
}
menuVariant="dark"
/>
<ReactionsToggle />
{browserSupportsScreenSharing && (
<ScreenShareToggle
onDeviceError={(error) =>
onDeviceError?.({ source: Track.Source.ScreenShare, error })
}
/>
)}
<HandToggle />
<OptionsButton />
<LeaveButton />
<StartMediaButton />
</div>
<MoreOptions parentElement={desktopControlBarEl} />
</div> </div>
</> <MoreOptions parentElement={desktopControlBarEl} />
</div>
) )
} }

74
src/frontend/src/primitives/Spinner.tsx
View File

@@ -15,44 +15,42 @@ export const Spinner = ({
return ( return (
<ProgressBar aria-label="Loading…" value={30}> <ProgressBar aria-label="Loading…" value={30}>
{({ percentage }) => ( {({ percentage }) => (
<> <svg
<svg width={size}
width={size} height={size}
height={size} viewBox="0 0 28 28"
viewBox="0 0 28 28" fill="none"
fill="none" strokeWidth={strokeWidth}
strokeWidth={strokeWidth} >
> <circle
<circle cx={center}
cx={center} cy={center}
cy={center} r={r}
r={r} strokeDasharray={0}
strokeDasharray={0} strokeDashoffset={0}
strokeDashoffset={0} strokeLinecap="round"
strokeLinecap="round" className={css({
className={css({ stroke: variant == 'light' ? 'primary.100' : 'transparent',
stroke: variant == 'light' ? 'primary.100' : 'transparent', })}
})} style={{}}
style={{}} />
/> <circle
<circle cx={center}
cx={center} cy={center}
cy={center} r={r}
r={r} strokeDasharray={`${c} ${c}`}
strokeDasharray={`${c} ${c}`} strokeDashoffset={percentage && c - (percentage / 100) * c}
strokeDashoffset={percentage && c - (percentage / 100) * c} strokeLinecap="round"
strokeLinecap="round" className={css({
className={css({ stroke: variant == 'light' ? 'primary.800' : 'white',
stroke: variant == 'light' ? 'primary.800' : 'white', })}
})} style={{
style={{ animation: `rotate 1s ease-in-out infinite`,
animation: `rotate 1s ease-in-out infinite`, transformOrigin: 'center',
transformOrigin: 'center', transition: 'transform 16ms linear',
transition: 'transform 16ms linear', }}
}} />
/> </svg>
</svg>
</>
)} )}
</ProgressBar> </ProgressBar>
) )