Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 14:52:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: addon details modal background

Browse source
This commit is contained in:
Tim 2024-03-07 12:22:28 +01:00
parent 8ee64da468
commit 3728645399
3 changed files with 82 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/common/AddonDetailsModal/AddonDetailsModal.js
View file

@ -133,8 +133,11 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
null;
return toggleButton !== null ? configureButton ? [cancelButton, configureButton, toggleButton] : [cancelButton, toggleButton] : [cancelButton];
}, [addonDetails, onCloseRequest]);
const modalBackground = React.useMemo(() => {
return addonDetails.remoteAddon?.content.type === 'Ready' ? addonDetails.remoteAddon.content.content.manifest.background : null;
}, [addonDetails.remoteAddon]);
return (
<ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest} background={addonDetails.remoteAddon?.content.type === 'Ready' ? addonDetails.remoteAddon.content.content.manifest.background || '' : ''}>
<ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} background={modalBackground} onCloseRequest={onCloseRequest}>
{
addonDetails.selected === null ?
<div className={styles['addon-details-message-container']}>

65
src/common/ModalDialog/ModalDialog.js
View file

@ -58,42 +58,45 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
}, [routeFocused, dataset, onCloseRequest]);
return (
<Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown} style={{backgroundImage: `url('${background}')`}}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
<div className={styles['modal-dialog-background']} style={{backgroundImage: `url('${background}')`}} />
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} name={'close'} />
</Button>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
<div className={styles['modal-dialog-content']}>
{children}
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
<div className={styles['modal-dialog-content']}>
{children}
</div>
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} name={icon} />
:
null
}
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}</div>
:
null
}
</Button>
))}
</div>
:
null
}
</div>
{
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} name={icon} />
:
null
}
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}</div>
:
null
}
</Button>
))}
</div>
:
null
}
</div>
</Modal>
);

72
src/common/ModalDialog/styles.less
View file

@ -19,11 +19,20 @@
padding: 0 2rem;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
background-size: cover;
background-position: center;
background-blend-mode: overlay; // set to 'color' on desktop version
box-shadow: var(--outer-glow);
.modal-dialog-background {
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
background-position: center;
opacity: 0.1;
}
.close-button-container {
position: absolute;
top: 0.5rem;
@ -54,36 +63,43 @@
}
}
.title-container {
flex: 1 0 auto;
display: flex;
align-items: center;
height: 4.5rem;
font-size: 1.2rem;
font-weight: 500;
color: var(--primary-foreground-color);
}
.modal-dialog-content {
flex: 1;
align-self: stretch;
overflow-y: auto;
padding: 2rem 0;
z-index: 1;
position: relative;
height: 100%;
width: 100%;
&:last-child {
margin-bottom: 2rem;
.title-container {
flex: 1 0 auto;
display: flex;
align-items: center;
height: 4.5rem;
font-size: 1.2rem;
font-weight: 500;
color: var(--primary-foreground-color);
}
}
.buttons-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.modal-dialog-content {
flex: 1;
align-self: stretch;
overflow-y: auto;
padding: 2rem 0;
&:last-child {
margin: 2rem 0;
&:last-child {
margin-bottom: 2rem;
}
}
.buttons-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
&:last-child {
margin: 2rem 0;
}
}
}
}