mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-10 22:14:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: finish quote pack support, change quote settings ui and improve hot reload

Browse Source
This commit is contained in:
David Ralph
2021-05-02 22:45:29 +01:00
parent f49cf1f65b
commit 7470ca9e3a
4 changed files with 140 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -4,23 +4,56 @@ import Checkbox from '../Checkbox';
import Text from '../Text';
import Switch from '../Switch';
import Slider from '../Slider';
import Dropdown from '../Dropdown';
export default function QuoteSettings() {
const { quote } = window.language.modals.main.settings.sections;
export default class QuoteSettings extends React.PureComponent {
constructor() {
super();
this.state = {
quoteType: localStorage.getItem('quoteType') || 'api',
};
}
return (
<>
<h2>{quote.title}</h2>
<Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
<Checkbox name='authorLink' text={quote.author_link} element='.other' />
<Text title={quote.custom} name='customQuote' element='.other' />
<Text title={quote.custom_author} name='customQuoteAuthor' element='.other'/>
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
marketplaceType = () => {
if (localStorage.getItem('quote_packs')) {
return <option value='quote_pack'>{window.language.modals.main.navbar.marketplace}</option>;
}
}
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
<Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
</>
);
render() {
const { quote } = window.language.modals.main.settings.sections;
let quoteSettings;
const customSettings = (
<>
<Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
</>
);
switch (this.state.quoteType) {
case 'custom': quoteSettings = customSettings; break;
}
return (
<>
<h2>{quote.title}</h2>
<Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
<Checkbox name='authorLink' text={quote.author_link} element='.other' />
<Dropdown label={window.language.modals.main.settings.sections.background.type.title} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
{this.marketplaceType()}
<option value='api'>{window.language.modals.main.settings.sections.background.type.api}</option>
<option value='custom'>{quote.custom}</option>
</Dropdown>
{quoteSettings}
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
<h3>{quote.buttons.title}</h3>
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
<Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
<Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
</>
);
}
}

2
src/components/modals/main/tabs/backend/Tab.jsx
View File

@@ -39,7 +39,7 @@ function Tab(props) {
}
const settings = window.language.modals.main.settings.sections;
const { navbar, marketplace, addons }= window.language.modals.main;
const { navbar, marketplace, addons } = window.language.modals.main;
let icon, divider;
switch (props.label) {

145
src/components/widgets/quote/Quote.jsx
View File

@@ -42,6 +42,8 @@ export default class Quote extends React.PureComponent {
}
async getQuote() {
const offline = (localStorage.getItem('offlineMode') === 'true');
const favouriteQuote = localStorage.getItem('favouriteQuote');
if (favouriteQuote) {
return this.setState({
@@ -50,71 +52,87 @@ export default class Quote extends React.PureComponent {
});
}
const customQuote = localStorage.getItem('customQuote');
if (customQuote) {
return this.setState({
quote: '"' + customQuote + '"',
author: localStorage.getItem('customQuoteAuthor')
});
}
switch (localStorage.getItem('quoteType')) {
case 'custom':
const customQuote = localStorage.getItem('customQuote');
if (customQuote) {
return this.setState({
quote: '"' + customQuote + '"',
author: localStorage.getItem('customQuoteAuthor'),
type: 'custom'
});
}
break;
case 'quote_pack':
if (offline) {
return this.doOffline();
}
if (localStorage.getItem('offlineMode') === 'true') {
return this.doOffline();
}
const quotePackAPI = JSON.parse(localStorage.getItem('quoteAPI'));
if (quotePackAPI) {
try {
const data = await (await fetch(quotePackAPI.url)).json();
return this.setState({
quote: '"' + data.quote + '"',
author: quotePackAPI.author || data.author,
type: 'quote_pack'
});
} catch (e) {
return this.doOffline();
}
}
let quotePack = localStorage.getItem('quote_packs');
if (quotePack !== null) {
quotePack = JSON.parse(quotePack);
if (quotePack) {
const data = quotePack[Math.floor(Math.random() * quotePack.length)];
return this.setState({
quote: '"' + data.quote + '"',
author: data.author,
type: 'quote_pack'
});
} else {
return this.doOffline();
}
}
break;
case 'api':
if (offline) {
return this.doOffline();
}
const quotePackAPI = JSON.parse(localStorage.getItem('quoteAPI'));
if (quotePackAPI) {
try {
const data = await (await fetch(quotePackAPI.url)).json();
return this.setState({
quote: '"' + data.quote + '"',
author: quotePackAPI.author || data.author
});
} catch (e) {
return this.doOffline();
}
}
// First we try and get a quote from the API...
try {
const quotelanguage = localStorage.getItem('quotelanguage');
const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + quotelanguage)).json();
let quotePack = localStorage.getItem('quote_packs');
// If we hit the ratelimit, we fallback to local quotes
if (data.statusCode === 429) {
return this.doOffline();
}
if (quotePack !== null) {
quotePack = JSON.parse(quotePack);
let authorlink = `https://${window.languagecode.split('_')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
if (localStorage.getItem('authorLink') === 'false' || data.author === 'Unknown') {
authorlink = null;
}
if (quotePack) {
const data = quotePack[Math.floor(Math.random() * quotePack.length)];
return this.setState({
quote: '"' + data.quote + '"',
author: data.author
});
} else {
return this.doOffline();
}
}
// First we try and get a quote from the API...
try {
const quotelanguage = localStorage.getItem('quotelanguage');
const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + quotelanguage)).json();
// If we hit the ratelimit, we fallback to local quotes
if (data.statusCode === 429) {
return this.doOffline();
}
let authorlink = `https://${window.languagecode.split('_')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
if (localStorage.getItem('authorLink') === 'false' || data.author === 'Unknown') {
authorlink = null;
}
this.setState({
quote: '"' + data.quote + '"',
author: data.author,
authorlink: authorlink,
quoteLanguage: quotelanguage
});
} catch (e) {
// ..and if that fails we load one locally
this.doOffline();
this.setState({
quote: '"' + data.quote + '"',
author: data.author,
authorlink: authorlink,
quoteLanguage: quotelanguage,
type: 'api'
});
} catch (e) {
// ..and if that fails we load one locally
this.doOffline();
}
break;
default:
break;
}
}
@@ -153,7 +171,7 @@ export default class Quote extends React.PureComponent {
tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet
});
if (!this.state.quote || localStorage.getItem('quotelanguage') !== this.state.quoteLanguage) {
if (this.state.type !== localStorage.getItem('quoteType')|| localStorage.getItem('quotelanguage') !== this.state.quoteLanguage) {
this.getQuote();
}
}
@@ -172,6 +190,11 @@ export default class Quote extends React.PureComponent {
document.querySelector('.quoteauthor').style.fontSize = `${0.9 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;
this.init();
}
// uninstall quote pack reverts the quote to what you had previously
if (data === 'marketplacequoteuninstall') {
this.init();
}
});
document.querySelector('.quote').style.fontSize = `${0.8 * Number((localStorage.getItem('zoomQuote') || 100) / 100)}em`;

6
src/modules/helpers/marketplace.js
View File

@@ -21,6 +21,9 @@ export default class MarketplaceFunctions {
case 'quotes':
localStorage.removeItem('quote_packs');
localStorage.removeItem('quoteAPI');
localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType'));
localStorage.removeItem('oldQuoteType');
EventBus.dispatch('refresh', 'marketplacequoteuninstall');
break;
case 'photos':
localStorage.removeItem('photo_packs');
@@ -79,6 +82,9 @@ export default class MarketplaceFunctions {
}
localStorage.setItem('quote_packs', JSON.stringify(input.quotes));
localStorage.setItem('oldQuoteType', localStorage.getItem('quoteType'));
localStorage.setItem('quoteType', 'quote_pack');
EventBus.dispatch('refresh', 'quote');
break;
default:
break;