Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-31 03:28:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ServerNotification rendered in Board

Browse source
This commit is contained in:
svetlagasheva 2021-06-25 15:58:50 +03:00
parent 320b276959
commit 255cd6be16
4 changed files with 79 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App/App.js
View file

@ -5,7 +5,7 @@ const React = require('react');
const { Router } = require('stremio-router');
const { Core, Shell, Chromecast, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
const { NotFound } = require('stremio/routes');
const { ToastProvider, ServerNotification, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
const { ToastProvider, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
const CoreEventsToaster = require('./CoreEventsToaster');
const routerViewsConfig = require('./routerViewsConfig');
const styles = require('./styles');
@ -98,7 +98,6 @@ const App = () => {
:
<div className={styles['app-loader']} />
}
<ServerNotification />
</ServicesProvider>
</React.StrictMode>
);

7
src/common/ServerNotification/styles.less
View file

@ -3,11 +3,8 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.notification-container {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
padding: 0.5rem 1rem;

109
src/routes/Board/Board.js
View file

@ -2,7 +2,7 @@
const React = require('react');
const classnames = require('classnames');
const { MainNavBars, MetaRow, LibItem, MetaItem } = require('stremio/common');
const { MainNavBars, MetaRow, LibItem, MetaItem, ServerNotification } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
@ -11,59 +11,62 @@ const Board = () => {
const board = useBoard();
const continueWatchingPreview = useContinueWatchingPreview();
return (
<MainNavBars className={styles['board-container']} route={'board'}>
<div className={styles['board-content']}>
{
continueWatchingPreview.libraryItems.length > 0 ?
<MetaRow
className={classnames(styles['board-row'], styles['continue-watching-row'])}
title={'Continue Watching'}
items={continueWatchingPreview.libraryItems}
itemComponent={LibItem}
deepLinks={continueWatchingPreview.deepLinks}
/>
:
null
}
{board.catalogs.map((catalog, index) => {
switch (catalog.content.type) {
case 'Ready': {
return (
<MetaRow
key={index}
className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`])}
title={catalog.title}
items={catalog.content.content}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
case 'Err': {
return (
<MetaRow
key={index}
className={styles['board-row']}
title={catalog.title}
message={catalog.content.content}
deepLinks={catalog.deepLinks}
/>
);
}
case 'Loading': {
return (
<MetaRow.Placeholder
key={index}
className={classnames(styles['board-row'], styles['board-row-poster'])}
title={catalog.title}
deepLinks={catalog.deepLinks}
/>
);
}
<div className={styles['board-content-container']}>
<MainNavBars className={styles['board-container']} route={'board'}>
<div className={styles['board-content']}>
{
continueWatchingPreview.libraryItems.length > 0 ?
<MetaRow
className={classnames(styles['board-row'], styles['continue-watching-row'])}
title={'Continue Watching'}
items={continueWatchingPreview.libraryItems}
itemComponent={LibItem}
deepLinks={continueWatchingPreview.deepLinks}
/>
:
null
}
})}
</div>
</MainNavBars>
{board.catalogs.map((catalog, index) => {
switch (catalog.content.type) {
case 'Ready': {
return (
<MetaRow
key={index}
className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`])}
title={catalog.title}
items={catalog.content.content}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
case 'Err': {
return (
<MetaRow
key={index}
className={styles['board-row']}
title={catalog.title}
message={catalog.content.content}
deepLinks={catalog.deepLinks}
/>
);
}
case 'Loading': {
return (
<MetaRow.Placeholder
key={index}
className={classnames(styles['board-row'], styles['board-row-poster'])}
title={catalog.title}
deepLinks={catalog.deepLinks}
/>
);
}
}
})}
</div>
</MainNavBars>
<ServerNotification />
</div>
);
};

33
src/routes/Board/styles.less
View file

@ -11,25 +11,32 @@
meta-item-placeholder: meta-item;
}
.board-container {
.board-content-container {
width: 100%;
height: 100%;
background-color: @color-background-dark2;
display: flex;
flex-direction: column;
.board-content {
width: 100%;
height: 100%;
overflow-y: auto;
.board-container {
flex: 1;
align-self: stretch;
background-color: @color-background-dark2;
.board-row {
margin: 4rem 2rem;
.board-content {
width: 100%;
height: 100%;
overflow-y: auto;
&:first-child {
margin-top: 2rem;
}
.board-row {
margin: 4rem 2rem;
&:last-child {
margin-bottom: 2rem;
&:first-child {
margin-top: 2rem;
}
&:last-child {
margin-bottom: 2rem;
}
}
}
}