Replace blur with average color in video background

For simplicity, as discussed, instead of using a workaround to still
show blurred backgrounds in Chromium despite its performance bug in some
systems now the average color is used instead.

Moreover, as the CSS blur filter only works reliably in Firefox any
other browser (which now also includes Chromium-based browsers, like the
new Edge) uses the average color for the backgrounds.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

lib/Listener/CSPListener.php

@@ -50,8 +50,6 @@ class CSPListener implements IEventListener {
 			$csp->addAllowedConnectDomain($server);
 		}
 
-		$csp->addAllowedWorkerSrcDomain('\'self\'');
-
 		$event->addPolicy($csp);
 	}
 }

src/components/CallView/shared/VideoBackground.vue

@@ -32,7 +32,7 @@
 		<img
 			v-if="hasPicture && !useAverageColor"
 			ref="backgroundImage"
-			:src="backgroundImage"
+			:src="backgroundImageUrl"
 			:style="backgroundStyle"
 			class="video-background__picture"
 			alt="">
@@ -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()
-				}
-			})
-		},
 	},
 }
 </script>

src/utils/imageBlurrer.js

@@ -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 <http://www.gnu.org/licenses/>.
- *
- */
-
-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,
-		})
-	})
-}

src/utils/imageBlurrerWorker.js

@@ -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 <http://www.gnu.org/licenses/>.
- *
- */
-
-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),
-		})
-	})
-}

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'),