From b070f4a1ce920c236d34283b4479d54969e9b664 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sun, 22 May 2022 20:27:42 +0100 Subject: [PATCH] feat: add custom changes to drag and drop, refactor search, comments, video upload check (untested) --- src/components/helpers/tooltip/tooltip.scss | 1 - .../main/marketplace/sections/Create.jsx | 2 +- .../modals/main/settings/FileUpload.jsx | 12 +++++-- .../settings/sections/background/Custom.jsx | 31 ++++++++++++++----- .../widgets/background/Background.jsx | 1 - src/components/widgets/search/Search.jsx | 11 +++---- 6 files changed, 39 insertions(+), 19 deletions(-) diff --git a/src/components/helpers/tooltip/tooltip.scss b/src/components/helpers/tooltip/tooltip.scss index 9445bece..3c62ba30 100644 --- a/src/components/helpers/tooltip/tooltip.scss +++ b/src/components/helpers/tooltip/tooltip.scss @@ -1,4 +1,3 @@ -// todo: possibly add tooltip placement option @import 'scss/variables'; .tooltip { diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx index ab9feb6b..12371084 100644 --- a/src/components/modals/main/marketplace/sections/Create.jsx +++ b/src/components/modals/main/marketplace/sections/Create.jsx @@ -1,3 +1,4 @@ +// todo: refactor all of this import variables from 'modules/variables'; import { PureComponent } from 'react'; import { @@ -177,7 +178,6 @@ export default class Create extends PureComponent { ); - // todo: find a better way to do all this const nextDescriptionDisabled = !( this.state.addonMetadata.name !== undefined && this.state.addonMetadata.description !== undefined && diff --git a/src/components/modals/main/settings/FileUpload.jsx b/src/components/modals/main/settings/FileUpload.jsx index 602c57ad..0c56021f 100644 --- a/src/components/modals/main/settings/FileUpload.jsx +++ b/src/components/modals/main/settings/FileUpload.jsx @@ -2,6 +2,7 @@ import variables from 'modules/variables'; import { PureComponent } from 'react'; import { toast } from 'react-toastify'; import { compressAccurately, filetoDataURL } from 'image-conversion'; +import { videoCheck } from 'modules/helpers/background/widget'; export default class FileUpload extends PureComponent { getMessage = (text) => variables.language.getMessage(variables.languagecode, text); @@ -21,9 +22,16 @@ export default class FileUpload extends PureComponent { settings[key] = localStorage.getItem(key); }); - // todo: check for video and ignore (very easy) - // also look into changing the number const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length; + if (videoCheck(file) === true) { + if (settingsSize + file.size > 4850000) { + return toast('Not enough storage!'); + } + + return this.props.loadFunction(file); + } + + // todo: change number compressAccurately(file, 200).then(async (res) => { if (settingsSize + res.size > 4850000) { return toast('Not enough storage!'); diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx index da0b7a21..ba483e2f 100644 --- a/src/components/modals/main/settings/sections/background/Custom.jsx +++ b/src/components/modals/main/settings/sections/background/Custom.jsx @@ -3,6 +3,8 @@ import { PureComponent, createRef } from 'react'; import { toast } from 'react-toastify'; import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md'; import EventBus from 'modules/helpers/eventbus'; +import { compressAccurately, filetoDataURL } from 'image-conversion'; +import { videoCheck } from 'modules/helpers/background/widget'; import Checkbox from '../../Checkbox'; import FileUpload from '../../FileUpload'; @@ -124,7 +126,6 @@ export default class CustomSettings extends PureComponent { } componentDidMount() { - // todo: make dnd use compression etc const dnd = this.customDnd.current; dnd.ondragover = dnd.ondragenter = (e) => { e.preventDefault(); @@ -133,14 +134,28 @@ export default class CustomSettings extends PureComponent { dnd.ondrop = (e) => { e.preventDefault(); const file = e.dataTransfer.files[0]; - const reader = new FileReader(); - if (file.size > 2000000) { - return toast(this.getMessage('modals.main.file_upload_error')); + const settings = {}; + + Object.keys(localStorage).forEach((key) => { + settings[key] = localStorage.getItem(key); + }); + + const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length; + if (videoCheck(file) === true) { + if (settingsSize + file.size > 4850000) { + return toast('Not enough storage!'); + } + + return this.customBackground(file, false, this.state.currentBackgroundIndex); } - reader.onload = (e) => { - this.customBackground(e, false, this.state.customBackground.length); - }; - reader.readAsDataURL(file); + + compressAccurately(file, 200).then(async (res) => { + if (settingsSize + res.size > 4850000) { + return toast('Not enough storage!'); + } + + this.customBackground(await filetoDataURL(res), false, this.state.currentBackgroundIndex); + }); e.preventDefault(); }; } diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx index 44478928..721e6b3e 100644 --- a/src/components/widgets/background/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -398,7 +398,6 @@ export default class Background extends PureComponent { ); try { - // todo: refactor this mess const current = JSON.parse(localStorage.getItem('currentBackground')); if (current.type !== type) { this.getBackground(); diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx index bdebb6d0..f63b53e8 100644 --- a/src/components/widgets/search/Search.jsx +++ b/src/components/widgets/search/Search.jsx @@ -1,5 +1,5 @@ import variables from 'modules/variables'; -import { PureComponent } from 'react'; +import { PureComponent, createRef } from 'react'; import { MdSearch, MdMic, MdSettings } from 'react-icons/md'; import Tooltip from 'components/helpers/tooltip/Tooltip'; //import Hotkeys from 'react-hot-keys'; @@ -28,15 +28,14 @@ export default class Search extends PureComponent { classList: localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons', }; + this.micIcon = createRef(); } startSpeechRecognition = () => { const voiceSearch = new window.webkitSpeechRecognition(); voiceSearch.start(); - // todo: use ref, stop being lazy - const micIcon = document.getElementById('micBtn'); - micIcon.classList.add('micActive'); + this.micIcon.current.classList.add('micActive'); const searchText = document.getElementById('searchtext'); @@ -45,7 +44,7 @@ export default class Search extends PureComponent { }; voiceSearch.onend = () => { - micIcon.classList.remove('micActive'); + this.micIcon.current.classList.remove('micActive'); if (searchText.value === '') { return; } @@ -106,7 +105,7 @@ export default class Search extends PureComponent { if (localStorage.getItem('voiceSearch') === 'true') { microphone = ( - );