mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 05:23:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: custom video background settings, more progress on quick links and some background fixes

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-04-08 22:25:36 +01:00
parent eaa992ce16
commit 75fea391f0
8 changed files with 97 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/main/marketplace/sections/Added.jsx
View File

@@ -28,7 +28,7 @@ export default class Added extends React.PureComponent {
icon: ''
},
button: ''
}
};
this.buttons = {
uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
}

46
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -21,19 +21,11 @@ export default class BackgroundSettings extends React.PureComponent {
this.language = window.language.modals.main.settings;
}
resetItem(key) {
switch (key) {
case 'customBackground':
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
break;
default:
toast('resetItem requires a key!');
}
resetCustom() {
localStorage.setItem('customBackground', '');
this.setState({
customBackground: ''
});
toast(this.language.toasts.reset);
}
@@ -44,6 +36,25 @@ export default class BackgroundSettings extends React.PureComponent {
});
}
videoCustomSettings = () => {
const customBackground = this.state.customBackground;
if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) {
return (
<>
<Checkbox name='backgroundVideoLoop' text='Loop Video'/>
<Checkbox name='backgroundVideoMute' text='Mute Video'/>
</>
)
} else {
return null;
}
}
componentDidUpdate() {
localStorage.setItem('customBackground', this.state.customBackground);
}
render() {
const { background } = this.language.sections;
@@ -78,22 +89,21 @@ export default class BackgroundSettings extends React.PureComponent {
const customSettings = (
<>
<ul>
<p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
{this.videoCustomSettings()}
<ul>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
<p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetCustom()}>{this.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
</>
);
const colourSettings = <ColourSettings/>;
switch (this.state.backgroundType) {
case 'custom': backgroundSettings = customSettings; break;
case 'colour': backgroundSettings = colourSettings; break;
case 'colour': backgroundSettings = <ColourSettings/>; break;
// API
default: backgroundSettings = APISettings; break;
}