🚸(frontend) add screen sharing troubleshooting modal and setup guide

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.

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 (
+    <Dialog
+      isOpen={isOpen}
+      role="alertdialog"
+      title={t('title')}
+      aria-label={t('ariaLabel')}
+      onClose={onClose}
+    >
+      {({ close }) => {
+        return (
+          <>
+            <P>
+              {t('message')}{' '}
+              {isMac && (
+                <>
+                  {t('macInstructions')}{' '}
+                  <A
+                    href="x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture"
+                    color="primary"
+                    aria-label={t('macSystemPreferences') + '-' + t('newTab')}
+                  >
+                    {t('macSystemPreferences')}
+                  </A>
+                  .{' '}
+                </>
+              )}
+              {t('helpLinkText')}{' '}
+              <A
+                href="https://lasuite.crisp.help/fr/article/visio-probleme-de-presentation-1xkf799/"
+                aria-label={t('helpLinkLabel') + '-' + t('newTab')}
+                target="_blank"
+                color="primary"
+              >
+                {t('helpLinkLabel')}
+              </A>
+              .
+            </P>
+            <Button
+              onPress={close}
+              size="sm"
+              variant="primary"
+              className={css({ marginLeft: 'auto', marginTop: '2rem' })}
+            >
+              {t('closeButton')}
+            </Button>
+          </>
+        )
+      }}
+    </Dialog>
+  )
+}

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 (
     <div
       className="lk-video-conference"
@@ -162,6 +165,10 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
           value={layoutContext}
           // onPinChange={handleFocusStateChange}
         >
+          <ScreenShareErrorModal
+            isOpen={isShareErrorVisible}
+            onClose={() => setIsShareErrorVisible(false)}
+          />
           <div
             // todo - extract these magic values into constant
             style={{
@@ -207,7 +214,18 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
             </LayoutWrapper>
             <MainNotificationToast />
           </div>
-          <ControlBar />
+          <ControlBar
+            onDeviceError={(e) => {
+              console.error(e)
+              if (
+                e.source == Track.Source.ScreenShare &&
+                e.error.toString() ==
+                  'NotAllowedError: Permission denied by system'
+              ) {
+                setIsShareErrorVisible(true)
+              }
+            }}
+          />
           <SidePanel />
         </LayoutContextProvider>
       )}

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": {

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": {

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": {

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": {