mirror of
https://github.com/mue/mue.git
synced 2026-07-16 21:44:22 +02:00
fix: author loading before quote
- Make author div not load if quote is empty - photoinformation taking too much of the screen - more transitions and consistent transitions - running prettier across all files Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
@@ -1,38 +1,37 @@
|
||||
import variables from "modules/variables";
|
||||
import { PureComponent } from "react";
|
||||
import { MenuItem } from "@mui/material";
|
||||
import variables from 'modules/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import { MenuItem } from '@mui/material';
|
||||
|
||||
import Header from "../../Header";
|
||||
import Checkbox from "../../Checkbox";
|
||||
import Dropdown from "../../Dropdown";
|
||||
import Slider from "../../Slider";
|
||||
import Radio from "../../Radio";
|
||||
import SettingsItem from "../../SettingsItem";
|
||||
import Header from '../../Header';
|
||||
import Checkbox from '../../Checkbox';
|
||||
import Dropdown from '../../Dropdown';
|
||||
import Slider from '../../Slider';
|
||||
import Radio from '../../Radio';
|
||||
import SettingsItem from '../../SettingsItem';
|
||||
|
||||
import ColourSettings from "./Colour";
|
||||
import CustomSettings from "./Custom";
|
||||
import ColourSettings from './Colour';
|
||||
import CustomSettings from './Custom';
|
||||
|
||||
import { values } from "modules/helpers/settings/modals";
|
||||
import { values } from 'modules/helpers/settings/modals';
|
||||
|
||||
export default class BackgroundSettings extends PureComponent {
|
||||
getMessage = (text) =>
|
||||
variables.language.getMessage(variables.languagecode, text);
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
backgroundType: localStorage.getItem("backgroundType") || "api",
|
||||
backgroundFilter: localStorage.getItem("backgroundFilter") || "none",
|
||||
backgroundCategories: [this.getMessage("modals.main.loading")],
|
||||
backgroundAPI: localStorage.getItem("backgroundAPI") || "mue",
|
||||
marketplaceEnabled: localStorage.getItem("photo_packs"),
|
||||
backgroundType: localStorage.getItem('backgroundType') || 'api',
|
||||
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
|
||||
backgroundCategories: [this.getMessage('modals.main.loading')],
|
||||
backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
|
||||
marketplaceEnabled: localStorage.getItem('photo_packs'),
|
||||
};
|
||||
this.controller = new AbortController();
|
||||
}
|
||||
|
||||
async getBackgroundCategories() {
|
||||
const data = await (
|
||||
await fetch(variables.constants.API_URL + "/images/categories", {
|
||||
await fetch(variables.constants.API_URL + '/images/categories', {
|
||||
signal: this.controller.signal,
|
||||
})
|
||||
).json();
|
||||
@@ -47,12 +46,9 @@ export default class BackgroundSettings extends PureComponent {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (
|
||||
navigator.onLine === false ||
|
||||
localStorage.getItem("offlineMode") === "true"
|
||||
) {
|
||||
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
|
||||
return this.setState({
|
||||
backgroundCategories: [this.getMessage("modals.update.offline.title")],
|
||||
backgroundCategories: [this.getMessage('modals.update.offline.title')],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -71,53 +67,41 @@ export default class BackgroundSettings extends PureComponent {
|
||||
|
||||
const apiOptions = [
|
||||
{
|
||||
name: "Mue",
|
||||
value: "mue",
|
||||
name: 'Mue',
|
||||
value: 'mue',
|
||||
},
|
||||
{
|
||||
name: "Unsplash",
|
||||
value: "unsplash",
|
||||
name: 'Unsplash',
|
||||
value: 'unsplash',
|
||||
},
|
||||
{
|
||||
name: "Pexels",
|
||||
value: "pexels",
|
||||
name: 'Pexels',
|
||||
value: 'pexels',
|
||||
},
|
||||
];
|
||||
|
||||
const interval = (
|
||||
<SettingsItem>
|
||||
<Dropdown
|
||||
label={getMessage(
|
||||
"modals.main.settings.sections.background.interval.title"
|
||||
)}
|
||||
label={getMessage('modals.main.settings.sections.background.interval.title')}
|
||||
name="backgroundchange"
|
||||
>
|
||||
<option value="refresh">{getMessage("tabname")}</option>
|
||||
<option value="refresh">{getMessage('tabname')}</option>
|
||||
<option value="60000">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.interval.minute"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.interval.minute')}
|
||||
</option>
|
||||
<option value="1800000">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.interval.half_hour"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.interval.half_hour')}
|
||||
</option>
|
||||
<option value="3600000">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.interval.hour"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.interval.hour')}
|
||||
</option>
|
||||
<option value="86400000">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.interval.day"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.interval.day')}
|
||||
</option>
|
||||
<option value="604800000">{getMessage("widgets.date.week")}</option>
|
||||
<option value="604800000">{getMessage('widgets.date.week')}</option>
|
||||
<option value="2628000000">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.interval.month"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.interval.month')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
@@ -127,37 +111,30 @@ export default class BackgroundSettings extends PureComponent {
|
||||
<>
|
||||
<SettingsItem>
|
||||
<Radio
|
||||
title={getMessage(
|
||||
"modals.main.settings.sections.background.source.api"
|
||||
)}
|
||||
title={getMessage('modals.main.settings.sections.background.source.api')}
|
||||
options={apiOptions}
|
||||
name="backgroundAPI"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
onChange={(e) => this.setState({ backgroundAPI: e })}
|
||||
/>
|
||||
{this.state.backgroundCategories[0] ===
|
||||
getMessage("modals.main.loading") ? (
|
||||
{this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
|
||||
<>
|
||||
<Dropdown
|
||||
label={getMessage(
|
||||
"modals.main.settings.sections.background.category"
|
||||
)}
|
||||
label={getMessage('modals.main.settings.sections.background.category')}
|
||||
name="apiCategory"
|
||||
>
|
||||
<MenuItem value="loading" key="loading">
|
||||
{getMessage("modals.main.loading")}
|
||||
{getMessage('modals.main.loading')}
|
||||
</MenuItem>
|
||||
<MenuItem value="loading" key="loading">
|
||||
{getMessage("modals.main.loading")}
|
||||
{getMessage('modals.main.loading')}
|
||||
</MenuItem>
|
||||
</Dropdown>
|
||||
</>
|
||||
) : (
|
||||
<Dropdown
|
||||
label={getMessage(
|
||||
"modals.main.settings.sections.background.category"
|
||||
)}
|
||||
label={getMessage('modals.main.settings.sections.background.category')}
|
||||
name="apiCategory"
|
||||
>
|
||||
{this.state.backgroundCategories.map((category) => (
|
||||
@@ -168,31 +145,21 @@ export default class BackgroundSettings extends PureComponent {
|
||||
</Dropdown>
|
||||
)}
|
||||
<Dropdown
|
||||
label={getMessage(
|
||||
"modals.main.settings.sections.background.source.quality.title"
|
||||
)}
|
||||
label={getMessage('modals.main.settings.sections.background.source.quality.title')}
|
||||
name="apiQuality"
|
||||
element=".other"
|
||||
>
|
||||
<option value="original">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.source.quality.original"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.original')}
|
||||
</option>
|
||||
<option value="high">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.source.quality.high"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.high')}
|
||||
</option>
|
||||
<option value="normal">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.source.quality.normal"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.normal')}
|
||||
</option>
|
||||
<option value="datasaver">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.source.quality.datasaver"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.source.quality.datasaver')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
@@ -201,16 +168,16 @@ export default class BackgroundSettings extends PureComponent {
|
||||
);
|
||||
|
||||
switch (this.state.backgroundType) {
|
||||
case "custom":
|
||||
case 'custom':
|
||||
backgroundSettings = <CustomSettings interval={interval} />;
|
||||
break;
|
||||
case "colour":
|
||||
case 'colour':
|
||||
backgroundSettings = <ColourSettings />;
|
||||
break;
|
||||
case "random_colour":
|
||||
case 'random_colour':
|
||||
backgroundSettings = <></>;
|
||||
break;
|
||||
case "random_gradient":
|
||||
case 'random_gradient':
|
||||
backgroundSettings = <></>;
|
||||
break;
|
||||
default:
|
||||
@@ -219,23 +186,23 @@ export default class BackgroundSettings extends PureComponent {
|
||||
}
|
||||
|
||||
if (
|
||||
localStorage.getItem("photo_packs") &&
|
||||
this.state.backgroundType !== "custom" &&
|
||||
this.state.backgroundType !== "colour" &&
|
||||
this.state.backgroundType !== "api"
|
||||
localStorage.getItem('photo_packs') &&
|
||||
this.state.backgroundType !== 'custom' &&
|
||||
this.state.backgroundType !== 'colour' &&
|
||||
this.state.backgroundType !== 'api'
|
||||
) {
|
||||
backgroundSettings = null;
|
||||
}
|
||||
|
||||
const usingImage =
|
||||
this.state.backgroundType !== "colour" &&
|
||||
this.state.backgroundType !== "random_colour" &&
|
||||
this.state.backgroundType !== "random_gradient";
|
||||
this.state.backgroundType !== 'colour' &&
|
||||
this.state.backgroundType !== 'random_colour' &&
|
||||
this.state.backgroundType !== 'random_gradient';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title={getMessage("modals.main.settings.sections.background.title")}
|
||||
title={getMessage('modals.main.settings.sections.background.title')}
|
||||
setting="background"
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
@@ -243,171 +210,130 @@ export default class BackgroundSettings extends PureComponent {
|
||||
<SettingsItem title="cheese" subtitle="cheese">
|
||||
<Checkbox
|
||||
name="ddgProxy"
|
||||
text={getMessage(
|
||||
"modals.main.settings.sections.background.ddg_image_proxy"
|
||||
)}
|
||||
text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="bgtransition"
|
||||
text={getMessage(
|
||||
"modals.main.settings.sections.background.transition"
|
||||
)}
|
||||
text={getMessage('modals.main.settings.sections.background.transition')}
|
||||
element=".other"
|
||||
disabled={!usingImage}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoInformation"
|
||||
text={getMessage(
|
||||
"modals.main.settings.sections.background.photo_information"
|
||||
)}
|
||||
text={getMessage('modals.main.settings.sections.background.photo_information')}
|
||||
element=".other"
|
||||
disabled={
|
||||
this.state.backgroundType !== "api" &&
|
||||
this.state.backgroundType !== "marketplace"
|
||||
this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
|
||||
}
|
||||
/>
|
||||
<Checkbox
|
||||
name="photoMap"
|
||||
text={getMessage(
|
||||
"modals.main.settings.sections.background.show_map"
|
||||
)}
|
||||
text={getMessage('modals.main.settings.sections.background.show_map')}
|
||||
element=".other"
|
||||
disabled={this.state.backgroundAPI !== "unsplash"}
|
||||
disabled={this.state.backgroundAPI !== 'unsplash'}
|
||||
/>
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={getMessage(
|
||||
"modals.main.settings.sections.background.source.title"
|
||||
)}
|
||||
title={getMessage('modals.main.settings.sections.background.source.title')}
|
||||
subtitle="mucho gracias"
|
||||
>
|
||||
<Dropdown
|
||||
label={getMessage(
|
||||
"modals.main.settings.sections.background.type.title"
|
||||
)}
|
||||
label={getMessage('modals.main.settings.sections.background.type.title')}
|
||||
name="backgroundType"
|
||||
onChange={(value) => this.setState({ backgroundType: value })}
|
||||
category="background"
|
||||
>
|
||||
{this.state.marketplaceEnabled ? (
|
||||
<option value="photo_pack">
|
||||
{this.getMessage("modals.main.navbar.marketplace")}
|
||||
{this.getMessage('modals.main.navbar.marketplace')}
|
||||
</option>
|
||||
) : null}
|
||||
<option value="api">
|
||||
{getMessage("modals.main.settings.sections.background.type.api")}
|
||||
{getMessage('modals.main.settings.sections.background.type.api')}
|
||||
</option>
|
||||
<option value="custom">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.type.custom_image"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.type.custom_image')}
|
||||
</option>
|
||||
<option value="colour">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.type.custom_colour"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.type.custom_colour')}
|
||||
</option>
|
||||
<option value="random_colour">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.type.random_colour"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.type.random_colour')}
|
||||
</option>
|
||||
<option value="random_gradient">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.type.random_gradient"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.type.random_gradient')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
</SettingsItem>
|
||||
{backgroundSettings}
|
||||
{this.state.backgroundType === "api" ||
|
||||
this.state.backgroundType === "custom" ||
|
||||
{this.state.backgroundType === 'api' ||
|
||||
this.state.backgroundType === 'custom' ||
|
||||
this.state.marketplaceEnabled ? (
|
||||
<SettingsItem
|
||||
title={getMessage(
|
||||
"modals.main.settings.sections.background.effects.title"
|
||||
)}
|
||||
title={getMessage('modals.main.settings.sections.background.effects.title')}
|
||||
subtitle="cheese"
|
||||
>
|
||||
<Slider
|
||||
title={getMessage(
|
||||
"modals.main.settings.sections.background.effects.blur"
|
||||
)}
|
||||
title={getMessage('modals.main.settings.sections.background.effects.blur')}
|
||||
name="blur"
|
||||
min="0"
|
||||
max="100"
|
||||
default="0"
|
||||
display="%"
|
||||
marks={values("background")}
|
||||
marks={values('background')}
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Slider
|
||||
title={getMessage(
|
||||
"modals.main.settings.sections.background.effects.brightness"
|
||||
)}
|
||||
title={getMessage('modals.main.settings.sections.background.effects.brightness')}
|
||||
name="brightness"
|
||||
min="0"
|
||||
max="100"
|
||||
default="90"
|
||||
display="%"
|
||||
marks={values("background")}
|
||||
marks={values('background')}
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
<Dropdown
|
||||
label={getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.title"
|
||||
)}
|
||||
label={getMessage('modals.main.settings.sections.background.effects.filters.title')}
|
||||
name="backgroundFilter"
|
||||
onChange={(value) => this.setState({ backgroundFilter: value })}
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
>
|
||||
<option value="none">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.appearance.navbar.refresh_options.none"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}
|
||||
</option>
|
||||
<option value="grayscale">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.grayscale"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}
|
||||
</option>
|
||||
<option value="sepia">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.sepia"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}
|
||||
</option>
|
||||
<option value="invert">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.invert"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.invert')}
|
||||
</option>
|
||||
<option value="saturate">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.saturate"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}
|
||||
</option>
|
||||
<option value="contrast">
|
||||
{getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.contrast"
|
||||
)}
|
||||
{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}
|
||||
</option>
|
||||
</Dropdown>
|
||||
{this.state.backgroundFilter !== "none" ? (
|
||||
{this.state.backgroundFilter !== 'none' ? (
|
||||
<Slider
|
||||
title={getMessage(
|
||||
"modals.main.settings.sections.background.effects.filters.amount"
|
||||
'modals.main.settings.sections.background.effects.filters.amount',
|
||||
)}
|
||||
name="backgroundFilterAmount"
|
||||
min="0"
|
||||
max="100"
|
||||
default="0"
|
||||
display="%"
|
||||
marks={values("background")}
|
||||
marks={values('background')}
|
||||
category="background"
|
||||
element="#backgroundImage"
|
||||
/>
|
||||
|
||||
@@ -1,25 +1,24 @@
|
||||
import variables from "modules/variables";
|
||||
import { PureComponent, Fragment } from "react";
|
||||
import { ColorPicker } from "react-color-gradient-picker";
|
||||
import { toast } from "react-toastify";
|
||||
import SettingsItem from "../../SettingsItem";
|
||||
import variables from 'modules/variables';
|
||||
import { PureComponent, Fragment } from 'react';
|
||||
import { ColorPicker } from 'react-color-gradient-picker';
|
||||
import { toast } from 'react-toastify';
|
||||
import SettingsItem from '../../SettingsItem';
|
||||
|
||||
import hexToRgb from "modules/helpers/background/hexToRgb";
|
||||
import rgbToHex from "modules/helpers/background/rgbToHex";
|
||||
import hexToRgb from 'modules/helpers/background/hexToRgb';
|
||||
import rgbToHex from 'modules/helpers/background/rgbToHex';
|
||||
|
||||
import "react-color-gradient-picker/dist/index.css";
|
||||
import "../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss";
|
||||
import 'react-color-gradient-picker/dist/index.css';
|
||||
import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
|
||||
|
||||
export default class ColourSettings extends PureComponent {
|
||||
DefaultGradientSettings = {
|
||||
angle: "180",
|
||||
gradient: [{ colour: "#ffb032", stop: 0 }],
|
||||
type: "linear",
|
||||
angle: '180',
|
||||
gradient: [{ colour: '#ffb032', stop: 0 }],
|
||||
type: 'linear',
|
||||
};
|
||||
GradientPickerInitialState = undefined;
|
||||
|
||||
getMessage = (text) =>
|
||||
variables.language.getMessage(variables.languagecode, text);
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -29,11 +28,11 @@ export default class ColourSettings extends PureComponent {
|
||||
}
|
||||
|
||||
resetColour() {
|
||||
localStorage.setItem("customBackgroundColour", "");
|
||||
localStorage.setItem('customBackgroundColour', '');
|
||||
this.setState({
|
||||
gradientSettings: this.DefaultGradientSettings,
|
||||
});
|
||||
toast(this.getMessage("toasts.reset"));
|
||||
toast(this.getMessage('toasts.reset'));
|
||||
}
|
||||
|
||||
initialiseColourPickerState(gradientSettings) {
|
||||
@@ -54,10 +53,10 @@ export default class ColourSettings extends PureComponent {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const hex = localStorage.getItem("customBackgroundColour");
|
||||
const hex = localStorage.getItem('customBackgroundColour');
|
||||
let gradientSettings = undefined;
|
||||
|
||||
if (hex !== "") {
|
||||
if (hex !== '') {
|
||||
try {
|
||||
gradientSettings = JSON.parse(hex);
|
||||
} catch (e) {
|
||||
@@ -75,10 +74,7 @@ export default class ColourSettings extends PureComponent {
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
localStorage.setItem(
|
||||
"customBackgroundColour",
|
||||
this.currentGradientSettings()
|
||||
);
|
||||
localStorage.setItem('customBackgroundColour', this.currentGradientSettings());
|
||||
}
|
||||
|
||||
onGradientChange = (event, index) => {
|
||||
@@ -89,7 +85,7 @@ export default class ColourSettings extends PureComponent {
|
||||
gradientSettings: {
|
||||
...s.gradientSettings,
|
||||
gradient: s.gradientSettings.gradient.map((g, i) =>
|
||||
i === index ? { ...g, [name]: newValue } : g
|
||||
i === index ? { ...g, [name]: newValue } : g,
|
||||
),
|
||||
},
|
||||
});
|
||||
@@ -100,8 +96,7 @@ export default class ColourSettings extends PureComponent {
|
||||
|
||||
addColour = () => {
|
||||
this.setState((s) => {
|
||||
const [lastGradient, ...initGradients] =
|
||||
s.gradientSettings.gradient.reverse();
|
||||
const [lastGradient, ...initGradients] = s.gradientSettings.gradient.reverse();
|
||||
return {
|
||||
gradientSettings: {
|
||||
...s.gradientSettings,
|
||||
@@ -109,10 +104,7 @@ export default class ColourSettings extends PureComponent {
|
||||
...initGradients,
|
||||
lastGradient,
|
||||
{
|
||||
colour:
|
||||
localStorage.getItem("theme") === "dark"
|
||||
? "#000000"
|
||||
: "#ffffff",
|
||||
colour: localStorage.getItem('theme') === 'dark' ? '#000000' : '#ffffff',
|
||||
stop: 100,
|
||||
},
|
||||
].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
|
||||
@@ -120,25 +112,18 @@ export default class ColourSettings extends PureComponent {
|
||||
};
|
||||
});
|
||||
|
||||
variables.stats.postEvent(
|
||||
"setting",
|
||||
"Changed backgroundType from colour to gradient"
|
||||
);
|
||||
variables.stats.postEvent('setting', 'Changed backgroundType from colour to gradient');
|
||||
};
|
||||
|
||||
currentGradientSettings = () => {
|
||||
if (
|
||||
typeof this.state.gradientSettings === "object" &&
|
||||
typeof this.state.gradientSettings === 'object' &&
|
||||
this.state.gradientSettings.gradient.every(
|
||||
(g) =>
|
||||
g.colour !==
|
||||
this.getMessage(
|
||||
"modals.main.settings.sections.background.source.disabled"
|
||||
)
|
||||
g.colour !== this.getMessage('modals.main.settings.sections.background.source.disabled'),
|
||||
)
|
||||
) {
|
||||
const clampNumber = (num, a, b) =>
|
||||
Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
|
||||
const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
|
||||
return JSON.stringify({
|
||||
...this.state.gradientSettings,
|
||||
gradient: [
|
||||
@@ -148,13 +133,11 @@ export default class ColourSettings extends PureComponent {
|
||||
].sort((a, b) => (a.stop > b.stop ? 1 : -1)),
|
||||
});
|
||||
}
|
||||
return this.getMessage(
|
||||
"modals.main.settings.sections.background.source.disabled"
|
||||
);
|
||||
return this.getMessage('modals.main.settings.sections.background.source.disabled');
|
||||
};
|
||||
|
||||
onColourPickerChange = (attrs, name) => {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log(attrs, name);
|
||||
}
|
||||
|
||||
@@ -163,7 +146,7 @@ export default class ColourSettings extends PureComponent {
|
||||
angle: attrs.degree,
|
||||
gradient: attrs.points.map((p) => {
|
||||
return {
|
||||
colour: "#" + rgbToHex(p.red, p.green, p.blue),
|
||||
colour: '#' + rgbToHex(p.red, p.green, p.blue),
|
||||
stop: p.left,
|
||||
};
|
||||
}),
|
||||
@@ -175,18 +158,17 @@ export default class ColourSettings extends PureComponent {
|
||||
};
|
||||
|
||||
showReminder() {
|
||||
const reminderInfo = document.querySelector(".reminder-info");
|
||||
if (reminderInfo.style.display !== "block") {
|
||||
reminderInfo.style.display = "block";
|
||||
localStorage.setItem("showReminder", true);
|
||||
const reminderInfo = document.querySelector('.reminder-info');
|
||||
if (reminderInfo.style.display !== 'block') {
|
||||
reminderInfo.style.display = 'block';
|
||||
localStorage.setItem('showReminder', true);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let colourSettings = null;
|
||||
if (typeof this.state.gradientSettings === "object") {
|
||||
const gradientHasMoreThanOneColour =
|
||||
this.state.gradientSettings.gradient.length > 1;
|
||||
if (typeof this.state.gradientSettings === 'object') {
|
||||
const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
|
||||
|
||||
let gradientInputs;
|
||||
if (gradientHasMoreThanOneColour) {
|
||||
@@ -196,11 +178,9 @@ export default class ColourSettings extends PureComponent {
|
||||
|
||||
gradientInputs = (
|
||||
<ColorPicker
|
||||
onStartChange={(colour) =>
|
||||
this.onColourPickerChange(colour, "start")
|
||||
}
|
||||
onChange={(colour) => this.onColourPickerChange(colour, "change")}
|
||||
onEndChange={(colour) => this.onColourPickerChange(colour, "end")}
|
||||
onStartChange={(colour) => this.onColourPickerChange(colour, 'start')}
|
||||
onChange={(colour) => this.onColourPickerChange(colour, 'change')}
|
||||
onEndChange={(colour) => this.onColourPickerChange(colour, 'end')}
|
||||
gradient={this.GradientPickerInitialState}
|
||||
isGradient
|
||||
/>
|
||||
@@ -210,14 +190,14 @@ export default class ColourSettings extends PureComponent {
|
||||
return (
|
||||
<Fragment key={i}>
|
||||
<input
|
||||
id={"colour_" + i}
|
||||
id={'colour_' + i}
|
||||
type="color"
|
||||
name="colour"
|
||||
className="colour"
|
||||
onChange={(event) => this.onGradientChange(event, i)}
|
||||
value={g.colour}
|
||||
></input>
|
||||
<label htmlFor={"colour_" + i} className="customBackgroundHex">
|
||||
<label htmlFor={'colour_' + i} className="customBackgroundHex">
|
||||
{g.colour}
|
||||
</label>
|
||||
</Fragment>
|
||||
@@ -231,9 +211,7 @@ export default class ColourSettings extends PureComponent {
|
||||
{!gradientHasMoreThanOneColour ? (
|
||||
<>
|
||||
<button type="button" className="add" onClick={this.addColour}>
|
||||
{this.getMessage(
|
||||
"modals.main.settings.sections.background.source.add_colour"
|
||||
)}
|
||||
{this.getMessage('modals.main.settings.sections.background.source.add_colour')}
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
@@ -244,12 +222,10 @@ export default class ColourSettings extends PureComponent {
|
||||
return (
|
||||
<>
|
||||
<SettingsItem
|
||||
title={this.getMessage(
|
||||
"modals.main.settings.sections.background.source.custom_colour"
|
||||
)}
|
||||
title={this.getMessage('modals.main.settings.sections.background.source.custom_colour')}
|
||||
>
|
||||
<span className="link" onClick={() => this.resetColour()}>
|
||||
{this.getMessage("modals.main.settings.buttons.reset")}
|
||||
{this.getMessage('modals.main.settings.buttons.reset')}
|
||||
</span>
|
||||
{colourSettings}
|
||||
</SettingsItem>
|
||||
|
||||
@@ -1,25 +1,19 @@
|
||||
import variables from "modules/variables";
|
||||
import { PureComponent } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import {
|
||||
MdCancel,
|
||||
MdAddLink,
|
||||
MdAddPhotoAlternate,
|
||||
MdPersonalVideo,
|
||||
} from "react-icons/md";
|
||||
import EventBus from "modules/helpers/eventbus";
|
||||
import variables from 'modules/variables';
|
||||
import { PureComponent } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
import Checkbox from "../../Checkbox";
|
||||
import FileUpload from "../../FileUpload";
|
||||
import SettingsItem from "../../SettingsItem";
|
||||
import Checkbox from '../../Checkbox';
|
||||
import FileUpload from '../../FileUpload';
|
||||
import SettingsItem from '../../SettingsItem';
|
||||
|
||||
import Modal from "react-modal";
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import CustomURLModal from "./CustomURLModal";
|
||||
import CustomURLModal from './CustomURLModal';
|
||||
|
||||
export default class CustomSettings extends PureComponent {
|
||||
getMessage = (text) =>
|
||||
variables.language.getMessage(variables.languagecode, text);
|
||||
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -30,12 +24,12 @@ export default class CustomSettings extends PureComponent {
|
||||
}
|
||||
|
||||
resetCustom = () => {
|
||||
localStorage.setItem("customBackground", "[]");
|
||||
localStorage.setItem('customBackground', '[]');
|
||||
this.setState({
|
||||
customBackground: [],
|
||||
});
|
||||
toast(this.getMessage("toasts.reset"));
|
||||
EventBus.dispatch("refresh", "background");
|
||||
toast(this.getMessage('toasts.reset'));
|
||||
EventBus.dispatch('refresh', 'background');
|
||||
};
|
||||
|
||||
customBackground(e, text, index) {
|
||||
@@ -48,15 +42,15 @@ export default class CustomSettings extends PureComponent {
|
||||
});
|
||||
this.forceUpdate();
|
||||
|
||||
localStorage.setItem("customBackground", JSON.stringify(customBackground));
|
||||
document.querySelector(".reminder-info").style.display = "flex";
|
||||
localStorage.setItem("showReminder", true);
|
||||
localStorage.setItem('customBackground', JSON.stringify(customBackground));
|
||||
document.querySelector('.reminder-info').style.display = 'flex';
|
||||
localStorage.setItem('showReminder', true);
|
||||
}
|
||||
|
||||
modifyCustomBackground(type, index) {
|
||||
const customBackground = this.state.customBackground;
|
||||
if (type === "add") {
|
||||
customBackground.push("");
|
||||
if (type === 'add') {
|
||||
customBackground.push('');
|
||||
} else {
|
||||
customBackground.splice(index, 1);
|
||||
}
|
||||
@@ -66,39 +60,33 @@ export default class CustomSettings extends PureComponent {
|
||||
});
|
||||
this.forceUpdate();
|
||||
|
||||
localStorage.setItem("customBackground", JSON.stringify(customBackground));
|
||||
document.querySelector(".reminder-info").style.display = "flex";
|
||||
localStorage.setItem("showReminder", true);
|
||||
localStorage.setItem('customBackground', JSON.stringify(customBackground));
|
||||
document.querySelector('.reminder-info').style.display = 'flex';
|
||||
localStorage.setItem('showReminder', true);
|
||||
}
|
||||
|
||||
videoCheck(url) {
|
||||
return (
|
||||
url.startsWith("data:video/") ||
|
||||
url.endsWith(".mp4") ||
|
||||
url.endsWith(".webm") ||
|
||||
url.endsWith(".ogg")
|
||||
url.startsWith('data:video/') ||
|
||||
url.endsWith('.mp4') ||
|
||||
url.endsWith('.webm') ||
|
||||
url.endsWith('.ogg')
|
||||
);
|
||||
}
|
||||
|
||||
videoCustomSettings = () => {
|
||||
const hasVideo = this.state.customBackground.filter((bg) =>
|
||||
this.videoCheck(bg)
|
||||
);
|
||||
const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg));
|
||||
|
||||
if (hasVideo.length > 0) {
|
||||
return (
|
||||
<>
|
||||
<Checkbox
|
||||
name="backgroundVideoLoop"
|
||||
text={this.getMessage(
|
||||
"modals.main.settings.sections.background.source.loop_video"
|
||||
)}
|
||||
text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}
|
||||
/>
|
||||
<Checkbox
|
||||
name="backgroundVideoMute"
|
||||
text={this.getMessage(
|
||||
"modals.main.settings.sections.background.source.mute_video"
|
||||
)}
|
||||
text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@@ -110,19 +98,17 @@ export default class CustomSettings extends PureComponent {
|
||||
getCustom() {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(localStorage.getItem("customBackground"));
|
||||
data = JSON.parse(localStorage.getItem('customBackground'));
|
||||
} catch (e) {
|
||||
data = [localStorage.getItem("customBackground")];
|
||||
data = [localStorage.getItem('customBackground')];
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
uploadCustomBackground() {
|
||||
document
|
||||
.getElementById("bg-input")
|
||||
.setAttribute("index", this.state.customBackground.length);
|
||||
document.getElementById("bg-input").click();
|
||||
document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
|
||||
document.getElementById('bg-input').click();
|
||||
// to fix loadFunction
|
||||
this.setState({
|
||||
currentBackgroundIndex: this.state.customBackground.length,
|
||||
@@ -134,39 +120,27 @@ export default class CustomSettings extends PureComponent {
|
||||
customURLModal: false,
|
||||
currentBackgroundIndex: this.state.customBackground.length,
|
||||
});
|
||||
this.customBackground(
|
||||
{ target: { value: e } },
|
||||
true,
|
||||
this.state.customBackground.length
|
||||
);
|
||||
this.customBackground({ target: { value: e } }, true, this.state.customBackground.length);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
{this.props.interval}
|
||||
<div className="settingsRow" style={{ alignItems: "flex-start" }}>
|
||||
<div className="settingsRow" style={{ alignItems: 'flex-start' }}>
|
||||
<div className="content">
|
||||
<div className="images-row">
|
||||
{this.state.customBackground.map((url, index) => (
|
||||
<div key={index}>
|
||||
<img
|
||||
alt={"Custom background " + (index || 0)}
|
||||
src={`${
|
||||
!this.videoCheck(url)
|
||||
? this.state.customBackground[index]
|
||||
: ""
|
||||
}`}
|
||||
alt={'Custom background ' + (index || 0)}
|
||||
src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
|
||||
/>
|
||||
{this.videoCheck(url) ? (
|
||||
<MdPersonalVideo className="customvideoicon" />
|
||||
) : null}
|
||||
{this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
|
||||
{this.state.customBackground.length > 0 ? (
|
||||
<button
|
||||
className="iconButton"
|
||||
onClick={() =>
|
||||
this.modifyCustomBackground("remove", index)
|
||||
}
|
||||
onClick={() => this.modifyCustomBackground('remove', index)}
|
||||
>
|
||||
<MdCancel />
|
||||
</button>
|
||||
@@ -183,14 +157,10 @@ export default class CustomSettings extends PureComponent {
|
||||
<span className="subtitle">
|
||||
Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
|
||||
</span>
|
||||
<button onClick={() => this.uploadCustomBackground()}>
|
||||
Or Select
|
||||
</button>
|
||||
<button onClick={() => this.uploadCustomBackground()}>Or Select</button>
|
||||
</div>
|
||||
<button onClick={() => this.setState({ customURLModal: true })}>
|
||||
{this.getMessage(
|
||||
"modals.main.settings.sections.background.source.add_url"
|
||||
)}{" "}
|
||||
{this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
|
||||
<MdAddLink />
|
||||
</button>
|
||||
{/*<span className='subtitle'>
|
||||
@@ -204,9 +174,7 @@ export default class CustomSettings extends PureComponent {
|
||||
<FileUpload
|
||||
id="bg-input"
|
||||
accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg"
|
||||
loadFunction={(e) =>
|
||||
this.customBackground(e, false, this.state.currentBackgroundIndex)
|
||||
}
|
||||
loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)}
|
||||
/>
|
||||
{this.videoCustomSettings()}
|
||||
<Modal
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import variables from "modules/variables";
|
||||
import { useState } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import { TextField } from "@mui/material";
|
||||
import variables from 'modules/variables';
|
||||
import { useState } from 'react';
|
||||
import { MdAdd } from 'react-icons/md';
|
||||
import { TextField } from '@mui/material';
|
||||
|
||||
export default function CustomURLModal({ modalClose, modalCloseOnly }) {
|
||||
const [url, setURL] = useState();
|
||||
@@ -14,18 +14,14 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
|
||||
<h1>
|
||||
{variables.language.getMessage(
|
||||
variables.languagecode,
|
||||
"modals.main.settings.sections.background.source.add_url"
|
||||
'modals.main.settings.sections.background.source.add_url',
|
||||
)}
|
||||
</h1>
|
||||
<TextField
|
||||
value={url}
|
||||
onChange={(e) => setURL(e.target.value)}
|
||||
varient="outlined"
|
||||
/>
|
||||
<TextField value={url} onChange={(e) => setURL(e.target.value)} varient="outlined" />
|
||||
<div className="resetFooter">
|
||||
<button
|
||||
className="round import"
|
||||
style={{ marginLeft: "5px" }}
|
||||
style={{ marginLeft: '5px' }}
|
||||
onClick={() => modalClose(url)}
|
||||
>
|
||||
<MdAdd />
|
||||
|
||||
Reference in New Issue
Block a user