mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-08 20:17:31 +00:00
feature: useFetchNotficationData hook + new approach
This commit is contained in:
kKaskak
parent
156a129cc4
commit
179ed3948f
5 changed files with 129 additions and 136 deletions
|
|
@ -1,34 +0,0 @@
|
|||
// Copyright (C) 2017-2023 Smart code 203358507
|
||||
|
||||
const React = require('react');
|
||||
const styles = require('./styles');
|
||||
const { default: Icon } = require('@stremio/stremio-icons/react');
|
||||
const PropTypes = require('prop-types');
|
||||
const Button = require('../Button');
|
||||
|
||||
const SeasonalNotification = ({ imgUrl, altUrl }) => {
|
||||
|
||||
return (
|
||||
<div className={styles['wrapper']}>
|
||||
<img className={styles['notification-image']} src={imgUrl} alt={altUrl} />
|
||||
<Icon className={styles['back-button']} name={'close'} />
|
||||
<div className={styles['info-container']}>
|
||||
<div className={styles['title-container']}>
|
||||
<div className={styles['title']}>Ho! Ho! Ho! Are you ready for a Silent Cinema Night?</div>
|
||||
<div className={styles['label']}>Get into the festive spirit with our Christmas movie collection – where holiday magic meets the screen!</div>
|
||||
</div>
|
||||
<Button className={styles['action-button']}>
|
||||
<div className={styles['label']}>Learn more</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = SeasonalNotification;
|
||||
|
||||
SeasonalNotification.propTypes = {
|
||||
imgUrl: PropTypes.string.isRequired,
|
||||
altUrl: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
// Copyright (C) 2017-2023 Smart code 203358507
|
||||
|
||||
@import (reference) '~stremio/common/screen-sizes.less';
|
||||
|
||||
.wrapper {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 2rem 1rem;
|
||||
z-index: 99;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: var(--modal-background-color);
|
||||
border-radius: var(--border-radius);
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
box-shadow: var(--outer-glow);
|
||||
overflow: visible;
|
||||
|
||||
.notification-image {
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
margin: -10rem auto 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
color: var(--primary-foreground-color);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @xsmall) {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
}
|
||||
@media only screen and (max-width: @xxsmall) {
|
||||
width: 25rem;
|
||||
height: 35rem;
|
||||
|
||||
.notification-image {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 } = require('stremio/common');
|
||||
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, ModalDialog, Button, useBinaryState } = require('stremio/common');
|
||||
const useBoard = require('./useBoard');
|
||||
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
|
||||
const styles = require('./styles');
|
||||
const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
|
||||
const useFetchModalData = require('./useFetchModalData');
|
||||
|
||||
const THRESHOLD = 5;
|
||||
|
||||
|
|
@ -19,6 +19,8 @@ const Board = () => {
|
|||
const [board, loadBoardRows] = useBoard();
|
||||
const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
|
||||
const scrollContainerRef = React.useRef();
|
||||
const { notificationModalData, isModalDataLoading } = useFetchModalData();
|
||||
const [isNotificationModalOpen, , closeNotificationModal, ] = useBinaryState(true);
|
||||
const onVisibleRangeChange = React.useCallback(() => {
|
||||
const range = getVisibleChildrenRange(scrollContainerRef.current);
|
||||
if (range === null) {
|
||||
|
|
@ -39,7 +41,38 @@ const Board = () => {
|
|||
}, [board.catalogs, onVisibleRangeChange]);
|
||||
return (
|
||||
<div className={styles['board-container']}>
|
||||
<SeasonalNotification imgUrl='https://i.postimg.cc/k5KFNyYH/Group-2395-2x.png' alt='Christmas' />
|
||||
{
|
||||
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>
|
||||
<Button className={styles['action-button']}>
|
||||
<div className={styles['label']}>Learn more</div>
|
||||
</Button>
|
||||
</div>
|
||||
</ModalDialog>
|
||||
:
|
||||
null
|
||||
}
|
||||
<MainNavBars className={styles['board-content-container']} route={'board'}>
|
||||
<div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,6 +17,58 @@
|
|||
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;
|
||||
|
|
|
|||
41
src/routes/Board/useFetchModalData.js
Normal file
41
src/routes/Board/useFetchModalData.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// Copyright (C) 2017-2023 Smart code 203358507
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const useFetchModalData = () => {
|
||||
const [notificationModalData, setNotificationModalData] = React.useState(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await fetch('https://api.strem.io/api/getModal', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ date: new Date() })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
||||
const jsonData = await response.json();
|
||||
const data = jsonData.result;
|
||||
setNotificationModalData(data);
|
||||
} catch (err) {
|
||||
throw new Error(err.message);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return { notificationModalData, isLoading };
|
||||
};
|
||||
|
||||
module.exports = useFetchModalData;
|
||||
Loading…
Reference in a new issue