diff --git a/components/collections/Collection.vue b/components/collections/Collection.vue index 14a24d3..761b09e 100644 --- a/components/collections/Collection.vue +++ b/components/collections/Collection.vue @@ -203,7 +203,7 @@ export default { break case 'test': this.toggleLoading() - this.$store.dispatch('collections/test').then(() => { + this.$store.dispatch('collections/test', this.collection).then(() => { this.toggleLoading() }) break diff --git a/package-lock.json b/package-lock.json index a61c579..a6aaef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -239,9 +239,9 @@ } }, "@babel/helper-create-class-features-plugin": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.10.tgz", - "integrity": "sha512-YV7r2YxdTUaw84EwNkyrRke/TJHR/UXGiyvACRqvdVJ2/syV2rQuJNnaRLSuYiop8cMRXOgseTGoJCWX0q2fFg==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz", + "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==", "requires": { "@babel/helper-function-name": "^7.12.13", "@babel/helper-member-expression-to-functions": "^7.13.0", @@ -300,9 +300,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==" + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" }, "@babel/template": { "version": "7.12.13", @@ -420,9 +420,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==" + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" }, "@babel/template": { "version": "7.12.13", @@ -591,9 +591,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==" + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" }, "@babel/template": { "version": "7.12.13", @@ -1124,9 +1124,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==" + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" }, "@babel/template": { "version": "7.12.13", @@ -1670,9 +1670,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==" + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" }, "@babel/template": { "version": "7.12.13", @@ -1807,9 +1807,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==" + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==" }, "@babel/template": { "version": "7.12.13", @@ -4437,9 +4437,9 @@ "dev": true }, "@types/node": { - "version": "14.14.20", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.20.tgz", - "integrity": "sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A==" + "version": "14.14.35", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz", + "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==" }, "@types/normalize-package-data": { "version": "2.4.0", @@ -5463,6 +5463,15 @@ "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" }, + "browser-image-compression": { + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-1.0.14.tgz", + "integrity": "sha512-W8igE2BhGE/EcSDLFIQOW5cJrPnMJdCeAy1xG1BDqJFPxUXz2ZDiZyCLDpU3lj08GyEvHv7Gunr+e+8jbPSdtg==", + "requires": { + "upng-js": "2.1.0", + "uzip": "0.20201231.0" + } + }, "browserify-aes": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", @@ -8509,9 +8518,9 @@ } }, "follow-redirects": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz", - "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==" + "version": "1.13.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz", + "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==" }, "for-in": { "version": "1.0.2", @@ -11066,9 +11075,9 @@ "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==" }, "nanoid": { - "version": "3.1.21", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.21.tgz", - "integrity": "sha512-A6oZraK4DJkAOICstsGH98dvycPr/4GGDH7ZWKmMdd3vGcOurZ6JmWFUt0DA5bzrrn2FrUjmv6mFNWvv8jpppA==" + "version": "3.1.22", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz", + "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==" }, "nanomatch": { "version": "1.2.13", @@ -13066,9 +13075,9 @@ }, "dependencies": { "@types/node": { - "version": "13.13.46", - "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.46.tgz", - "integrity": "sha512-dqpbzK/KDsOlEt+oyB3rv+u1IxlLFziZu/Z0adfRKoelkr+sTd6QcgiQC+HWq/vkYkHwG5ot2LxgV05aAjnhcg==" + "version": "13.13.47", + "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.47.tgz", + "integrity": "sha512-R6851wTjN1YJza8ZIeX6puNBSi/ZULHVh4WVleA7q256l+cP2EtXnKbO455fTs2ytQk3dL9qkU+Wh8l/uROdKg==" } } }, @@ -15368,6 +15377,14 @@ "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz", "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==" }, + "upng-js": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/upng-js/-/upng-js-2.1.0.tgz", + "integrity": "sha512-d3xzZzpMP64YkjP5pr8gNyvBt7dLk/uGI67EctzDuVp4lCZyVMo0aJO6l/VDlgbInJYDY6cnClLoBp29eKWI6g==", + "requires": { + "pako": "^1.0.5" + } + }, "upper-case": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", @@ -15569,6 +15586,11 @@ "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", "optional": true }, + "uzip": { + "version": "0.20201231.0", + "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz", + "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==" + }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", diff --git a/package.json b/package.json index 1f99842..a75dd65 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@nuxtjs/axios": "^5.13.1", "@nuxtjs/dotenv": "^1.4.1", "@nuxtjs/firebase": "^7.5.0", + "browser-image-compression": "^1.0.14", "core-js": "^3.9.1", "firebase": "^8.3.0", "image-blob-reduce": "^2.2.2", diff --git a/plugins/api-helpers.js b/plugins/api-helpers.js index a2dc545..1e0b13a 100644 --- a/plugins/api-helpers.js +++ b/plugins/api-helpers.js @@ -1,13 +1,11 @@ /* * Developed by Artu, https://github.com/ArtuGit - * Copyleft 2020-2021. + * Copyleft 2020-2021. */ import { authenticate } from 'pixabay-api' - -import imageBlobReduce from 'image-blob-reduce' +import imageCompression from 'browser-image-compression' const { searchImages } = authenticate(process.env.pixabayKey) -const reduce = imageBlobReduce() const fakeRequestPromise = (delay = 1000) => { return new Promise((resolve, reject) => { @@ -99,16 +97,6 @@ function makeFBQuery(context, pStr) { return rStr } -function getFileBlob(url, cb) { - const xhr = new XMLHttpRequest() - xhr.open('GET', url) - xhr.responseType = 'blob' - xhr.addEventListener('load', function () { - cb(xhr.response) - }) - xhr.send() -} - function getStorageDirName() { let isAdmin, uuid if (this.getters) { @@ -122,34 +110,28 @@ function getStorageDirName() { else return 'demo' } -// ToDo: Improve readability and error handling -function uploadURLToStorage(url) { - const that = this - const dirName = getStorageDirName.call(this) - const fileName = url.split('/').slice(-1)[0] - return new Promise(function (resolve, reject) { - getFileBlob(url, (blob) => { - try { - reduce - .toBlob(blob, { max: 400 }) - .then((blob) => { - return blob - }) - .then((blobResized) => { - const path = `${dirName}/${fileName}` - const storageRef = that.$fire.storage.ref().child(path) - storageRef.put(blobResized).then(function (snapshot) { - storageRef.getDownloadURL().then(function (url) { - const res = { imagePath: path, url } - resolve(res) - }) - }) - }) - } catch (e) { - alert(e.message) - } +async function uploadURLToStorage(url) { + try { + const dirName = getStorageDirName.call(this) + const fileName = url.split('/').slice(-1)[0] + const path = `${dirName}/${fileName}` + let blob = await this.$axios.$get(url, { + baseURL: null, + responseType: 'blob', }) - }) + blob = await imageCompression(blob, { + maxSizeMB: 0.33, + maxWidthOrHeight: 400, + useWebWorker: true, + }) + const storageRef = await this.$fire.storage.ref().child(path) + await storageRef.put(blob) + const urlRet = await storageRef.getDownloadURL() + return { imagePath: path, url: urlRet } + } catch (error) { + // eslint-disable-next-line + console.error('Error in the image handling ', error) + } } function deleteFileOnStorage(path) { diff --git a/store/collections.js b/store/collections.js index 56a3ee6..1d7932b 100644 --- a/store/collections.js +++ b/store/collections.js @@ -9,7 +9,6 @@ import { uploadURLToStorage, deleteFileOnStorage, } from '@/plugins/api-helpers' -export const strict = false export const state = () => ({ myCollections: [], @@ -80,7 +79,7 @@ export const actions = { index = item.collections.indexOf(collection.params.titleBefore) if (index !== -1) { item.collections.splice(index, 1, collection.title) - await vuexContext.dispatch('cards/rewriteCard', item, { root: true }) + vuexContext.dispatch('cards/rewriteCard', item, { root: true }) } } delete collection.params @@ -165,8 +164,10 @@ export const actions = { return collection } }, - async test(vuexContext) { - await vuexContext.dispatch('auth/setLogoutTimer', 15000, { root: true }) + async test(vuexContext, collection) { + const imageUploaded = await uploadURLToStorage.call(this, collection.image) + // eslint-disable-next-line + console.log(imageUploaded) }, }