diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a0f8745d7..cc0a817a28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ right (and close / open it)
### Changed
- rename LiveRegistration model in LiveSession
+- Move on-stage request functional (in Instructor view) from under
+the video to the ViewersList in the right panel
### Fixed
diff --git a/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx
deleted file mode 100644
index 612516a956..0000000000
--- a/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { render, screen, within } from '@testing-library/react';
-import React from 'react';
-
-import { videoMockFactory } from 'utils/tests/factories';
-import { wrapInIntlProvider } from 'utils/tests/intl';
-import { DashboardJoinDiscussion } from '.';
-
-jest.mock('utils/window', () => ({
- converse: {
- acceptParticipantToJoin: jest.fn(),
- kickParticipant: jest.fn(),
- rejectParticipantToJoin: jest.fn(),
- },
-}));
-
-describe('', () => {
- it('renders the components and updates the participant list', () => {
- const participant1 = {
- id: 'participant1',
- name: 'John Doe',
- };
- const participant2 = {
- id: 'participant2',
- name: 'Jane Doe',
- };
-
- const video = videoMockFactory();
-
- // participant 1 is in the waiting list
- const { rerender } = render(
- wrapInIntlProvider(
- ,
- ),
- );
-
- const askParticipant1 = screen.getByTestId('ask-participant1');
- within(askParticipant1).getByText('John Doe');
- within(askParticipant1).getByRole('button', { name: 'accept' });
- within(askParticipant1).getByRole('button', {
- name: 'reject',
- });
-
- // reject the request
- rerender(
- wrapInIntlProvider(
- ,
- ),
- );
-
- // nobody is in the waiting list
- expect(screen.queryByTestId('ask-participant1')).not.toBeInTheDocument();
- expect(screen.queryByTestId('ask-participant2')).not.toBeInTheDocument();
-
- // add participant 2 to the waiting list
- rerender(
- wrapInIntlProvider(
- ,
- ),
- );
-
- const askParticipant2 = screen.getByTestId('ask-participant2');
- within(askParticipant2).getByText('Jane Doe');
- within(askParticipant2).getByRole('button', {
- name: 'accept',
- });
- within(askParticipant1).getByRole('button', { name: 'reject' });
-
- // nobody is in the discussion
- expect(screen.queryByTestId('in-participant1')).not.toBeInTheDocument();
- expect(screen.queryByTestId('in-participant2')).not.toBeInTheDocument();
-
- // accept the participant 2
- rerender(
- wrapInIntlProvider(
- ,
- ),
- );
-
- // participant 2 is in the discussion
- const inParticipant2 = screen.getByTestId('in-participant2');
-
- within(inParticipant2).getByRole('button', {
- name: 'kick out participant',
- });
-
- // remove participant 2 from discussion
- rerender(
- wrapInIntlProvider(
- ,
- ),
- );
-
- // nobody in the waiting list nor in the discussion
- expect(screen.queryByTestId('ask-participant1')).not.toBeInTheDocument();
- expect(screen.queryByTestId('ask-participant2')).not.toBeInTheDocument();
- expect(screen.queryByTestId('in-participant1')).not.toBeInTheDocument();
- expect(screen.queryByTestId('in-participant2')).not.toBeInTheDocument();
- });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussion/index.tsx b/src/frontend/components/DashboardJoinDiscussion/index.tsx
deleted file mode 100644
index 506ebad684..0000000000
--- a/src/frontend/components/DashboardJoinDiscussion/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Box, Text } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { DashboardJoinDiscussionAcceptButton } from 'components/DashboardJoinDiscussionAcceptButton';
-import { DashboardJoinDiscussionRejectButton } from 'components/DashboardJoinDiscussionRejectButton';
-import { DashboardJoinDiscussionKickButton } from 'components/DashboardJoinDiscussionKickButton';
-import { Video } from 'types/tracks';
-
-const messages = defineMessages({
- participantAsking: {
- defaultMessage: 'is asking to join the discussion.',
- description:
- 'Message to inform the instructor that a participant is asking to join the discussion',
- id: 'components.DashboardJoinDiscussion.participantAsking',
- },
- participantInDiscussion: {
- defaultMessage: 'has joined the discussion.',
- description:
- 'Message to inform the instructor that a participant has joined the discussion',
- id: 'components.DashboardJoinDiscussion.participantInDiscussion',
- },
-});
-
-interface DashboardJoinDiscussionProps {
- video: Video;
-}
-
-export const DashboardJoinDiscussion = ({
- video,
-}: DashboardJoinDiscussionProps) => (
-
- {video.participants_asking_to_join?.map((participant) => (
-
-
- {participant.name}{' '}
-
-
-
-
-
- ))}
- {video.participants_in_discussion?.map((participant) => (
-
-
- {participant.name}{' '}
-
-
-
-
- ))}
-
-);
diff --git a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx
deleted file mode 100644
index 9eadaab395..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { videoMockFactory } from '../../utils/tests/factories';
-import { wrapInIntlProvider } from '../../utils/tests/intl';
-import * as mockWindow from '../../utils/window';
-import { DashboardJoinDiscussionAcceptButton } from '.';
-
-jest.mock('../../utils/window', () => ({
- converse: {
- acceptParticipantToJoin: jest.fn(),
- },
-}));
-
-describe('', () => {
- afterEach(() => {
- jest.resetAllMocks();
- });
- it('renders the accept button and click on it', () => {
- const participant = {
- id: 'participant1',
- name: 'John Doe',
- };
-
- const video = videoMockFactory();
-
- render(
- wrapInIntlProvider(
- ,
- ),
- );
-
- const acceptButton = screen.getByRole('button', { name: 'accept' });
-
- fireEvent.click(acceptButton);
-
- expect(mockWindow.converse.acceptParticipantToJoin).toHaveBeenCalledWith(
- participant,
- video,
- );
- });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx
deleted file mode 100644
index e6eaa484d6..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Button } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { Participant } from '../../types/Participant';
-import { Video } from '../../types/tracks';
-import { converse } from '../../utils/window';
-
-const messages = defineMessages({
- acceptParticipant: {
- defaultMessage: 'accept',
- description: 'Accept the participant in the discussion',
- id: 'components.DashboardJoinDiscussionAcceptButton.acceptParticipant',
- },
-});
-
-interface DashboardJoinDiscussionAcceptButtonProps {
- participant: Participant;
- video: Video;
-}
-
-export const DashboardJoinDiscussionAcceptButton = ({
- participant,
- video,
-}: DashboardJoinDiscussionAcceptButtonProps) => {
- const onClick = () => {
- converse.acceptParticipantToJoin(participant, video);
- };
-
- return (
- }
- primary={true}
- onClick={onClick}
- margin="small"
- size="small"
- />
- );
-};
diff --git a/src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx
deleted file mode 100644
index 13d8272c63..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { wrapInIntlProvider } from '../../utils/tests/intl';
-import * as mockWindow from '../../utils/window';
-import { DashboardJoinDiscussionKickButton } from '.';
-
-jest.mock('../../utils/window', () => ({
- converse: {
- kickParticipant: jest.fn(),
- },
-}));
-
-describe('', () => {
- afterEach(() => {
- jest.resetAllMocks();
- });
- it('renders the button and click on it', () => {
- const participant = {
- id: 'participant1',
- name: 'John Doe',
- };
-
- render(
- wrapInIntlProvider(
- ,
- ),
- );
-
- const kickButton = screen.getByRole('button', {
- name: 'kick out participant',
- });
-
- fireEvent.click(kickButton);
-
- expect(mockWindow.converse.kickParticipant).toHaveBeenCalledWith(
- participant,
- );
- });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx
deleted file mode 100644
index b96238cfe6..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Button } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { Participant } from '../../types/Participant';
-import { converse } from '../../utils/window';
-
-const messages = defineMessages({
- kickParticipant: {
- defaultMessage: 'kick out participant',
- description: 'Kick the participant out of the discussion',
- id: 'components.DashboardJoinDiscussionKickButton.kickParticipant',
- },
-});
-
-interface DashboardJoinDiscussionKickButtonProps {
- participant: Participant;
-}
-
-export const DashboardJoinDiscussionKickButton = ({
- participant,
-}: DashboardJoinDiscussionKickButtonProps) => {
- const onClick = () => {
- converse.kickParticipant(participant);
- };
-
- return (
- }
- primary={true}
- onClick={onClick}
- margin="small"
- size="small"
- />
- );
-};
diff --git a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx
deleted file mode 100644
index 93e1b7162d..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { wrapInIntlProvider } from '../../utils/tests/intl';
-import * as mockWindow from '../../utils/window';
-import { DashboardJoinDiscussionRejectButton } from '.';
-
-jest.mock('../../utils/window', () => ({
- converse: {
- rejectParticipantToJoin: jest.fn(),
- },
-}));
-
-describe('', () => {
- afterEach(() => {
- jest.resetAllMocks();
- });
- it('renders the button and click on it', () => {
- const participant = {
- id: 'participant1',
- name: 'John Doe',
- };
-
- render(
- wrapInIntlProvider(
- ,
- ),
- );
-
- const rejectButton = screen.getByRole('button', { name: 'reject' });
-
- fireEvent.click(rejectButton);
- expect(mockWindow.converse.rejectParticipantToJoin).toHaveBeenCalledWith(
- participant,
- );
- });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx
deleted file mode 100644
index bc26435c41..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Button } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { Participant } from '../../types/Participant';
-import { converse } from '../../utils/window';
-
-const messages = defineMessages({
- rejectParticipant: {
- defaultMessage: 'reject',
- description: 'Reject the participant who requests to join the discussion',
- id: 'components.DashboardJoinDiscussionRejectButton.rejectParticipant',
- },
-});
-
-interface DashboardJoinDiscussionRejectButtonProps {
- participant: Participant;
-}
-
-export const DashboardJoinDiscussionRejectButton = ({
- participant,
-}: DashboardJoinDiscussionRejectButtonProps) => {
- const onClick = () => {
- converse.rejectParticipantToJoin(participant);
- };
-
- return (
- }
- onClick={onClick}
- margin="small"
- size="small"
- />
- );
-};
diff --git a/src/frontend/components/DashboardVideoLive/index.tsx b/src/frontend/components/DashboardVideoLive/index.tsx
index 7695cc89f0..017fac032e 100644
--- a/src/frontend/components/DashboardVideoLive/index.tsx
+++ b/src/frontend/components/DashboardVideoLive/index.tsx
@@ -3,7 +3,6 @@ import React, { Fragment, useEffect, useState } from 'react';
import { ConverseInitializer } from 'components/ConverseInitializer';
import { DashboardVideoLivePairing } from 'components/DashboardVideoLivePairing';
-import { DashboardVideoLiveRunning } from 'components/DashboardVideoLiveRunning';
import { LiveVideoLayout } from 'components/LiveVideoLayout';
import { LiveVideoPanel } from 'components/LiveVideoPanel';
import { ScheduledVideoForm } from 'components/ScheduledVideoForm';
@@ -98,9 +97,6 @@ export const DashboardVideoLive = ({ video }: DashboardVideoLiveProps) => {
[liveState.IDLE, liveState.PAUSED].includes(
video.live_state,
) && }
- {video.live_state === liveState.RUNNING && (
-
- )}
{video.live_state !== liveState.STOPPED && (
diff --git a/src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx b/src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx
deleted file mode 100644
index 88687e4819..0000000000
--- a/src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { LiveModeType } from 'types/tracks';
-import { videoMockFactory } from 'utils/tests/factories';
-import { wrapInIntlProvider } from 'utils/tests/intl';
-
-import { DashboardVideoLiveRunning } from '.';
-
-jest.mock('data/appData', () => ({
- appData: { jwt: 'cool_token_m8' },
-}));
-
-describe('', () => {
- it('renders participants in the discussion', () => {
- const video = videoMockFactory({
- live_type: LiveModeType.JITSI,
- participants_in_discussion: [{ id: 'an_other_id', name: 'his name' }],
- });
-
- render(wrapInIntlProvider());
-
- screen.getByText('his name');
- screen.getByText('has joined the discussion.');
- screen.getByRole('button', { name: 'kick out participant' });
- });
-
- it('renders participants asking to join', () => {
- const video = videoMockFactory({
- live_type: LiveModeType.JITSI,
- participants_asking_to_join: [{ id: 'some_id', name: 'my name' }],
- });
-
- render(wrapInIntlProvider());
-
- screen.getByText('my name');
- screen.getByText('is asking to join the discussion.');
- screen.getByRole('button', { name: 'accept' });
- screen.getByRole('button', { name: 'reject' });
- });
-});
diff --git a/src/frontend/components/DashboardVideoLiveRunning/index.tsx b/src/frontend/components/DashboardVideoLiveRunning/index.tsx
deleted file mode 100644
index 17d4096c6e..0000000000
--- a/src/frontend/components/DashboardVideoLiveRunning/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Box } from 'grommet';
-import React from 'react';
-
-import { DashboardJoinDiscussion } from 'components/DashboardJoinDiscussion';
-import { LiveModeType, Video } from 'types/tracks';
-
-interface DashboardVideoLiveRunningProps {
- video: Video;
-}
-
-export const DashboardVideoLiveRunning = ({
- video,
-}: DashboardVideoLiveRunningProps) => {
- return (
-
- {video.live_type === LiveModeType.JITSI && (
-
- )}
-
- );
-};
diff --git a/src/frontend/components/ViewersList/index.tsx b/src/frontend/components/ViewersList/index.tsx
index 95918e64e2..5b087a1656 100644
--- a/src/frontend/components/ViewersList/index.tsx
+++ b/src/frontend/components/ViewersList/index.tsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { InstructorViewersList } from 'components/ViewersList/InstructorViewersList';
import { StudentViewersList } from 'components/ViewersList/StudentViewersList';
import { Video } from 'types/tracks';
@@ -10,8 +11,7 @@ interface ViewersList {
export const ViewersList = ({ isInstructor, video }: ViewersList) => {
return isInstructor ? (
- // Another component will come to adress the cas when isInstructor is true
-
+
) : (
);