electron-rare/meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip refactor sidepannel

Browse Source
This commit is contained in:
lebaudantoine
2025-04-03 18:00:24 +02:00
parent cd3a9567c7
commit ae3cf2fbf7
7 changed files with 140 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
-1
View File
@@ -9,7 +9,6 @@ import { ParticipantsList } from './controls/Participants/ParticipantsList'
import { useSidePanel } from '../hooks/useSidePanel'
import { ReactNode } from 'react'
import { Chat } from '../prefabs/Chat'
import { Transcript } from './Transcript'
import { Effects } from './effects/Effects'
import { Admin } from './Admin'
import { Tools } from '@/features/rooms/livekit/components/Tools.tsx'
src/frontend/src/features/rooms/livekit/components/Tools.tsx
+26 -18
View File
@@ -1,7 +1,13 @@
import { A, Div, H, P, Text } from '@/primitives'
import { A, Div, Text } from '@/primitives'
import { css } from '@/styled-system/css'
import { Button as RACButton } from 'react-aria-components'
import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
import { RiFileTextFill } from '@remixicon/react'
import { Transcript } from '@/features/rooms/livekit/components/Transcript'
import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
import { useTranslation } from 'react-i18next'
const CRISP_HELP_ARTICLE =
'https://lasuite.crisp.help/fr/article/visio-tools-bvxj23'
const ActionButton = ({ icon, title, description, onPress }) => {
return (
@@ -41,7 +47,7 @@ const ActionButton = ({ icon, title, description, onPress }) => {
<Text margin={false} as="h3">
{title}
</Text>
<Text as={'p'} variant={'smNote'} wrap={'pretty'}>
<Text as="p" variant="smNote" wrap="pretty">
{description}
</Text>
</div>
@@ -50,6 +56,13 @@ const ActionButton = ({ icon, title, description, onPress }) => {
}
export const Tools = () => {
const { openTranscript, isTranscriptOpen } = useSidePanel()
const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
if (isTranscriptOpen) {
return <Transcript />
}
return (
<Div
display="flex"
@@ -66,25 +79,20 @@ export const Tools = () => {
textStyle: 'sm',
paddingX: '0.75rem',
})}
margin={'md'}
margin="md"
>
Nous essayons d'intégrer plus d'outils dans visio blablabzlab,{' '}
<A href="/">En savoir plus</A>.
{t('body')}{' '}
<A href={CRISP_HELP_ARTICLE} target="_blank">
{t('moreLink')}
</A>
.
</Text>
<ActionButton
icon={<RiFileTextFill size={24} color={'white'} />}
title={'Transcription'}
description={
'Transcrivez votre réunion et recevez son résultat à la fin.'
}
icon={<RiFileTextFill size={24} color="white" />}
title={t('tools.transcript.title')}
description={t('tools.transcript.body')}
onPress={() => openTranscript()}
/>
<ActionButton
icon={<RiLiveFill size={24} color={'white'} />}
title={'Enregistrement'}
description={'Enregistrer votre réunion pour la rejouer à la demande.'}
/>
{/*<ActionButton />*/}
{/*<ActionButton />*/}
</Div>
)
}
src/frontend/src/features/rooms/livekit/components/Transcript.tsx
+43 -14
View File
@@ -1,10 +1,9 @@
import { Button, Div, H, Text } from '@/primitives'
import { A, Button, Div, Text } from '@/primitives'
import thirdSlide from '@/assets/intro-slider/3_resume.png'
import { css } from '@/styled-system/css'
import { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess'
import { RiRecordCircleLine, RiStopCircleLine } from '@remixicon/react'
import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
import { useRoomContext } from '@livekit/components-react'
import {
@@ -16,13 +15,14 @@ import { useEffect, useState } from 'react'
import { RoomEvent } from 'livekit-client'
import { useTranslation } from 'react-i18next'
const CRISP_HELP_ARTICLE =
'https://lasuite.crisp.help/fr/article/visio-transcript-1sjq43x'
export const Transcript = () => {
const [isLoading, setIsLoading] = useState(false)
const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
const hasTranscriptAccess = useHasTranscriptAccess()
const roomId = useRoomId()
const { mutateAsync: startRecordingRoom } = useStartRecording()
@@ -69,36 +69,65 @@ export const Transcript = () => {
flexDirection="column"
alignItems="center"
>
<img src={thirdSlide} alt={'wip'} />
<img
src={thirdSlide}
alt={''}
className={css({
minHeight: '309px',
marginBottom: '1rem',
})}
/>
{room.isRecording ? (
<>
<H lvl={2}>{t('stop.heading')}</H>
<Text variant="sm" centered wrap="balance">
<Text>{t('stop.heading')}</Text>
<Text
variant="note"
wrap={'pretty'}
centered
className={css({
textStyle: 'sm',
marginBottom: '2.5rem',
marginTop: '0.25rem',
})}
>
{t('stop.body')}
</Text>
<div className={css({ height: '2rem' })} />
<Button
isDisabled={isLoading}
onPress={() => handleTranscript()}
data-attr="stop-transcript"
size="sm"
variant="tertiary"
>
<RiStopCircleLine style={{ marginRight: '0.5rem' }} />{' '}
{t('stop.button')}
</Button>
</>
) : (
<>
<H lvl={2}>{t('start.heading')}</H>
<Text variant="sm" centered wrap="balance">
{t('start.body')}
<Text>{t('start.heading')}</Text>
<Text
variant="note"
wrap={'pretty'}
centered
className={css({
textStyle: 'sm',
maxWidth: '90%',
marginBottom: '2.5rem',
marginTop: '0.25rem',
})}
>
{t('start.body')} <br />{' '}
<A href={CRISP_HELP_ARTICLE} target="_blank">
{t('start.linkMore')}
</A>
</Text>
<div className={css({ height: '2rem' })} />
<Button
isDisabled={isLoading}
onPress={() => handleTranscript()}
data-attr="start-transcript"
size="sm"
variant="tertiary"
>
<RiRecordCircleLine style={{ marginRight: '0.5rem' }} />{' '}
{t('start.button')}
</Button>
</>
src/frontend/src/locales/de/rooms.json
+16 -3
View File
@@ -169,25 +169,38 @@
"effects": "",
"chat": "",
"tools": "",
"admin": ""
"admin": "",
"transcript": ""
},
"content": {
"participants": "",
"effects": "",
"chat": "",
"tools": "",
"admin": ""
"admin": "",
"transcript": ""
},
"closeButton": ""
},
"chat": {
"disclaimer": ""
},
"moreTools": {
"body": "",
"moreLink": "",
"tools": {
"transcript": {
"title": "",
"body": ""
}
}
},
"transcript": {
"start": {
"heading": "",
"body": "",
"button": ""
"button": "",
"linkMore": ""
},
"stop": {
"heading": "",
src/frontend/src/locales/en/rooms.json
+18 -5
View File
@@ -168,25 +168,38 @@
"effects": "Effects",
"chat": "Messages in the chat",
"tools": "More tools",
"admin": "Admin settings"
"admin": "Admin settings",
"transcript": "Transcription"
},
"content": {
"participants": "participants",
"effects": "effects",
"chat": "messages",
"tools": "more tools",
"admin": "Admin settings"
"admin": "Admin settings",
"transcript": "Transcription"
},
"closeButton": "Hide {{content}}"
},
"chat": {
"disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
},
"moreTools": {
"body": "Access more tools in Visio to enhance your meetings,",
"moreLink": "learn more",
"tools": {
"transcript": {
"title": "Transcription",
"body": "Transcribe your meeting for later"
}
}
},
"transcript": {
"start": {
"heading": "Start the Assistant!",
"body": "The assistant automatically starts recording your meeting audio (limited to 1 hour). At the end, you'll receive a clear and concise summary of the discussion directly via email.",
"button": "Start"
"heading": "Transcribe this call",
"body": "Automatically transcribe this call and receive the summary in Docs,",
"button": "Start transcription",
"linkMore": "Learn more"
},
"stop": {
"heading": "Recording in Progress...",
src/frontend/src/locales/fr/rooms.json
+19 -6
View File
@@ -168,30 +168,43 @@
"effects": "Effets",
"chat": "Messages dans l'appel",
"tools": "Plus d'outils",
"admin": "Commandes de l'organisateur"
"admin": "Commandes de l'organisateur",
"transcript": "Transcription"
},
"content": {
"participants": "les participants",
"effects": "les effets",
"chat": "les messages",
"tools": "plus d'outils",
"admin": "Commandes de l'organisateur"
"admin": "Commandes de l'organisateur",
"transcript": "Transcription"
},
"closeButton": "Masquer {{content}}"
},
"chat": {
"disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
},
"moreTools": {
"body": "Accèder à d'avantage d'outils dans Visio pour améliorer vos réunions,",
"moreLink": "en savoir plus",
"tools": {
"transcript": {
"title": "Transcription",
"body": "Transcrivez votre réunion pour plus tard"
}
}
},
"transcript": {
"start": {
"heading": "Démarrer l'assistant !",
"body": "L'assistant démarre automatiquement l'enregistrement sonore de votre réunion (limité à 1h). À la fin, vous recevrez un résumé clair et concis des échanges directement par e-mail.",
"button": "Démarrer"
"heading": "Transcrire cet appel",
"body": "Transcrivez cet appel automatiquement et recevez le compte rendu dans Docs.",
"button": "Démarrer la transcription",
"linkMore": "En savoir plus"
},
"stop": {
"heading": "Enregistrement en cours …",
"body": "L'enregistrement de votre réunion est en cours. Vous recevrez un compte-rendu par email une fois la réunion terminée.",
"button": "Arrêter l'enregistrement"
"button": "Arrêter la transcription"
}
},
"admin": {
src/frontend/src/locales/nl/rooms.json
+18 -5
View File
@@ -168,25 +168,38 @@
"effects": "Effecten",
"chat": "Berichten in de chat",
"tools": "Meer tools",
"admin": "Beheerdersbediening"
"admin": "Beheerdersbediening",
"transcript": "Transcriptie"
},
"content": {
"participants": "deelnemers",
"effects": "effecten",
"chat": "berichten",
"tools": "meer tools",
"admin": "Beheerdersbediening"
"admin": "Beheerdersbediening",
"transcript": "Transcriptie"
},
"closeButton": "Verberg {{content}}"
},
"chat": {
"disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek."
},
"moreTools": {
"body": "Toegang tot meer tools in Visio om je vergaderingen te verbeteren,",
"moreLink": "lees meer",
"tools": {
"transcript": {
"title": "Transcriptie",
"body": "Transcribeer je vergadering voor later"
}
}
},
"transcript": {
"start": {
"heading": "Start de assistent!",
"body": "De assistent begint automatisch de audio van uw vergadering op te nemen (beperkt tot 1 uur). Na afloop krijgt u direct een heldere en beknopte samenvatting van de discussies in uw e-mail.",
"button": "Start"
"heading": "Dit gesprek transcriberen",
"body": "Transcribeer dit gesprek automatisch en ontvang de samenvatting in Docs.",
"button": "Start transcriberen",
"linkMore": "Meer informatie"
},
"stop": {
"heading": "Opname loopt ...",