diff --git a/lib/Listener/CSPListener.php b/lib/Listener/CSPListener.php index d430a68bb..491a0d6fe 100644 --- a/lib/Listener/CSPListener.php +++ b/lib/Listener/CSPListener.php @@ -50,8 +50,6 @@ class CSPListener implements IEventListener { $csp->addAllowedConnectDomain($server); } - $csp->addAllowedWorkerSrcDomain('\'self\''); - $event->addPolicy($csp); } } diff --git a/src/components/CallView/shared/VideoBackground.vue b/src/components/CallView/shared/VideoBackground.vue index 3b8b7d7fe..fc874441e 100644 --- a/src/components/CallView/shared/VideoBackground.vue +++ b/src/components/CallView/shared/VideoBackground.vue @@ -32,7 +32,7 @@ @@ -50,7 +50,6 @@ import { generateUrl } from '@nextcloud/router' import { ResizeObserver } from 'vue-resize' import { getBuilder } from '@nextcloud/browser-storage' import browserCheck from '../../../mixins/browserCheck' -import blur from '../../../utils/imageBlurrer' const browserStorage = getBuilder('nextcloud').persist().build() @@ -95,14 +94,8 @@ export default { data() { return { hasPicture: false, - useCssBlurFilter: true, useAverageColor: false, blur: 0, - blurredBackgroundImage: null, - blurredBackgroundImageCache: {}, - blurredBackgroundImageSource: null, - pendingGenerateBlurredBackgroundImageCount: 0, - isDestroyed: false, } }, @@ -128,9 +121,6 @@ export default { return `rgb(${color.r}, ${color.g}, ${color.b})` } }, - backgroundImage() { - return this.useCssBlurFilter ? this.backgroundImageUrl : this.blurredBackgroundImage - }, backgroundImageUrl() { if (!this.user) { return null @@ -142,7 +132,7 @@ export default { return this.gridBlur ? this.gridBlur : this.blur }, backgroundStyle() { - if (!this.useCssBlurFilter) { + if (this.useAverageColor) { return {} } @@ -153,34 +143,12 @@ export default { // Special computed property to combine the properties that should be // watched to set (or not) the background image average color. backgroundImageUrlToAverage() { - if (this.useCssBlurFilter || !this.useAverageColor) { + if (!this.useAverageColor) { return null } return this.backgroundImageUrl }, - // Special computed property to combine the properties that should be - // watched to set (or not) the blurred background image source. - backgroundImageUrlToBlur() { - if (this.useCssBlurFilter || this.useAverageColor) { - return null - } - - return this.backgroundImageUrl - }, - // Special computed property to combine the properties that should be - // watched to generate (or not) the blurred background image. - generatedBackgroundBlur() { - if (!this.hasPicture || this.useCssBlurFilter) { - return false - } - - if (!this.blurredBackgroundImageSource) { - return false - } - - return this.backgroundBlur - }, }, watch: { @@ -204,43 +172,10 @@ export default { }) }, }, - backgroundImageUrlToBlur: { - immediate: true, - handler() { - this.blurredBackgroundImageSource = null - - if (!this.backgroundImageUrlToBlur) { - return - } - - const image = new Image() - image.onload = () => { - createImageBitmap(image).then(imageBitmap => { - this.blurredBackgroundImageSource = imageBitmap - }) - } - image.src = this.backgroundImageUrlToBlur - }, - }, - generatedBackgroundBlur: { - immediate: true, - handler() { - if (this.generatedBackgroundBlur === false) { - return - } - - this.generateBlurredBackgroundImage() - }, - }, }, async beforeMount() { - if (this.isChrome) { - this.useCssBlurFilter = false - } - - if (this.isSafari) { - this.useCssBlurFilter = false + if (!this.isFirefox) { this.useAverageColor = true } @@ -275,69 +210,11 @@ export default { } }, - beforeDestroy() { - this.isDestroyed = true - }, - methods: { // Calculate the background blur based on the height of the background element setBlur({ width, height }) { this.blur = this.$store.getters.getBlurRadius(width, height) }, - - generateBlurredBackgroundImage() { - // Reset image source so the width and height are adjusted to - // the element rather than to the previous image being shown. - this.$refs.backgroundImage.src = '' - - let width = this.$refs.backgroundImage.width - let height = this.$refs.backgroundImage.height - - // Restore the current background so it is shown instead of an empty - // background while the new one is being generated. - this.$refs.backgroundImage.src = this.blurredBackgroundImage - - const sourceAspectRatio = this.blurredBackgroundImageSource.width / this.blurredBackgroundImageSource.height - const canvasAspectRatio = width / height - - if (canvasAspectRatio > sourceAspectRatio) { - height = width / sourceAspectRatio - } else if (canvasAspectRatio < sourceAspectRatio) { - width = height * sourceAspectRatio - } - - const cacheId = this.backgroundImageUrl + '-' + width + '-' + height + '-' + this.backgroundBlur - if (this.blurredBackgroundImageCache[cacheId]) { - this.blurredBackgroundImage = this.blurredBackgroundImageCache[cacheId] - - return - } - - if (this.pendingGenerateBlurredBackgroundImageCount) { - this.pendingGenerateBlurredBackgroundImageCount++ - - return - } - - this.pendingGenerateBlurredBackgroundImageCount = 1 - - blur(this.blurredBackgroundImageSource, width, height, this.backgroundBlur).then(image => { - if (this.isDestroyed) { - return - } - - this.blurredBackgroundImage = image - this.blurredBackgroundImageCache[cacheId] = this.blurredBackgroundImage - - const generateBlurredBackgroundImageCalledAgain = this.pendingGenerateBlurredBackgroundImageCount > 1 - - this.pendingGenerateBlurredBackgroundImageCount = 0 - - if (generateBlurredBackgroundImageCalledAgain) { - this.generateBlurredBackgroundImage() - } - }) - }, }, } diff --git a/src/utils/imageBlurrer.js b/src/utils/imageBlurrer.js deleted file mode 100644 index 2a29e27d1..000000000 --- a/src/utils/imageBlurrer.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * - * @copyright Copyright (c) 2020, Daniel Calviño Sánchez (danxuliu@gmail.com) - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -import { generateFilePath } from '@nextcloud/router' - -let worker - -const pendingResults = {} -let pendingResultsNextId = 0 - -function loadWorker() { - try { - worker = new Worker(generateFilePath('spreed', '', 'js/image-blurrer-worker.js')) - worker.onmessage = function(message) { - const pendingResult = pendingResults[message.data.id] - if (!pendingResult) { - console.debug('No pending result for blurring image with id ' + message.data.id) - - return - } - - pendingResult(message.data.blurredImageAsDataUrl) - - delete pendingResults[message.data.id] - } - } catch (exception) { - worker = null - console.error('Image blurrer worker could not be loaded', exception) - } -} - -function blurSync(image, width, height, blurRadius) { - return new Promise((resolve, reject) => { - const canvas = document.createElement('canvas') - canvas.width = width - canvas.height = height - - const context = canvas.getContext('2d') - context.filter = `blur(${blurRadius}px)` - context.drawImage(image, 0, 0, canvas.width, canvas.height) - - resolve(canvas.toDataURL()) - }) -} - -export default function blur(image, width, height, blurRadius) { - if (typeof OffscreenCanvas === 'undefined') { - return blurSync(image, width, height, blurRadius) - } - - if (worker === undefined) { - loadWorker() - } - - if (!worker) { - return blurSync(image, width, height, blurRadius) - } - - const id = pendingResultsNextId - - pendingResultsNextId++ - - return new Promise((resolve, reject) => { - pendingResults[id] = resolve - - worker.postMessage({ - id: id, - image: image, - width: width, - height: height, - blurRadius: blurRadius, - }) - }) -} diff --git a/src/utils/imageBlurrerWorker.js b/src/utils/imageBlurrerWorker.js deleted file mode 100644 index 756da1ff0..000000000 --- a/src/utils/imageBlurrerWorker.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * - * @copyright Copyright (c) 2020, Daniel Calviño Sánchez (danxuliu@gmail.com) - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -const fileReaderSync = new global.FileReaderSync() - -onmessage = function(message) { - const offscreenCanvas = new OffscreenCanvas(message.data.width, message.data.height) - - const context = offscreenCanvas.getContext('2d') - context.filter = `blur(${message.data.blurRadius}px)` - context.drawImage(message.data.image, 0, 0, offscreenCanvas.width, offscreenCanvas.height) - - offscreenCanvas.convertToBlob().then(blob => { - postMessage({ - id: message.data.id, - blurredImageAsDataUrl: fileReaderSync.readAsDataURL(blob), - }) - }) -} diff --git a/webpack.common.js b/webpack.common.js index fd5e11bbd..959514bb7 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -7,11 +7,6 @@ module.exports = { entry: { 'admin-settings': path.join(__dirname, 'src', 'mainAdminSettings.js'), 'collections': path.join(__dirname, 'src', 'collections.js'), - // There is a "worker-loader" plugin for Webpack, but I was not able to - // get it to work ("publicPath" uses "output.publicPath" rather than the - // one set in the plugin - // https://github.com/webpack-contrib/worker-loader/issues/281). - 'image-blurrer-worker': path.join(__dirname, 'src', 'utils/imageBlurrerWorker.js'), 'talk': path.join(__dirname, 'src', 'main.js'), 'talk-files-sidebar': [ path.join(__dirname, 'src', 'mainFilesSidebar.js'),