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

add background to addon modal

Browse source
This commit is contained in:
dexter21767-dev 2024-03-06 23:55:50 +01:00
parent 46bcf240b3
commit 8ee64da468
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,6 +28,7 @@ function withRemoteAndLocalAddon(AddonDetails) {
id={addon.manifest.id}
name={addon.manifest.name}
version={addon.manifest.version}
background={addon.manifest.background}
logo={addon.manifest.logo}
description={addon.manifest.description}
types={addon.manifest.types}
@ -133,7 +134,7 @@ const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
return toggleButton !== null ? configureButton ? [cancelButton, configureButton, toggleButton] : [cancelButton, toggleButton] : [cancelButton];
}, [addonDetails, onCloseRequest]);
return (
<ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
<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 || '' : ''}>
{
addonDetails.selected === null ?
<div className={styles['addon-details-message-container']}>

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

@ -9,7 +9,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
const { Modal } = require('stremio-router');
const styles = require('./styles');
const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, ...props }) => {
const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequest, background, ...props }) => {
const routeFocused = useRouteFocused();
const modalsContainer = useModalsContainer();
const modalContainerRef = React.useRef(null);
@ -58,7 +58,7 @@ 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}>
<div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown} style={{backgroundImage: `url('${background}')`}}>
<Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
<Icon className={styles['icon']} name={'close'} />
</Button>
@ -102,6 +102,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
ModalDialog.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
background: PropTypes.string,
buttons: PropTypes.arrayOf(PropTypes.shape({
className: PropTypes.string,
label: PropTypes.string,

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

@ -19,6 +19,9 @@
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);
.close-button-container {
@ -38,7 +41,8 @@
opacity: 0.4;
}
&:hover, &:focus {
&:hover,
&:focus {
.icon {
opacity: 1;
color: var(--primary-foreground-color);