From f7c2beb30d38963d59bc4692d7980cae6efb5080 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Mon, 17 Mar 2025 15:59:39 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20add=20screen=20sharing?= =?UTF-8?q?=20troubleshooting=20modal=20and=20setup=20guide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Created modal that appears when users fail to share their entire screen. Also added documentation helper that explains proper screen sharing setup steps for different operating systems and browsers. --- .../components/ScreenShareErrorModal.tsx | 66 +++++++++++++++++++ .../rooms/livekit/prefabs/VideoConference.tsx | 22 ++++++- src/frontend/src/locales/de/rooms.json | 11 ++++ src/frontend/src/locales/en/rooms.json | 11 ++++ src/frontend/src/locales/fr/rooms.json | 11 ++++ src/frontend/src/locales/nl/rooms.json | 11 ++++ 6 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 src/frontend/src/features/rooms/livekit/components/ScreenShareErrorModal.tsx diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareErrorModal.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareErrorModal.tsx new file mode 100644 index 00000000..a9d5e890 --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/ScreenShareErrorModal.tsx @@ -0,0 +1,66 @@ +import { A, Button, Dialog, P } from '@/primitives' +import { useTranslation } from 'react-i18next' +import { css } from '@/styled-system/css' + +// todo - refactor it into a generic system +export const ScreenShareErrorModal = ({ + isOpen, + onClose, +}: { + isOpen: boolean + onClose: () => void +}) => { + const { t } = useTranslation('rooms', { keyPrefix: 'error.screenShare' }) + const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1 + + return ( + + {({ close }) => { + return ( + <> +

+ {t('message')}{' '} + {isMac && ( + <> + {t('macInstructions')}{' '} + + {t('macSystemPreferences')} + + .{' '} + + )} + {t('helpLinkText')}{' '} + + {t('helpLinkLabel')} + + . +

+ + + ) + }} + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx index 9dfeb924..e1e0d853 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx @@ -7,7 +7,7 @@ import { } from '@livekit/components-core' import { RoomEvent, Track } from 'livekit-client' import * as React from 'react' - +import { useState } from 'react' import { CarouselLayout, ConnectionStateToast, @@ -29,6 +29,7 @@ import { ParticipantTile } from '../components/ParticipantTile' import { SidePanel } from '../components/SidePanel' import { useSidePanel } from '../hooks/useSidePanel' import { RecordingStateToast } from '../components/RecordingStateToast' +import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal' const LayoutWrapper = styled( 'div', @@ -149,6 +150,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) { const { isSidePanelOpen } = useSidePanel() + const [isShareErrorVisible, setIsShareErrorVisible] = useState(false) + return (
+ setIsShareErrorVisible(false)} + />
- + { + console.error(e) + if ( + e.source == Track.Source.ScreenShare && + e.error.toString() == + 'NotAllowedError: Permission denied by system' + ) { + setIsShareErrorVisible(true) + } + }} + /> )} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index beee600f..6da035a0 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -60,6 +60,17 @@ "createRoom": { "heading": "", "body": "" + }, + "screenShare": { + "title": "", + "ariaLabel": "", + "message": "", + "macInstructions": "", + "macSystemPreferences": "", + "helpLinkText": "", + "helpLinkLabel": "", + "closeButton": "", + "newTab": "" } }, "controls": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 767a489a..fa64d9f3 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -61,6 +61,17 @@ "createRoom": { "heading": "Authentication Required", "body": "This room has not been created yet. Please authenticate to create it or wait for an authenticated user to do so." + }, + "screenShare": { + "title": "Unable to share your screen", + "ariaLabel": "Unable to share your screen", + "message": "Your browser may not be allowed to record the screen on your computer.", + "macInstructions": "Go to your", + "macSystemPreferences": "System Preferences", + "helpLinkText": "To learn more, see", + "helpLinkLabel": "Presentation issue", + "closeButton": "Dismiss", + "newTab": "New window" } }, "controls": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index bd4ded8e..1a46a422 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -61,6 +61,17 @@ "createRoom": { "heading": "Authentification requise", "body": "Cette réunion n'a pas encore été créée. Veuillez vous authentifier pour la créer ou attendre qu'un utilisateur authentifié le fasse." + }, + "screenShare": { + "title": "Impossible de partager votre écran", + "ariaLabel": "Impossible de partager votre écran", + "message": "Il se peut que votre navigateur ne soit pas autorisé à enregistrer l'écran sur votre ordinateur.", + "macInstructions": "Accèdez à vos", + "macSystemPreferences": "Préférences système", + "helpLinkText": "Pour en savoir plus, consulter", + "helpLinkLabel": "Problème de présentation", + "closeButton": "Ignorer", + "newTab": "Nouvelle fenêtre" } }, "controls": { diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 94f3a3fd..ae956fb9 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -49,6 +49,17 @@ "createRoom": { "heading": "Verificatie vereist", "body": "Deze ruimte is nog niet gemaakt. Logt u alstublieft in om hem aan te maken, of wacht tot een ingelogde gebruiker dat doet." + }, + "screenShare": { + "title": "Kan uw scherm niet delen", + "ariaLabel": "Kan uw scherm niet delen", + "message": "Het is mogelijk dat uw browser geen toestemming heeft om het scherm op uw computer op te nemen.", + "macInstructions": "Ga naar uw", + "macSystemPreferences": "Systeemvoorkeuren", + "helpLinkText": "Meer informatie, zie", + "helpLinkLabel": "Presentatieprobleem", + "closeButton": "Negeren", + "newTab": "Nieuw venster" } }, "controls": {