✨(website) list lives on the website

CHANGELOG.md

@@ -12,6 +12,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 - standalone website:
   - Integrate VOD dashboard (#2086)
+  - List the lives in the contents section (#2104)
 
 ### Changed
 

src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.spec.tsx

@@ -6,15 +6,18 @@ import Contents from './Contents';
 jest.mock('features/Contents', () => ({
   ClassRooms: () => <div>Classrooms Component</div>,
   Videos: () => <div>Videos Component</div>,
+  Lives: () => <div>Lives Component</div>,
 }));
 
 describe('<Contents />', () => {
   test('renders Contents', () => {
     render(<Contents />);
     expect(screen.getByText(/My Classrooms/)).toBeInTheDocument();
     expect(screen.getByText(/My Videos/)).toBeInTheDocument();
+    expect(screen.getByText(/My Lives/)).toBeInTheDocument();
     expect(screen.getByText(/Classrooms Component/i)).toBeInTheDocument();
+    expect(screen.getByText(/Lives Component/i)).toBeInTheDocument();
     expect(screen.getByText(/Videos Component/i)).toBeInTheDocument();
-    expect(screen.getAllByText(/See Everything/i)).toHaveLength(2);
+    expect(screen.getAllByText(/See Everything/i)).toHaveLength(3);
   });
 });

src/frontend/apps/standalone_site/src/features/Contents/components/Contents/Contents.tsx

@@ -3,10 +3,15 @@ import { StyledLink } from 'lib-components';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { ClassRooms, Videos } from 'features/Contents';
+import { ClassRooms, Videos, Lives } from 'features/Contents';
 import { routes } from 'routes';
 
 const messages = defineMessages({
+  MyLives: {
+    defaultMessage: 'My Lives',
+    description: 'My contents page, my lives title',
+    id: 'features.Contents.Contents.MyLives',
+  },
   MyVideos: {
     defaultMessage: 'My Videos',
     description: 'My contents page, my videos title',
@@ -33,6 +38,17 @@ const Contents = () => {
 
   return (
     <Box margin={{ top: 'medium' }}>
+      <Box margin={{ top: 'medium' }}>
+        <BoxText direction="row" justify="between" margin={{ bottom: 'small' }}>
+          <Text weight="bolder">{intl.formatMessage(messages.MyLives)}</Text>
+          <Text weight="bolder">
+            <StyledLink to={`${routes.CONTENTS.subRoutes.LIVE.path}`}>
+              › {intl.formatMessage(messages.SeeEverything)}
+            </StyledLink>
+          </Text>
+        </BoxText>
+        <Lives withPagination={false} limit={4} />
+      </Box>
       <Box margin={{ top: 'medium' }}>
         <BoxText direction="row" justify="between" margin={{ bottom: 'small' }}>
           <Text weight="bolder">{intl.formatMessage(messages.MyVideos)}</Text>

src/frontend/apps/standalone_site/src/features/Contents/components/ContentsRouter/ContentsRouter.tsx

@@ -1,6 +1,6 @@
 import { Route, Switch } from 'react-router-dom';
 
-import { ClassRoomRouter, VideoRouter } from 'features/Contents';
+import { ClassRoomRouter, VideoRouter, LiveRouter } from 'features/Contents';
 import { routes } from 'routes';
 
 import Contents from '../Contents/Contents';
@@ -17,6 +17,9 @@ const ContentsRouter = () => {
       <Route path={routes.CONTENTS.subRoutes.VIDEO.path}>
         <VideoRouter />
       </Route>
+      <Route path={routes.CONTENTS.subRoutes.LIVE.path}>
+        <LiveRouter />
+      </Route>
     </Switch>
   );
 };

src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx

@@ -32,8 +32,14 @@ const ClassRoom = ({ classroom }: { classroom: ClassroomLite }) => {
             justify="center"
             background="radial-gradient(ellipse at center, #8682bc 0%,#6460c3 100%);"
           >
-            <ClassroomsIcon width={80} height={80} color="white" />
-            <Text weight="bold" color="white" textAlign="center" size="small">
+            <ClassroomsIcon width={70} height={70} color="white" />
+            <Text
+              weight="bold"
+              color="white"
+              textAlign="center"
+              size="small"
+              margin={{ top: 'small' }}
+            >
               {classroom.welcome_text}
             </Text>
           </Box>

src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/LiveRouter.spec.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react';
+import { render } from 'lib-tests';
+
+import LiveRouter from './LiveRouter';
+
+jest.mock('./Read/Lives', () => ({
+  __esModule: true,
+  default: () => <div>My Lives Read</div>,
+}));
+
+describe('<LiveRouter/>', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('render route /my-contents/lives', () => {
+    render(<LiveRouter />, {
+      routerOptions: { history: ['/my-contents/lives'] },
+    });
+    expect(screen.getByText('My Lives Read')).toBeInTheDocument();
+  });
+
+  test('render live no match', () => {
+    render(<LiveRouter />, {
+      routerOptions: { history: ['/some/bad/route'] },
+    });
+    expect(screen.getByText('My Lives Read')).toBeInTheDocument();
+  });
+});

src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/LiveRouter.tsx

@@ -0,0 +1,18 @@
+import { Box } from 'grommet';
+import { Route, Switch } from 'react-router-dom';
+
+import Lives from './Read/Lives';
+
+const LiveRouter = () => {
+  return (
+    <Box pad="medium">
+      <Switch>
+        <Route>
+          <Lives />
+        </Route>
+      </Switch>
+    </Box>
+  );
+};
+
+export default LiveRouter;

src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.spec.tsx

@@ -0,0 +1,63 @@
+import { screen } from '@testing-library/react';
+import { thumbnailMockFactory, videoMockFactory } from 'lib-components';
+import { render } from 'lib-tests';
+
+import Live from './Live';
+
+describe('<Live />', () => {
+  test('renders Live', () => {
+    const live = videoMockFactory({
+      id: '4321',
+      title: 'New live title',
+      description: 'New live description',
+      playlist: {
+        ...videoMockFactory().playlist,
+        title: 'New playlist title',
+      },
+    });
+    render(<Live live={live} />);
+
+    expect(
+      screen.getByRole('img', {
+        name: 'thumbnail',
+      }),
+    ).toHaveStyle(
+      `background: url(https://example.com/default_thumbnail/240) no-repeat center / cover`,
+    );
+    expect(screen.getByText('New live title')).toBeInTheDocument();
+    expect(screen.getByText('New live description')).toBeInTheDocument();
+    expect(screen.getByText('New playlist title')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      '/my-contents/lives/4321',
+    );
+  });
+
+  test('renders thumbnail', () => {
+    const live = videoMockFactory({
+      id: '4321',
+      title: 'New live title',
+      description: 'New live description',
+      playlist: {
+        ...videoMockFactory().playlist,
+        title: 'New playlist title',
+      },
+      thumbnail: {
+        ...thumbnailMockFactory(),
+        urls: {
+          ...thumbnailMockFactory().urls,
+          240: 'https://example.com/240',
+        },
+      },
+    });
+    render(<Live live={live} />);
+
+    expect(
+      screen.getByRole('img', {
+        name: 'thumbnail',
+      }),
+    ).toHaveStyle(
+      `background: url(https://example.com/240) no-repeat center / cover`,
+    );
+  });
+});

src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx

@@ -0,0 +1,68 @@
+import { Text, Box } from 'grommet';
+import { StyledLink, Video } from 'lib-components';
+import { Fragment } from 'react';
+import styled from 'styled-components';
+
+import { ReactComponent as LiveIcon } from 'assets/svg/iko_live.svg';
+import { ReactComponent as VueListIcon } from 'assets/svg/iko_vuelistesvg.svg';
+import { ContentCard } from 'features/Contents/';
+import { routes } from 'routes';
+
+const TextTruncated = styled(Text)`
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
+const Live = ({ live }: { live: Video }) => {
+  const livePath = routes.CONTENTS.subRoutes.LIVE.path;
+  const thumbnail = live.thumbnail?.urls?.[240] || live.urls?.thumbnails?.[240];
+
+  return (
+    <StyledLink to={`${livePath}/${live.id}`}>
+      <ContentCard
+        header={
+          <Box
+            aria-label="thumbnail"
+            role="img"
+            width="100%"
+            height="150px"
+            align="center"
+            justify="center"
+            background={`
+              ${
+                thumbnail
+                  ? `url(${thumbnail}) no-repeat center / cover`
+                  : `radial-gradient(ellipse at center, #96b6db 0%,#4c46ab 100%)`
+              }
+            `}
+          >
+            <LiveIcon width={80} height={80} color="white" />
+          </Box>
+        }
+        footer={
+          <Fragment>
+            <Box gap="small" align="center" direction="row">
+              <Box>
+                <VueListIcon width={20} height={20} color="blue-active" />
+              </Box>
+              <Text size="0.688rem" weight="bold">
+                {live.playlist.title}
+              </Text>
+            </Box>
+          </Fragment>
+        }
+        title={live.title || ''}
+      >
+        {live.description && (
+          <TextTruncated size="0.688rem" color="grey" title={live.description}>
+            {live.description}
+          </TextTruncated>
+        )}
+      </ContentCard>
+    </StyledLink>
+  );
+};
+
+export default Live;