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

refactor: created a separate component

Browse source
This commit is contained in:
kKaskak 2023-12-14 15:06:06 +01:00
parent cd8be46584
commit 9594efbb0e
5 changed files with 151 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/common/SeasonalNotification/SeasonalNotification.js Normal file
View file

@ -0,0 +1,52 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const styles = require('./styles');
const { Button, ModalDialog } = require('../../common');
const useBinaryState = require('stremio/common/useBinaryState');
const useFetchNotificationData = require('./useFetchNotificationData');
const SeasonalNotification = () => {
const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
return (
notificationModalData !== null && !isModalDataLoading && isNotificationModalOpen ?
<ModalDialog className={styles['notification-modal']} onCloseRequest={closeNotificationModal}>
{
notificationModalData.imageUrl ?
<img className={styles['notification-image']} src={notificationModalData.imageUrl} />
:
null
}
<div className={styles['info-container']}>
<div className={styles['title-container']}>
{
notificationModalData.title ?
<div className={styles['title']}>{notificationModalData.title}</div>
:
null
}
{
notificationModalData.message ?
<div className={styles['notification-label']}>{notificationModalData.message}</div>
:
null
}
</div>
{
notificationModalData.addon.manifestUrl ?
<Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
<div className={styles['button-label']}>Learn more</div>
</Button>
:
null
}
</div>
</ModalDialog>
:
null
);
};
module.exports = SeasonalNotification;

96
src/common/SeasonalNotification/styles.less Normal file
View file

@ -0,0 +1,96 @@
// Copyright (C) 2017-2023 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/ModalDialog/styles.less') {
modal-dialog-content: modal-dialog-content;
modal-dialog-container: modal-dialog-container;
}
.notification-modal {
.modal-dialog-container {
overflow: visible;
max-width: 45rem;
.modal-dialog-content {
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
.notification-image {
width: 100%;
height: 100%;
margin-top: -10rem;
}
.info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 4rem;
margin-top: -7rem;
.title-container {
.title {
color: var(--primary-foreground-color);
font-size: 1.325rem;
text-align: center;
margin-bottom: 2rem;
padding: 0 6rem;
}
.notification-label {
color: var(--primary-foreground-color);
font-size: 1rem;
text-align: center;
opacity: 0.5;
margin-bottom: 3rem;
}
}
.action-button {
background-color: var(--primary-foreground-color);
border: 2px solid var(--primary-foreground-color);
padding: 0.8rem 1.5rem;
border-radius: 2rem;
.button-label {
color: var(--primary-accent-color);
font-size: 1rem;
}
&:hover {
background-color: transparent;
}
}
}
}
}
@media only screen and (max-width: @minimum) {
.modal-dialog-container {
.modal-dialog-content {
.notification-image {
height: 125%;
width: 125%;
}
.info-container {
.title-container {
.title {
padding: 0rem;
font-size: 1rem;
}
.notification-label {
font-size: 0.875rem;
}
}
}
}
}
}
}

0
src/routes/Board/useFetchNotificationData.js → src/common/SeasonalNotification/useFetchNotificationData.js
View file

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

@ -4,11 +4,11 @@ const React = require('react');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, ModalDialog, Button, useBinaryState } = require('stremio/common');
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
const useFetchNotificationData = require('./useFetchNotificationData');
const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
const THRESHOLD = 5;
@ -19,8 +19,6 @@ const Board = () => {
const [board, loadBoardRows] = useBoard();
const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
const scrollContainerRef = React.useRef();
const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
const onVisibleRangeChange = React.useCallback(() => {
const range = getVisibleChildrenRange(scrollContainerRef.current);
if (range === null) {
@ -41,43 +39,7 @@ const Board = () => {
}, [board.catalogs, onVisibleRangeChange]);
return (
<div className={styles['board-container']}>
{
isNotificationModalOpen && notificationModalData && !isModalDataLoading ?
<ModalDialog className={styles['notification-modal']} title={'Notification Modal'} onCloseRequest={closeNotificationModal}>
{
notificationModalData.imageUrl ?
<img className={styles['notification-image']} style={{ width: '95%', height: '95%' }} src={notificationModalData.imageUrl} />
:
null
}
<div className={styles['info-container']}>
<div className={styles['title-container']}>
{
notificationModalData.title ?
<div className={styles['title']}>{notificationModalData.title}</div>
:
null
}
{
notificationModalData.message ?
<div className={styles['notification-label']}>{notificationModalData.message}</div>
:
null
}
</div>
{
notificationModalData.addon.manifestUrl ?
<Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
<div className={styles['label']}>Learn more</div>
</Button>
:
null
}
</div>
</ModalDialog>
:
null
}
<SeasonalNotification />
<MainNavBars className={styles['board-content-container']} route={'board'}>
<div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
{

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

@ -17,58 +17,6 @@
display: flex;
flex-direction: column;
.notification-modal {
.notification-image {
width: 95%;
height: 95%;
margin: -10rem auto 0;
}
.info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 4rem;
margin-top: -7rem;
.title-container {
.title {
color: var(--primary-foreground-color);
font-size: 1.325rem;
text-align: center;
margin-bottom: 2rem;
padding: 0 4rem;
}
.label {
color: var(--primary-foreground-color);
font-size: 1rem;
text-align: center;
opacity: 0.5;
margin-bottom: 3rem;
}
}
.action-button {
background-color: var(--secondary-accent-color);
border: 2px solid var(--secondary-accent-color);
padding: 0.8rem 1.5rem;
border-radius: 2rem;
.label {
color: var(--primary-foreground-color);
font-size: 1rem;
}
&:hover {
background-color: transparent;
}
}
}
}
.board-content-container {
flex: 1;
align-self: stretch;