🐛(lib-video) intl not accessible from toast.custom

When we load a component from a toast.custom, we can't access the
intl object, the ancestor tree is lost. We need to pass it down
explicitly.

src/frontend/packages/lib_video/src/components/live/Teacher/Wrapper/OnStageRequestToast/index.spec.tsx

@@ -23,7 +23,12 @@ describe('<OnStageRequestToast />', () => {
       setPanelVisibility: mockSetPanelVisibility,
     });
 
-    render(<OnStageRequestToast participantsList={participants} />);
+    render(
+      <OnStageRequestToast
+        buttonLabel="Manage requests"
+        message={`${participants[1].name} and ${participants[0].name} want to go on stage.`}
+      />,
+    );
 
     screen.getByText(
       `${participants[1].name} and ${participants[0].name} want to go on stage.`,

src/frontend/packages/lib_video/src/components/live/Teacher/Wrapper/OnStageRequestToast/index.tsx

@@ -1,51 +1,41 @@
 import { colorsTokens } from '@lib-common/cunningham';
 import { Button } from '@openfun/cunningham-react';
-import { Box, Participant, Text } from 'lib-components';
+import { Box, Text } from 'lib-components';
 import React from 'react';
 import toast from 'react-hot-toast';
-import { defineMessages, useIntl } from 'react-intl';
 
 import {
   LivePanelItem,
   useLivePanelState,
 } from '@lib-video/hooks/useLivePanelState';
-import { onStageRequestMessage } from '@lib-video/utils/onStageRequestMessage';
-
-const messages = defineMessages({
-  manageRequestBtnLabel: {
-    defaultMessage: 'Manage requests',
-    description:
-      'Label of the button used for opening the manage on-stage request tab.',
-    id: 'component.DashboardLive.manageRequestBtnLabel',
-  },
-});
 
 interface OnStageRequestToastProps {
-  participantsList: Participant[];
+  buttonLabel: string;
+  message: string;
 }
 
 export const ON_STAGE_REQUEST_TOAST_ID = 'onStageRequestToastId';
 
 export const OnStageRequestToast = ({
-  participantsList,
+  buttonLabel,
+  message,
 }: OnStageRequestToastProps) => {
-  const intl = useIntl();
   const { setPanelVisibility } = useLivePanelState((state) => ({
     setPanelVisibility: state.setPanelVisibility,
   }));
 
   return (
     <Box background={colorsTokens['primary-100']} round="xsmall" pad="medium">
-      <Text type="p">{onStageRequestMessage(participantsList, intl)}</Text>
+      <Text type="p">{message}</Text>
       <Button
-        aria-label={intl.formatMessage(messages.manageRequestBtnLabel)}
+        aria-label={buttonLabel}
         onClick={() => {
           setPanelVisibility(true, LivePanelItem.VIEWERS_LIST);
           toast.remove(ON_STAGE_REQUEST_TOAST_ID);
         }}
         fullWidth
       >
-        {intl.formatMessage(messages.manageRequestBtnLabel)}
+        {buttonLabel}
       </Button>
     </Box>
   );

src/frontend/packages/lib_video/src/components/live/Teacher/Wrapper/index.tsx

@@ -7,6 +7,7 @@ import {
 } from 'lib-components';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-hot-toast';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { TeacherVideoInfoBar } from '@lib-video/components/common/TeacherVideoInfoBar';
 import { VideoLayout } from '@lib-video/components/common/VideoLayout';
@@ -19,6 +20,7 @@ import {
   useLivePanelState,
 } from '@lib-video/hooks/useLivePanelState';
 import { usePictureInPicture } from '@lib-video/hooks/usePictureInPicture';
+import { onStageRequestMessage } from '@lib-video/utils/onStageRequestMessage';
 import { converse } from '@lib-video/utils/window';
 
 import { DashboardControlPane } from '../../../common/DashboardControlPane';
@@ -31,7 +33,17 @@ import {
 } from './OnStageRequestToast';
 import { TeacherLiveTypeSwitch } from './TeacherLiveTypeSwitch';
 
+const messages = defineMessages({
+  manageRequestBtnLabel: {
+    defaultMessage: 'Manage requests',
+    description:
+      'Label of the button used for opening the manage on-stage request tab.',
+    id: 'component.DashboardLive.manageRequestBtnLabel',
+  },
+});
+
 export const TeacherLiveWrapper = () => {
+  const intl = useIntl();
   const live = useCurrentLive();
   const appData = useAppConfig();
   const [showPanelTrigger, setShowPanelTrigger] = useState(true);
@@ -139,7 +151,11 @@ export const TeacherLiveWrapper = () => {
     if (shouldDisplayToast) {
       toast.custom(
         <OnStageRequestToast
-          participantsList={live.participants_asking_to_join}
+          buttonLabel={intl.formatMessage(messages.manageRequestBtnLabel)}
+          message={onStageRequestMessage(
+            live.participants_asking_to_join,
+            intl,
+          )}
         />,
         {
           id: ON_STAGE_REQUEST_TOAST_ID,
@@ -153,6 +169,7 @@ export const TeacherLiveWrapper = () => {
     live.join_mode,
     isPanelVisible,
     currentItem,
+    intl,
   ]);
 
   return (