-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨(website) list lives on the website
List the lives on the website: - add link on the menu - integrate router - list lives
- Loading branch information
Showing
15 changed files
with
481 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/frontend/apps/standalone_site/src/assets/svg/iko_live.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
...d/apps/standalone_site/src/features/Contents/features/Live/components/LiveRouter.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
18 changes: 18 additions & 0 deletions
18
...ontend/apps/standalone_site/src/features/Contents/features/Live/components/LiveRouter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
63 changes: 63 additions & 0 deletions
63
...nd/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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`, | ||
); | ||
}); | ||
}); |
68 changes: 68 additions & 0 deletions
68
...rontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Oops, something went wrong.