🐛(front) redirect instructor to the dashboard when live is stopped

When a live is stopped, an instructor show the page saying the video is
not found. We should redirect him to the dashboard when the live is
stopped or stopping and he has update permission.

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Fixed
+
+- Redirect instructor to the dashboard when live is stopped
+
 ## [3.20.0] - 2021-06-18
 
 ### Added

src/frontend/components/ErrorComponents/index.tsx

@@ -15,7 +15,8 @@ export interface ErrorComponentsProps {
     | 'upload'
     | 'liveIncompatible'
     | 'liveInit'
-    | 'liveToVod';
+    | 'liveToVod'
+    | 'liveStopped';
 }
 
 const FullScreenErrorStyled = styled(LayoutMainArea)`
@@ -141,6 +142,21 @@ const messages = {
       id: 'components.ErrorComponents.liveToVod.text',
     },
   },
+  liveStopped: {
+    text: {
+      defaultMessage:
+        'This live has now ended. If the host decides to publish the recording, the video will be available here in a while.',
+      description:
+        'Text explaining that a live has ended and that the VOD may be available soon.',
+      id: 'components.ErrorComponents.liveStopped.text',
+    },
+    title: {
+      defaultMessage: 'This live has ended',
+      description:
+        'Title for a user without update permission when a live is stopped or stopping',
+      id: 'components.ErrorComponents.liveStopped.title',
+    },
+  },
 };
 
 export const ErrorMessage: React.FC<ErrorComponentsProps> = ({ code }) => (

src/frontend/components/PublicVideoDashboard/index.spec.tsx

@@ -3,10 +3,10 @@ import fetchMock from 'fetch-mock';
 import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import { ImportMock } from 'ts-mock-imports';
 
+import { DASHBOARD_ROUTE } from '../Dashboard/route';
 import { FULL_SCREEN_ERROR_ROUTE } from '../ErrorComponents/route';
 import * as useTimedTextTrackModule from '../../data/stores/useTimedTextTrack';
 import { liveState, timedTextMode } from '../../types/tracks';
-import { converseMounter } from '../../utils/converse';
 import {
   timedTextMockFactory,
   videoMockFactory,
@@ -30,11 +30,17 @@ const mockCreatePlayer = createPlayer as jest.MockedFunction<
   typeof createPlayer
 >;
 
+let mockCanUpdate: boolean;
 const mockVideo = videoMockFactory();
 jest.mock('../../data/appData', () => ({
   appData: {
     video: mockVideo,
   },
+  getDecodedJwt: () => ({
+    permissions: {
+      can_update: mockCanUpdate,
+    },
+  }),
 }));
 
 const useTimedTextTrackStub = ImportMock.mockFunction(
@@ -67,6 +73,7 @@ describe('PublicVideoDashboard', () => {
     mockCreatePlayer.mockResolvedValue({
       destroy: jest.fn(),
     });
+    mockCanUpdate = false;
   });
 
   afterEach(() => {
@@ -287,7 +294,7 @@ describe('PublicVideoDashboard', () => {
     expect(container.querySelector('#converse-container')).toBeInTheDocument();
   });
 
-  it('redirects to the error component when live state is stopped or stopping', () => {
+  it('redirects to the error component when user has no update permission and live state is stopped or stopping', () => {
     [liveState.STOPPED, liveState.STOPPING].forEach((state) => {
       const video = videoMockFactory({
         live_state: state,
@@ -297,6 +304,46 @@ describe('PublicVideoDashboard', () => {
           wrapInRouter(
             <PublicVideoDashboard video={video} playerType="videojs" />,
             [
+              {
+                path: DASHBOARD_ROUTE(),
+                render: ({ match }) => (
+                  <span>{`dashboard ${match.params.objectType}`}</span>
+                ),
+              },
+              {
+                path: FULL_SCREEN_ERROR_ROUTE(),
+                render: ({ match }) => (
+                  <span>{`Error Component: ${match.params.code}`}</span>
+                ),
+              },
+            ],
+          ),
+        ),
+      );
+
+      screen.getByText('Error Component: liveStopped');
+
+      cleanup();
+    });
+  });
+
+  it('redirects to the dashboard when user has update permission and live state is stopped or stopping', () => {
+    mockCanUpdate = true;
+    [liveState.STOPPED, liveState.STOPPING].forEach((state) => {
+      const video = videoMockFactory({
+        live_state: state,
+      });
+      render(
+        wrapInIntlProvider(
+          wrapInRouter(
+            <PublicVideoDashboard video={video} playerType="videojs" />,
+            [
+              {
+                path: DASHBOARD_ROUTE(),
+                render: ({ match }) => (
+                  <span>{`dashboard ${match.params.objectType}`}</span>
+                ),
+              },
               {
                 path: FULL_SCREEN_ERROR_ROUTE(),
                 render: ({ match }) => (
@@ -308,7 +355,7 @@ describe('PublicVideoDashboard', () => {
         ),
       );
 
-      screen.getByText('Error Component: notFound');
+      screen.getByText('dashboard videos');
 
       cleanup();
     });

src/frontend/components/PublicVideoDashboard/index.tsx

@@ -3,13 +3,16 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { Chat } from '../Chat';
+import { DASHBOARD_ROUTE } from '../Dashboard/route';
 import { DownloadVideo } from '../DownloadVideo';
 import { FULL_SCREEN_ERROR_ROUTE } from '../ErrorComponents/route';
 import { Transcripts } from '../Transcripts';
 import VideoPlayer from '../VideoPlayer';
 import { WaitingLiveVideo } from '../WaitingLiveVideo';
+import { getDecodedJwt } from '../../data/appData';
 import { useTimedTextTrack } from '../../data/stores/useTimedTextTrack';
 import { useVideo } from '../../data/stores/useVideo';
+import { modelName } from '../../types/models';
 import {
   liveState,
   timedTextMode,
@@ -52,8 +55,13 @@ const PublicVideoDashboard = ({
         );
       case liveState.STOPPED:
       case liveState.STOPPING:
-        // nothing to show
-        return <Redirect push to={FULL_SCREEN_ERROR_ROUTE('notFound')} />;
+        // user has update permission, we redirect him to the dashboard
+        if (getDecodedJwt().permissions.can_update) {
+          return <Redirect push to={DASHBOARD_ROUTE(modelName.VIDEOS)} />;
+        }
+
+        // otherwise the user can only see a message
+        return <Redirect push to={FULL_SCREEN_ERROR_ROUTE('liveStopped')} />;
       default:
         // waiting message
         return <WaitingLiveVideo video={video} />;