From 75fea391f07ed44add00306018f08f21fd6dc4bd Mon Sep 17 00:00:00 2001 From: David Ralph Date: Thu, 8 Apr 2021 22:25:36 +0100 Subject: [PATCH] feat: custom video background settings, more progress on quick links and some background fixes Co-authored-by: Alex Sparkes --- .eslintrc.js | 4 ++ package.json | 7 +- .../main/marketplace/sections/Added.jsx | 2 +- .../sections/background/Background.jsx | 46 ++++++++----- .../widgets/background/Background.jsx | 68 ++++++++++++------- .../widgets/quicklinks/QuickLinks.jsx | 2 +- .../widgets/quicklinks/scss/index.scss | 15 +++- webpack.config.js | 4 +- 8 files changed, 97 insertions(+), 51 deletions(-) create mode 100644 .eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..7dfe405d --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + extends: 'react-app', + parser: '@babel/eslint-parser' +} \ No newline at end of file diff --git a/package.json b/package.json index 3a0974a1..5a3d624d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "devDependencies": { "@babel/core": "^7.13.14", + "@babel/eslint-parser": "^7.13.14", "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/plugin-transform-runtime": "^7.13.10", "@babel/preset-env": "^7.13.12", @@ -36,6 +37,9 @@ "babel-loader": "^8.2.2", "copy-webpack-plugin": "^8.1.1", "css-loader": "^5.2.0", + "eslint": "^7.23.0", + "eslint-config-react-app": "^6.0.0", + "eslint-webpack-plugin": "^2.5.3", "html-webpack-plugin": "^5.3.1", "mini-css-extract-plugin": "^1.4.0", "sass": "^1.32.8", @@ -51,9 +55,6 @@ "chrome": "cp manifest/chrome.json build/manifest.json", "firefox": "cp manifest/firefox.json build/manifest.json" }, - "eslintConfig": { - "extends": "react-app" - }, "browserslist": { "production": [ ">0.2%", diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index f48718ef..e3afa364 100644 --- a/src/components/modals/main/marketplace/sections/Added.jsx +++ b/src/components/modals/main/marketplace/sections/Added.jsx @@ -28,7 +28,7 @@ export default class Added extends React.PureComponent { icon: '' }, button: '' - } + }; this.buttons = { uninstall: , } diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 5c3fbf75..429bf759 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -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 ( + <> + + + + ) + } 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 = ( <>
    -

    {background.source.custom_url} this.resetItem('customBackground')}>{this.language.buttons.reset}

    +

    {background.source.custom_url} this.resetCustom()}>{this.language.buttons.reset}

    this.setState({ customBackground: e.target.value })}>
+ {this.videoCustomSettings()}
    -

    {background.source.custom_background} this.resetItem('customBackground')}>{this.language.buttons.reset}

    +

    {background.source.custom_background} this.resetCustom()}>{this.language.buttons.reset}

    this.fileUpload(e)} />
); - const colourSettings = ; - switch (this.state.backgroundType) { case 'custom': backgroundSettings = customSettings; break; - case 'colour': backgroundSettings = colourSettings; break; + case 'colour': backgroundSettings = ; break; // API default: backgroundSettings = APISettings; break; } diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index 79feb8e2..b25181a2 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -34,28 +34,6 @@ export default class Background extends React.PureComponent { }); } - setBackground() { - // Brightness - let brightness = localStorage.getItem('brightness'); - if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) { - brightness = 75; - } - - if (this.state.url !== '') { - const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url; - - document.querySelector('#backgroundImage').setAttribute( - 'style', - `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);` - ); - } else { - document.querySelector('#backgroundImage').setAttribute( - 'style', - `${this.state.style}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);` - ); - } - } - offlineBackground() { const offlineImages = require('./offline_images.json'); @@ -78,6 +56,28 @@ export default class Background extends React.PureComponent { }); } + setBackground() { + // Brightness + let brightness = localStorage.getItem('brightness'); + if (localStorage.getItem('brightnessTime') && new Date().getHours() > 18) { + brightness = 75; + } + + if (this.state.url !== '') { + const url = this.ddgproxy ? window.constants.DDG_PROXY + this.state.url : this.state.url; + + document.querySelector('#backgroundImage').setAttribute( + 'style', + `background-image: url(${url}); -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);` + ); + } else { + document.querySelector('#backgroundImage').setAttribute( + 'style', + `${this.state.style}; -webkit-filter: blur(${localStorage.getItem('blur')}px) brightness(${brightness}%);` + ); + } + } + // Main background getting function async getBackground() { if (localStorage.getItem('offlineMode') === 'true') { @@ -140,7 +140,7 @@ export default class Background extends React.PureComponent { const hexColorRegex = /#[0-9a-fA-F]{6}/s; if (hexColorRegex.exec(customBackgroundColour)) { // Colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception) - gradientSettings = { "type": "linear", "angle": "180", "gradient": [{ "colour": colour, "stop": 0 }] }; + gradientSettings = { 'type': 'linear', 'angle': '180', 'gradient': [{ 'colour': customBackgroundColour, 'stop': 0 }] }; localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings)); } } @@ -155,7 +155,7 @@ export default class Background extends React.PureComponent { const customBackground = localStorage.getItem('customBackground'); if (customBackground !== '') { // video background - if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) { + if (customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { return this.setState({ url: customBackground, video: true, @@ -203,16 +203,32 @@ export default class Background extends React.PureComponent { // only set once we've got the info componentDidUpdate() { + if (this.state.video === true) { + return; + } + this.setBackground(); } render() { + if (this.state.video === true) { + const checkValue = (setting) => { + return (localStorage.getItem(setting) === 'true'); + }; + + return ( + + ); + } + return ( - + <>
{(this.state.photoInfo.credit !== '') ? : null} - + ); } } diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx index a384f5f6..2362f171 100644 --- a/src/components/widgets/quicklinks/QuickLinks.jsx +++ b/src/components/widgets/quicklinks/QuickLinks.jsx @@ -42,7 +42,7 @@ export default class QuickLinks extends React.PureComponent {
{this.state.items.map((item) => ( - + {item.name}/ ))}
diff --git a/src/components/widgets/quicklinks/scss/index.scss b/src/components/widgets/quicklinks/scss/index.scss index 2f3ff7cf..fae72413 100644 --- a/src/components/widgets/quicklinks/scss/index.scss +++ b/src/components/widgets/quicklinks/scss/index.scss @@ -27,7 +27,6 @@ color: #636e72; opacity: 1; } - } .quicklinks:hover .quicklinkscontainer { @@ -72,4 +71,18 @@ textarea { .quicklinks-container > a, .quicklinks-container > .quicklinks > button { display: inline; +} + +.quicklinks-container { + img { + height: 32px; + width: auto; + transition: transform .2s; + &:hover { + transform: scale(1.1); + } + } + a { + margin: 5px; + } } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index e7fdab2b..c37bba50 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const ESLintPlugin = require('eslint-webpack-plugin'); module.exports = { entry: path.resolve(__dirname, './src/index.js'), @@ -69,6 +70,7 @@ module.exports = { new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css' - }) + }), + new ESLintPlugin() ] };