diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss index 7d6beee9..7e682027 100644 --- a/src/components/modals/main/scss/settings/_buttons.scss +++ b/src/components/modals/main/scss/settings/_buttons.scss @@ -53,6 +53,15 @@ border-radius: 12px; margin-right: 25px; width: 220px; + cursor: pointer; + + &:hover { + background-color: var(--tab-active); + } + + &:disabled { + cursor: not-allowed; + } } .export, diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx index 3c99c90c..1ccd5a8d 100644 --- a/src/components/modals/main/settings/sections/background/Custom.jsx +++ b/src/components/modals/main/settings/sections/background/Custom.jsx @@ -2,6 +2,7 @@ import variables from 'modules/variables'; import { PureComponent, Fragment } from 'react'; import { toast } from 'react-toastify'; import { Cancel, AddLink, AddPhotoAlternate } from '@mui/icons-material'; +import EventBus from 'modules/helpers/eventbus'; import Checkbox from '../../Checkbox'; import FileUpload from '../../FileUpload'; @@ -61,9 +62,10 @@ export default class CustomSettings extends PureComponent { localStorage.setItem('customBackground', JSON.stringify(customBackground)); } - videoCustomSettings = (index) => { - const customBackground = this.state.customBackground[index]; - if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { + videoCustomSettings = () => { + const hasVideo = Object.keys(this.state.customBackground).filter(bg => bg.startsWith('data:video/') || bg.endsWith('.mp4') || bg.endsWith('.webm') || bg.endsWith('.ogg')); + + if (hasVideo) { return ( <> @@ -119,12 +121,12 @@ export default class CustomSettings extends PureComponent { : null} - {this.videoCustomSettings(index)} ))} this.customBackground(e, false, this.state.currentBackgroundIndex)} /> {this.props.interval} + {this.videoCustomSettings()} this.setState({ customURLModal: false })} isOpen={this.state.customURLModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}> this.addCustomURL(e)} modalCloseOnly={() => this.setState({ customURLModal: false })} /> diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index aa247a14..07d8e876 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -210,7 +210,7 @@ export default class Background extends PureComponent { return this.setState(offlineBackground()); } - if (customBackground !== '' && customBackground !== 'undefined' && customBackground !== ['']) { + if (customBackground !== '' && customBackground !== 'undefined' && customBackground !== [''] && customBackground !== undefined) { const object = { url: customBackground, type: 'custom',