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

feat: hot reload for background and quote language, css fixes etc

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-04-13 18:25:55 +01:00
parent 81787211b8
commit 18c6514666
14 changed files with 100 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/widgets/background/Background.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import EventBus from '../../../modules/helpers/eventbus';
import PhotoInformation from './PhotoInformation';
import './scss/index.scss';
@@ -10,6 +12,7 @@ export default class Background extends React.PureComponent {
this.state = {
style: '',
url: '',
currentAPI: '',
video: false,
photoInfo: {
hidden: false,
@@ -32,6 +35,7 @@ export default class Background extends React.PureComponent {
}
this.setState({
type: 'colour',
style: style
});
}
@@ -137,7 +141,8 @@ export default class Background extends React.PureComponent {
let requestURL, data;
switch (backgroundAPI) {
case 'unsplash':
requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
//requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
break;
// Defaults to Mue
default:
@@ -154,6 +159,8 @@ export default class Background extends React.PureComponent {
this.setState({
url: data.file,
type: 'api',
currentAPI: backgroundAPI,
photoInfo: {
credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`,
location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
@@ -196,6 +203,7 @@ export default class Background extends React.PureComponent {
if (customBackground !== '' && customBackground !== 'undefined') {
this.setState({
url: customBackground,
type: 'custom',
video: this.videoCheck(customBackground),
photoInfo: {
hidden: true
@@ -226,11 +234,43 @@ export default class Background extends React.PureComponent {
}
}
updateFilters() {
document.querySelector('#backgroundImage').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
}
componentDidMount() {
if (localStorage.getItem('background') === 'false') {
return;
}
EventBus.on('refresh', (data) => {
if (data === 'background') {
const element = document.querySelector('#backgroundImage');
const photoInfo = document.querySelector('.photoInformation');
if (localStorage.getItem('background') === 'false') {
photoInfo.style.display = 'none';
return element.style.display = 'none';
}
photoInfo.style.display = 'block';
element.style.display = 'block';
if (this.state.type !== localStorage.getItem('backgroundType') || (this.state.type === 'api' && this.state.currentAPI !== localStorage.getItem('backgroundAPI'))) {
element.classList.remove('fade-in');
this.setState({
url: '',
photoInfo: {
hidden: true
}
});
return this.getBackground();
}
this.updateFilters();
}
});
this.getBackground();
}

17
src/components/widgets/quicklinks/QuickLinks.jsx
View File

@@ -19,11 +19,11 @@ export default class QuickLinks extends React.PureComponent {
this.language = window.language.widgets.quicklinks;
}
deleteLink(name, event) {
deleteLink(key, event) {
event.preventDefault();
let data = JSON.parse(localStorage.getItem('quicklinks'));
data = data.filter((i) => i.name !== name);
data = data.filter((i) => i.key !== key);
localStorage.setItem('quicklinks', JSON.stringify(data));
this.setState({
@@ -35,7 +35,8 @@ export default class QuickLinks extends React.PureComponent {
let data = JSON.parse(localStorage.getItem('quicklinks'));
data.push({
name: this.state.name,
url: this.state.url
url: this.state.url,
key: Math.random().toString(36).substring(7) + 1
});
localStorage.setItem('quicklinks', JSON.stringify(data));
@@ -87,9 +88,9 @@ export default class QuickLinks extends React.PureComponent {
const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
const quickLink = (item, index) => {
const quickLink = (item) => {
const link = (
<a key={index} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel} draggable={false}>
<a key={item.key} onContextMenu={(e) => this.deleteLink(item.key, e)} href={item.url} target={target} rel={rel} draggable={false}>
<img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name} draggable={false}/>
</a>
);
@@ -103,11 +104,11 @@ export default class QuickLinks extends React.PureComponent {
return (
<div className='quicklinks-container'>
{this.state.items.map((item, index) => (
quickLink(item, index)
{this.state.items.map((item) => (
quickLink(item)
))}
<button className='quicklinks' onClick={this.toggleAdd}>+</button>
<span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>
<span className='quicklinkscontainer' style={{ 'visibility': this.state.showAddLink }}>
<div className='topbarquicklinks'>
<h4>{this.language.new}</h4>
<TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />

3
src/components/widgets/quicklinks/quicklinks.scss
View File

@@ -1,5 +1,6 @@
.quicklinks {
position: relative;
user-select: none;
h3 {
text-shadow: none;
@@ -49,6 +50,8 @@ textarea {
h4 {
margin: 0;
cursor: initial;
user-select: none;
}
}

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

@@ -20,7 +20,8 @@ export default class Quote extends React.PureComponent {
author: '',
favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />,
tweet: '',
copy: ''
copy: '',
quoteLanguage: ''
};
this.buttons = {
@@ -98,7 +99,8 @@ export default class Quote extends React.PureComponent {
// First we try and get a quote from the API...
try {
const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + localStorage.getItem('quotelanguage'))).json();
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) {
@@ -113,7 +115,8 @@ export default class Quote extends React.PureComponent {
this.setState({
quote: '"' + data.quote + '"',
author: data.author,
authorlink: authorlink
authorlink: authorlink,
quoteLanguage: quotelanguage
});
} catch (e) {
// ..and if that fails we load one locally
@@ -156,7 +159,7 @@ export default class Quote extends React.PureComponent {
tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet
});
if (!this.state.quote) {
if (!this.state.quote || localStorage.getItem('quotelanguage') !== this.state.quoteLanguage) {
this.getQuote();
}
}

1
src/components/widgets/quote/quote.scss
View File

@@ -17,6 +17,7 @@
.quoteauthor {
font-size: 0.9em;
letter-spacing: 0.5px;
user-select: none;
svg {
margin-left: 10px;

2
src/components/widgets/search/search.scss
View File

@@ -18,10 +18,12 @@
transition: width 0.5s ease-in-out;
color: white;
padding: 0.5rem 1rem;
user-select: none;
&:focus {
width: 400px;
background-color: rgba(0, 0, 0, .3);
user-select: text;
}
}

4
src/components/widgets/time/clock.scss
View File

@@ -26,3 +26,7 @@
background: map-get($theme-colours, 'main') !important;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.clock-container {
margin-top: 13px;
}